{"_id":"@material/menu","_rev":"1812-50eb298038ebbf3e8c2d0f2c98fefbc5","name":"@material/menu","description":"The Material Components for the web menu component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/menu","version":"0.1.0","license":"Apache-2.0","_id":"@material/menu@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af489b18e47e2e92edc1e0969d5601c441416d9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.1.0.tgz","integrity":"sha512-d+MZ4Ir5dozSpBXIviv3vCitof+KdhcFzEqIH2A15cfo62GtehRbCmXt+yiPsV4KTN39ZaMvNwJIch7Y6iUw0A==","signatures":[{"sig":"MEQCICiuLAyiozXfDTMLr5fWGS1zSRvwXhFkH9udWs/bp49YAiAt8t+Jwp4KCRxnmdFgJf+NY8apntsTiDVNZvT/ilbtsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"6af489b18e47e2e92edc1e0969d5601c441416d9","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.0","@material/elevation":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.1.0.tgz_1481824528311_0.905720436712727","host":"packages-12-west.internal.npmjs.com"}},"0.1.1":{"name":"@material/menu","version":"0.1.1","license":"Apache-2.0","_id":"@material/menu@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef3cf2b3242bb4bf691aa7c60123c8e5d24b863d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.1.1.tgz","integrity":"sha512-L7eneNfZXr4gWfrn5AOwm6ZITtjIE6MRLS35h45pZzZTN14AqKRXCQirzhK9dNphP5Ivj9mYhS9TnjGkV/jp+w==","signatures":[{"sig":"MEQCIAm6Zl0Cu9uyIZ+0JNwNf+nNr1odqz6oJYB/q3Pz6fAiAiAd5WUFoXI+gtSo5rc8Ek6WgayoIIvj0aNQTXXONNHB0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ef3cf2b3242bb4bf691aa7c60123c8e5d24b863d","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.1","@material/elevation":"^0.1.1","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.1.1.tgz_1483977437749_0.9209476406686008","host":"packages-12-west.internal.npmjs.com"}},"0.1.2":{"name":"@material/menu","version":"0.1.2","license":"Apache-2.0","_id":"@material/menu@0.1.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab2209365abbd3b8fc04a6a176d5b1d1671fde21","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.1.2.tgz","integrity":"sha512-NWAh6s3cjgPJiHsOFyjI8XTfMclaf5K/slJFqqSp2tHeOX2lFMBfl3RoxpqQKex5djOb3h0HWThSBS2MgvIgnA==","signatures":[{"sig":"MEYCIQCUp8vVAj4kKbL1r+6w+dOu6rHMXfH2FuuekbSkYWE8HAIhAJYFFlfoS2mJ7fOjQgZgvYU7VIxI7n3MjLl3/37oBeRY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ab2209365abbd3b8fc04a6a176d5b1d1671fde21","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/animation":"^0.1.3","@material/elevation":"^0.1.2","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.1.2.tgz_1485190180105_0.8779875028412789","host":"packages-18-east.internal.npmjs.com"}},"0.1.3":{"name":"@material/menu","version":"0.1.3","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.1.3","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a83a0ede6901ef82315ace50590b65fbb5ef5c60","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.1.3.tgz","integrity":"sha512-h9OiR3UjRF/l5Wtf9P4TNrnWskdypmi/V3HwZOXn8tZm64GzsK5QiUR4ddfxkXd5iUmaI+GxiS0JqQwlNUL2bQ==","signatures":[{"sig":"MEUCIHPlnev3we3LLHS0FgksIIukl24mZ8t1mJD9jafw9oaRAiEA3RQdxxRjL9oboJ5Em8/gT+qHcFyjZlxXnvpAeHNaq0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"a83a0ede6901ef82315ace50590b65fbb5ef5c60","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.1.3.tgz_1487698057358_0.4222648257855326","host":"packages-18-east.internal.npmjs.com"}},"0.2.0":{"name":"@material/menu","version":"0.2.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"317524bb80e862744d50e58c2725260cb7ebc738","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.0.tgz","integrity":"sha512-QmCyJNEcY99tcXF0KWl5uwCl2WJJBT1EO3MX2qGqSLeG0JQ3khvpCvOyiO5j8Ib6JM2sW9IMlslcj6d9cQoleg==","signatures":[{"sig":"MEUCIQDUG0D9GcXCSvh49XF67Vq1L8NB87q0H64Q8HORkyhZ4gIgaO5QiIYGf8YePYIzuj8VL1gUxVNQusvwLkL+9uHPh4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"317524bb80e862744d50e58c2725260cb7ebc738","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.0.tgz_1488819734084_0.2674544705078006","host":"packages-18-east.internal.npmjs.com"}},"0.2.1":{"name":"@material/menu","version":"0.2.1","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"247d7f75280cdefff044a7b0f72559d200108f61","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.1.tgz","integrity":"sha512-1BKAcHgg0wH5hSovXVLwm9oC/EpOzSkAYmVpAShyGi8I8E3wIPjvlS1bZRUboro3BBl2odUYKGOVwqDD6rwFpw==","signatures":[{"sig":"MEYCIQDUL/A6GgALN1g3p4wj7Veoj7VDTwIpnmuOU4UrQ5sSBgIhAP6S1GEaiXIYFuakTwfVhYhXeKRjo3VhLjNooRpXGEz+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"247d7f75280cdefff044a7b0f72559d200108f61","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.1.tgz_1491233285118_0.10217681620270014","host":"packages-12-west.internal.npmjs.com"}},"0.2.2":{"name":"@material/menu","version":"0.2.2","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.2","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b69634a03423c1612be2ff7c7f56c318751971","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.2.tgz","integrity":"sha512-rFqoAbmmK8KdkfruCGGpk+LKDv+kRRK+SgWM4wmVKVi5jhr54jUYE7EE861BvmTp1wtEzqmnRUctxMJal5qIZA==","signatures":[{"sig":"MEUCIQDBumVW+QMdJ+iz6xRTuQRDv6cUqKdPsmxZjYKjqy0NRAIgExcgWnfVTXdDTF6L1gADt+aHTLSzz5AZjoWz4Oiaaa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"86b69634a03423c1612be2ff7c7f56c318751971","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.2.tgz_1492443789182_0.4635185992810875","host":"packages-12-west.internal.npmjs.com"}},"0.2.3":{"name":"@material/menu","version":"0.2.3","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.3","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f03aa09622598bc312025f5d6353bf23582a0cc3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.3.tgz","integrity":"sha512-/Vj64yVTWIU6CaVUAIGzeGu28gkjuyEkob12Cs0XKnUAUgplmesSV5yuz7KtAkbncq2+ezTuPn8oc7EWnwneUA==","signatures":[{"sig":"MEUCIQCLNV01Of7eFc3ZUQqW/yOFgKkZseC9Wpvll/qAGs7fDQIgbzWJ4wD/hOzM0OZY0zrhMyCN0vyBJrLPIBtUWqJDXxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f03aa09622598bc312025f5d6353bf23582a0cc3","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/animation":"^0.1.5","@material/elevation":"^0.1.4","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.3.tgz_1492527083126_0.5902939848601818","host":"packages-12-west.internal.npmjs.com"}},"0.2.4":{"name":"@material/menu","version":"0.2.4","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.4","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2efe7d3b4e5d1e098b2be06729e6462a23f2a8e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.4.tgz","integrity":"sha512-8IDvdjPc0wLJFZwuqAiE7lV+z9r/6BU7URLleaiy81bI67qyBfPKTfWJoRw/uWwCfEKKtP3Am1+S4ix3I9yh5A==","signatures":[{"sig":"MEYCIQDk54PI/6SDWu7fNyBcQe/vt31Lu6rkwuK0KiwB2lPbCgIhAKruVLxqm6uBB9PK6zrskKc7azWicArm9Ga+CeRLQ+xX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c2efe7d3b4e5d1e098b2be06729e6462a23f2a8e","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/animation":"^0.2.0","@material/elevation":"^0.1.5","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.4.tgz_1493653390241_0.17103147925809026","host":"packages-12-west.internal.npmjs.com"}},"0.2.5":{"name":"@material/menu","version":"0.2.5","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62cf8fee889234d95104dde829dcd4a9ce94780a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.5.tgz","integrity":"sha512-oTwGRHgl4ZDmITcwplKj3NVoki5rO8SmNoNkOdXgewvzLTeEjPeFw8F3VwiIxvjGkthcYMEWl1t+TvKUozy1+w==","signatures":[{"sig":"MEQCIF1HEqkpCAKVjcOzCCEKYsX3C/EPHdsOF6f4jCMyuOLQAiAcky98VD5hWmR5AhM3ipZkX7+R0GxX+K36Bd3wo+Fjvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"62cf8fee889234d95104dde829dcd4a9ce94780a","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/animation":"^0.2.1","@material/elevation":"^0.1.6","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.5.tgz_1494865568138_0.8669907900039107","host":"packages-12-west.internal.npmjs.com"}},"0.2.6":{"name":"@material/menu","version":"0.2.6","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52e1059cf1a08ba6004d299e5b7de3801d5803a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.6.tgz","integrity":"sha512-lJw88jcjzOqNE42JHvP4OzKDWzwRTKyetqbgjU5AIMPOmGyig5kgcbVVCymX/3UGxxsk2u8kgJ75TctEwr71lw==","signatures":[{"sig":"MEUCIHpzbpbVG1t8t/dc7e9ayc/j1vB7U+8ygn3AaiR5W3qTAiEAyYHrzvP4CpgHv2C/fc4WjqllHm6BBA7XKzObk/St/A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"52e1059cf1a08ba6004d299e5b7de3801d5803a8","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/animation":"^0.2.2","@material/elevation":"^0.1.7","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.6.tgz_1495031304141_0.630122956354171","host":"packages-12-west.internal.npmjs.com"}},"0.2.7":{"name":"@material/menu","version":"0.2.7","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.2.7","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e7c43b28d77160efd97eed17b6b2dd37b320aab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.2.7.tgz","integrity":"sha512-S0sYZHZtLmVlbJe8w/oU/zm11pQbNJtvKlRnKZ7k9bfaHKp709bQcbSBZHYpV8852P5O7JDy769pxL2LF6hK4A==","signatures":[{"sig":"MEUCIQD7cpunedFMM831tboO0ZWFr1JPj/NWHtMDl5ADMJ/JwgIgO2QqseFoRF6iobm1Ttsmjbjrck6ZTWj2l0qVJL4ucj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8e7c43b28d77160efd97eed17b6b2dd37b320aab","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.2.7.tgz_1496171083918_0.6788580254651606","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@material/menu","version":"0.3.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.3.0","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49f32c384987e02e4c9a0d19105e27613bf4332f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.3.0.tgz","integrity":"sha512-b8P4CaQ8MntizCy9v1+8aqq3m/ivb99fbR0CdQzv8aCumZW5/3hR3p4BpbNm0y5o+tJlXeX5MZDSOAvnVf3iVg==","signatures":[{"sig":"MEYCIQD2qFGgS0Hb+k/d87d19LWdFdgU8EQrjdVOpFxMujvAZwIhAPgN1s778gXRaJMw+5wPePzOqzNLeMTrGecvcdpz5n5h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.3.0.tgz_1497282802469_0.11494370945729315","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/menu","version":"0.4.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"051ef554b33cf26a996612f3b675489855330ce4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.0.tgz","integrity":"sha512-k892PcX9oLyUncBLYg3ELEd5Ykb3DAfTnG5JvpqDc815ry6/RshuTi6FzjYihwmTr2XEmrBnVU0CxqnihtJZYQ==","signatures":[{"sig":"MEYCIQDKjBkxYC1XQESyIcA3ad+iZqQKZ5ln7RgxuhfhWK/odwIhAPQMHjDuwYyDE9447yNWH1wQ1JRAtI4HaewQeXMsCwXh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"051ef554b33cf26a996612f3b675489855330ce4","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.9","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.0.tgz_1498493458512_0.7394764909986407","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@material/menu","version":"0.4.1","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.1","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcd573a6ae90971999d71116295d36f1996bd604","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.1.tgz","integrity":"sha512-jXla+FeF5KDmCckzgyqrXFeBsfeNz4iep6Ra4/3wnKo+bB9C+38oAf4ko/zzCgVtJWmcYa3456Y68+UbeahrzA==","signatures":[{"sig":"MEUCIQCnVu8T+J44pO9AuRwNx8z66Lu8c3eTpUoVJZoqZvDrmQIgX70HW42/jbczAWx4pXhifETx1Lk3U0G6XZx8hHdX2Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"fcd573a6ae90971999d71116295d36f1996bd604","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.9","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.1.tgz_1499702335017_0.3407612098380923","host":"s3://npm-registry-packages"}},"0.4.2":{"name":"@material/menu","version":"0.4.2","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.2","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d75e39f5d0eab07a245be66a6f4f97cb36ca14","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.2.tgz","integrity":"sha512-xilE3Y+MCA1V6Ko/pJe9s/3f8IDwi7TSw4MDq6y78JfNT+x3KrAMYdv5Hx/ov+fIhqNTsFcMDOi8P9jNgVpN6g==","signatures":[{"sig":"MEUCIQDzhSvBOiW6uiOdcoawGWEkZoCkrOcJWOvMEbpl561vOgIgPnhvquhDu5r+ylbEs+z7gjIFkOFuGqB96dM/FNb1xrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"90d75e39f5d0eab07a245be66a6f4f97cb36ca14","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/animation":"^0.3.0","@material/elevation":"^0.1.10","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.2.tgz_1500911361886_0.9785038016270846","host":"s3://npm-registry-packages"}},"0.4.3":{"name":"@material/menu","version":"0.4.3","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.3","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"febc3b197ffdff10087e7698f33a711b3e13c372","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.3.tgz","integrity":"sha512-2KjZA2h4VngtnLQlRib/WT4itVy+3cPgXhBCpIZ0qK/XwTVSgDG48J6FJ+OjxmKCJu8ywUJErdUa96VXn5xHGw==","signatures":[{"sig":"MEUCIHftKBprD1lra52PqozU12iN+F/79bRMqTSTgbo2r31eAiEA4uybgC9fe6zyc4u+I4EswdvfIeKLLP7oPcF8o6Rw/eM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"febc3b197ffdff10087e7698f33a711b3e13c372","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.3.tgz_1502138910935_0.4766876420471817","host":"s3://npm-registry-packages"}},"0.4.4":{"name":"@material/menu","version":"0.4.4","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.4","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b1dedccebbd1f3eeaf927eee1b9459668e7c4a2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.4.tgz","integrity":"sha512-6CKKe8p2us51dAKZTjaBwKVgnZK6dfxt2t5O25oEkp6xgA7jEzXB3Xyn7ixnRwep9W18leRFuE/xmYeG8E14yw==","signatures":[{"sig":"MEUCIQCcgDQHQZMBnBVq0oQsOMw5SZWp5R3YBYI32ewFSOE5VgIgKrwgz0z/8Zz5hwD/dHRuyrDEPsQcPNc9Sqwf3AStLTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.4.tgz_1503336476529_0.7409240293782204","host":"s3://npm-registry-packages"}},"0.4.5":{"name":"@material/menu","version":"0.4.5","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.5","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2cdb37ec07ed98cf0e7e24d97e8829c7fac777c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.5.tgz","integrity":"sha512-+/9ZJOsSqiTqCItVQYkX+tpRTWZDsHK8cEBehgPlJ8jf1ogiFFPgAbxxnY1dVsrq4YoWmzonZK+wW7HoBYfUtg==","signatures":[{"sig":"MEUCIQDcP+QL07//3344P27VCbc0T+GOCq45NxDymx65n+NjwgIgZI4NOwbJcHQYq+nB5wUO4yb1Oi0bE4w8fmTbWoJhsr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.5.tgz_1503586010844_0.392933169612661","host":"s3://npm-registry-packages"}},"0.4.6":{"name":"@material/menu","version":"0.4.6","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.6","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912c831663d842a1a186dc7f6118288b2d6a650c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.6.tgz","integrity":"sha512-e6F9L5tcbkWzmqTfBVVFxUyYNOkkE4NnBuhXwSekYColL0ay9w+OAnW4XS0qUTPghW2Gnj4eWwbbdFYr/HFnEA==","signatures":[{"sig":"MEYCIQDNeaNCh+9nXbDfKvLopv1j6DSYh7EzEFhlShUBByAh4gIhAPvjlPRzfQwysW/uDSO1tx/LVS8LS/jHcfjbV/sEHfR2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"912c831663d842a1a186dc7f6118288b2d6a650c","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.6.tgz_1504642573874_0.9290910696145147","host":"s3://npm-registry-packages"}},"0.4.7":{"name":"@material/menu","version":"0.4.7","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.7","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9d9a661a4e9654b19d4ab2b5a546c700517ac00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.7.tgz","integrity":"sha512-PG+JYiYtnmI8Lgm6BsUVr39THuRS+LVJRX5W+GRYtX6C8hQCilY8lihb8OiUFVjYJX+RDASULnB+XgjPfBWjkw==","signatures":[{"sig":"MEUCIQDF4E5SJmbDSvbEtqVLirx6vBlAqQS66NKcZGlRQs4TQAIgVKebwnJpLrUS7quI6cI2w7coZ9oiMIZcMwRcelWOn6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/animation":"^0.4.0","@material/elevation":"^0.1.12","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.7.tgz_1505759748495_0.4297933189664036","host":"s3://npm-registry-packages"}},"0.4.8":{"name":"@material/menu","version":"0.4.8","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.4.8","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603b4005d96970e15474f9d2823f4c7ca0f5287b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.4.8.tgz","integrity":"sha512-ndYu7cnVuloNqwKE+cwHSY0y+yKMIBwrBrjMlFtOR0MCbnlYtk9T4x5G8+r36bs0wGwZ3a3C1EcZ9cwBJJAS3Q==","signatures":[{"sig":"MEUCIQCzWZt7Ii+5KmsEjePrj5BH8dLJtBnVv1bVj+vMuhWvzgIgDCUYiIWrLSzUt8dN2PD0SC30dki4TnJj1Aje+5KjiCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"603b4005d96970e15474f9d2823f4c7ca0f5287b","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.4.8.tgz_1506978710032_0.5319858624134213","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/menu","version":"0.23.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.23.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873e718d7b4ed9bdae2f63cf81b3da2336b04c06","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.23.0.tgz","integrity":"sha512-7JvhFhqdyKgiYtGs1yVBqVwSv4+YQ6tcRgLgpmawBWM0NCSZ9eWxNepa9O9A+I0lb7t1SPtGMiW/6C+r94MSdg==","signatures":[{"sig":"MEUCIQCJ1gRFlVAjHxONjINP4Z7B+FcVppm1Sc7jht+Ok7ygCAIgELSRkEtQ+2vY3st/YbO/5+Z0V7RSbEW7wtxHwXYn928=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.23.0.tgz_1508187742513_0.37343282671645284","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/menu","version":"0.24.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b21e9d9942fe58bb0a8439bb4b5238dc182be3af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.24.0.tgz","integrity":"sha512-PcYUqBcdvXWEfZtCTqTDHNdBiJO2ZwmSe158i7rV9HGK2D2fxHCm2ssrz7HBxsHFIzoPxYMWUyDG0fn+V5jW3A==","signatures":[{"sig":"MEQCIDRywrde2VzFntmZigG7DKe5s3hTPt64itnJ0+qc+9+WAiAE+O97qNBM8rXQ/p1qScuL6aKxiUV/Y7fdO0g/pQ2IDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.24.0.tgz_1509390689617_0.4382129965815693","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/menu","version":"0.25.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4136846ec7ea2061aabc3edee01a5fe8341d645d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.25.0.tgz","integrity":"sha512-PpmmQBs0Qh9cPp8wel5iJ56tJfXXVPTIHB6CchY1kd9EBe+k+N7E/ziZRI3aDd1FQqu+q8/CHhqv0s7ac5yviA==","signatures":[{"sig":"MEYCIQC+fXwWdKc9vY6iSQtYCKaphRWp0IBM4Sdv1doSpEjcRQIhAPnKeJ+KPa0M/F+F5WWFtXn19StDIJd4jpd9OmDK6D+/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.25.0.tgz_1510603350547_0.5150072535034269","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/menu","version":"0.27.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d1abc130013aacc33b40c1d4d2ba8dd0a5ae32","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.27.0.tgz","integrity":"sha512-JV485C66qIjJ3O7Fleox8vI3lWyKoF8gTDNaMv1fnND5XXYqlSIBsdE5QP6/8HQcEZTTozfsv7N6VZC/F5pwEw==","signatures":[{"sig":"MEQCIG8vdhAsyHJVz58tKP1dGKDn7pOa90eDTphX1HqvUfUzAiAfcTL6VzYHxHkkLF6hY92kaM0fa2DKP7OLAfm0adCapg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.27.0.tgz_1513020937005_0.16233694879338145","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/menu","version":"0.28.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf6d408e54986c5004e62d17e7623be7eb8eaca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.28.0.tgz","integrity":"sha512-DMyRqfHcfu+GgO1JzAo8auSwtg6RKZFeaGjowDKvEviZd4XONE8gh+hr0odAWYKOojtDMRpGM94BS2velu0lEw==","signatures":[{"sig":"MEYCIQCtIfl9ocWj8xJbVQR+efuB4O8HXVwTm+aWK26D3d96GwIhAKGCMoDXQ7SVq1O1tARRWRyqOFmsNA5/XrWTLaNu8qVQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.28.0.tgz_1515437714653_0.7997055870946497","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/menu","version":"0.29.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a9204e8f0cd7ce37d11753460e96b356837f597","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.29.0.tgz","integrity":"sha512-wcwnjxcxabSdSeg2gpFC0EO+mUnq42hun7lAKpGzwxHw1Qe7ctqLzGqX+cnb2fJHTa7dsySTHiOeLzWMZH0TIg==","signatures":[{"sig":"MEUCICvEEDyTdqHrUwKRRMs9HOSIXMwGuFW+90y+k/YEez8MAiEA2hAoEBSXmZGJ9baUkefLYeZ+RQ6weNOPl+ddjQzpMSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"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":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.29.0.tgz_1516645859727_0.48298502108082175","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/menu","version":"0.30.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6510c384618b1c677a21f192b2336e0c11fc0547","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.30.0.tgz","integrity":"sha512-O3x/rRhHUFLtc8Wl7pSXYO7waxbX+AxuJ2pfIqkZSfIyEk6SvdPTDs+SSMPlQOiY0ZOGNuAnjfhkUuzZZxICjg==","signatures":[{"sig":"MEYCIQD5Dcg+EXjzBhAjgSnj8jLhxkA3ymaFn8+uqyy6p3ClNAIhAMAA8YLeBe1ZDWLY0WL9V+ThVgU6IFYkoHQFGzcl0xtS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/menu-0.30.0.tgz_1517868177903_0.9459750619716942","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/menu","version":"0.31.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82732113525384695ac8fd26f11ff2c1dca67d2f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.31.0.tgz","fileCount":12,"integrity":"sha512-9318W8Ws1lnJzsXC9+3hVaYJkGxJOXNHR4PaIpvI9T4ZmyRu5+E6Cp0hf42RTQ1bHTDLOSG/tPuKvsN9VW/6hQ==","signatures":[{"sig":"MEUCIE8LTgaHNfZ9//GFO/K2htV5VfKk2JOFMHHlmBefeR8BAiEAwIZeppUKzocOETKQ7+eZlQoR/P1CMsGsP32Iic6xRLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156218},"main":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"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":{},"_nodeVersion":"9.0.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.31.0_1519150982450_0.3476885623544308","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/menu","version":"0.33.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dda08871f1414fe875eda49d80ff66124732355","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.33.0.tgz","fileCount":12,"integrity":"sha512-30locYPwbEELvopOj00ee0MH9wXjYsUj7mys1mSbLVLBBbeC42eif7uhcO99p8Y+a2/d4OZ1/0VASSq9ZVq5Mg==","signatures":[{"sig":"MEQCIBt9K9+lDRXjDGEguuZ2VYTmlNBu3FUW/PdHLmunkUfAAiBSG4X1SGmzFglnAJ5jQwgHYd+jzeo+kQB6oT/48k12Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155383},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"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":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.33.0_1521477605295_0.231166799505111","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/menu","version":"0.34.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65b531c8e2a6dab1cfefebdb609a1a15cdeef799","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.34.0.tgz","fileCount":12,"integrity":"sha512-dpiljjLjTtL8+C3vajOvIzvB6Pnaj6NBKnvd6kxbFQxO6cccBBM+yNVjKthd9x+IbtAdiBC2XEFRaQrP+Ltybw==","signatures":[{"sig":"MEQCIAur4jRIeoOQyMxBIv5957I2awirunrFsQACDMVmOohHAiBFuldjMvQ9UUaOCmk6gjclDLYuUi8U3ASrSJEfKnZzLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155376},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0","@material/elevation":"^0.34.0","@material/typography":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.34.0_1522705919916_0.5956351217425573","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/menu","version":"0.35.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.35.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/menu.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\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<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-web.appspot.com/menu.html\">Demo</a>\n  </li>\n</ul>\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<div class=\"mdc-menu\" tabindex=\"-1\">\n  <ul class=\"mdc-menu__items mdc-list\" role=\"menu\" aria-hidden=\"true\">\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"0\">\n      A Menu Item\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"0\">\n      Another Menu Item\n    </li>\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-anchor\">\n  <div class=\"mdc-menu\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu\">\n  ...\n  </div>\n</div>\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<div class=\"mdc-menu\" tabindex=\"-1\">\n  <ul class=\"mdc-menu__items mdc-list\" role=\"menu\" aria-hidden=\"true\">\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"0\">\n      A Menu Item\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"-1\" aria-disabled=\"true\">\n      Disabled Menu Item\n    </li>\n  </ul>\n</div>\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<Element> | 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","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"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":{},"_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"}},"0.36.1":{"name":"@material/menu","version":"0.36.1","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.36.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6940322faa43bc4e76b2cc47c460c1cdcae49340","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.36.1.tgz","fileCount":12,"integrity":"sha512-Bc1Bga7QPaBTw1+d50hvFth6I4HirBknur1lfOm+VQnLrmmCeHRBtpjT1l2PAgiFHFWu+3SY5HanwynEdFgKYQ==","signatures":[{"sig":"MEUCIEy0M48et4+j3bRuAbKGZHhonhgiBepAxIFT7IYkjSSjAiEAzM5FeXvDTxnnJniHsW3VE2337VOQN/QuPFmEXROvT+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9J3CRA9TVsSAnZWagAAYDYP/ifDhBdV0wdkCNqrt8Ac\n1Dqk91kFif64Svab8IZqLF2MCddiTHa3S9lIUVTERCZ5u2QDU+ff/jUNundS\nW40bI9edTT3uEmN1/ZXxgXswbjpaHFlptBFzJxz6XHfxTs4k2ee3IA7T8D9W\nVE+sfhfZQ3cWhox05O3pSZZxsLhk4fec7ZgVZLrebcuU9MlQ2d7U0spediXa\nkvscj9uXOB2C0IgFnSgmc93gA48RpFJG/Sgmqan86DAfZwxq704DVMkh/4Gi\n7HUwViBYwy/D2JV+9pG6VN4Xm7y9TPMFHXiWzl1EliOP4ClAJkZ1QHTgLKpD\nPDQ7XwDKr8fO7ec+Pq7BW5EgAmz7vji0yMI+6rzKp/8G8WDvU3kUNVPxQbBe\nwDvQXNhw29Nn2m5PFMKrEYxjyF5XaByzJCbzR5DOcQU2fDs8F2w+fRjwRlHb\nQI/+/3k46kytJIrRuwjJXMnthPAUTfIMQedTgUOWjeyqURwCHiu2b1pbr652\ntAze4lYttq9XJZtlsmyN1nwD6da65/yggVGPOFcvXu4TZ7VetGzkNoL2/KOx\npfNbgXpdg4EHtRobjifH8FiKvG8R1bSa0AtobEYJ2sgK/DJhM1+sdGbiQleP\nkAo3c9+T9MbGlVsXLq3u3NZvSoG3dtgJoMWPNkTgo1z6rq8+3Jsv+vCSXIL4\nEgP6\r\n=qS78\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.36.1_1529336437388_0.08706826719385741","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/menu","version":"0.37.1","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.37.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14e3476f769ca151a7ba14fd311d52c556eb60d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.37.1.tgz","fileCount":12,"integrity":"sha512-Q6fmjFM1kVYsnxGYVTao5zd7hrQpZ6BiwescDBZvQbhfGM/d2RnSIUdczojZR8qxA4vgOQpm26yReKk22FenSA==","signatures":[{"sig":"MEYCIQCXCdPgLMlGKMgxdn70aqIldO/DVZdLvSKUztCitnl1vgIhAI5Ih1xBn5NB9DmzabbomWsolkWqGhcdLXz33IHtzvaG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvqCRA9TVsSAnZWagAAQjcP/jhdGTpzswjVIzCP+JVS\nE3hk/QWBnkOcZ1315Hz7xuetlAMg7LqkyP4vPaYec5ijUxTYGGNlxHJfzyp7\nqujzqfLsJSQ7SqJuCEUV3lFFLjk3E3amQO8FGs4MeuLK7/bbdVrTeMp7uUwd\nJr9MwaEzYV1JCNRTRrsP1ge4dFVtAwIsWUwGOMWpMB/yCC9YX7kIH8omMNVl\nIZU8GyFbKcsXtSKbGkqmY/9SV88vREeMTqe6LED6JclhimTmS34Tv3EypsbZ\n3mD/vm03c7IbOWpRjJc7jRkxzmX4Biq6fTwP6LZL6tgWAnE9yauJbMvwUOM2\nfsbAEWlhdmkWcPqrld9JSk2yMjRAu0Wd1/LAvFzFbYQYI10IB5ntHj2XOGEc\nrR7WzDhS82HDo9aJ3SwmK2oLGniV9gse64jOSu2dPxP/ycgV+obn9b3nEl+0\nN2SaQpGq/Qd4B53NQUuEuz31rZiB4qTnqKzMCC6L+JHXxLuCTb+rC/iXAl/0\nyF72zvqOyizyjrHKbh4mzbW2ca8rkF04+cs3Z260mZi8fBvFae+8Tgmwe+Vm\nXYEaSxXKxariu01r9e1G+S3NHAbTNNLbJyJN3OzksM2+J0lgEh5bPawcV+1f\nxI39wvI8qI7WrYxWOOBROEfGLidmZ2aCc9Sdm9X8SQm4NHpSE47pG606j6VU\n8w6G\r\n=lELn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.37.1_1531775978129_0.5046047626913985","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/menu","version":"0.38.0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648ced4184ee72940712d4e5a0255b1f5e3cf4b4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.38.0.tgz","fileCount":12,"integrity":"sha512-dq+ZoyxaBBk/J+TCQJ5GQM73GEYLiKJD+M+Ub1WMbgKUb7WQhQuhgVB51YJEcCL8grzEosnbK51SgnyuXODKKg==","signatures":[{"sig":"MEUCIQCx28knwh7/ESq68+UZzY3lNFeIy3vb11E2rUYBKjxuQAIgScCs6ouoL8zyoPY/a58bZRnHWHceidHtH1OOCb8SlJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XCCRA9TVsSAnZWagAAoucP/2KcX3CsKt6V/0VbfQ4R\nIBBt0v1ydPZvP6iM58JwrhYyStJ/jYnOl77NbWyvHNrTBo8XxNcjcwPLoyRg\nPZE3gwUkKn4bNIBwmRD5jObSVbvA13iCPrEAzgT6EEy69s75DkozCzFTYlvb\nHB1/pUaxJOwxtg1vhsHG/XwmtJwUJlPgtvnO2WDIdsQfuCloxhZdnPFWbzHh\nGEoe0ZF3soqmps1a5W4DRnbfqN7bsWi31XdYaGRpGDbtfXyyjbhkzArLlR7l\n8SqelIlNl/5zJyOpIMCS0R3IhkchWeiZJEpskZhtUtAzIoHm25UhJoz08+8I\ns+Pfh28Xno20aoeXLa0ZM8QWBmtC51s0UfNb/UahbBK389zNM680M6TPTdj6\ngkHQuGVVkDkCKGpcCYSF4tAKeexYsNrO4qJYWwCfrKE5ZxpiB5BXbkoccgWI\nRoStHfOzv+fgIRBLlXz+GBYIm0szxMJ+uJ2ER6aeBfkoR+cH/pobD/9IusaP\nnxjU4WXAgCjkmfSpC9fSxj7a/SLdpGYzXDpn0MtvVgGtjuBHmyr5cAi0Kw7r\nbmlNpovkOjKQAQiHL8po7G00wNmwdaxw5uxkek9jOc/Kqq2dIcbG6lFJZNoZ\nJedOtcY7eEhV7BEDSVkJxk7+eBHCHx+jLdXGIsZpsFIDS6aRYi+ypZZo6Spg\nBM76\r\n=AUCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.38.0_1532970434871_0.7252392087699291","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/menu","version":"0.39.0-0","keywords":["material components","material design","menu"],"license":"Apache-2.0","_id":"@material/menu@0.39.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu\" tabindex=\"-1\">\n  <ul class=\"mdc-menu__items mdc-list\" role=\"menu\" aria-hidden=\"true\">\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"0\">\n      A Menu Item\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\" tabindex=\"0\">\n      Another Menu Item\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" tabindex=\"-1\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          Single\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          1.15\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">Add space before paragraph</li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<Element> | 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","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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":{},"_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"}},"0.39.0":{"name":"@material/menu","version":"0.39.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.39.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f9b0c535364fd7002c05894406ac29fbd207b94","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.39.0.tgz","fileCount":13,"integrity":"sha512-F3R3pgLVt1sPuJawn4OnhFlL/XLFJkLBAyuGB51gtOx2CAt/UPgQ+xgqKLQQ4mWx46UiA91m+9C2u8yhV86S9g==","signatures":[{"sig":"MEUCIFmkJ5b0mpHevsCZvuNPSDAiHN/oqGSwSWROvkb+mepOAiEAzU5kgCgoWstvjzGXU5Y5wyh+2o7OUATbtIcwm8upZfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe0CRA9TVsSAnZWagAAqdUP/0N42ooDV1+9JeI1aarl\nJBGpVp+i85X0MMFa86LqL6c+OEQw1gZbIIAQg337D4wh8k3pUH6tEjVg4rwn\nz3NKkBictKO5YjGo6iFvQnD9klFlAz7wtwIsELA8xWELhEyOhTIIloiMBJbx\nIK2titHu37LKnvatrTUs7PyeDxhhRA+1+Crpzv9Fum27c9hYLBr9Vs7GE+8Z\nWiQNXvEUErp7JxaxqQKRZBnGrhbjr+RFl1WJKRDzTkjMPV72xcQmifnqK5Ld\nuWk2dQ83N0ea2vXkEk/9HDYnKSbPpIR4LR8CGk8Z3dJjLxb6LaQpsuLIarIL\nNyrYLlnfiZJKXm0OnyqphEBIbi3acD4gynuJ+2DDdP0Ze4sH/VIF2lSO9ZET\ndys5CM8wHKszz+C2P3SEoTBhwGLfjga119FPvQEm4+Xv5hmncEdwcfKGUNA5\nYc3ipntCH5rDg511vKlfIzwO4rLdxD4wCgxIyUqq5NpTFrHhMWFwb5QCZDsC\n6eQ6Jy9nR4hM0qekfK9IGe5TSBXtUEzcGVLNf1bEHB0WaQrLosgjqVxN0+yJ\nT2952IdhhdgqF6+BCrhUPgNRhXBAlSi7xiIjUuMNUxG0VDTAYPABnRPDXU2d\nI7wDwe7Yo7yQNe7Kworwk+30yIJXPUgvJptNFuKZR5aHJRXVjyOWvdlW+Rbt\nP1ld\r\n=ulKM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/list":"^0.39.0","@material/menu-surface":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.39.0_1535391667608_0.26831768775416553","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/menu","version":"0.39.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.39.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95b68589a12c00d671b5418eefc7383d6777a13","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.39.1.tgz","fileCount":13,"integrity":"sha512-KEZ4uE8mDmZFaQ2YwgYCxzJ8G8a4E2LvijlUojPjp17VEsMu7Ebcgk3+cPY2OyfSAIeer/JniU6U0HqB6ilb7w==","signatures":[{"sig":"MEUCIDQUg302f70nQuF60bxv77hjMKjP6E+KMYOWlcXozFMOAiEAv9HWbBLBug+noXil91+on0KNnKM/4dpSMzKqKnqJqas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibT2CRA9TVsSAnZWagAABI4P/it6w4X9n/eET22iNIVz\n+8ypDWOEiviJwhLoVffXFb3LMmo95MyG0b2cVZhtGGhlixWQWwGNaHTH74Iq\nClD7LzQ8yLZJbDQwjkVUDPFUj7DRc6nOjfMDNAvR+vJa7ZQQfZf2UuhbkjP7\nfwH+BMVvBLBeycTshI/duF+qROMWjp3D0EJPJvq3ghyiEi+Q5nTkPr0cu6As\nkq0ElAF0aS5wHQ6EAUUllSFHbGGKqhKdvBdOmFRKz8zTxqEcXMCpOobcxsVv\nA+N2zIzune7NU5J3BHSEcYIfttq0bY2Li4jHdnyJ/C7i7MA0a5DuS8UKXmPR\n/kRsWg5hjsbJhXtW8scw2P5271uEUN3dB8etkx26jeIkBt222u1O7to3gMsQ\nAQxBVT9gDZcd9O2tjVQiTnu2NUJPD8edmjiZHc/WpkTA4pZXGdcjGxUGFbck\n4lU+F2aTMAolTmXMdHahV108eicOj/CCTzxJ6v0u6hOp8v+WhSAPzOHdF9tl\nSIJ/qmOnSzNMY29zJYU+n2gQXbLs76xT2heg0eWlH8LYT5jeSyD43LPJ9Dtf\nW0YC5aFDfAK1tPASz2DtVIfAccKflc7DDP1dH/efYfUR3j+itiVK44IGZKWv\n8ptooFsQpx3cJN3yjoBP5tddKfRoWbN7Ejat+bH2zu7ZPdgMi7GqyLbN72Bb\nDH42\r\n=gKfo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.1","@material/menu-surface":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.39.1_1535751413949_0.7148364294796501","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/menu","version":"0.39.2","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.39.2","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c48416a7809c199455526ea3f998b646b6d0a30","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.39.2.tgz","fileCount":13,"integrity":"sha512-7oO9kR4ZY0KuJqO1H7x4MmeeU+fYWFei3LDH8EA88g6zLrVUAFXhA2E9q7KK2MOQsSSacYRiOsviYE+4y90EYw==","signatures":[{"sig":"MEUCICYFLKI20kDa4snsT8KIfbFI2bdlsyXczrC0GLhLtKt/AiEAmR7zvksxRjanYCyCYhYF7Zi0hDDzq2ITCZ5vyb8ijZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OBCRA9TVsSAnZWagAABjoQAI0OlXmQ4aaAlCP0DVGb\nIH0qIv4N0lN8RhPG06mTew0ED6k+EI52Pk+4M4IkjjlY6Nqc2ufaQq1TXGgO\nVbYcjw4RkBzS0GfX+AWOt0xmlnWDx9FAgqEU2wTmyNcFIjn8zq/5IqyURRBQ\ne4XNZ1ggYsn8TP7pcCKMp+UGD+nhe6EhLIAgPXnQ+182H6C2eDJqfwXvfVYI\nLiP11496j17sLuTPSsqwB+rlavAM1txP1r/0dSAno/u3dIW0qBbRZRwqJvQO\nvb3TAMaLd4BarepO8MN9S/jjZYYskg9iqzLpIt2DcJ1k757IejWXg6how2JY\nqqr36a2II5M3o8cDlafWWqzTGd2S+aqD2sc+1fAnq3VQbktkufBmuEOgBt0B\nj7Ssc3G6ik6xSQEkwzEJgw+oWVCX1plnkvQ5lAQjghF69U8ecRbLfhqN/xRh\nR2DYnuZ4oz9o8b0X5sR08oKL5swUOfIRXIiJ4Gq5wxj7U04C22Mvq6pjq8HO\nZNItCbt8LaKsfjcxhsca+pzMe330a9SbpwxdJbeFmT/6CCB+kiugWYL4RnKM\nKvdk4pTisqv/+sRj3M1edqOQmPf2ebkcxS7oVjNs2txOSZP3oWXcE+ZM1j5y\ngNY6p2w7ux8eupXRAAQfSoO+mcMc/gh4/gPDO4O5NVWXf/qmrwcEtwJbzNhZ\nQLpL\r\n=9zRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.2","@material/menu-surface":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.39.2_1536684929295_0.926714571498551","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/menu","version":"0.39.3","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.39.3","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"217dfea56d149ef60445d9b95b60f4a6bcd0ad3a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.39.3.tgz","fileCount":13,"integrity":"sha512-a4nYyWThDF8hjXyGzPM5tz7e3k1lLgiEUbjr5Rvos24AFFR6HTur2nlQehoUl2Wg+X3x1Ajpf/AbEaA6S4tzDw==","signatures":[{"sig":"MEQCIC7HKhYGLABA0m+vQgznsNVLKldwRWdC74A4O2Vf16CvAiAw0fVU0HAyrmm5NV0fSgdLXOk9zp4Te2aVzWqoALvB4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/keCRA9TVsSAnZWagAAbNsP/jYbZluEEqcD0rXkkGiA\nw7Hj7rnKV8vYjdKrui//il0E10yDcsqbNWr7K5VKP3WNHg8xq0E9uCNH2lk2\ndBVTPP08JuYQnUGJ7Mgdh054VWXS0KJG61VWMxfMNeOucIT7MBzsOg7PXI5+\n1gi9LO7jp9WdxKj637PaGssnTRoif5oqtCHJnCEu/J0vxNtrZHTPWuAhqgd/\nvhyXAglR4oHtySTpaF8Q+i72Uui5yAU06MbdTXARBkkj+M4ccqI+hCy1uVWB\ndCim0+rLuHQ/MVNCO+6zkAWyefZi2BgICNtaoQpR3Wmr6n1uCy2LqZN7nXl6\nkDy/MNh7H58G3d7sU2rrLLbtKY5kwGa4pQeIfVoHE1exvXBVzaPN1xoUYnhr\nCs/g8tw7APQ9VxNu+pNZ7aUNkROkFG3FlbUfMJBCqUvWPs9I6SpZCU88zNrA\nleYbWWuSkEbmzufMFY7QzE0kHHhXmat8/dB2XbWRWA8m/qg70fBt89EJFc7I\n9Lpx7F67Qu5c4aiT/Q0SZsqRghMS1KrMnXsdAtow1Laz1aS2Ji1umSU1gw+j\nk+hH2X1XIbw51nI2bhe1nHwktBYVZvleQCRG+uK+G8OEdmEHoK7MH5IkmpC4\n9tPxN9tmksFKvSmQKlO6Xle5iMumjCRqRgOADNCMheNXRcMeF7u61htISdQF\n6Z1/\r\n=Ltsn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.3","@material/menu-surface":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.39.3_1536686365703_0.36424947997755974","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/menu","version":"0.40.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.40.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f67d3edea108861f1998007d1f6245c4dc2b56","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.40.0.tgz","fileCount":13,"integrity":"sha512-ZhgQU0+ajGXsmXkY0gYEgtTz43RR6L36W3CbKjlQjuzKceMl6PQHoiA5gg9sK+sLlqODLcXKUHA5WyYxlPvR5g==","signatures":[{"sig":"MEUCIQD9zKz+TGHgatt4aWL97XiqQwqX+o1FBTGZKwmq6aDLfAIgI1n2VuYg7v6lpvSwdLWLaoZb9dyrwmAfSRjQm+D4fVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULFCRA9TVsSAnZWagAATToP/ili9ulfVIbzjtHW1cxR\nEgc/UNIRyYplKmmRsQFZ+KUiqMq2Q1I8Y0lE62j+FjAZpKxvAeOlrgnoOZuK\neN7YcwekpGew74u26pn2/LIPqKggknMaEEnma6lQ8v1IJlbuOE0AEUfp4P1B\nvqV3aWqw42OiRX9Fu6ZPQ5tY48dlyydxnSTzsZx6PZyJmgEbKY4hBFqKtOVo\nJJPcGeXSBzZ43C3z1tMEXvKlD1GRXiN0Ycec9ODdxGOcEgcHl2KyT5DoHk7Y\nqRo/DWunrE6sL3+nOfa4F7USUuWoaWUPQQgNm+dZIefPR8MR5OsbA45kzqUS\n/ydp3gRw/Wc+aTtNwGJfTJjeF9UnunjmONixPEeGmwib68ucqn6I+DRTKdqt\nLRtF/rn3ycRYzRi+cMBLzZ00KJN83aU9SjBfn8S/T1/q4NQJt7D71THQWAg/\nvw/Qhj/b4vvkB1gufS1MZi7qrR9ChXCIOYAyNWDf/BWp+uzMLqdekd1hYvOG\nIn4lG7VzUilHzoYOsMTcaV1Hb1gqL9GV45PSEzXNVxidW66P4e/a8nNT4ujB\nYT19vpdp0pjWqeTzy4hhLJUkeJsfDplXvlAe2Z3XX7VjLgrw9Bvt3i3UFXhn\nWIv4R9ZT19vzTb86qQOPLXM8/KJ4mvqN9Xy5K0lVI8wk7gR8TBGLQBEsBNsR\nLppm\r\n=Gyrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.40.0","@material/ripple":"^0.40.0","@material/menu-surface":"^0.40.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.40.0_1537819332508_0.41052472153041486","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/menu","version":"0.40.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.40.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"befdac6518c5bf03873499245aa185fb39cf109a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.40.1.tgz","fileCount":13,"integrity":"sha512-uf/frX6rBuH1UJA8fDBTYyk7XOab9gKqsPiU67LQcEz0HgTOoUOFOAgzUAzo/ZSXOjVEXs7n+eAnwn7HqcLXhQ==","signatures":[{"sig":"MEQCIG++UPFU4vYwwSAhMG6R3cKXSjlhNIW7fitDyrhlcDjLAiBUjD3iQ37eZc8V8yRkXncM6SYMvlk75/os8K4tliRRQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8cMCRA9TVsSAnZWagAAEN4P/jdNSzBlri1OMSp2z2rI\njJQgAWUYaKH16Crg1qyP8ah1slP8sja7a3YHIhDMXWySKqPbZ7pGz5f5Fh3I\nPQSrZ5i0mkXRfd8fxDJyrEUgAGJSrVpC5TvWQAobl6dvHS5tqtbjenaNFhAT\nhDSKel6qVepiphJKHQtykeaIGeymiYQF7WOuSknVmvAYND0JlOb5gREq5eQ9\nkiF8Nn7gqEwJ3QQaKSsiPVBodKKwN5t40GkT20wTcO2Lz2IbqBBJfZy9XOx+\nphQIkHu2+8P5UPk3b+72lrM7JZ2yopwcueLMhY6amMaG4FAMNKIIXGNSekiP\njBFCzOAR+OmGD+nvgK64Xh4JsyL69vdFBka3y0+LtEoJXcPQEJ4evqsDe4tN\ne0wCY5F3JMPrZjx42a25FUHzk+AB3iACC7Vc2xHk9t+oeAWzZuJq8fSC/PAT\n1kV5VF8LqGH0uy/fCbe2zSVqZ0vDJIPSp3rqg7EvO+Xem9jj3g/CaBToiBe5\nqrsFXcDUuamG27AgW9D0U29d3ge1ybDJxxDxcVINM2j4rnLHB5SN/L0AqoEE\nSi9Ick2ucYlWpsdijqQWgAPtt1C6yWbKvnCl/BCZR2T3K4hVAxv7VFFlAnBf\n14ifRDNzVX/okNLWObYPvjwL/WMnHqdiOqQ9HqzQS2MlRnGiOQED/n8SC8Ck\nb1qD\r\n=P03h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/list":"^0.40.1","@material/ripple":"^0.40.1","@material/menu-surface":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.40.1_1539032843676_0.5033261876854604","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/menu","version":"0.41.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae4893ed7738ce496ebb1c1fea342ed07def33f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.41.0.tgz","fileCount":13,"integrity":"sha512-w8UFEnTWzOWl1hRx06tFBqAY4I0vYmbDIVwxO8g1CIgQkfG2dIXjJUfVvlYf9NzZ0VOyyKMh69MmMA5KP+HgAw==","signatures":[{"sig":"MEUCIQCcZ+8tfk/PBQMNqFMGPjC9oNKwuoaIhhTWH1OEgDcv0AIgEDZu/m8Zt3ys6aSUGz2cKP+PDyivWYCZpMWqp+WKH6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wCCRA9TVsSAnZWagAATjYP/RP5UcBjiC7TAq21iw0F\nWcCU83+WlojoNGgyQXc3e0nsdpa7LTZi1u+zYVBUjCLPuOMMOlIzUn/BuEJe\n+VCTbPACucyeN6lGASoG23qgUMKL8+KMolFgPHjskdJlvzDXVEltPlsq3+Th\nczfjSvzIuun+V+sRq76vn/GoY8/3qLKnbB8cDss7btR6uuLo3XXHRplvGk96\nilU8bI2hdC7d0/eGnaD62xxQXWQ7cpCFsT7zgE8wBEb8w5t9ts3XmwomVuSV\nQEmsgbBU2h4i7mL18zFTD54ibKi10pW1hztzMaOhkTt6hu8NBiPr4L//jjys\nvkTtH8NomoPX0vn4vU+fJgB1xeMluoLebRCuK35Of6JHzuvPl/Zg//jXelDo\nGq34I/KCvYWxtZlcxck3boKGmcDH7SFDsqAqdE0BncIM7xZ/nXXI1Vt84sHo\nvK8knUoxj1QVUrb1mGa7kOzh2ZtRRlTFDd3WNnqy3c/gQUWkTWn0b6ZVqWKE\nSj09LliobWMa3wU4xRg6fwKyyC68vq+NZHDsRrNS4SgmpiePcfYbQtagiCQ1\niI7g16g/nsznZBLJlICxLoN5atNl4vLcW/pd9EyBVdpNJvU/gyHE1Rt5t03y\nU9KvuPIIObWPqcrNf1EecEojll5SROOjh2kWOY7QtGU6X6ZMhbEMclYl+qBH\nRNek\r\n=7w1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/list":"^0.41.0","@material/ripple":"^0.41.0","@material/menu-surface":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.41.0_1540844546017_0.15928660007820183","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/menu","version":"0.42.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2172a7a945e17530af7415037ec1d5d2f29ace92","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.42.0.tgz","fileCount":13,"integrity":"sha512-+naMKolrkFHhAok2EOwz19fGjhCn6g81CaqB1kCrbxGCmvbOh1BQyobH/9DsGgrrOfke3gM2SRljM6v10njviQ==","signatures":[{"sig":"MEUCIQCGOBWnOexBISiqgZ95HEazf21T9SAeASyCtKYwvMC8nwIgWj1WcYgBAVO05UTueyICvfNYiwEgSyknPw8Pz//v+iY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXPCRA9TVsSAnZWagAAtLsP/iN7A8/JMFM6FLsGSCBZ\nMXRJ427pY+BS4zkDGve4K8mK615sG/ahKCDcFVWOwsem903it9pLzhroyFET\nquepD0iabyWX2oqTDpwl8E5/aCb69wEKrEKc53jWn5Pa/6nD+fPSDnMTrSeR\nQD0Dt53SAp8EIcmdBzeD/o5W4JOSE39Y1+cc6GPp3El1l6n3uoLtftEqqqyi\n93dMavpajGO0hFuLv06CioTJjK0MDe+H5ofg6B8CRaNzPo7uwYwyHwtTMBro\nlkCOtQQPSgDIhnp54e6/nB7k3DyoQqZ6sl/Irt7l+Mg/ZHembTvKjtGmVsUi\njQt4XJ3de1X5ZRaY5JrIlgE7q2hPkfFCnIyPupWioXGKPjblsFT+x/+oAGGI\nrvgto6+CdSxzNvWhgSdvYUgo226RqnMKgwoCcyHJuwNUDVjRAJ3gMSBmWG0h\njb2G/NFhPIPe3Yyg2MuKrkLdVLeUNv9W4LykqW+s7IVwowD4KCZsWLfialkS\nvcovM70rG0zJBpwh/KneAdfhe4sA807VRLRpIa+J2LMQ317ji3jIDJH8tCkw\n0j0b3WN8qJWXjuEeyLyejgzgNryv9bY2HGwXVO2v3vQqEzZO0XQRAIDwleub\nc49mi+WV9RJDXWh8pzJ/5IW1tOSxMO6yxMh4u/9IyRg06KMPPC4NGIIl2rYc\nuG+a\r\n=tn8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.42.0","@material/ripple":"^0.42.0","@material/menu-surface":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.42.0_1543964110768_0.17433269567332021","host":"s3://npm-registry-packages"}},"0.42.1":{"name":"@material/menu","version":"0.42.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.42.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e21c278c5d8fc148413200309450b61df105b0f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.42.1.tgz","fileCount":13,"integrity":"sha512-zjhLt/gzTwmQZzKf8CaaExt2HSIfNaB/b3D4PURqJhImfgKXizB8/OkUNG/ubYc2lg1W2R6BGQJbmiqfRE3DCw==","signatures":[{"sig":"MEUCIQDe/r4tMtpjEKNa/3TyA6EFkaqjvQHoUqzmadAy2k7bEAIgcfF4MeHBe5Xvp+P+UThqC1qJoP+XqdnmwvMNOMCv9Vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCJcCRA9TVsSAnZWagAAwQ4P/AkHvvCE55jOPeqa19Oy\nePtT7vO95GFIZQDW352Vq68bdW04Knv+y1V56TUURFXBCwlssr+TIxyakepw\n8xidH9VEij1Rpczac0A2Xxg3ZHG0/gDA71qL6dpsBjHp0euXGDOMyQtG2BPu\nzNaa4jEezHemrH7lZaBUKcX7T6UIcLdYmWGBn4HQkK8MV+kOXtv6WqRLRtA4\nEwHR7sUhQmxUQz1ntp22fqOpN9++DOwBJd6TGJ2YEv2rCOtuHHUR7Yhx4xlW\nu3615SsCbTm0DMs2ThoPSPchyvkzQQI0ZiCVGwo35Wb+B932gcspAiLgTmuR\nnMSqG6GP1smLNyBoc8YxMHwS88n4mK1JWumzYgvIHu3TvqjAtG+ya+L1Y7YG\nunKnrJiMJLQm7pQYsKSDxE4+bbAF2J1cAssmSj5i3xnHSQwLvu1sdKMmA5OH\nDVZk1j9zqIPgckUjoWJTlJb5Wbo+ndkoAJ2FkAF0TMDW6MzyXMBhzENX2R0q\nMZsEOLBRqzTflbt+LwlXK6hULK2mYdyoeTAA4eXFmHZxzheYzXl/Y2/dAmDX\n+YRrSkOv9TEa5lwgFqphS/Tr7AdcayfMA0I2ph14dLorUZWPQ0QKitPxI8Xv\ndwLW2GoqYR/vFZjJfHi//CLdzGRVmCMPEp9GPMTwvjjqDI+tbzAD6jGlVJhl\nk9Th\r\n=aFN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.42.0","@material/ripple":"^0.42.0","@material/menu-surface":"^0.42.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.42.1_1545085532234_0.7218798505723598","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/menu","version":"0.43.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.43.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37f9cf4b5194a38658d18d2698977bf9bf38a45c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.43.0.tgz","fileCount":17,"integrity":"sha512-8YU/oe4sDgFAnlt+DBQBb9QJV89MMdb+IvIZFGZSJIBYwyM1/GoSK2m1lHi/MXK6YjK4ZJzVwMUflFjawXo4nQ==","signatures":[{"sig":"MEYCIQDWIKuKo89KHg9WCDV/ZqxC2Dq2trABh/uS9O57h80LPAIhAIY15ttAcL8pmuKZjHzi/HuUDLARB/F7pFAYAe+4VpAW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61PCRA9TVsSAnZWagAA2pgQAJNdC9hQVtZa3aXL9eSs\nSKV4GcK9h4ndIT55ltsOMYmoPLERK2upPm6Zhaky6VfRloCVEXrN0V7vSpUS\nd2Hj/7X2X4O75SsUGn6JGjJc68Hh+mg6cuXLwgQ2gDglkHaKO4JIbkODiiYw\nHLJNUhLATV4yhJhb0gP30n72gx09mjeTStO570NrJuMelGF/LobmyDWnjaL/\nIxbYh4/zeWCKSMtgwy7QEKRqAb1e7yRkag76tMEb5jJiMC90h42Dxn7JAL6R\nJ1vbsIeYWtQ3PYxAGNss7qmxe+Mmif/Q0coPNfkHbRtgW7/ZRVYxIpZVPJ9B\nGrU5NC+sXQDLWmnrkgo7eD50AsxbJne13HAALzNT54/8qzUo02KiT8mtVavB\nJNzpwhyS+QoZwMbtgSQoysv84V7j7ahE+KDzozl97RUchUWv7DnappC1vaCr\nqTeZMVRhzBIzRCglLFsi/6B1f8TqJeiox68lBRKR0QZ9ejT3FE3u22Bm2UNU\n4omesQerNrvY1nrzv39qmi2bYCbdzUROvXbPbdz8p16MD2aF/IpxFojVQyZd\nRWEk8H6A8cOA+VbxWcRp4uot2nJIz9gcq3utsLTWWQHhS5hOKXTJFAr4QvY5\nov5CE7Gtl4e3sQmsTHjk5oArzHXQrlU1kGnBKG4KhZlp7R0oRp0xv4TXmJZc\nunv8\r\n=JmPH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.43.0","@material/ripple":"^0.43.0","@material/menu-surface":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.43.0_1546890574551_0.7612448508126195","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/menu","version":"0.44.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"776ec8a04406266a0a0a13eb140b1fd691e442cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.44.0.tgz","fileCount":17,"integrity":"sha512-92XvAcv9rBW1jQ3UvwJ8zk9hbSRe/FqSuFdZ9fNPE348dCY2pbcdQfnUJTe3ycAN/I1c5frkrhx8F0II+nfbNQ==","signatures":[{"sig":"MEQCIF3ZHXV5zO6ZEKHbca95ElGzeGQOhOvgCm0KHD2vL0WtAiAHgSa/gZmjxDqVPds0XEsuxyewTEBaFY7qk7kdXFjang==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":801722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINeCRA9TVsSAnZWagAAcQMP/j/Ypyg6V7EBVf4f3JaM\n+RPKG+3Ee05GJAO5Wip4dSK4b4mOMF1OTgmwloJtA9EX/Fn0vQZRfxh+gA14\nGsOIorrWUllhEuPNaUgCGzWUIz1tQUm9SAn7yjJtWEVJCBe0IwjmeA3W6xse\nI74CcakeFukq/S966dBqqQcup/Gc1sbIqhMivfuVR8rLZ/45u6wyY+cW0y/T\n8RWGdH0mpCD5PiIdCqEMDigU9JXnTm+VAw5ie8keWrc5/XHeb5p61av1PGPV\nuBQHqsnF8PzkGLsZ5VXUIy08BOFXEqYCqc9Jk6CGWIIBlRxi6dNpe+hyUa7H\nRC4t3PbqlovGm9THhAi6DW8QxNSdzrkX0BP091BpdS3FlYelLBagZPHVOy7b\nKaBJR3k/pWw8xSF2mRpUiZQt20v4m4JOCUNigNufj/HKpOV0vleLIDb0JOTj\nh/MRbSJFtjH9wbz9yGfrLqEEcle2MiB3qFd7Mv7YTSAHCJeww+g/BKd7IS+k\nPMdsmGfKOlD3wYEyRtJq1cNE71XrMDBexv+vMsVrVI9YtXN5GIqKOUBOeIra\nDhdWiVUOsaPQXpNIGbZJsPfDTD8o33Zd+wmk2TC7oa/jKbSj6gd3/St7gRtf\n5Ri9amq/7P1zGHbmEKfLJE4Bn8KxPFqzSr0bOeUXOiTriXujM7ZVQfK3Z0kL\nVjw8\r\n=EaWi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.44.0","@material/ripple":"^0.44.0","@material/menu-surface":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.44.0_1549304670115_0.6614007422310655","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/menu","version":"0.44.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@0.44.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fec86877c5ed25d84bd3d1b0449a71be3e8f386","tarball":"https://registry.npmjs.org/@material/menu/-/menu-0.44.1.tgz","fileCount":17,"integrity":"sha512-2qHUfyx1CoUbnw8BD220IKGzGta/ZlPtYQgQrE1qA9K4eR0wQpwXqfWxo77hz+EbIqtdsKphwiiDI18jhmHqcw==","signatures":[{"sig":"MEUCIQCRZ+efyXGJSCNVOcgC/zGVuBqB1zqnblCDhp7+TVl5wgIgHkbT2HlYoJK43txoghDz31UAO5ivbX7+2FSfgBICJBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":801970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsyCRA9TVsSAnZWagAA6EwP/ApsucxNVhsHUPfwwJ9A\nWrPifAU4IlA5jiFbW733zBsXLzktiEnPHMk95R4Kb1zTpOB/ituQarjXKE82\nbYQQz72y/riGklvshAGNAdGQywo1xBo1YYbLFPJfJyaRG6VCXsZybi0MfRfh\n5k+8UKuWPsys8OJxVaTVjx//ZLKl88377BN7IJ+H2Vo9Rwx00WpGelDttXzk\nPf0uWgXtMGehKApF0izTW1f2jAsa0lTfHOw1D3Mf2bWwfzx5eOMaOyi7tsAk\ndh/dUZ4t/yNVtECtcrccI9d64vZK9PgNav2ncFCxkPSN2n9HofQ0oDA6WrSR\nmgAG8RAeEuQISqJivhWpK+3NcAbA1BkFYVwpsvCF0BwAR9shoNKUBusNAENu\nphDRpGeZltX3Seobdti4m6en11VYHN7lUWHW+BimhMgY6dt/Wf2HmuNYTzBy\nHqhR/GlLCx6VegVNm1SL9VU3lhyHX1/WAwHYHMbeuCbS5I4WSq9cOiSdv8iT\nemY9CoBd0dz6WNzN9wHXzuwBERKc6ToxI+bCvStXZIovwOsaoq+0Ro+JZUTc\nsn2KS6xKp2GiSaDU7eS3RFPra1PMTBvd7Y9bmTCwXfx1F/QxI1xBjLqJdk6I\n0HJIF10w36a/kxym6wvBNGbHWzVwG8/AiNj4oCis0JWjlIjAssBvdh+GAA/X\nmWG5\r\n=rU5k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web menu component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.44.1","@material/ripple":"^0.44.1","@material/menu-surface":"^0.44.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_0.44.1_1550617393806_0.0004782384518517979","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/menu","version":"1.0.0-0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.0.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e00e142d12428a27184d0fe7c6d9cf9934a4ce1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.0.0-0.tgz","fileCount":32,"integrity":"sha512-aLnEeERvXaqilhuGweD6SNpeatt82XRoqWXhDRk/NGJRhni39OMl++T7+rikYElnNoGNqLg/J91KCNkd27ByKg==","signatures":[{"sig":"MEQCIAGP2TTmWWlBFBoeIbqdkc/bWnI4Zp3Br2CMME6yijKyAiBQd/U48ONi45bODxVvBavnbLCGPRMZILcIzddyGkrtaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":950977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySHCRA9TVsSAnZWagAAD/wP/2TXa1Cb14HOV0CyLfgU\nooCYw4zv5b7g5SlKOnuieaNFOnfCmvoaomyR5jOibHVJG37savWCKLS21/ou\n1l+ac48hy35YNmmfR8MiAgC6jZpNRV9A1Ub7UkdBPUyB/Odavwadi2l8oohw\n0qJdBMYw/deb/aDm183FSsgxifoBJWzAdWxwljMDiDA7M08PVixy8dm4Qs2s\ntGnHzMl/4oKyxKdMTmXYLAGl5rRRQdmNrtuG5QkhgqAbSkuSc4hyWYZjj44v\nBfcAEfWP0nZtNP6HlW7dNJQAtxT96/9e0NwYadF2IHYqK4K4yNLN5PM8kXo6\nbnoclqTG5BWhoUCBvXksRCwVUugItqBG1qQtO/OrRDBzXqV+C6Z7pLs/W6Ci\njgG797/sb7Y/Gbv8UxV1y9nG4Pob3/40l00AeSE6IiKWSwrkSqmVJAfeqb0S\nQR3drjuJFiBgaIowxQ8tExIDOwheSMOvhDjh5IYwEtqeGPN72LGJc/6204WD\nSrlxuWST+tAwl6Kop54BU2hxgDm0JsK3TGblFqMVPqiNIje7jFKbqq90uEaH\nURcBZLAWW8maxkT81lauBQy5UHcYV2fn25Dz81mw88IZFKB7qbA5zS4Wj4dd\nShzAxGcLBrwU40GtylB4lKFFQVPHf2uApg2ZmmQIne/Dgdj5DtaaF0atQugu\nmDjX\r\n=EIzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\" tabindex=\"-1\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" tabindex=\"-1\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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## `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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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: 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`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: Element, className: string) => boolean` | Returns true if the `element` contains the `className` class.\n`closeSurface() => void` | Closes the menu surface.\n`getElementIndex(element: Element) => number` | Returns the `index` value of the `element`.\n`getParentElement(element: Element) => Element \\| null` | Returns the `.parentElement` element of the `element` provided.\n`getSelectedElementIndex(element: Element) => 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\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\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","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/list":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/menu-surface":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_1.0.0-0_1551312005789_0.17322949282183897","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/menu","version":"1.0.0-1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.0.0-1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"666a601d4281d409efffc0a96a4081bb7390e40f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.0.0-1.tgz","fileCount":32,"integrity":"sha512-bTOrT5Sc9h4Oo6/S48M63hAogPCG7GaYivIldhIaZxRLDP1wxW+lspHXePNiqUuboVjoF5boqVFDH0Zcm6uWzQ==","signatures":[{"sig":"MEYCIQDU+NWVlxpwBZFp0dpLmm6hbSYH/fCg9adrlQn/desu2wIhAKc2G4XH2KCZ8tDdEsEbR8t8bbHU8e7C1dUECxFYmhIA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":950904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXfCRA9TVsSAnZWagAAGHUP/R7U/NpRCDwzmXrWymO1\n7Z9luzyjVlnj47eJOM/GwFelwl9veMxMXzCW06/wVkCu9mutj5ycQ31Z9FRq\ndHzAFDBDF9z0D9DhuaEWC0M1nUkyQfaLIMTFh6S32DkhUNufHxINUMcIBJ5/\njP9QD1b2WjGcQMlXH5gj4f49JSP3/QMmCS53gC7E/sDf2/ZzNuSqd/W8tW8I\nyfrlswgA2ucXY0MPKii4/bWnZp1CmDX1BatiVdxivN95qhYu3Zmsw9U/sThP\nwKfQ8KreOyKvBPQtw4HQgc6SAnamoaacErtm0ZG7uZqNeJPnUa8OFEHeggcG\nsqOrCzQ080R7CWmcl7qPRdhunYb/Z3pt/u1pRmrtRBU9yoySD9lhr53uMpEW\nGTU3e8cS4cMCTfos6+WmG5nhsT7sgv5CJRVS80xhele3FiliH/otgSd2KR3h\nbVW3vy3e+xB8ZYPdNZCHpfEvdk46pRulY4b6z4nkB8iPjqpfdWnes907UsVs\nACMBBm0k7gYBYlKDPwpniFlXfv1ATVtGeBYz+e9eIWHrFPs5dwNE3K5ziF7p\nFURfnjwmTn4eRatnKio+2ceJNy9W7ZsJ8zsnD5bBaNur1BgppD0akOg969YI\nVcYnXKIyQzboRMrI+vwUQhc+YhHY6b8YPlbjZLBx/fWxTMbJUOWjACCUS3v0\nIgl3\r\n=7f9P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\" tabindex=\"-1\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" tabindex=\"-1\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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## `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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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: 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`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: Element, className: string) => boolean` | Returns true if the `element` contains the `className` class.\n`closeSurface() => void` | Closes the menu surface.\n`getElementIndex(element: Element) => number` | Returns the `index` value of the `element`.\n`getParentElement(element: Element) => Element \\| null` | Returns the `.parentElement` element of the `element` provided.\n`getSelectedElementIndex(element: Element) => 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\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\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","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/list":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/menu-surface":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_1.0.0-1_1551742430589_0.8039404350606019","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/menu","version":"1.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42dc1a031567ddeec269bdce3038a0189f0b8aae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.0.0.tgz","fileCount":32,"integrity":"sha512-ZB2DB0emhXbK/HKIVC0/l5DCkhvg9faXDm4nKY9BpIy5ILvAjpsHccs7FE7+1aT1EyLxNnvh36MFKI8w7PeS7w==","signatures":[{"sig":"MEUCIQDW9nhgWWlA/5h2AeyJvy7kvsqumaLrp9szmqpE1wacfAIgDlzczOwYQVZ8Qd5JuRmygViVAoHhXLg27HpWT98WjZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":949140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbZCRA9TVsSAnZWagAAdlYP/08LU2YDAcnWgiydEibR\n7M1HbXhg5j7dZlkd7Pcg0biDYuzlEqVy/UEioUimmDQvdvttIkzno3Wx6rcU\nk+Y6533oJ+WUmpEOWl+PDy/vZM28oUxASvEaPVusOP97SrRv48e9BT8b4XKD\nJbDcI8h+uOpHOK/vTk/TUpUWKrctrDDgWQTXvRG5jhB3TbBG+9qOLSYL/hxH\nyKkd3/8hoJ7zHiMHByJZ/3ZxDSdsMwP87wBVPP5AL3R82bIa0uuUDar1Lthq\nmrrqSAi7t5h1uHj6LW+xHFHd+EGIVLgdmMjT2lwHQLM35fC360Gw/+x+ZRmB\ndzNhQ3+1ZL8FPP2ks9Yr0L6kaQzdIASpGP3yd4Q4zBQOF0SfiqmDgbplSXqX\nMVWNTKFlkajVN3oMhPlLDxuIGR2eUpQbTinFfxraRXvYGtVfhj7dioGAldsx\n35+SlSyTFy+52ZCWXR/eZhYawny6UYjOX8bql1lsg/MzSRHsU3Cjb7CwIoSo\nc32BZj2854CC8u01QWXrxQtv05uj5fTkjHpWCijSOqYIhlZaTi8ABxHyipCZ\nvY9yOmfyAMQq2PYbu9f2+lVFRUqwymt15uzyUL2aQTqmDXfqvGwVMFq/IgOV\ni1pXGMxvxZZ9esjD15JJgnaOp2W+aQ0h0OqL34DTMx5Os0BlCxAI7ZaWFqab\n6VVg\r\n=6ym9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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 component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.0.0","@material/ripple":"^1.0.0","@material/menu-surface":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_1.0.0_1551906521157_0.4913862238439659","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/menu","version":"1.0.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.0.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379a593a82281feed9b80c40c4c5b856370a0c35","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.0.1.tgz","fileCount":32,"integrity":"sha512-fmBBHADc4hlp/yJSRHY+rjO0mzMYajSrTdXVycAv/pyml7VsjMa2MUf6NTSUpzpJf/snGcbfXo5RDJOGP1VbXg==","signatures":[{"sig":"MEYCIQCEYrcLXbEQprsdQEXeSaRf82T6oEhOzKAr6K6Q+IlcGwIhAPZ8mfLqhoIgUEUotYUTrxeKZtQsEyAlqvvZahi1DxrZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtw7CRA9TVsSAnZWagAAogMP/3T/MnOlkiinCnEZ5ZKw\nufWJxH5V1u54nzX8T2cjXPTdSdRQOq2TEpV3217kGgGNHzDAwKL3f9kznSez\nin2Fws+8mCgeV9LYRDpCmSQBmlNAPxMbu9oQNDErogr5e89ltvpoKZRVN9Cw\nC9OXwIEAUGiac6G1Mn6+kyzxooSrzKoo6sXBdoe67W3Iuv83I59XZQ3Ep7Hw\nCN3FdhXzpfGnQVEs2iRSrrH5Pro1uXKZye6yMpgULEMX37E0uKU29ZYkoHo7\nwr6nCHpST0TLPIEu5w2oRh/AjQHYstmrxWP2IfmjEb7GR2JkwR2ON7e82ewv\nVdDnIt6FUlDBTO1TKHD1WFi8t3DYC7DTahMnTK+WwUXRYNLpnA8SroxOjthW\nB6a49SAtuyre8VGd2q2uExo8KbAnmnwtyk6qa/Y+NlVYDkkbPkQuja3BmTlO\nOYVa9rmAybh1DzG+o8B8V8hEAEbblB5OgF5LxVmYOtONGz052bVm3bP0Xdir\nqMh+4jLFKpMaFIYdn0ZkEzbYL38fZZmv4XvIaIFAWb5vN+RSAKWHFzXKdp7U\ngn9rJexyNVOc1P4uovLMjlAuG4yqGikdZoR2mEDN/W4J1j+MpCNCaHht7mq+\nZzVn3q3XIDg7bc00FEF+EM3KT1m/acSXpG6eV6bcj1wqKfMpcwK0ogmbpCQu\nQlIk\r\n=ZhRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.0.1","@material/ripple":"^1.0.1","@material/menu-surface":"^1.0.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_1.0.1_1552342074733_0.7054659797852507","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/menu","version":"1.1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"708110143985a9e98d811277e00f8ad85b277738","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.1.0.tgz","fileCount":32,"integrity":"sha512-oEubeu4h5EWeaOWbDwstmWkzBSq/2qVtu476CLmaAI5joUilXaPBKpryv4F+ZRIDlVQjs5Ey7uBotxDwDELPQA==","signatures":[{"sig":"MEYCIQClBxCotueWy60qSoDDx90qF6l63FXMJqcx9TuarKpQkwIhAPl8bvMzOVOFyRuR1orolno897cERpBqsP7BORq0wt8Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzhCRA9TVsSAnZWagAA5SIP/RlWuGeMwB7mcG4FoOy0\nu49hB9ZdSnsaRKhN5nfN8Bmk58aPwB58csZMrGYKMkzpcnypYaL8vF6XI7ll\nKK4ifhfvvcYqQIey+Rpke11ffIL2LvaGYyhEe2o0ax/uWlnnRKxViWXXFgux\ntZ0/dBu+QlKieIwacd+7aWeB+uzo9MWuKQSybkN27zHuZTcctt2TqfEOcPvH\nLzEL5Glw2FWz1eivVPBjsy57JiqsbT3VxxcHfdUnXm7MTdJs1LeL6F4uxw5g\n0J6wSbjWXvzu8L2DeSMYWsA5k7/KVyfuQsSEaoMBfdMmhNGyr1JEecNeApM6\nBOUD3VEwFJdww6UOMt4cuA1rbdlhxYHJarjVKLvyrLSVKOApsy9J4tX18ytU\n1M0ZiTcMjbWqB3yrlhVCDhma3x0OMRdWumfHKnArg7mTK6VRQOx3425rCdhe\n507PxAJQZOwRpiaCAEhFN7m3cF5va7FfrA8neU/QilzZD2RZ1jgA2Nh1QgXA\nkhjsKSpR1oUCuWWKmWn5+HD3tw2qxZAyZ6aNBpmjMQRBpfuNFcpr5Bw68Uk0\n4DdDATsDuKAGt7hpEh7MbpFbCcRjiUwPUf/0iBoaZOoqSUnbJSuLaF+0Yg+v\ndDjJFKUoJfGWYhG0gmDAFY+/+hBU8mFM1oC01CEL/h/Djcku/Ow8Hvrac0Df\n6b83\r\n=YmDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.1.0","@material/ripple":"^1.1.0","@material/menu-surface":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_1.1.0_1553628384622_0.09392412745742984","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/menu","version":"1.1.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@1.1.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9ca4d0e88e6a2ead9793c0377e0ceb73802241","tarball":"https://registry.npmjs.org/@material/menu/-/menu-1.1.1.tgz","fileCount":32,"integrity":"sha512-bfsZ4Uexm02ey665SukjMK+3HtQVu7Bbc/q5chvPmLoMbSQ4PYE19C/p8cXKeNxkhd3S0h/gJDPw/cTbB9mrhg==","signatures":[{"sig":"MEUCIHX9R874ZpFeDYrQYciBNO0HwOPh51GMu0KPw6X+zjtsAiEAmnXaXP4+54cWmSDDgXjhbQLSNjra65h5l7Sl2fi25RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uaCRA9TVsSAnZWagAAttUP/3nxBdebHjIa636zWCMC\nSN21yVaWBrJmwmTnYS7GKJx8QAeNf/DeqHsYLwnLBdDry/9Zv4M9pTxU2AxW\nm1pu5YMqfdc4aGioqwxtUZOrPB4CPZ3pS4ndql1DlzeSP5DC/TDu2R4/fDLp\nKPYZ/ipoAaC4jxeiF7UTVVIdl3o/O+OFmX71nCHFMBnk3+MOhoTKXMTqDWLT\nOVeK26Qb0wFVEczapdwmimUwLAxbiH10wT9VLwHeoF/Y7M0BF9KvZzIxFoNk\nriI+PZ9hdtOyX3XJHu51j0cH2PQ6Ks3P6S/Ev8S9bYsS/JpDkoNH9yiX3wvr\n1OPPGr+QMIcGrNJGxaa3z56xXvqDr2DunjftqVOuPUe13A48njWQYApazOOS\nzML1C3ENu0e/XFOYVxlp7Zhy7wOGkEvKGn0IA/7gymjiJfmvwCion0/8Gbqs\nzyzkFFcoU4QzQTZ2rhB5X5awVC5zVfyq8ehWEYo6j684/B4rpn3/8K1HlU+u\nBFppozbU3DK0WYzk01V36q+trO/9OM72rsY++l9+QdyYbcB125TfnCXkbdvd\npRUjbvrfeoUPkznQe4wpmMZ8TH074nTifvdUfz8R+wyUF9HmNkvZEo3qhfZp\nJBzEbZsodsPWLvlZqmdB2OzlzTiI3VQxS/eXXR1NH+ZqRwuwjNRqgZDZGXnj\nlbHW\r\n=WqvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.1.1","@material/ripple":"^1.1.0","@material/menu-surface":"^1.1.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_1.1.1_1554754458231_0.3071171409321103","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/menu","version":"2.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@2.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ed7f72b8095f57bd4644dbbf3419023dc62446f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-2.0.0.tgz","fileCount":32,"integrity":"sha512-FIR1Xte5mYBJPeL+nwC/1RnAQD2yRWzhSIJ6fGV/zuTWtl1VwOtvrsuvhLlqtCTg/5rrlrisEYC0v0cKMjZclA==","signatures":[{"sig":"MEYCIQDMo9LglmvI9i73F/RDC2n74f+kzQo0A1sP3pmoxY77fwIhAMLoInzcz+56k9HDm7gZI4s6siOaH/iQf6yXOKSiYi9J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":883556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcLCRA9TVsSAnZWagAAXrYP/1hZUAVV3V16nZ15ht7w\negrXqwDrGZvNwly5FWIVr8sJzkARlSRkT5l6WH84bWbWA5RddmsfzfbjwR0O\nsuvS0XvmYHp5wNUYKNjSTyWEaz4od+B0G6Z5ORCwXNGCy5xPiytzk+bBiFcH\nb4lZcxgZY9owss73k3etK8m2Hlngcgen0cRZwERAwTt2PWwZmRlyefKcET7b\n4Cgb3SE76WYwZnB70Fqw8lSTJ2aUewLKlK3jUJ4QHmbBMxdKUU0/ur2BkZjL\nZrdkm4quo0cmqrBBk5LsxIw0QbgvLwEsbvbBb4dCWjSgFeBQ3PlwWBVhqZmT\nxS7FAWuA6nWAWI3eqBz7djMhIlS9kKoc1BnUjAINyrNWaM9dug47aXd+iCGv\njYU3gk3fjVQq7CK9UaH59u5/buOPUuw2CPuz9Wtq9kNxuvVvk2v+1Cyd7CHf\ntGM6KTLSvVJPYdSzPf6RrPVdAoEopEEfmtksSkomIkb4TwAvQrUWezpM9Czy\nCw7xJsnl1Mcbq4L1c8yaMjC5Cy3RSVhE8jUV/XIhshDBmhhvwxHWK6yQGQ2y\nu06dFYsTAEtG10nKEX/6t6XLEPfeo7SuXTr0joYCkBOJ4Wk48kWcrhFP5wCI\n17QhLNJT4lrdIWjj6W8BVnFoC0PIXPHOv9LUHknWOT5pn9NwN8ZJT17nQ3iM\nOiJ9\r\n=pDet\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.0.0","@material/ripple":"^2.0.0","@material/menu-surface":"^1.1.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_2.0.0_1556559627123_0.5533374103093598","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/menu","version":"2.1.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@2.1.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf8e8eadb241280b99bc356fffa541d894b13ed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-2.1.1.tgz","fileCount":32,"integrity":"sha512-VCyD303Rs95Y+BFYam662gixC/iRq/wZoxiD/c5Tivj7FE0pHBWTd1wX/mhOF8UlY2c5bhSlB3d6e+g6FEeMYQ==","signatures":[{"sig":"MEUCIQCHjVz1UWpMbub3OHG+0AWdUDB9AOQVGTUm7HF7OKG17gIgVGzY3hpqUyrPvgu1XqCwKXwu+uYMf46o2nN56Cq4xJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":883480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQVCRA9TVsSAnZWagAA/7cP/jyM1bwC9FZL81n7TeSE\n5c8jTJ1tckVI1zlqEeYIzf881Je5GGs1YN2oSyPZnpv9bU0r6R5aQuft30Cq\nCKDEffu7yzhThkGGuAP7fhL7E2oySydrBLlX6+1sY/OkX7jUi0x92hBzvcuc\nDN5I8f+K+IRONwc+MXSS0bU1+lJTOq3khrSKqFPMMa5wgFAzefIImisyF3nu\nt4lvvC172qFshWTAlMrzOUDONYIDxI+r0pTNJVL3xXcT8acWDA569KLX2zRg\nzPcd4/PhJ5WW854F112oLKZCfiFk4RNvGNDISjgflGhXKlr8KDlatfqIWom3\nESjkVMyDWniBVgZiY8oTQTgYvVS3npYRLR4Xvq2h1QHkBv5qlYwzR7vSOIsk\nLu0HxsJaMqPqRTkBkQRncaCGZkqRavh1LhcmkhYhooRv8JjPQQ/z7FFrcfag\nxLNlG4/ueL5YU+kc+sEmQvyNsBmy3koLA3K2kC7Dl9x6Izur4nZM1PNolv0+\nnOeGe6Znk+wOTg1sP53Q/DakQdkTInSEDFM8IcfBrJhO9353qyTgcanK5t5x\nST6EWjGTK+1/ro2wrYP533ByykHaop+hnv1oSrRfmMsdm7umYSy/2A/xm5IC\n3+OUS41LGf7PW7SKFG5jC8k3tUkBPpr3hFHjrMfEMqE7joVFAPzh4ahdR7Yo\nXAxK\r\n=Z1La\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.1.1","@material/ripple":"^2.1.1","@material/menu-surface":"^1.1.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_2.1.1_1557509140612_0.02183114641690964","host":"s3://npm-registry-packages"}},"3.0.0-0":{"name":"@material/menu","version":"3.0.0-0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.0.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a3dbf0c31b2a6ae67b0bd2e94a546657765b63c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.0.0-0.tgz","fileCount":5,"integrity":"sha512-R8DOWxFfMd6BLMKmZRImD12yBrbip14dRsdEz4/45E05nwaDG9HvGYpnY2sNYcuOCJQwKB4H9/8KJuNykIIaVQ==","signatures":[{"sig":"MEUCIGaCMu3iOvWwIcLLzWXOHZ2m9srrsHJ8jeiIUE/hVcPJAiEA0cffvluUbIwT9006GwEZztRgtgZy+0cbQKElxQ2XKkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2eZyCRA9TVsSAnZWagAAp1kP/0k0Irjjs5HRYgiW7wfx\n4v44VSAgXgssUF3vvyUGui4mDDxOlVf/M8oGdc3I1jmWmRRFxyTCR3XVXcmJ\n/JlgIuR7EXIWrPFKyUx5BjcxNxDU/R5kX36Yaytmr0vn1HL8pr8wwHLcANWy\n/zA7xTpWXd0No4PUdF1/kcxUjuDhqpIGXGgZIqxo0m/W4YG/dl9aR9BvsVJO\nnU5PkTVm2OpJeamzSFS6g1RUWyHE+czP+CaLYr2TisHOssSHJ+afflJvC97i\nwgolpGCxWFye5HBClQ3AKt3NKjKjNY2oCckSg0rNT2BYNlDMjAOK7qN+n2YK\nwm9q5SfgOUC0xchlTvIzU7TRRrC7oYX8EMxqqf94aIgkPmfwfY5P/8BGx9wh\nwu+9AzjKKcLI8KFlOaNtii8lq268EewjoTQzB06Ui4/7R/qC1pngrfvGQmrb\nC/xf4P/w/gwrQk5zNZyuucRR5YB5tkikwYRF4o1OLTHh349MyHYpfiawrKfw\nfTi7itYfDgS7wM6YFqh6ezLAedqaJvD6O1PY9VpkC1XDPpn7QJTBAe7hxInW\nW8TNU0uC8oez0uqddRujax0dyz81D8KxcTJSj21pO4sydH/8EUsS+ticCHqT\nGHQk7YQp5e5UqzCXz6n3gp+yHljNzWW/oZ1R9q6CvXIUVqVR7R51Yt9GrtaT\npqpS\r\n=Ijvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.0.0","@material/ripple":"^2.0.0","@material/menu-surface":"^1.1.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_3.0.0-0_1557784178068_0.35347591185423344","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@material/menu","version":"2.2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@2.2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b7d3a07840a42c5817dd8968eb01cf176e9567","tarball":"https://registry.npmjs.org/@material/menu/-/menu-2.2.0.tgz","fileCount":32,"integrity":"sha512-BLbmC8GX7mB0ObDa/5RgNP4hXrkMl60S2ReDLHTWDPzZsDts9/49a422lZLb3AofQgFNZ+ZjNxdMeRTt5rR34g==","signatures":[{"sig":"MEUCIDL+F+JM04JA603qNQoJMAHtpHFhQh9S3s+erTgNdXR9AiEAzAgzgznJNiKiBSEnGBCX2iwxeoNqPO8RTGN5+sxmZAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":883480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2fDdCRA9TVsSAnZWagAAMQAP/1IX9dUDPWa8kEcrQIiZ\n9t0NBmMQX1+AkBhSjZslFjdehmJ6ma7dGKmf7PsP5jWhAJ/4WsX7n9N+wL3H\nr8xMEVHQhYHwZyr42pkDwjcZQTl9B2b4NIvbn4D0Mbf/sGyliCrkMVnPM4P6\nAt2G6x3/wwbEOLNgwKHO8i2XXnn4vy/1d5fnj5DwFu01A8pugZRbKSvyst5d\nYUwBPoNzq+76D6WcL98Tajic5E03m3QtYyXpCgjRQPf97aVhqP9lThz9sSs2\nSnEIPPaIuddbmPg7Eb4M7ttjpMTwNCeSQsp6eL64AhBkMwE4Uv5eD3pRVXlS\n93OPCe+qVl0rxKRXeavuPkWKE2UoVh8hSM6rPWDd0Yu5a+5a9ddxuI1Q+HHs\nFbm89fy5jTauGPwAIioHv+Y7J1bXA1kpqDlbzDnXXELSU+8/A8m4xHUmHJ1q\nVtmOpl6FF0pG4Li+55R6B393g0CRiNvJ9zFDG0eSwTF1lFceEC5TYk38yVLx\n2uKqTHhYIvIGeBTua3AfrG+p+3aN0To3pXOqZptECF6pvkSrFEcsqKFc0z9y\n+E/mFzTzQ2Qbl9Hx+hlgHQ2dxNtejfLF0Al5PeuLh+acPKYK5A9eti99Kjns\nG8/iZD4X0g0BeOWT2LXqTYf5sDm5hCMLPpn+TM1T8LRVkAp7qq2nP5hHzTLu\nU36A\r\n=eS3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.1.1","@material/ripple":"^2.1.1","@material/menu-surface":"^1.1.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_2.2.0_1557786844324_0.7828879412625565","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/menu","version":"2.3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@2.3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29d7b3557efcf627796cfaf532754f5c6f2d120b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-2.3.0.tgz","fileCount":32,"integrity":"sha512-XPI6w4x5c9ACwKBdujcTskBlisWlEgrb09Sa+s0vjhqBJVZVAUJT1j0OpG8tArNUqQiFssXBa/JuJIe6sMAK1A==","signatures":[{"sig":"MEUCIQCRXNMFYYfhjSOQeFj1FgQG1G0zukVXt2S6QTS9BDqVsQIgBX1pqguNN56AfcplhrePFd365F6gJIgXEKl1/WAE0HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":883926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ab+CRA9TVsSAnZWagAAC3UP/jsie7+6Yvh/BL2eBJIo\n0FjPdrv9Ki2zomolZNfjZ+tcTy1vrnMxQPFr3xkpq4Aun+ebDgEnPaDPDZFn\nybSMc+rgzvI/ID6m992u5Uz0Zs6hCDU1yrplvEzZ1r5QD+X7iqFGVN+bnh0o\n0hkfjJTIPbYj8U/WhyislcPOSYi0cr7vP4cav2dOWXBuRl+31YsPnGOPkFe4\nwnRkQDn8J2mRy/UWfFS/5W1ovdbjhkC56H27DFAmcbsC0q7eHeOtvUMRo1ni\nX+X2dU2mz3VMHBhUbX4cgnVUVaIMQVbruCs/aqB1vlBsq2N26UOXNOfunObV\nWH5jigVdu0l8MSnFKftxHcbcrmO0L6BfnKcBYQyUsdEkuouEd78+XHgsR11q\nOl9/MMle4z+TzmMpTgVZ4R1ABP8LKVKBhcsEcgkijStMvF+MmSmpwVFteerT\nZ2qPTM3y89wRVV7s6LwgITPAL0ob2RrSsJzfKZlCzPAu3TG5qmfrvFpDrEfM\nDGpccUw4nNjrFiEAgU35EA2PdavX1r9ecX0y60QIKKHqlUjRJcK9c4Zwfhxx\nm+gItnKxPUdDOLEcEqRWlgkFbUEEQ6GDs8WjDKhjnph583vOJRgMJuFBn5Aq\n85brPduR/Zf8Sa5wYKnA1hDvXwVpCHbNJ9lgC4VH44nNPRQOQNmj/lP/M7O7\ngoSw\r\n=xIpl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.3.0","@material/ripple":"^2.3.0","@material/menu-surface":"^2.3.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_2.3.0_1559078653907_0.6847587551185159","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/menu","version":"3.0.0-alpha.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5863dc66f25052346e307a845eb37b1cbfe72140","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.0.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-aLIzVqsp1CnpovO+Im5mVWASFMySVOGjWjNrO3gSsiKHFu7MVv1FUTwiNzc0F9dS5VdO3e4QR10h+FjA9VM4ow==","signatures":[{"sig":"MEUCIQDna/kXjQpN52fsAgUJCtmUcpjG5Gqao4dYJEF3yiUt/wIgX72ZnmDC+4XLdcJQzPLhqlxW0nKz3E2qST0c2/2bVKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":885867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHp1CRA9TVsSAnZWagAAsUcP/RvjHffVkb8RtpFPOPtd\njA1S+UhuyH8yYgclMSLcncnhlZyw2Ku9hixcQ8K+w1HvX0XFm7jqoqBeKLeS\nRb9cWo5N4u4P/HR2kGnE4l0b/1GqRAlErIX2yNE7fWi9TKdpx/VBKVcQ9E5I\nOrN3T/db+Du+SybZGTwFlTA5/ciW9csdVNSgXDKgAidVuS3Dsb1hj3AG54yx\nKIuScBZ8lgeL//jUCpzuWkM5BK8FT/mLiYT3lJxNgN/491I/COoeBygmQC+u\nINl1znLur+ZGUhkIzCjLTtFvRrx5mdwvtDw/ISuid68X3cWf/gj9lMYF8cCN\nvs7po+Av+J2/ij/knPEOl77JhTgZsGnHFBMCKI3l2WyMqXPo2RRoYbKFQtHd\nuJINGjVjy/bcCE+bry4Zo7iqUq0dG0EpK1EOHn8whPf7yYdsG+Ehz0gnLfva\nvR6ERd+unTe89Ib6M4nH2T582ivx72guUS9vqxhuXCXDfgBqPNwHzE+ac2hQ\nLNYBfBX7+mZ0VBlTkkYmk3XcBnKuhnCR1aU3m6Z/cuPgiQhBPl7MKlOAW/t0\nYqN7fHY4pnqqP9i/R4icOWzjxRpdNjYIXYWKKNgN/nQEeCsNJCg/vSTZGg6r\np5kKS9zTA1xnxXhCNnBj5pU5EDgccec5teCv7lpXYQPSfPFOwnFnFFUHbYqb\n0qYB\r\n=Opqz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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 component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/menu-surface":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_3.0.0-alpha.0_1560312436830_0.5883848600410055","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/menu","version":"3.0.0-alpha.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.0.0-alpha.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b7be2dcb84de77b84eddad3715865fa86fa40ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.0.0-alpha.1.tgz","fileCount":33,"integrity":"sha512-AymCtqcoH7nwGHd+Xf5NfH6et97nkRATEU1b1C78tpzP3vXqIBIHJgUwI1/5puwmqIqgtLNHUjBAiBvbysChng==","signatures":[{"sig":"MEUCIQDquB7XAqNyXQa4G6S9OzO2WwJ6TQyUh3KyIyQyP5+v9AIgfYYsI84g8aO4bn2pVjksR0zVHL6zkO6ETbUctQG7+qM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":877589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxMCRA9TVsSAnZWagAArjQP/RI0Xf7+ekIecKPH1Fth\nZDSKH8l8l2J+VSg80AfpqSyX6Dg7zybc1VRkDGn9rflqAOJq9hyT2QLR770m\n5XolnhVgutB/IWJKxkIEApKKBfRgDLyhegcwZwtL4+MTvl2dbPJwxxYbKWt7\nHxN4zPJRNG8kAGDnYAp8i5LvbZRbRXEonw+aUT3/33rG/b39xwH7FupzFFt/\naDLbxZiw3Sy+72H7kXeFzamEe4m8w8+I2pJq9WDCj5AmmT9CV4htDjfwi2BL\nk/aDxo0COC0UQ72DVQsyRy61LXkol4eX8pdYpIbEyyOvZnJrvJMqJyYadSxh\nxsP3X+TGP0o7B3/iYm64PUi/ENX2MRDoFtXvY8JpvlsdSrXj2eI0RZkSx40u\nH5IF70rQim++KAQn3RYle5tGj7s5BY1VINwX3nuPFf+g0QpmFQdl/Q+/YIqi\n89FQQDUdR6iWsZHJ7Ozd56T2N1yutW0c7vF0cYqgZfWuGi3+0a9kx3xWDi33\nCbE4ZrwNocHmhV1zGNTpZSYyvhUa9L0zT7WPi4x0oE7d9+Te+uzOZ0KQliOQ\nRvxXdaY+HZBUESHrEOThKIHHO573nihbN16yThYHs6R2U1scwV7kdswTp7d8\nnWirbnb+rSIwd+4B0ZW453Znd06PJD5Aopw22RjaSpP6+jK/mzI12lbt0ahU\nuPv5\r\n=tZvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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 component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/menu-surface":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_3.0.0-alpha.1_1560366155409_0.6746050432919577","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/menu","version":"3.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6ab5d4e2ce73ee60a1a204cb63d72ce52b499b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.0.0.tgz","fileCount":34,"integrity":"sha512-RHkJV50OyTVnijPTD75TNXPQc+kiDuHDqdYnCcG/b4lWPglFZ/OBOoK6CKDIe3yghhoEcBX/BI2sg59E1fBfmA==","signatures":[{"sig":"MEUCIAbM/+Kv+/2uD7hhjo4pGkC/NcvV341j8Fo1GcdnJGtNAiEAyoR7mqXuayAXOuNW+Ag9yDEsJMROod4iWyNdhGmhNXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":879981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/8CRA9TVsSAnZWagAAYaYQAJlOubm/ZwHjeEVXtdcH\n/25QXGSd2+XRQBGN575KH/Q9u6Pj2QDVnpC9ds50pM6rjrRHxkmCDlZOUxkj\nvpt1gMNuruFb0pj88phsEWfhuWosGHMxIPJ/nSTVOGd/Od88sySV1VyU3jpF\nWpIj1pHYThuIPHCaJfqtFGQr+WbgMSoxo3yiCFN7WIwq+KWwRgPuMI1wVXx3\nkWo115fTM6hXgE8L5143/SIuLML6TvuA2/SRNP7EGyvV1xctuDpc9DMDgB3/\nFsiF2EtZSuPTc3e92LoKOU8XKKlmeAHXfUeo3GrsdlDtNWJO1QUvh+fw9/BV\n9z7qvb9o4uWThxDxPf5tKiSo/ArUCZDdvgQLwQ468NHknS0/v6JNGI+rSXjS\nHQdMZHi0f4kKtcQWj24IPCSY+KWkluvWtaC15A48CoFtIPwq3nlNUqn6epOm\nbjC2y811FJZ1lFRkZ5UAdzX6FTh76jI6xV0h87/Fl3nDIniIKbOkTcPA5gja\nkuHBWaIAmO+xUFTN0gja4vvjxg2+m58EjwHP2AGTU41fZM74ovJbzDgX9wIJ\nZ1VRi1qVwiOeYUcKPXkukJb4CsgARY+Xx8v7SZe2+GBGR3nD6XsQfpTUt0A9\nq6/5m7DqpLw3sPo5OulZXiEVvDnKZRtLYP8rsvH3JS+DlbTue9PH4IWoiYRi\n4NWU\r\n=C2r9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/list":"^3.0.0","@material/ripple":"^3.0.0","@material/menu-surface":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_3.0.0_1561501692070_0.5542584763537839","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/menu","version":"3.1.0-alpha.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.1.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8013614be1482df5a6647a5366f635f6bdf93b46","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.1.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-g3Zie0XamfxvlZkebrezprncHptDv7l3btKILrgOEzx/W8HFN+QM5/guM8IQsDRr716hmgntcYaw+TFjSbUumQ==","signatures":[{"sig":"MEUCIQCAcjJAWdMBjhF1PSLYMQXFPv/GubtL9oECM1m60TZlNQIgXiJiAiezv4M+nxHm3NfJdUp1AlenhaP0ymC+kGMrfn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdE6CRA9TVsSAnZWagAAabMQAILp9JEk4gNGxzExl7/h\n4p5XFjYpHsRDows8FPB/304Vs1OZHbm4MCiw7C62WiYRd43QC1XpNyWW//k5\ntACe/utseL9WSZq+tEfPTA1bZRHl/WMAylY8dztrzQecuBl+atrbC3cnnssR\nRj7DfRY4Wf5uXyKvxmEUsMR7PBVamkPCw6GF5ekT6N+Ax7luBtoatqh3YOL6\nXMg9X/eL+iRc2urtaw7gmJYXYjaTyEnGoM0rOuyDM/h3E6ccpDVqjVvVOvc2\nfPP8evN79359Sxex4HpydVn9wBZAA5CgnDlCdvagJFK1tZEfUEmjRyAXpttP\n1YzoAHHgIll9SfOnYg9JHj1l+pv5RIcwkeZVLVDvF6sA/xpUMpFojZSlTUMa\nwZ2TfpSptrsKVpZb4AzOim87Q64qVWY5VV6N2DzJtlh8JAOS7B7ZyV4olFF2\nx/DBblHjEizeIOnQB1qqho/kRSV0lzoBNALqselToj+Cn5WYdnPiKXLoKrcw\nuNQBjratmbayZvzrjgOjK0BDWJr5mvw4o7ljJof8RlQUEQNPkzrx+tYWZ2gU\nB3xMLB1wdFynjEmFVXq0letL0/BdbCN9HgHOaOr2vKx81kvZa220F2GM4sHG\nUYFfrL9GxaUiZec2iL8i5SiTFI+o0Iflnaoz5fOWiv7F3hoFst0HuMgwnP69\nB27m\r\n=h3mW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/list":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/menu-surface":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_3.1.0-alpha.0_1563283770135_0.8900254727132253","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/menu","version":"3.1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c2c2a5e934538b7b9f1121a91475eba75924ce4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.1.0.tgz","fileCount":33,"integrity":"sha512-FPtxmiIHShgQNgoea2JIntjcyC9bmNxaf8pWncoehn3buFTWO+GOf434GHNt39NJXYG4Tw/SzPbFsLnYYARsHg==","signatures":[{"sig":"MEUCIA2uEWXton+ljTuRVWwGK7B04W6N+2kavBZbZmqvyQbuAiEAk+F0haslpMNeAUow+UMqnlZkIpJej+KlDYcmw6ywe1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKVCRA9TVsSAnZWagAAU2IQAJIwsRNRaAz//fEwJcn5\nE9Hu+XaoXinLNTyyLuUe7ZJfTrirSZ0RGiDJOKHw0ExiNe62Yl+jJeb57F79\nJleMXadmpa13IYO1V1w+JkwMzMqWh8LHM8sHFJC+uzJqt/74chZChVLnXMBN\nDAdfhwZZI+dyoLK2gmyhwPD8UoAz8SqhpcfD3ZqZg3qvtyIytIvQ+I/ucCmt\nzxZnoqSwHhoL66c1y7cWSI1TwNA988I1DznIAHOmovf7SWtfH6FrEM34v3zA\nMyGexpFkiAK/K3q8H/zMmY6DDhV2X0cu2A5sOgi3jTO96PjYDuk2MT1pPPzY\nAUJRmdOonJ1CKZj1BuCKpFPKmz36/0B7EJNAUh36X1M8EE/w2teKslaoacSf\nPQSRJxdknXtNfedy+SzDT/6vUXOcBR4JXLkcojeu9xv/Fq6mwYz2O9m7Rror\nBiMYIYrRdEywC/jtKS1mKPV5bAntpCbQxys3qZMqbGQqptH9P1tnmKHSv7pP\n2gOFCi8lrHlKyx+iiRKD+dszyg2ZeyzzpQVKWU5RvVdzbdGeM21BmoDayNIl\nEzb4yOuzB3b0PHsLxt3+XSKOWjHSF6bGMI5QG9SAA7G4YLR0sc2fCY2NwM06\nWX9Fkm9/dPeM1lW8EVMCMpZB1SLICYt410+4T/Y65hV8YsWHdJSEBl6P3y/t\ncNrL\r\n=fKii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/list":"^3.1.0","@material/ripple":"^3.1.0","@material/menu-surface":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_3.1.0_1563832980639_0.853339048552141","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/menu","version":"4.0.0-alpha.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd3956e11aa5fdb99a5115179acba4bc83e40f51","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-oV0JeJdnjrLdzssOSchwu112aRGT49vRvjyXjM1dOQviwe0iIuXrLwAa31ge5dA3S5CWQdtZOO2I3THhPWRZYg==","signatures":[{"sig":"MEUCIEuwRwER2UcMQ3//uYT18Q6biiarL5JR5VMmFOHOSc5eAiEAnN9I4xQhMIxqqgbNuKHfH+NDBff+1wbLWc56W08SL7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4pCRA9TVsSAnZWagAAHmUP/jBGot3VXhqwT16eQ5TY\nyhrwPllrssG2uH2hFD15mtTPEXXHRu00JXw4fyLqMA2iXyJ3LoY9HIdKrZwN\nF3tUROcInBLB5WH3G6lu2CeGe34FW/xrm9WGW23ZUUYFEcGC068wCE09U+Vh\nJrBgTAS4thAZiKccVKJVmXrhGybO2/pAeZCvpKtzBN1IGqxikMouST/eBrZr\nimlNKaU33rHOkph4C8iQuRT8vxy7qWXdMabfVA1mTCYlOmIaeVQIJ8+QgxHu\nG8U2Bv/Xe/TFkisF9jze9jg+RBUdvuD68YzQuCkwkzFjhUWpja2hGZIbUhTv\nlkl7q7VXBVfLqJoWZSlwmG8w45DghF+1optS5peKIIRfTzHulrA0PxJe04y1\nRLIUW3MWZNIvq2ORvZVrrwB5ArxU3iggNg67rkDaZ/9j9RpYJHlPiNB6/kQ0\ntVFPx2cghJGEmiCRD8akHKZVP46JH4vGYfq9z6uFM6rCl9OZgnyZyvnRPocN\ncBHSHgCRISGrMXfIXKdAdMUAPpHHJHcMQlWVf6oE0L1O6xS9RIKYpnpPPGun\nVwvESNNfUjMvUjBHt9uvwnOOBdBBQHHzv1HV4d6R0Nq4pvmd6+Dbp20mGV54\nvETYFOS7+7EjfmZXmNYEf3jWS9AsQrz2NOcPKtYHp97QKf5krdJf42WKSkoD\nwXUM\r\n=ts7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/list":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/menu-surface":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-alpha.0_1565212200936_0.6160069000084714","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/menu","version":"4.0.0-canary.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd0e055bf69ec0853e9cc8cda6081d8cfcd3dda0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.0.tgz","fileCount":33,"integrity":"sha512-RHkdYf8ijvgwkG9YjSjeoqpC0gVztRsreGQOuX2wX/BBMGj5f3dSOrIE2+OZcVqBcfmsvw2LYwvlRgW1in9X5A==","signatures":[{"sig":"MEUCIQCCVUYD0OxP8VgKQg8WIV1fl3UaAxxVu+ZmMv8vC7jQoQIgJJ/OBz4sdC7JsNmAhdSD4c900UHpqUlW3X4TNFg8I0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJE3CRA9TVsSAnZWagAAAhkP/0kVHIVLyU8J3k8ZUtkR\nouMtdAlTM12qhF15Nz9/5QQW7qb3NM9G2tlv0R/QAOYSkCw0pynPC5tFlWWS\nJdPbL173NSlYIjaeLtIJNxgLj64eboDYY0gJ2Y8ud+j8GvkByUHTt5RPGoAr\n7vTDXxXRyHya7KMFwoMFQQSTKl6nu+88sCNrSOyXDZMmoKQS/Rjhv+gf9KOp\n/HO50+6yANB7HBWLPacw6oLWz3z9nuR9VxMpK0DEbuVUr0PB+u6LrC00b/Z0\ni+u2PDxRFvkjyPeQ8jMg01WZ5TES2/hErBTOcnmYQKiopUf6L19LursBpOBt\nxoF1ZmU3OkDbho2TEMLoFYVfqOF+oJ78+2ouJAz01f3lu3FL9kuHrKBPo0RC\nWr2bvXbEbJ5eulgk9amLXE+0UX0NkvlEuQ+9Ss5DRKb/m6Eq+xdsYDUNhJ85\nAp3lob4IN2IK7Etd26fCj4OyN0k3Vyec9g0EhPThr/CrRFjjhPRrg+Gbo3VY\nvEWQ6DflrnjftUWHxWupDcwAYDkkuyxLNxJjpmCSj35mBIPzUY5b3GBD26LH\n0EDhEsteDuGmieFxFRVtMSTE18XofW/h9naLIq2nfHcnrGW0tBdAM/RTUwIr\n9dxDks+V6ZI8eZibsEKhh7BgA3jkNCGmKQHLUhDXxr4TgpUtR1bz9yEWFiSx\nkke7\r\n=HypN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/list":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/menu-surface":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.0_1567658294492_0.8800168236211268","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/menu","version":"4.0.0-canary.1","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1088a64a40502c792fcd39dd7b9154b268edef0f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.1.tgz","fileCount":33,"integrity":"sha512-LCmLYNQ2H1WEYp/SneF2KKwEMRrGPzzgDmzUuyZ8Mr2H+c2WFonbwDsGQ8t1TG6o6dMujKkXcMelg52JKh3//A==","signatures":[{"sig":"MEUCIETecsdpnpR1WOYHSx/Lx0RDREpSxpyCx4EwFzD3B8V2AiEA4FokmgyHXBmWgTtZDvyb14G+oleuyWFN0KEcdwfwKmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQ2CRA9TVsSAnZWagAAapoP+wXHK/UJz1xYiteuE7pd\nzQ6dGAV8RzAG99+48h39GpGjDPmCI1ixMrDsyCHs/GjR0mvHx9n6HPF0Fsvw\njsv60Fveio726SkiW0j53LyWGGRyRzWcJ0UR2mYYlDtAGosROg3lmfGuO4Mm\nlvgKfPu/nxO6EDIeBSylTacjfSvS8FwF02/49CNZ2RDMfRZ+rCujrg09sOT0\n7N6Pz3Ggrfd4mV4MazeKXJDsYUHeiAeXwwI3yQGZ8Xv0N7k6qaoS3i1v5LNA\nTHPK1o3L//BHSQNDIrhM0dyEnMl3b/K0ZpbdCAnqhZNUlZtlDlO7Yni/8a/b\nXTbVJG4Zwq97+dMYZiLdUohng8y4PnRxuiBgw/fAZYjyrVr5rAYpDBJUkFRq\n6gOl7mPLGg8IOWVD4z0luokIOWmUDFC3vE+hW3eBcGIACpEsINCJszLoXcm2\nNdMMF7R7VsNrhAarXqyohAyGxqRltJNpBSp2lXYP2kIEtd97jx8ptkWx5LW8\nzCRiOu5Y1e7sbzr6T29zVHeAdTIJ0CzESTW4w9NNKWToGRPGXGsk4mwV7haJ\nodWl6T6bYyopGUWZld0aWsuuwz8Lf/IHuNjLGeXqf5Tj5SRFFlNylA6xbboT\notDghRT9onplHmZ3/6rDAgNC545Ik6yG//3ndkKLBnpTmC9ppETY5CUkoskA\nS4pL\r\n=+JQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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\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":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/list":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/menu-surface":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.1_1568060469236_0.9976515325454596","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/menu","version":"3.2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a34a22f7a97f91d0703ea10f323d9c9d9ce541d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-3.2.0.tgz","fileCount":33,"integrity":"sha512-UGCSKp1WTAYN/LmPbZGA9uU9Cz6iF+zi32BhgJ7aeLOLW5L5KMvtE0VBO4LciznpK9paxnghww1kiN5W1k+CoA==","signatures":[{"sig":"MEYCIQCwrsnyRWkfZ6AxFzP8aqyldyienB/uXRORXyGfMm9mhQIhAKU+u6V5gD0qs1S6lPA9Urk4EYiGcCcUtK5A6N+cahQT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder52CRA9TVsSAnZWagAA0UcP/i9dd9tAbOC9zehQF++n\n5DoZfQXZGrvJtqFQZB1oJNMi5CE9FrBtgDTLxcecr5PtPQtVDgchVEDhmskV\naGq99OnwoTg8cmb/bAk5Gz2G7vZZEu78khoFyVklMHnnH+LNKLabqNueVOtA\nLVyqUWovXa9if03OnO1EymdfVKIzkgrHjxiPSHB1sqxqUu6DJaTK3jbr7xJY\nJATqWsD/rUUsKswkxq/7QWe4MI3o42ClqqSkUR1wdWUtJT1u3y/wAK2UwSSZ\nkvfdpampyE5+EYmmpXoh4YOq+PUojitg/Y4lAeOuAsqLW5jqRk1T1Wj2tivF\nqkGFIXY5dG+rfL7qjzh1g8DvjxwAjIXvr6dFQ7CAxpuu8MoX40lIdrk/Y4g/\nDjlPMXfX3DfjidLlFS970/i3irekwhnvBvX1X1iauKDCQe2dIHMMMnkv5Q6E\n1OA0xCSn1lI3EKRMRNjXyeGZuGKmOOftQgn1CIwAmlHzsQHnJYI9z9NumzpA\ny97XG9dbwM3FWuSk/3bVrWtjfiJCWfNDfuhFXoDyvByReo4zJ2pjxndRYhGf\nzMBFkOl2FGofHG56EqRqtUuxlyTr+NqbNxieTmhxNkPGgQvv2WQGhoRxzwyr\nVz5B2K3Zs78Mb9nfD98VgSjEqr1s5KzJG2JVUlkQwCQZO6mP6ZHndgRrx0kg\nRHK/\r\n=0BFU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/list":"^3.2.0","@material/ripple":"^3.2.0","@material/menu-surface":"^3.2.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_3.2.0_1568325237730_0.7087829084516668","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/menu","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c7070a57224d65e3c8366810f5bd99d24bb884e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.79d881baf.0.tgz","fileCount":33,"integrity":"sha512-SovTkC44lsLNEk4alhPt+4Ih5c1AbclgqO5qs5eBIVDkIp9lghPyPdrZzAaDiyEs2SowWjpGOVOfx49HQpydyQ==","signatures":[{"sig":"MEUCIQD+1dnPjQFSFoPt0GRF/jw+N1J/DvOqoXoLTZFQ/CjHRQIgZMxMBnWB0XHTbO5yN1XyIW9EOuq4nkmXpQgN9yIzkPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev1GCRA9TVsSAnZWagAAFdUP/0qUxf0QwYgUq+kZrPGH\nZis/MDas2AzHKpyMe/TZoESwNbxhW8BJGsWHNlFmMXbYjuc9M4H560MzuMvE\nXxEVIobMoyDBqwIOnjL92uIvCoBiQgjbz9Su42uKLiYpw4gzodix6r2CffmR\nqfB1zJsofUQSBftJ1gYiU6u4UZbBdSjFFw0sjQaDebOVs9uWfoXVgw8PAb0C\nCsD2jtFmuE3BXvh5wbIKEJi0zwRQuX4Qm1iA+S7m/AwhZMK1Sy1uptdKK8GQ\ne2RK7xso/XKtvlPeCI17+bFmxZtEY4N8MPNYLYyDyP0/VKFSzdztgcCIsr6/\nXF0lNDba79+d7rU5eYujHdapsznd0MwdjAwUSogzd7TvPwEnZBEpizl9uy5w\nimWl77A6kwhUCN/lH8p6rLoVPJrHyAjGTlekyh6MF1QUKzFjAOFjKBNeC/Un\n0wG9uWnvNj72xGjEIjGii4fzSMBZPvMfr7Fi8rZ6mKuExEUj4f+oy9FrxO5H\nsxU3ogCcQrS0TkHJB7fNTPej+mp2MqYRfa6st0gp1+4fRBOo9GulHCOgkmMx\nbCTK3UGMNNMgrHVFyVKhxjFSbDLmMBkglMQJZ5/Nhfd4KrwBbkriKHNtZj4a\nZrso6Q+N3ntxI9n+LRaOrSuNSzeHlodIeoljg9W0iRokvOHYnMBD6yU5e/5Z\nbcqz\r\n=v/+A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/list":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/menu-surface":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.79d881baf.0_1568341317506_0.8060189436414331","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/menu","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1be4f0dc6ef27924c6794e1f7f7eb0b5ccfba017","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.e851d4f40.0.tgz","fileCount":33,"integrity":"sha512-SCzY19KgAgAAqPgc+W26XFZEFN4+IAoXbiZPycrIdjtcxVcGWdegs6Lj4aOsTYBLSqAnBCidH17JAqXKT8/PXw==","signatures":[{"sig":"MEUCIHCo7tj+9nfdtSSorrUP7ieXGBZETzwQW02iHtWEu/7QAiEAsk54i7hSK5I/pzTok0M8JwoOWouXgMSR9JqcLfz7VVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYQCRA9TVsSAnZWagAAxHMP/3rDAjy4fqHhCMsvpyy+\nZmFjJt9DQCtSq1AUuw9IabrQJ6q30eUEm29TfacIxnhCB4eHcM7WAtY4458z\n4zWRNuzneDBIDSQWMwXx/h/rH2+6ctMptJuWfQLAtH3j3fdwU11/2LBYYKXZ\n7XNfpd3EEWW+t2spj8eWsu4O3FcfvZSvRkB/A92RY39ps6rcfr5nY+CBlpBf\nbULN14GxjVktGVk7TPg21pLqaQBBiluV6LTpNy/T3ch4CR3v5pExVtRo6XFW\nx0ZUShuxNtxp8QPjjGWYNeATZ9NzKWd6igM6Urs768MjZci1d4N5YUp+mQxz\nTDDoSm0BISDPFziUXE2R7Q/ESQGkeehyBdX7d6C6pkfigfznk87ISCiGaVx7\nibVZCdAhYRkz0DVhsAuRYgMsnKvCLC+m6N2mJDM/9ZlOvZB6Z6sBxt124Yib\nBxQ4YUnXtZyvv+lKB0cOBKbvXfT2HoeShYX+ve0SmF/lzwf6ocVtAOa5DteT\neG+RcDxalirD6XkdhbSxyGrRGfXIvkq30NTCMO6SqTYHkm69BQnPhzuPCyAd\ninWumbjBEG1oEcmKRqL+7ps/YgUxLEhGLqiPqtFg/juAC9pOF05aMiZWBzhA\n98g5cQSeZ1eO/Gq7aYMvqgPGmGzVHrCIrc6Pdovno+FFGkvtn6wAj6Wm4ZnJ\nOdNO\r\n=5vM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/list":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/menu-surface":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.e851d4f40.0_1568347663779_0.7160017997364465","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/menu","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79ef7c5d5d02a660fec4d7fa6470c1b9ea58fd19","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.905884690.0.tgz","fileCount":33,"integrity":"sha512-mdanXO+sghs9K1SnqxfaBtbHkcVBGycubwCpnLs3w3sbWfg3BVlHstTXq7/D2tdC50OUxg5qOVDJNo1//KGwGw==","signatures":[{"sig":"MEQCIC+qOhSFa4oeD0Yx5XZmCf+fp7tIB7D1YYEIHay/sEVgAiApZ8RVbhXt9HKWf/YCdF54WJNXoaPN7QIkaqCGWuozqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9SCRA9TVsSAnZWagAAPJ4P/2yTWbzKjoP6TnlxU/UJ\nIqG5X5QyaOfD7zKQNCaUBKGauMHp/E3TC8HnJvQ+RZb6L48vP1aIf7iURlFW\nam1KYkDxQG8DuBd4WlzhVJHnjycKlIjmusF6aOA0WErSRdm/BI05xqSDPFJH\nPXFXqqKTR6H9BuqgfpZtTJcOOxYPeovoPD4gcRbZkKt+V0FZJWTwi0yLnQED\n6sD6QwSx67dtz4kXbpzkvtIgTG77pYskGW/NnAE5ADC+Gu3Fv4Bg6licT/H7\n+QXMlUIBOywDJIOTFgN0tNU6fBBpXwxitjSMapz2yLv1H94U7rqDt8CTN09X\nPQR3FPHNHJNftyqF4AuTECdP/eNVGCeHcoEU199JtldY5jBkJL5et9TbcnK6\n0LkTJPfhcEqGfUhOhudrrl2FQ76y2/YZHgEV96TarH8ToAwv56ZGe0NxErnI\nMg096wwYfmUy7rRhlapU5zA5N7VvbZpFxJdbtQJDQjUsxtwPrhdwjn1OVvp8\n0F4eejlrwQVEEJcToWNnxKWa8pKCEWLsMpr1SU+dzxF7vBSKJBvXLuAuDCXf\nSHj+zkbaALsbel2l0aW8G3/qWMlRipgVl9U4usjF4Q1nOsKnNM9OUEW3qcA1\nsiepvAT3tdF6nW1Qp6HjVILFvc4r+T68oKo48JlmyfSgNCbh/Thoe6NByHK1\n50rl\r\n=9RjD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/list":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/menu-surface":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.905884690.0_1568677713839_0.9631367060863225","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/menu","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8920eec33f860487b8f932c376d39af7fb866bf7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.199534d61.0.tgz","fileCount":33,"integrity":"sha512-7MqV8mBxLIGUiOv0/bCL3nydvirn8jvj6TfCcPeF06fxu9AMrZbzEC5BcCWtnuP0OuWAAJPyrdCESrYxc5JdTg==","signatures":[{"sig":"MEUCIQCCXQ87L8qOfhjPnh2Y4K6BWvllQzolBVdRQknPRirj4AIgKlxRi8sicgqZbAFYW2nCl/W0y+quGmnnoqR057MadQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":527018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvOCRA9TVsSAnZWagAAV/gP/jl1w/9OwUiXUsaJVjqf\ngXnPNF+ixOA41MgGgsHznj4GEwJnYVQYpEMUlmJk9AnFz9JqSuVyf3h9b2vN\nzwKEb6IclUUQJsW14HfhXsWzBvwF92QkwiSrzs9VeweUy3jdQggQuYgY1C6E\nuwbGO9pTM3xN2CxC6uAcXL+x/i/NyyimLz86Bg1cACmVp+ejqsi3uVIiEk3z\nlZKXTh5nsrfzaa5aGydZbP4GwoT0OZNJq70QpmX6A9ln8xbKC8bactlxlv2f\ny+m2t33MNFjITezbsM9QFBtoGWBy2LDeVrOEcJvVzBbuwFOZCzseDoKqi5+t\n//kaPRzcc2fArkMVJVtxPlYGGELeshzUxqFR1+5qjEpQJL6LpZJxyglJjIS4\nktP9vTKmqWUZdAyEmf2Ir2MhkFhJNROhcMEdCw/e7acQip0Ei8QHBnc/agjX\nIXZeFjuPOUw1G7jOpRl9OlYeRL0xVA4iIWoH/DFQTxXiOek5HsPuhMNRyGBy\nF7CjprSksOp3eDmRPZOhhYSe/UiPS9ijnZyOfP1SB2K+W9jgHAAnlPk8Gnau\nYERv535CBWDR4rFh+V4QHUAYq1P0MFpj8Z3c6ozcXqGasgXp2SbmjCiZ1b9Q\nqydOdRFD6G0RE1nYfBMNzUUN7eR+tqWvlv10MN8n5ncHHc7Fvj047aDW89RX\nBBb0\r\n=STsU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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: 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`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\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":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/list":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/menu-surface":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.199534d61.0_1569610701602_0.6812627888702065","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/menu","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7f8970c6c07b4c7b050dc04e4be69be171df8a0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":33,"integrity":"sha512-ZtVY3XMB6o1we/FkvwRy3wz/Ekgt5jy7lVV028hrjv5UPhE+dbFMOKzCdJXRpn9kKZPpdwOk9e8L+ScqFTxZFA==","signatures":[{"sig":"MEQCIGnjEkHjCPz6RByGNCpUOBPG+MCBq2PuXKqwdpYz6IXxAiA6F3b7NK4uIiTbXeyDc2UjFCCrPbvdHg9lSykmTfF9+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":527524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphahCRA9TVsSAnZWagAAD7UP/3beBHbxNK2tgMofyeQe\n5KQ02wTIAJjoNMk5Ytru8eOSP8/U5H1pz5FOsGsI835YvLgkVlYpb8tcwpaB\nkZaRhls3oUMAN+V1NIxJL1GYDlFtIyHh3mk9DdEluEO3vaDdZsnFFUQuVAUW\nOBzxDC+adhteYLdxSAZhvlkureC0Chev9s2tB17IMa6QTFbviw7b7cFKyirS\nQRuD7EnnDDpzs4knkQUT1AWwITpfH0QV1+Fhc7s9vocMf4AVlp3+9hk+EfpD\ncGvpQxGhOJWff5wS7sjVlnoAba8FBWCLYQvQlVWEtUPq5fknLPbTSvE/AEph\ntTJZllFpVMb5Hqql1ZhWQiG5+Cx50aD6Sds8ONfd2ocZfnodtf/RTbmiXPqp\nxMZbDcCb0B7x+tXmAU2tzsAvUwr7rLINGxxMAVYFYdgNd4/UCCBLJ0LeCaXg\n2tjLJcrr+Q3/5gVkrrirQjsk+FViQDwqe8sIKJ2xmkkj5NXPfB04xNDsSKcI\nWdQ6zKzFDkc0lti9NrA3WAdtftTBwE8dqCXUnc4pHrY4L+hpcM5RhehYdL5o\nOWjBLf4ac8L6fExttyQ60DtMhTaFxddLLUWfPsTfK7YsBvK5JMK0J+TauPHL\nPcMkVXIVAMuj3TuzLYNJnqL/oG1OYgyyJpU2vDTNaY2j1EakBCUVt69NFFrj\nYf4K\r\n=xYfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/list":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/menu-surface":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.22d7ad2fb.0_1571165856900_0.3221492881888621","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/menu","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eb16faf86ff50f09a54b3555e74907af0193c27","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.735147131.0.tgz","fileCount":33,"integrity":"sha512-EpbUS56jC/MtshC2Mty9KVoQjNlWJQZ43MPNWqVGOTExcoxExk5oK2lTduoe3Cb8dEq/yjsFtNOSi1E99elPDw==","signatures":[{"sig":"MEQCIF0ZW3sPDkp0WDeN8Wj/m4j98UhkT9EZhT2JjJziKREqAiBJvmQexF8T9h0sIoLRodsLprwnYR5Bzzf6d3yNyMNQ2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEvCRA9TVsSAnZWagAA4e4P/AwMo8tH2LGVCiiuiSSs\nCbaCmcT57Jm3C5Fy5xoT7/hnWuPdY0ZjvktM5SY5dYOm1ZYcLwyYPCTJm1y2\nHE6WWhxsM+ATe2O3xzmOuBnLkZPe6r/L5DEtwDh2Kew6zY/eNw3YS/3GLjP3\nQ5S082Px+Bdkv0FeOjfJyl5zeNlYvQ8pp51eFRpjJOozQLpBmpdVYmBhCqFL\nf7pa9BrmvG5XQlWlnUKGuwM/f4QulW0YxWP9CwpdzwMh0kOE+Iey5PNN8dbB\nRpFJp3SNdVnYAKIiv4B9hJRrF/PCWYKDc0f9QzaXecVDegAP45YfmErejMQy\nqRlR0jrRsGZKnhSh2CenNt57W+uifunDvx7wo/tXeDx6+EXu+i0odrkqr/Ws\noP5qsDYGVqEMEXX2DcHIOZEyudVPfV0/FesAvRJrXPSi1JVMOVB55vEVAP4j\nJnPhnXxczjKRnRTPV0ysx1Q+3LS8Y/aS38LvSCRD65O4czhy2Ctcex5t9JhT\nGySbL14mpbVIxbEyXkxjN1BVQFXYMPEVI0z2bEqbJkL+MUL/nKKjCrDyv6sT\nCeKXJF2Crs/fgzge8Kcn9RfkI1/VQhyfJTUdKNcG1uX+O2QZzdUdacO3Y7QM\n8Cp575x8ohI9KWJRmMro5CZmxD9oPh/yI6KaxDUFFWTO9R5HtJ9H6VTIaJVC\nO3Ct\r\n=Enm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/list":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/menu-surface":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.735147131.0_1571189039440_0.7701376022197193","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/menu","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c0a2f9f6324ac594e12fca2f6fcc1639b46f8a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.062ade5c0.0.tgz","fileCount":33,"integrity":"sha512-POFlzn/qxbI6Nek7NFqqv+yEqVnScLayAHnOBZBq6pYbi7owUfCwuNpI9whRLgHhL9vAy75QWpBoOVKr8v0CDA==","signatures":[{"sig":"MEUCIEgY9me30cQNUOmeAQ9O9biwsjPoYnxNrbuMPT9KuWL7AiEAqGUIB0c00kv4cmrCQ/Fl0z4H3HGbM5+f4DIf4E3oO4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72ICRA9TVsSAnZWagAAuQAP/iDRpltCre1/n8sZvqkN\nc9X4FeclbWVYOABfMiyvvjZXkbQ6DQo2oQhvO2j2EfbSp7jBSLuBm0OWIUU5\nld5zd+pRGEZO44SN1XgbMiOyWROdUSDKiOd0gOrJTzOc9CnrINHBP7KCdxya\neg53UNo/oDI89IK0JNNNWqiFR5FQ7JfrrS3jeG0Gc9y88151L07meB9nPUCv\nZD6xpsPS5CQdb1+Rrfs/O3OtSeH0cltfZEe3i8mmtoaUyyrJFkP3viUm3jnf\nYqF6BGWOyq3G++FQaWe/FiAPA8bzFHpQCfc82rW3QJeLTeZ1nrCzIJykdSMy\nvtTLZ56wNmCEnR7v7/0c+axXMNuhiDtWMjtXU3eNVYP11aA66wFUEPHI80yE\nGSkUr3hbVgK5rjKi34BFATI570htCpP3VB0KPk4zo6u7vI/DB67I04gM51lA\nDqnimMbi2wXpc+w3sBVh5Zp++qKD5dT5DLxnTt5pamt2lsUooKftFbVMYgbN\nXx7h1XkZwDePkZRf4O3FWhba6n4vlH6Oeu/Rim7rIkY6Ixm2vVe3/wlEVl7B\nrorYjVSOXNcsmEoNkt81vWdu2JjGclAtJ73m0pafQs0it7L3a+t+y8CVbxyZ\nGntLWcoryps6w7IuyNUbuKMgH5lOW6UemOakplxOXkg9hN+6jULSZEyoMxge\noZv1\r\n=bdo+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/list":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/menu-surface":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.062ade5c0.0_1571274120354_0.4691667689059409","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/menu","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05ab986e84f8ffed55c943b7d9d0d64768f394cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.774ad4f8.0.tgz","fileCount":33,"integrity":"sha512-SeyGJ9ST1EqyRgltux+r++iBPXOM0ta0ZCgenw+ndZjC5u9adfQ1LrSbR1hKKt5mAfhCSKgIu6AhL8kjoF32Tw==","signatures":[{"sig":"MEYCIQCOOCDvqJdEUBoxbHrk7DDk6JU/D1C95iD6ngnNI+TUYwIhAOm7t4PQDKzT4/YySIrNPJDkdM0zZwkbstThlt/Jbt1Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+h/CRA9TVsSAnZWagAATgEQAIFPTI/InJGNYG620MDt\nmYG1ZA+T/qweppS4PXixkfEaM2m+t26BHfZ43IsQ3G/COmLoRPzwmpAAMmdw\ngWaLh7bHUkG4nef1QACT/fuRb9u1qiNt9gQZP7vNNdRDGng5y7izvva0NZ8o\nrG9xJ15UOO8tKXM0pl5fSZgBm6lQLsRQjGDasqMt+s/byUJuCR4ugGj9vQfQ\nSMoT8t84dEWcv8yp6RafL8lKVZwl71NI/6H2BYtwhs5ffUjni55IWMCIQjS+\nCdjWK+HDc2RMcQtksXN/ftmwfQ88AmSdzbByf/JNFjXTX5WLFhYNI9d+5TSV\n0lTKi8zkOGGWBOzHY0C31c1ymUUCiS3AFo8CXseyICj5ME78mtMcmIhkCtt/\nGUhTTQs/BRKAqi3YSrLMkHQiNigSbTL59K8U9XUN6HvwuwgM5+KUVikTlhVA\nNQu5BUVKGaQRRZD7nkIuyYtg/jCXfhvydO4qRJXxNQwm6Ia1H6AdyRSb3ieU\nK36eI3OmkaITlROsiUjBwAC8M5yZP/XNJz9kA/PgawOPPfkQ7JmJ6770j3WB\nHcElEZ/FpHvmWP2gBcqTz6NeL4q2qCWzD5Rat7q3qWg34SjM8V9eDkCBeIhG\nhOZmUTyc1BzEgkQ5uVCUrhmq9/5oZfZqST8/RuHax+wpGuaSPNEymiLJZWs1\neSFz\r\n=CiyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/list":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/menu-surface":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.774ad4f8.0_1571285118705_0.6567766550687684","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/menu","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0590ac0d9e3251035451f62a84cd116155507e30","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.5916d18c.0.tgz","fileCount":33,"integrity":"sha512-AIsK1PyNDNJ2zLM5hCfXIhLPnYdnz0HC1T/BOAkypcjC96MUd7JQv0uwxprndgGlJuq1r0JcZuSCb9GbRwYM4A==","signatures":[{"sig":"MEQCIEusPIsb1A0u7LidAufj2ooM2ClaWV9HfJ8y/ukVVlSAAiAc3eDd0TjLPZXDgzZR3z2lZuHBzrPziwdDE58gwhm1/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvyCRA9TVsSAnZWagAA5VAP/2t0iBPlaRT8Z44kzXEn\n1QoiPxpWxPdbbbkIZSZ3BGNLp6HdrogjVbh6Qptb8UaC1iAH9bvaTIiJ46uq\nbaNGpS15JJsdp3mbnGZLk10vUX+AAuvk9LXlBpb9FFXZelbAFk7UoOoQdGYK\nSCI0LdPJ1igIICOA9/gvcc9qKE2t/pkKcYRwLxKGEx3GiFUGWutWi/eHDLaM\nCP9P0lVEAVQcagNhsmgIFoW/NUkCWCjSUEShHvw5+hVlWyNTsP7437XXqpmm\nAYmZca4ZEWVJ5qQDFb6oaVB0hKGku1J1rsquCSf9k78GJmdXA6blAOixdGQJ\nNEdjhVdhA2B+x9Zw/Tft6wYMdZP2Nk8krmNKLJGg/NCojhIJ+MiGCCSHH1aX\nwV5HyG1d/OYmxA7DG7wYDG6FZoOSNU1eXzGB4x3iO/l1ftclHnvNyEk3Q/6F\nXbFRDQA+k4itH/mrPs7SDGKxbc51UwCTq3RcVy5vp3YkPSKQiKu6HjeTad62\nmsTzTdyaSuJOaYGfO13DIMMNUQxQ0nGltpcBI292ktkWuZaUpj/x056ynFDF\n0N8L8+FwElzn74A4bvHx8KeY6ZcJkYKK6ys8BX6dEK994trfIDA+jdku6HcS\n72iBUvNsq1LOl/yYCzESA8I0C+Gw6gsLjtAQBSpkVClnDIXMmZ4BzY9TxG+A\nrKCX\r\n=ianB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/list":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/menu-surface":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.5916d18c.0_1571429361513_0.5491807724618722","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/menu","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ce0b2ee64ffa41e63be208857988648a71189d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.d4141c95.0.tgz","fileCount":33,"integrity":"sha512-rgrJHmOTX+LfODJxIU4K7Xzpe5LmU2/nNPguGlT0xYr8G2w6hjQH5Vrm/hoQDoujOT5rhufmkItM+diQ7TDAVw==","signatures":[{"sig":"MEQCICxmnAUhdyFl27SenynOIlMHf2hko1V1vjKThpyQOH37AiBPCsWW7LRbHh/TIgyUVS1055T+f/D970PAcSgnnLfu9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCzCRA9TVsSAnZWagAAelsP/igYoxedBzt/azL0JJU5\ni16ntxtAwI/KRbJ9PK2b9NkafxAwV8aPCEYT3MLGEHahDnNrcYkg1UiOTvo0\ncFc9rpfa15+hHg7z+cTMdawOqjpngyOadaQ4tXuTeNOyCn9uHB4RV8tC7JIK\naD8BjzQhswC1cbuO5pbzCSgd7RDH39UFjcxbz5zZznMWBCIfhVsQtO3NgIIW\nPTr6gBbuh8SrMX2pNlajmvRwDWaDy1Sil4pylu8964UxffxxzQ1Scvr+NNxY\nN4NlPrt7A3Pun47zqH26uI2A36ItEunCo1DsT8FWsxOzs4/mxVUogr+QBFwV\nKFALt5uSF+iMS2rps7Uw8vm0RAvY8978VJ8EgYQ/xQlO6hyt+Pt+gogEx2vB\nyAIRq1AwAmUaSZ1tezAjRLaeTfCtssVQsne7dJjOv9+VXE9YmfzsuvFiYyjS\npGnkopdJUYIUTi92gCcmmNclNnwUErMQsL1kMvFOx7l5+jmaC8REV22GXvSi\n8dOPVC0QnsquOGEVTvhQTPszNXDFQSjnSwoDilTMdPNyaOhPjVelJnXDGFem\nj6dOXVCxoChHlnqq3wstIDMRcuCj3XBi/3YI8kkOR8XtZTUtgtifqdUikSdC\nHRyyLrZ2U8ivgL/zCLhXB83ROj6PCeoV+Q/HDantenS72zQky4v2G+Ql9ZbU\nzyvf\r\n=L+Pe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/list":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/menu-surface":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.d4141c95.0_1571881139263_0.3687536717649882","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/menu","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"949dc243fa2cf724dd69ddd9b363a66245e78530","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.2b878b3e.0.tgz","fileCount":33,"integrity":"sha512-MhW8HP0m/ob6dgR8drgJOFmvnlgOq1B5SJAT+clQ1Nue/IbXnGsGeFLSkg/ZIOkcD9G5GqO3fHTMz6S+Qhe7vA==","signatures":[{"sig":"MEQCIApBIelhmiIDZa24eEzrojN9LhtDCcKpnAerf4/FspAPAiBYlDWGziDYFDf6tt46BqRIG3nC/ATwQFf/pzY2ks6C3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnVCRA9TVsSAnZWagAAmJUP+wfDeXItynUXE6FChMuP\npjCM4iyRRckq1kYWSVW7kw+AXGNy5iVJfOfxC2paaCW16FJYhaaDtsWls/19\ntMkBDA3BnMOUS4a6oJZENRW6JZOqU8nca38VA44SkjzaG1bY4IYdQ6oAA7sA\n+MoqNbvFESVnu137yWtTVGQDAOH7SeixvQHPw3jGRwrGoQqNATgvWzpLh0fD\nP+s4TKvKlUOSZsxZYxSm/OIC0BitcQUBo+k2j/mNoF0i+tGIU7YgXTYz7sNn\nvcb+SYy1a3BVGkPHx8KyamJbB856ZECUy/b5LKBzZucdRq8j17XHzcnlhtXk\ndBIlIkAw/m/jg/V9BWqYuVTEs2+2pvyFa68rqXELQ+B1xoLvLe/ABNVul6WP\nx36ddx2C+Krk6FZ1EcO4Eg/gGGcseRI42iHZdYeQRnjqs2rx4Jq8Osn6PR+b\n4OA5EG2y0UPIS+Szbvj79AuQ1zHD0ljkJc840SiVAp/FooNuEqMniVG+gh69\nnEUb6dr9HP5JTWL/EA/5KMA0TTQr55eAow/XO0vot2/3my4Equf9+Srp9pKw\n0GYeadjmwv8bUwqcGdbvcnB9zKAKimE4mqZ0p573tGYsYqa/0/4vbzs1pchN\nU4X7rhdMY3bblWdLeRTOwD3eINvfePXAIZ4rzZQMoJVutyp6jeKPAs/0XW7R\nqmhL\r\n=DFlT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/list":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/menu-surface":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.2b878b3e.0_1571969492637_0.4130882891515535","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/menu","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71e960443c5716b22d8cd1f50ab669a7bcad2b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.b06c0efe.0.tgz","fileCount":33,"integrity":"sha512-/vNXf6ZmMDktp8NJogTEG0MLFPLw54hxqJf2zI85OOH1zGf06Gd+2BbV5gK1R8MpLy+jqz8uuiLu70KFoCrSIg==","signatures":[{"sig":"MEYCIQDkNMFrOZyPgTv4Gq7pDNBUOirPhtPz9t/nbYeI3PAOnAIhANNHwcPcNzue+cpJfbKWHrP9Edslu53IVK/TVmGqkjQ1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6L0CRA9TVsSAnZWagAALgoP/2SC//+LYS7C0IRHGDcH\nB3w1ovPTvtV77iX5gGo+Qf4dd5e5N0xIFOcsdJzRVPxhUmGnP5vRAyu++g8n\nWYXGjT5/3+OcqAi9IQpFjgovQrXS/KnQXdyBZLqLDOwG2RrETBlQvPo6C72v\nJXTmX4g9aRt/9SbjyF+mpvFWv6tidLNJnldKxMs0KMPkAYspKFaFG1VDnOtv\nO0awo65s/sktljZEvFwNAImNVnu9VdSoY2rjUH3Je+IEKF0//xs/LlUjiW1w\nnTe6uB6ghVdqlQtPf2MJszw2rWR3nbrTluK29PMWNjN46DuSNrx4b3Iy4IIK\npu2dDvMc13XDeE+r9uxdCKghBTnCo9mMEaNX+AVeW0D5zxjKOaWKBd35j7La\nFrQbzhEAN8AxIooatQPdxzGewzvkHbE8YlsmcicIAWDA4AfqqI9a4qRNwjbq\nbjOXN9CcM7KjfBFyE8e8QHi4QipdXR7mK0V3JMvB8yYrcv/TuuZIKiA5/cv0\ndpRaWWeVvZxWWtE0lxSl+Hpaxmoe5pIYscZrlnVdNxMLQ9QFpwhqhVoHj96M\nN811vzsy2RQUyzj3BLtCwLjpvZrdp03//v9wZyrSsDPfyC0KdriU8b3u90Xf\nV8ZZFROmRfMnTxwGhThd7OIXASzHPlHF2EjdqYbqxzlHQXgiW+DCkgt7GOyf\nmUxB\r\n=4d/C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/list":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/menu-surface":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.b06c0efe.0_1572053747900_0.22755636567157222","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/menu","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81194a4d2fdfca6edcc9af56ac565c7feaabe51f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.01628efa.0.tgz","fileCount":33,"integrity":"sha512-AnlWGVWPBYILzO92pfH6Kc0YqZhZY9Ue7WDtYItMcNW3CCy5GIyaUG8bKtFkYF2XWNm/OiwV1al9pwtBSN04KQ==","signatures":[{"sig":"MEQCICeYcv4v7XmcfkucBZjIUazyr7buITtdxEVxtpmW4J7XAiAIyHOwcyfsqGS6UFfF5pDo8IrpB//xUJ+pdDX7vMHDeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HkCRA9TVsSAnZWagAATq8QAJqy0HH0l1qjVhXY5wVs\nqhMqaUvKitZs65P0gDefWI9aqGLyQ26ZutIpg4vFeW/3gSaMbODy6zcDfSED\nGbKgrUHjsDJvMvCUatSMnDglWSLGLPv7AUygZCdVCM2lQfMlvjrJ+lTKpzr7\nSX6kSUUzz1HukDs74weZxFFSxz+OXD6awLk6vFumXytlgTje4Gryi9Oqzglt\nJ2kiXgWuECkjBtE/LLF3EIX1iyTqBLw3Q0pzvRS7Q6UPShH2Fui4qY4ygqvj\nIRb9KuPaQkrsC0fotvjKpk+d/Ogij2omW/shWAF6YIECp3zeBPnFrr+mSZLx\npeue2SAKlMq+G1fLuaCTLOQHfY44s9brg2hgORclNDQqEpRVfDx/lfArredV\nh7RW6w9Et/XYjp1GCO6FPJwo/MOlpS80JZo8JAzHLQ7Y5/Khv1rWBW7iQFEh\n6Su0/coWYGLzBl3TPDnJ25PN8JzD5QJsuz55xqsjdtWSSe3hZ6WoStFk7YCU\nwTJ/DzVv5Lp18YqRdGH0IH86Y8MrzeE3npNuw9fbzPk6BAF1c1K4mTZElwZ3\nGzJBv9kL3a67jaW0VjeizNJrbLOxIrtJ0E37G6nfXjT2xvjLfckoLb94oudT\nuqCKoYzAv9AjUS5hzUhyQV8Ci/yHergc59ugBtuxhdNmPom30lHkN+Gc7EB9\n9A3Y\r\n=ZMOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/list":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/menu-surface":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.01628efa.0_1572307427859_0.5537443697042379","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/menu","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcb82dfd780163e2d2605acdcebc30c70145d321","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.b5c6d66b.0.tgz","fileCount":33,"integrity":"sha512-phbRkezvmMXAAqb0kcHMuuxdl0N1sHlq+079uRY3WMnv5yK+wHxwGgZ8UeZknMUL+EFwbkga1IJqxM7w4lec5w==","signatures":[{"sig":"MEYCIQDCdCWrN+tkH0xZ3TiQ0K6P1iYyARa02HAllNXbT2xSTwIhAPqIXpGvo/E0NmvoDh7+FLtCS405DK/cqeNQQL0wl+am","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2SCRA9TVsSAnZWagAAwagP/0gZj1osQWusVIB09VeM\nETDtl4Z/9dfuTSqElHp1XjMpwg/5SQ3V5/jbnp08+rJwkq4CmvQQQ+huSGbf\n3JuDXNy08dWbQwV/cH1Z2IuknHFYpYs0ktQzTEpIxKkyCCjdQxf7z9Aw7wgD\nntscahjRffk5Y8NEvhUM68CEsCFcl/4jqdsJAd5StBXZrJ+ZBV6dxcPgnpJF\nG2WBzlfXfUNELyk0xqF2sFm733ANcK0D/CHGDYd5U8XeEABBVQgmtPEMIYI7\nMDAEs/sp/WuP7X77uHfnRUIWWWBCgXz3tefkNPb9Wq1TNtC4PaTm2O8HPIkS\ndsy652PgloCV4CoCNnLlvQUWgZTNZFlNLUkVDnwUBjtwcSnjI/98+sylIGpz\noZT7jhAYFe1/zPIbCWCAJ5HMInb3/iK1S3B0lLEOYmTypDo3T5DQ2t0NfWFe\nYzDfcRO+43MFMZQjZA+i0xJZdu9ezzZ+tjnKE6TdjPdUe67+peVpPvGgXOTT\nhwJzwvaxp2oviLlbSWPAheJVZGJcFv8ghQc7cALB7go41JObngz+uXjGhbtb\nUD9Dc48gG1EwPO/GbzvKX2FhRN1OvWoD72Rq77ClSppTmQPgyuvNe+qNklGH\n4LiCIX7zQ3DgvXkVYt0AYtqcL7/o2DdImncpTQIRJjoNLm0Zo+H6rQ3G3ytg\ngXDX\r\n=7+5o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/list":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/menu-surface":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.b5c6d66b.0_1572371857846_0.28542983810915046","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/menu","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c6e8e71212bb4db7c3f759b6deada2fde781257","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.cdf858ea.0.tgz","fileCount":33,"integrity":"sha512-Ht5yc0CwSNpM91X2Fcmue17Py/rY9Z9a1iJSDq/jbWBYPD262GJjkt3eX0yNqqhgTCiiEgHrrezUAozsXRR0qQ==","signatures":[{"sig":"MEUCIQCWYJeVaOpRM7aSKDWQibr2yM9MveqjcImuJ2GrlDdANgIgSjW4Uy3YRzOiatrou9V4BYpCU6h1QCP0VKJyJklGVQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHKHCRA9TVsSAnZWagAAwEUP/3s2Ci3xcHctmi538BUy\nVYE1yMdXDmvyikCTfyWvXi8uSCN2sX7we8GT2NC2wLOZQ7aerAm6Nx5eKyJ3\nsZEW3mxKB6DcGXaDehe6coHamg2NmZukykzEWou6yuSiXs1EgsN9IDdpH4ZL\n/XafZ7txU0YiUhSHGaVPRxpo+8cPfy+Z9qb1DhyFElHRjKt/A055vNkGxv+G\nYc0vqn2IM7yl7S0nnTFgdOM/hvXh6WjdrRKQ9WosnSyCwlSzEDJfqg3mADJI\nmdQTvgo7DwbzIoTTeG5EcprKKF/e0p2F6V1OOjca/gV3ogXLibKqZp3Hdje3\nnd2B+V1TREUqV0v/EFy/QNfg3aTCh1dgveD7UTyvFIjcbSK19QjDKX3EZtrE\nMwfIu9sdQyqPcLQAD+ht/bFwNcgRAt/x69ySF8RluUH0Fz1mjMyYhUjqCwvT\nXWZYidmOpKoCwekNATwecXWNRCux5iCnH9vfJhz/8HsyoCRY7Y2LE1O4qKgg\ndY6WZF0//LdQVaime+0l4H0kDIckHCZNzANurrF81ZuxXWWpzhMAl6H64HVM\n1ZTjC7H+1b5ya5hQSw2ob2VlT07kMQXDNDjtbRI04ZtQEYdAAwuRo8cy7JLG\ntpSz0pKAHrQwEZrwnoAj3cczfXe79nd12sFUTjxkgoSPkj2eIlfnMuQ6ucph\nYqFm\r\n=0zEF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/list":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/menu-surface":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.cdf858ea.0_1572631175000_0.973803603111336","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/menu","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59c4980d915c463126f63eaad01399cc7bafcecc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.719b57e1.0.tgz","fileCount":33,"integrity":"sha512-iZ3NqMB7uB0enCH8r8Y45OI4De1WNSXRok1QYLSMgT14fBU/m4qS3GgX3FcbXpqZ/cdhOLXUWtm/tSXR2hWEfw==","signatures":[{"sig":"MEUCIQDC2Gg4LvV57KB38Tik8kZ4rwhEIV+oVTaBbR3YbKq2oQIgWucuLjnWA2ncZuD8F9YhNDq1p+VZmkqcmPUNh1NBhl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9KCRA9TVsSAnZWagAAGIMP/3CRkurEq70OqrWJZxDG\na26siwNc9bkGUFZ4D/HkZjOk8g/7I79p0vGJn3OeZgJthj01Ho+cQRhQtbRy\nASsj3q/wJNp+Fnli2kin1cm/9fQ02tPhi5232dTA4deT8BEVUiIKvq/Ub/Df\n35XaBALnmrrHO+mY8r2Cn1U3wO9rZ+GfmhF+ncW9vYe+rJHnp5VayBhB01SZ\nC2GqipPOcVPhOCXaKw619p+vWaEM0mA0AmpLRzbDbAy5rqcx5Kust4uUX6Qf\nzoAkas5MURnI8CP0EcG1tfJVtcD3UpcpgVwcZaXqvKwKj0S1Qp7PR326NxyG\ns88KpofHCW2Rc2hF8X/x2HEZIOtytro1inQTvtkbXSOoX8QDUoB6BUbC6/q0\nxho+OVQKNV3U3ZXU0jqSStWo5mhHIFWI1hsFb2JUNh+DZ079Zjtc6AcEQpp2\njQt82FM1E8G2ftK484rKC0BqyjUIjU0BTL/MxylYB6Q0vIDu2dAywc0mYAUg\nRtrUMoB8eXGYuj7pUI4dDQzv728zxAfKVbOf+i7CcCpvg7s2/XFxbPyBvtiW\nqLmlC6EtpvtpIO/dI+ftbTvSjfUuVPlGvVNTyzqj026fBdQFuleWIReC1/Su\n1LRXMCrt6XGtpd9JmK4/3Lj/nUKwYWztBp13ZqlMnA0fwJTc2UqqAlbeBVZ+\ntlQ0\r\n=dl/C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/list":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/menu-surface":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.719b57e1.0_1572638537652_0.7025093170492205","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/menu","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e131ba2a1e16560fed79c0a5372aded6e588b3ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.97cbbdc2.0.tgz","fileCount":33,"integrity":"sha512-N6UpeWUs364SUwfRNhR9sdH/qgekXd050vbqWtvet7hzKk3IE1dDZ5R19TZVBoD/nEtd7PDMmhW+Go7GYOOy4w==","signatures":[{"sig":"MEUCIH8CidJBUHe2JqP9pXQCsISV6YExbtiJLqRqipYoFXDQAiEA7n21jHz3ighx9JzJb6sRsOi2TDSIrFn/z41LIz9AVGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJXECRA9TVsSAnZWagAAOIcP/29jRDMt96L2LmHS7SEq\n2g1R7h8/jiWXlMxFpo63SxnKtIDolfoCJE62KnWWJT03klFimzv9lddYU/LA\n5gVTYmuMTePTRYrEheofqNGl4XoNjojY+OM1W2a7nG7LSYx1URr7bKgp1TgE\nhQsVdx+z5XsqFgra9GHt3ouFPV+Dtw0n4cpqziQfiaopFsK4VZq+M50lvZyW\nraME0XmYsgO9n34eZ2zse1mpR3FSOEsJz79lm8BMZT9thT5Z09uaQZJLIJ2i\naLqvwmjQ1JI9NALNCpdn2KVQRXtfXrMeE77R0yUUHKdFxHTSc41doqU2qNNg\nFUVtsxRZU83KhosfYORi5FB/12XIBnjts4mIdsCqN8CeU3KyPlDumX0gdpSJ\niEWZsMlWsFtnLpP9SuwcpUdJLFQftl6WH3Cv/ct974X+5AslOgkCxxw+2lQ8\nIil3kfQfEcTqzI9tgxeB/ZzOTB2T2Yht2e5PefFv2EuIT6G70v7ORXjKB6ia\neDxwPk0N1jYKcTyeUc9E7e5WYBfNFRIid1Nwoqgn/62T2zf5DGcd1ziYEQf9\norxMjNJ5uNts8wp3UyBC1JaqGq2JRPeX0zk6uPfoc5PKJcH0ky5lIQl66Zpj\ng8dYtQM1XwcuGzh3FxTi6m3wj0DcA9BOSkS5iAumUQQkpoiGNqW3Ed3zj+lz\nNy30\r\n=QCnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/list":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/menu-surface":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.97cbbdc2.0_1572640195755_0.9669089714325909","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/menu","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b1e834031125e9efa795448ebdac28043540e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.8e36b3b7.0.tgz","fileCount":33,"integrity":"sha512-+AcuREMT1MybqfELLCotCAfmDOHL8KlI3jgWkKpWxuY4WuVJTbHQ2j7y33NGnj3laEYME3wt6rAg4VQN4ejhoA==","signatures":[{"sig":"MEYCIQDoDnjmBxbt8N/QCFmKYcrncgfKWr8lkWRRddPjjpFGqgIhAPg5uK1Yb0jMwF20h21W0Q5rnX43gHRK5VnqhAV7N5gX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1VCRA9TVsSAnZWagAAbUIQAIYIy9DBtllCAmqCRamR\nZ0gC3hl9CinsaCro8wvP1lmRv7cNbWYIpt4MMOyeDBQia457yg5Ku4N2/dHA\nGKcQLlHEd5QiUfWm1qofzd0kPBmDizP1WCdCEa3qNvULkJKKVGDgidE14lV8\neilUGBnLcS0TruS/Q42i8J3tmp13NYmpGMlZ+Ig1clFuD1QglsIV0q/zTF/b\nLP0h5lIDDWnkTJwopldXoOizP4BCqpic7zX5tVYmD33Ok+UF7p0yQ9r5SgE2\nG/t6VvTqf11AtmbpEotcg4o8TcBqaJdigb6zhBoAechkUXhK/c4uYijknwsz\nPpYiM8xP3CBAWIP2tSSFe1NK38q6uqiqd5s2bpNIrPxbvbOa3dIl4dlxGp/5\naHfakb4x3eMa5awEluZrsaKhjgdDLWijhytC6QpT1AkYLKPiWTnRfcMF6jTk\nkwRcmCDOqVVtXnAAsmE8sNLJZ4+BXWGXlvUps+OfPbL+XmRNMoTP5Zq/Egi8\ntYopTLTe2hvS2gtovcZW/+4Spwd2zyZMbWfdyDGsHR6w9Ov4e+zwAHmh9i+C\n/A4wtH8MB0QTyoem2fwQsxl0KRTDHRW2dZOK3RkA4vJ2j5IenEEZNB7ob153\nz3+gCeytax3ELCfOOxPXlXGFgtVcK8P6pikwPbeKS2mvpW4ofb11hsi1oPNz\nR//M\r\n=FmQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/list":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/menu-surface":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.8e36b3b7.0_1572642133210_0.8030382884742158","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/menu","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a7ea0a60da7cd542f3adb91585e8c504be63cd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0-canary.62d3a09b.0.tgz","fileCount":33,"integrity":"sha512-L2+zDpZ/GTEhUjmYngiFSZg5UpKCLhylZKgSCrzYHZaD/jGvtLjSNhxJw3ccEEpqvNdDJpb/qqAW68jZkUxkzw==","signatures":[{"sig":"MEUCIQCJ0vlH0s5wsp10GRMDt2wmNTfeMcZw6PD6c0hmRA2UpQIgbO9rDOJ32mkYNYmYHjA8MefaRfXdy3p9hA4E9IBgrpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ+HCRA9TVsSAnZWagAAj88QAJpiBDhgyFbpcbtYuoHz\njL8Af20l4N7Qj2IxzKFqyKrK/e/el8AXrHhGyfcT/2oZdjVunqyQByDEetvO\nWD5x+FFWtdSgKsgVjh4Ur9VUc9Q12sVGJZbrPI5205/TVv824f81EF78EYMk\nsFkbUEaS6NGmLKYmJuEuFiA2ZnMZBIzpxd1VhgOEKkQ5M26iLZiA1HoUvIvy\n3MZQUKbcZZLeRiCHHZOMUGJ/yQeJnZjGgGAYnp6xbWYsWbw1R6wfP7wTGyCH\n7sQIGnLn1/cjFvHFUCMTiqVn1axNNeX8ktY0UWYJqagp4qyFqiEtyRMWLafz\ntwDzAmSV7nVjGxPAXCpnowLgTege5ydO9Zaz9K92Gz2EeXo8fhskC6fkylss\nE2c9GQiymXBGMbyoTZrnLzAiC6IBINCwvyeH1XKFp5CZyFU30v3RGVzTEjDe\nkD23bgv5nEyIFRBNoRyQwlidbKGJLSTIbqKKj7WDOwWaw7C7B/PhRoJnGoSt\n35NZhYeFoxHqyy+0Yrzc8oiu6PCaovQ5N2AEXCjFFdaUQtKISCA2uN/8Hx71\ngVSZDbhPFYjVq3WNiDuLifT9WemmYP3gdk1OOuN2LGhB1aB5b5RN12UiVfB7\nhQkfB7CHqFRMz5A7LaimBijOh5IQwlqfFv9AxhdOMXWia4+/HynVy2dFYYtO\nM8mt\r\n=sbRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/list":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/menu-surface":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0-canary.62d3a09b.0_1572642694852_0.04724518280211365","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/menu","version":"4.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"febe9194892daea9dd2504a2a38bafc5c76864c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-4.0.0.tgz","fileCount":33,"integrity":"sha512-jI8ImB/TXWUi8V0ymdmnnnrJOrJ8oTFcBI1VZ0FcL/5/pMvSeTGjxbJs44/5ZxSbaIAPr2r5K5/r9ZRZPdbNWA==","signatures":[{"sig":"MEYCIQC7jjgwWrefAMo8daQ600oOegA9g8v8uunQxxwwk863TQIhAOpQokWaMigWc/tSWXYX4ZJPIuf24uJki3bxesM4G8oF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcb4CRA9TVsSAnZWagAADgIP+gO/1gDHy/YDOTKG820H\nOY+9lERWoTqALjMIA+N4awS/rL9VdA8uAy9nsebQUqiZHGZLAFATL0+FQV9H\nhwzExKsekD3N9OWbzw7Q8q0am0tCNKAmY/z21/oN/m1semtzlBQeYHhZw74j\nOOx03xhm2vUXv03qFwoyvcM9e/G4uag5OLJ1aCmyWHROBt7IxJEimmsTUJmz\nZ77f+FFABKZXt1eCT/uI0k7OUA8lqaBJPM+YfJSf4SB6luaFLDpMU7Y2egRI\nqdOjZqjp92NJhntH1W+n5hSvykkKwPslRPhe7VPXys1BDnOjW22hYQiLm8S9\n8BetTDgUW8zoS8+XsTH7IRl3Sy1c1mGIMvTEKLwxU4J95Bk+G0/vTDuCCT3l\nDuZuysmg7sQ5/k0s1uiid8qykq8XLzfId+eoxZn+trAf2BMk1X+YsxKZBpT5\nUGjfLg1cS+GtlDqClhmfbn3ms14bzXW+HBmXHDiPJUugMXR7yxoNiXEsGwVU\ncl3WXe7uH2U7RBcBUuay7Llg+EfMThlJtVIBP2cjFIBajsrpW+P8W5Gs7FLv\nFZPUcLwrn6GeP5ekTYK3TDftKK8c+tH2gKqprrGEkz9mME71w3Q4bl/VoREs\nHI3nbUUNJZHMMtob5ztk+gtVH0iTn2TrD5onPYsZVcwYC9/rkYBi5BO7gOkJ\nD8sQ\r\n=AszZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/list":"^4.0.0","@material/ripple":"^4.0.0","@material/menu-surface":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_4.0.0_1572718328100_0.7072922933507644","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/menu","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcf6ddb21f3f941d2d0ab3a14a39b5702a5bb996","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b5eb51e94.0.tgz","fileCount":33,"integrity":"sha512-XBbWMMnzsuB/TbprbWuBDoEWpsNF3N1soO6Kpnx/KOVmJrCIDhJ6NjQOb8CNUzc1MEVYz5M/a8wWR9mNrhQ+IA==","signatures":[{"sig":"MEUCIGJH2xj3LduHFwkANzxXSkf+5DO7Z+QvYkKEaPRjQgPuAiEAqu3qCLOyr9JEPVlWFhuc8fE+MJdrui9nGH7GW/oD4GQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGO0CRA9TVsSAnZWagAAiy4P/3IlNzqnWB4bVivxBmZG\nnXhq7PtGE9Os1FGlDqaVCxRxeLEFA7QNPI0RlznWdIV8BM5lLZAtBunxUQWm\nGM4Q7GXpukC1cE0hkQv83Tov31CkUWq6PJfTrdwTX5Mt3D6zicQ16sQKvcRr\nxTK3dloGgQElaMHqVNZVm430d4Z5CqHkIz4uDigkp9hz0BCKTOpPNQgdNdf+\nfRUhMVLjCbVcoiduliiTAyX6VHe1VLlzKl6ZZilnpwsDnZoSXVYyriqbqzEd\nh1OooQqU8RzSHj2iKIvTEAVQeBEKVzQd4WzzT2LznOGYSTIrzzqzdWlyovST\nQ0QNVbMRTDUKMkPD9QlbFFMs+fMLHiKwBcjDyBxWCBnUHwfKwt7Od8UAngff\nMl2UubVhmoMyu7P3bLIfGqYeZ6ljk+ova9HXM+93RLiXF095MFiwzqnATlmY\nYsu2SvQhiWzV9qAYtGi+smE0tZz7cXUE4wcTlbKrnHnSSNJqxvO//2xvKgyP\n2MyxUBtOnrrvL2R4zHL3rUtk6eQqcPgj1IJ/D3fHV5s9BZmS/Mvcu/N/rShj\nOyKM4zSL+xY7lJJUzW6hZ2daXVFVqTMpSTkAP3ddVqfUEnCtRkSUw94a1M2E\nfn8uF7S3FSzy5kzJQQ6+8Y9Wiz1KJObk3lCbXlFzCyU6HyxImLAC5OqKtcKa\nPHBd\r\n=Yaw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/list":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/menu-surface":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b5eb51e94.0_1573151668404_0.39148679587162705","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/menu","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cd25dfcacea3917e888d6b7b40a9173cd73f244","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.58500806e.0.tgz","fileCount":33,"integrity":"sha512-gI9hERMAzwG/5cXdJY1CzdMzM7oYXxM/aQ0eBTYNl//GSiDej7j/4VlfBtPh+fFolefaGHv9FpsvJvzPyIeUEw==","signatures":[{"sig":"MEYCIQCoYqUBE0xl2OmaC+yCnS1186ocr7RjtVsgZYwndUXdGAIhAPMnH0eEzJGtTMvcvzmCfwkV2brpI8Q4RRTP6TXgbsrr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYt7CRA9TVsSAnZWagAA2McP/AwOZksrNGrHnWJNQa4u\n91iOMC+sd5866o5w/jWUW00EYVsmxcVdOkaNoVzICM6SmkY054Xzuka8MiUS\nX+0OAlzxrhwmNYuz4TIIEAjSJYy59oM/EGsKNVdaNMYPJ/2apbTy40/Cz5IG\nTRlLX02bR4SVcB3jA3nHevdU4OStB+NVGfXoyYfWp3K+MemLdR/SNbOTtwsz\nYg0Ce5ND+RhptmUlx3IxTmC78yZuzmXrQ4SHF5G0CUJfF+W0J6+oHYVjS212\nzJfA+Rm8AACWTyP6hFwpWg+1NBaqP4BvTtzINf52TRk20OCudeRB0n32+MOQ\n3fu3vqZwf9LZ7jCZbr8mqW5OtE47HV+4wAPeWcGLC2O8N8JLQ/RQSBXMFXZl\nVDHvLuCMZowcAiohjI5tY5fagjIiTnr0G28yJP98xtw4uaIpbWOm7bAA97Ne\nFkGeVjB5U4XgVBkjC0RtVbGSPHEOZ52al80vz1+EsMi5i12A1nLAsMI83OIK\nB8bgim4o7WN+NdtM2HInbsuaEzhcTQM0oaSzXUZigBxlGJeg36tHLHkBAZK6\nNqLLDSvaBemw47eP+uR0iGuWWakMAmo652wJHGCmvaHeahiY17v5vRP7L3BB\nODs8AwraruWJ709Pfc05HpndJmnJRiVcxwrcnIPMjmtJD1sQXVACPchKBEgf\n9KEC\r\n=62Se\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/list":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/menu-surface":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.58500806e.0_1573227387099_0.41336057471563725","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/menu","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"057c389176d0228341cf5ca4073530b7f89b85df","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.66299b646.0.tgz","fileCount":33,"integrity":"sha512-BbQEuNqHHfCUaxjgmC583MaeoJbbcSzAOdn60PNgUG64aVufsu6UtroyfIUib8L0fbF5XgoG1YnlulGMCqGgmQ==","signatures":[{"sig":"MEQCIDiT5L1u7SgyPZ2tjNo5oyP/b8/PUhMD/a8W5ue0/m0CAiAdfikTLL06087n15eW4VY5+rel8QzCiYI/p5jO3fYBtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFTCRA9TVsSAnZWagAA9YEQAI1qlyfzu2nkja9Hv+1M\nx5OTUpRyw7y00SKRjf5g/tmTUYBs8xVDeyViQ9pzhnciVj2d1T2sIklOXrbF\nM9ZktTE926HclyMO9J4cITUUVE+sG+rpqB5MPn3f0nHRUaKifX5YCH1q+xd1\nLvqA8HMVV78F+3gQn9Ze73xKeHkwwdpYDUcMZpqhNNa+Yp6KorUwk6rmzKHN\nJrAOrN93FMAoqvEvm/tam4ujjxnU7oevorVvyiNxnw/Gt2Sg1AyyKez60I30\nxce9LpGdv21RA5g4YZrT/HrnpWxLTZNlCsIHBO+Qe6H7ijrXdoLkK4wc+g4L\n6FK9TgbUmRBHolVgP45E7lWrxT83ueCQZ9YCXXU1talyZUsLFjC8O5Awa99P\nFuxHnelidiCEpaoKPnmYTe6NkfB7I/3WXXrxIpd/6J4ouUJ0nIHe07fSSyHI\nZo34yRwRazRbs7Mrxg6eC1EcOzEVZT+/MbdBuubzpmCtVaaydNhVmV61ihfs\n4XGvi/FOmIrpbywPyp6j4jcZ51/L3Mk3qwZLge2ZcHYSmMGUEzpPH9rVbfIc\nNKkk9HmPwuA1VvRZe8bOZ7SVaEK1LK3EcFLpbcXLIZFUNVZWfdrpW5gj0Jdi\nNxYPUHNfOjsZn3jqM54ghaPxwQjcFNLB+uWlDAY1Wyep4tgbLRoRf8Si/fDH\nm/sZ\r\n=6gd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/list":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/menu-surface":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.66299b646.0_1573245266665_0.5887758109096928","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/menu","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea21e4490f0a643bb0f510df5c3cfdf9fb8d2115","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.821871e04.0.tgz","fileCount":33,"integrity":"sha512-9tI/thuRm+eXlwRptPoDx+FVNpoMMnFwZH/aW6eqKqdMtNCVABUbzOUM51kjO5rvCihpAXNXnCD4Tnf9VI4PPA==","signatures":[{"sig":"MEQCIAF6CcZ5B20lFxyncSUeNG4Xpuz3MEqbiMHHvZlBsX8KAiB79EP8xJqA6rLx2mBLVX/p6bGmAS1f7WyzWouEd1yf+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4YCRA9TVsSAnZWagAArFgP/3IPrxJ5DUStWzMuylps\n/rL5SxdDJ7m3swK8J30Jlq6sbG4sxOZU3nmVoBcQZmMXLbyeelPUBh8qoDia\n9dzfV6psOhZ99475mRvzze/KiNDkHXPf3tnI20pcnHEZS/a6bpKCpn2zzPAV\npy0Ml7SIlJ0zyEfIRi1YPRqmq5zqDeF1ub7Mpr7EUJrRkeR+qOiAugZGFlGN\ni0yRt549hwluhQFMl3N4/AwoXIwPfMcsStey2BDt/rtvK0ys+sbUXfHCzmyn\nkqZpDe0mRGulBYeEjIIWZ6lWg1H+Y5aDxWKO27MCtMo2wtmY9Lxh/dVXH6ml\nNGS4oi7IQjgYg6UL76RwZqggDNT4gW1BcwgCSXIRgytdyfPmdmcKc5Lr6Ycn\nLMJUMGg1HODCqwjZDOKJAPlldC0aovsQA48+JkJ7Xd7O5T3X++yBHiZiK1zq\nwY5SNM2V9EQpYS3E6/3CPV+5I/M7nyk7z8OuGa4jCEgFaI0vr5rWRn6WQvzB\nqUhhfjWZMhBQnLG4oYjK5a6dltzjC5+YgRS/ivxmx8OKyYORWBwX2iuKEmiE\nPcBet3NvciTc0Wb6eJ23qteM5cJv96ry3RM6IjQS/Fl+J4tI8korzw6ZRaju\nRq5g5ZvjTSTteHlxwtilX1+3Ub04C7c61lYZVouwys36ozO5vIeUt3XSshGH\nSUoz\r\n=SWSj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/list":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/menu-surface":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.821871e04.0_1573248536291_0.31273586128092457","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/menu","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f02b3e9cc0c4852a417049312edc1f968546992","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.491fddc31.0.tgz","fileCount":33,"integrity":"sha512-P/rMi/4GyhMgL6pAiNQgy1LqXSxlD1p3Eiz0x08joQbh7+ax8kAJGfKi1g+GVGdt8pJOOZn0QHFcrFrqsEsFNA==","signatures":[{"sig":"MEQCIHni27tIydwLjd8eWyzf+JHtCKLO6dlW4/e4CBsP0xPdAiBhvEMI9L/RIP1eTj6RoexIGW0VZK+PQcVRBH9P9T+HIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxec/CRA9TVsSAnZWagAA1sMP/1Ijd9pOVABSEsneBJ1W\n1da4BHzXqAbaDxenWd1U96a9fnGLac7JcP8l9LnnYJeAEeSsPXit/J1Ner/H\nyWbHyjiBPTUwrYrbM+oLZxagC0y1FkfGUeI+q4dEHabUF9FdCrMp+0JrOxDZ\n9bk6yWse2VXIFE8aHtBmgvJhzYqph3CF4b5YGkuO2UuMccH6JZq1v94z9/Ml\n/Xxmi9II5i6z2rAWVlc/yWY101J23sGYurod1PRLvrGH2cpuBk+KCdDNchT3\njYrGl6GR2fJth0XvWdQGWSw0qegalAweaGsAvLpbDHoPqNbJ/4cVKdgKRzmK\nQxvUYFCLc70vYh9dJQCyMs9SYtoQ/f2Ctfz5BgatT8HrewFqU0KI2WNH4mQ9\nUFhDh+NrmzYP9rqfZIfhhTxxF1rvY629GZM/mpyMajoqfZBrNZZoAIC0a6XF\nHyQ0qJe+QkzFR6LfcYFak7vN1MVIFj+SuF7vhqhBgKxV9FCaJQNuo9CTFCrZ\no6g3qnnCGu9XlxNAmTIz9nbzoB72nxJV3mz8TPJ9gVbmCdsbcciyTmycLuzk\nuXPPgZmByDa+GVjaIvsaXnSfUbodAVRIbYEAFge97HgLY6n4oQ/maSul7YmH\nEcZaOs3468Mt0RvheRTPPXnHTfGCjl5/N4ZJl8wvhcEHlAo1aCouIcpAfeJh\n54nu\r\n=zYBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/list":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/menu-surface":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.491fddc31.0_1573250878743_0.8137563803168635","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/menu","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7162b9e890da31293eabf0e51053c4a7a156fd1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b0cecf145.0.tgz","fileCount":33,"integrity":"sha512-kLAkcsWTg4BBvJCKUMZkNtUzDck8NTY4bF0mk300JbzPUoKeM1an0455yPdbUl0p8NkJ5axzTXLGxJYqnkej3Q==","signatures":[{"sig":"MEYCIQDU99yY802L4IeojviKoxln6vl2udbvlA3pLXnA82G8wQIhAMcJ0vMhz+YVjtdBnpG62SqWwy5VJqSmxysaGlpG2K9p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwi4CRA9TVsSAnZWagAAZecQAJtpZ2nONzLt02rordU5\n6vxE+CXvJEmFQ5gTFTjDRz0doNFPdZDndGlI+MSqLSc/CU0USclJjOMahu7z\nf9QG+uWmuhiSLeBYQ/l+qSFXxkduVS/e5Mwe0+OXswkVj/LxMQBFmrq4a5sI\njyzrYA8fsH3tt+sEmrqBNaPF2+hgPWKf2KhmHxiSkd8AamLyXbVebvp8koju\nLOhTNb8QSuV4dtPrIkIBeRaK1CcglkJTWDA/e7LrWFpc6sLPnrBTKyQjZiWc\nw0ixwUqgqR5TMwvKAwc3XnWxk78tR8H20bgcIC+Yrk3ouzXegSxfksTZfSjK\nKygbukdU9JJPJhlq48V42+L4JJRUpfngT8L/L5ObVesiJ+Ll1y/hErLoNDHZ\njYiAeH9Rmgo9QoIzMTULf0TYxFE7eVNqVrHqEErR0OBeIMAFCgwD6dp8DJXZ\nE3f3PHFxzFSqhRRYnOmFYhCYqY2cwzy57cPJXPYz4IapYNUoz5Vffqvb7kBr\nBQYgOV7AdmlgoI4+aVyg4wspPOMtN1xO3sPba8H1+gJ10PVLI4dD5pndHeqk\ne3usot87b6lxnEL37f+iG6bPSdhTUd4Mpnzfl68u2a2wKx8E6RAwPzbv4rhU\nCaiN3krlKFs4FQv1pZFeclP44MrXmDaNxF7ZIPC9jOAxEdNCHTIuGAv43Uk7\n9h7P\r\n=N/Cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/list":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/menu-surface":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b0cecf145.0_1573324983485_0.4162622347186924","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/menu","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3a5166e1b6ef25362d4a4460a23396cb9731d73","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":33,"integrity":"sha512-k0oOAP/foSOMeY8y8h1Fzx/GHwOmr+rvAaTpa9qxj7R/lBQOt7l2rfhDcUbW4QWvI91o7vBMGsAGlhrlnmgk/w==","signatures":[{"sig":"MEUCIQC5oEpq3hvmDg777aTiIWSVDoNjCwzusbDg3p06icb2JAIgBh6q1D+J5AlFy8/C2G9sJIABDo7+yCrRym93njPzHPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYB0CRA9TVsSAnZWagAAc7IP/iLZ1l9WNYWogmhj/mrA\nxBF99A+rEGBh8+EleNbJjvzU/CpOc1Ny9SR6/9rMaCpZAIVAFmzVq8WAV8is\naOQsDng3SSHDW8KeUj1z6NfB2qGXRnpLW73c2Z+7kSEQznn/wotMJkLrDsKO\nqm1ceUEYvU5+FBdNwzDqF0KTkIKo6INvc3A+RLbwqWoncbyKh9WD0TGOsp0X\nbWIQkSrun1lwwKUeEq9b/4e4ecWBU0NevQeU3YlOH/0DQ3eFGiNh3sitzf+k\nc4ajgmXt0vHAeiFSwe/GSb352JikB7YQbaRJhezRxtFenoGZiAofRX9/c1vf\nLSFFEiBRT2jh5IKNfzwZnvrc7VbqFMiWWoOYe80vukEtGcvM/zulMJIbURmn\nt8WYIeL45avbgGgec0KzTo6QTNErRwtSqj/fPhdI6rvebhq2rJ2FbMe5uiRP\nrPjZwZlkCvGnxAyPRUahzlnUxkXrF3ozERISiiL3H0KZw/i1ZUfVKIgUIlj0\ntL4KJhn9Z5GGUlaatCrYBicdOIQbTWqnt2RNz5TaygPpJ09SM5DQEo4erfLP\nY/9V1MPdN2ll1jY6p6DebDYJtjujMLN0qzucHoeziykTzwedywa44bjnVCO/\nvDUgPAWaIYfuqo4BECT1QiafFZ70m7ZhnBnl5urPd6vBy2ZjlhPosl954RMV\nTXBc\r\n=AZ+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/list":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/menu-surface":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.afe0dd1bc.0_1573486708129_0.3877965015085503","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/menu","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a565d97a3fc0b9b5b37cc674e83efd6263738f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":33,"integrity":"sha512-C29If+ccMCd+ee5SQvMoyBbhmoSg0Phtji5G0sylaC3Yjp9AssbEaQ5skN0TNUx57a+P9jtiWD7/LpDZqcJHUA==","signatures":[{"sig":"MEYCIQDp9c6Zlp6pvyM278Id8XiXd2AnZIAavxjQPFlw/FyQGAIhALwHNxTwlLD//3LMXIGEsap7TTbbb7sylU3QxT671fEH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnjCRA9TVsSAnZWagAAHi0P/0lAIJh5QHAukoFjw1Dq\n+B5gYpXaJx2t2aWLI0J+QSr4FeZXfsQ9BDWjp3ek4JfVpJnFXl7DRHgW0Udh\n2OlCPx+9MjAJNkz+cAum0jEDlUsor7dQe63YP8mdTUJ65kcpfZOhZC8ijHfk\nt+n+T5UUVTNZ0m5M0d8C4lSzCMfSwavdwu0U/yA7TcOhWQD2alSUcT7m4ENP\nzlWYnjgiMJavzKjbTRCLqc509jry753JXtaX+QHeirixG5XX16HdjBSryP6s\nhOMvxKMMSyyM9eoITbf/EVIiKyA/rt1TT3jJYYNlK0PbVzreJou9mM43nBOm\n9c0hHKbph4pV5vOXVUq4wAUCWtUxTMEMcPziU1H6q/sFm7rJrH8pgb1tcC28\niO0Cmgon9/Bfg2AQHA8bsB/hvb4a/I0KbgyB5Wz1ZHIf6sfLqrJbiJm1cwdo\nZg7E9YS64Am+jvHLwp+uLocrijDGmHlaD4t0FzB/om5fLs/cqCIE/QyMrBxV\nVPHa8ewSbIoBi2nl0lalYInfn3BT9bXdEHIBp6okAyPduATmq08VfA9zG9ZC\nTYnMWFczdfK/3e69JYfeQ3ObLpPvkX5N9rBI9yN678XZJc7jsuC4FoWdTFJz\nAHZTnWQ+B1hU0Fd6cur0KbPJZmiAnlEJWg1yqB7+iAUnDmlDffJQY+MgQRxA\n3wnH\r\n=gQfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/list":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/menu-surface":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b4cfdc40b.0_1573747171491_0.9981611922883438","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/menu","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b80a64ce64ec2221f730c88ae004e7c34267c5c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.525989b5d.0.tgz","fileCount":33,"integrity":"sha512-I+nQo1n0tmqbRXCt7HajvI1KcawOXHQJd0qXWoJs/yPr6KVtJZyAXjsmSJex1lpZ9gk+xacpQ3Z1xZoIW8sLkQ==","signatures":[{"sig":"MEYCIQDHrVWeV4syjqBjhQegaiPf0yenkurSl0IUglARPPbQlQIhAP+chEks4xlqvITt2udCZyVSSTirJYMdo5YIWy/gY3Ss","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePYCRA9TVsSAnZWagAAuGAP/3sQuRNTXlPPNa3vxgS0\nyFEd9bAq3O5lHrv2LderfbifmplPM6abVw2Fsgz+uGXgenjsBtUr+gVUBiGw\n1O6yQkwAq1d0MQKpFhDJNcWWr3aDGuDPmYgUB6jWDP69KuWqi2l9Xrtwjerm\nGXhziXyvEXzA9UiMG2wObOFS92eIPLOzJgVN986gMrPk1kBd6KrH31Eixc4O\nL4c81nnm9iJqZ11P9RZAS4/SCoCSS3q02YPVu6vwihErTJ4wk6kPIyQGKNFk\nRuWa2mT0Rrs2B8cXBFUUlhN88+4Esjy6aUB+23y/js9qGBaXX+EZ7rBqSbqW\nrHAPMiMAkpEuyyvrqOoaAKDy5olTPILDR9L87zWtFuQCVK0EsM+QpyXZlUoS\nQgabr4rd/MimMGOG973f2miOLOF2UwmSQ+tyK+JxjzpC5ckG+MNL4LcShEeB\nXSHt8V8QB3vhhoT7HFonem55QOEYRNbDdvyIU4MtN0aW6JrWi5Br6Ze4Vefw\no4eyOPr/RboIzvG1HegBxACX9eF1PQJYA6tGfjxirKCB163lAoKFDht0+Qla\ngMhJ0FnXpus9K7fUiouFpBnWP/ouwD/Lm2AFrQJFe6YOdG5qeoX4dFfbsrX6\nq7ZQaVxsnlAPMu1qYiHVmW6ViRuPAKlOLM9WKEEaYUes0oFMTKJvEjPtKAcR\nX3KA\r\n=Omc3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/list":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/menu-surface":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.525989b5d.0_1573774296129_0.7225692320775707","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/menu","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c25e9d406cf8e2668cc4e079bf90ac33510463c0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7084b403a.0.tgz","fileCount":33,"integrity":"sha512-aI/VBj8mQCSkAgOPO+MxVs3QJ9hdkKHK/uGOpj55yxyblOl73Tp0OgsDQIy5AAqWOYqLM99oDBstZMG9ON5+8w==","signatures":[{"sig":"MEYCIQCYk8rbkexmwNq/aSEHGtRieCPwsrOldaO8wA0Vv6Y0hQIhAJbCGl3afyuOq1PqPDwcBEEcnKduGqxuyow2Bh/KSchV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfovCRA9TVsSAnZWagAAYq4P/iokTz6LKwssC+Z4yCOe\nRxfLR97r65fuFOM2ufm57/2V7EjWCqshIFfzNXEOusa3MTq0nByDOQ9jHiW9\nWqehNPfATQ8oy8tSLt0sbXUHAipDgkEsv2Dk0WuqYiksg2KPW8ek3JII9dSe\nJiNR3TuVvaEhy6TTlCeoX0AwoFycd7bK+xVH3PfLj8EDZP8JDGCFAlfO7g6e\nmfGUKSqFqA2E6ZpZ2T3olVjAfZ9CczKQtrDrb76ImRGByg/0LB6Dowb0uiDt\n1lJQKFQ+iu2tAqCYi+1DCPedNFNmxq7ygkgJeEBZevS5XZCl5IfSC7jRzaGV\nfg6qeKvr/48Z/NBQ+EwgdEp8FP1oKXjae1xRzsd8XHtf00arQjjKkeOL1RPp\nYHNMY9EfdxJAgTyRDg+mD4CRQbd3sLH4f/tfFGEzbAsCFzTKZwKCODpO95ot\n8aE2ZKTUFRzB5CTHlF3EDGkI76ewl6VjOHZB+oIeQ0Odq8dmzNuWaIJAL4Vx\n76qvl1iqvKwqz9h8jDtQzst4zkDg0xoS1Zm49qZ/AawtzzWKLejuUBR2D/9R\nzP0nkSMb+0Upmp78KSxGm34lvtt6on3ujzbbYif/ZhHMSWCNXzEu3cgAOzwT\nskHR5aSSOEIx3BSvhVffoDY3I1vteYy1VMBNPHOoMBbyJxPNRUIoPcLlDUQ6\nUV1n\r\n=b5kq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/list":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/menu-surface":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7084b403a.0_1573780014665_0.4169403197242465","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/menu","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29f7a1e2d5a61ac7ef1d7fbf4b74abd137266ebb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3cbee6dac.0.tgz","fileCount":33,"integrity":"sha512-pdzRHgvJ0ko95OJ6x9cMS+fiUt6V8vIKaByaQqQx8jL8/uw8/LbHFVnKVG2yVJzlAATSbuKMkH4nJsFBXqylNQ==","signatures":[{"sig":"MEYCIQCU2eRmxRg2p4V6VOXOSITCJ70KJ9olh6s8bxdolzf5xQIhAOtMYLpdCRBx4zbF0yQbyF43vGCAybCJAeE7kqMygNGe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyfCCRA9TVsSAnZWagAAcywP/jO67OKLPPuSo7dCChbc\nDqyUgl1QsFzhPFRyqYtUYYixPT1tvAQxV7z9ZLHbGlcBI9k3AwQ+QM4J+zYz\nXCpiQRwF+wqy4I4goEZde4mSkKKXaKmQPgRXJ8tFQwOP0XPEwodws6cORBzb\n3pOOh/BB/FKD2n0dGJuASM4zYXY7IpeBbqkUrVIDLTce8toCOTUdSl13dQ7R\n47loCRylz6ycGxO51M2cX6X8uzI/bhBWupvgVQNsx8SdDBz3pF8ldd/0fqOv\neAwCEPjj9Q9Iz+fuaknb2XqhX57creN+4NS3QaKBbgYEYshcmEMdoXhRpp2P\nOXeH3o9Fk4hO3nRhJq8YNI2azYj5NMVGbKXXBgkAGo7lZaX5pmmfrgXRXzbU\nzbgW7ZCoCpKHxUc8srsdJxoGqMt4NaB30DB7qv1pKwAaTduv4hPe+rA6GpWp\n3X583nihkoFXLHxN2esQXByMaoyXZrjOvqfYtjukGgphxHg1QBm46XRVS7kO\nJcUmQe3c3pBJ4F52MhSxcYpmgFyMjmHXsOggLkXCgmu5sJn6rVG/xzEtu4IG\nRVgcYuCPuuKKIcuYCtmq5pkMZWP2YfsIO1rjXYLVS7rzCuEmoxP8lP7zULCF\nsqSKpoqnWp1jDXzFD7HalJIDCe5HZf54iACIL1KHzTRHD//R3cjDaFJ6o340\n58Ng\r\n=BlcD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/list":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/menu-surface":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3cbee6dac.0_1573857217589_0.9110817901264401","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/menu","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbfa1c8bfc736328ae855ef08a980dc4e7e500b5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.591a6ad44.0.tgz","fileCount":33,"integrity":"sha512-fQQry0QNxOBwc3eHPjq+Chk2zwihHkUPujOLIEbS0aHyv+xlZdVphzc4RjDW96d5+71RmJEqcDqPN9AZMc6g5g==","signatures":[{"sig":"MEQCIA5iT2ifXYCYK4Dk5AdsZAeQMIvPzWslFo96Ue6MLvFxAiB4c5QF7rxRhNZeN/LYHb68pHSpJyGQ7vY73prNhzMU7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y39CRA9TVsSAnZWagAAW6IP/jb0jH6aajqs+XT79+hb\nyaPgH9jc66VtZmQWqiNnKxy+uod4g6ccv8+QR2oF8glK455RjOPMXPY4EtNe\nDUQwJvPvkMccNhPbPNDquzQMDcwEhmgesomguFc9McRDrag2YHI7hbKsr10H\nQpw2MJ3Jrvwgflkbio90jeRzKI/Y/+AB3+I3p18W/lv42rNzPC7JnXP+/+p3\n7wesHkFUir9d3gonoGO2b9IeNPeUz3tk/GSqN35MsmSnVtj3+IdLzrKxossp\nsAdu/TGhXdpMedVfSjUtSSjhGvXtZlzBySJXdMVluZZ9E7mKna0x+DHOuoRY\nh0NDNws/I1vtT4nMokvbJua7Ir1jklTouKF3+iF0rCbEAx0efhQbGFslZaY2\nmuKw4bkcT6icITom3QFxY33lC0ruxXTDa4AggSJmpyt8dylUhabDENDfEYc1\nX+zIEI0CMuDQj6N0t8B1DsOkIXs1B/3TGckQ2dWhm39xr/xyR5XdRlLU4g8m\nJDEeIfO8YnqrtnJ1Jsk4WzUPal9GzwVXPS25l+0tHMvWosH8LMhOaQSTcX3V\nK3D6gjbUbJ2sK9ecdrRb/dNX/Ah0K6ylutRCIj/79EqnymlwgnC5UKCi8msH\nyCamh2WNpiMUQHjknvDpRJG5Dl/mHt/p2qmuAoMhtytpAVfGjeizqTsb5DXt\n1dB5\r\n=PM8A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/list":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/menu-surface":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.591a6ad44.0_1574120957380_0.14365751607211763","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/menu","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8aaf87fd177d26409e9c69a2603182206460d6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5729943ba.0.tgz","fileCount":33,"integrity":"sha512-vfV1NLwHuTolH90iLX86ey/Hi86JHiS8CSO912zBR/ey/A51VxLgmazviyRJVIKkWSnUgUA9VVckNvlAMRyZbA==","signatures":[{"sig":"MEUCIQC0fAM7V8E6gbhhRGCqXonUDF1OT8AgKKG4fQE8H5Mx9gIgPMmYy3YZcyWCV5Fo8R7xEUC148Rwd1DNAKk3Oo505kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1M0ICRA9TVsSAnZWagAAeBMP/1OpXSi67GHn4Jdspotv\nDQO6RcWhYcRFJQPiuTGyNBehxuv/DMrMevYfBhqtoxN1a+x5Mf84DLqMyn2e\nstWzixwMnwbUGafYQqWxqm+rmDDm5QDDC9nqGkOIQL77iWiHQTy0ZJHs+s4f\nt5F/4nImGu11zUhIAlT0Os36B5L0jfxrkfV87i+nCH6Cm0J6/Z4CVeJrmp7S\nXBJEAv8YsgIa/h/ciZew3VJQ+oEsPf1NZ0xsj7ga+zEfl/pnU/lOSXmdr+O1\nMZOO2fl7e7MSmBhODGwekpc+IpEuyIMhTxEdBiRcbunUSsLKRkn4sgVEa87r\nAJ6LuXEGO4qepoSiQlQU/+8pq72ffAcTNN+Re6uvXJbq25F0sOBbaBhd3abL\ntZcqkf8pbOM1nD+RWM6GM0yva/dISnIVXGVyP4rW2vW9BdeeGjGkCRl6IcbN\nNpYLctByFvNIOrfDvyoDqo7G5Q/CnwDrKwWbaBE3nmwojxQOrssd1n5oAPcF\nsHz1iK2wjJQRocqGnMIvd+JkC4X4ZuBKP4sMvxxO10zf9A7Vow2u9Snfyx8/\n30dfcEF8Bi3fF4cYGO1u/m5aEAzLi61P66qKEbKc7Uu2KYQEloaQV4Ux3PLg\nByIvrVCSKQfQESd1FRMEtCP71lz+RujEb5lsQmTtyVGDnxoA4+etWKqQiECe\nylAb\r\n=2bgC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/list":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/menu-surface":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5729943ba.0_1574227208342_0.959272364708216","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/menu","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b615b3de2d00af6f50e7c474764bd0bd8d35d871","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.e89750dc7.0.tgz","fileCount":33,"integrity":"sha512-HvO5VFCWyMReQKoY1W9Kwo+9x9uWrnWkRwXVQxbR6R/uCJAD/Zaz0aZcDDMzRP1KYF7+zr7dcn7C6VCDIMwX8g==","signatures":[{"sig":"MEUCICW1+/A1c3nJfrVx0sX4vfZ/FSAbR1zqXN2qZxve1Zn3AiEA4O+cmt2KRj+m0Zr2t/TlHIizxCTNrLHQ2PnbIYsYSnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsfCRA9TVsSAnZWagAAeDEP/2gd5OXhz2pZj27OJyov\nzKes9GzisDuW0xSxtsRJ3nPKHkBe8+8O4GxrSnLiRTtTYPBFMUEkNDeunvEd\nW51XUbU15Lvf0wEa3V2QtlsS52gCU/Se8t1MHc4sTmrA8JPtBFvD+/fqKoMk\nzGlyIvZVM5LHBmXZyWsL9OM/JSPPILayyKtSqrAqAcUdec8McKj/XE6oVd/P\nihfRpfSiBsXamqZtKeU9PyboGLzYwMFt3Xsdo7j89JFWGXbQ6bp6UcPDY+D/\nXBshs6Q9n7Y8TWylX5htqwykWwBREOo5OYdKY2yp005ADRDwUuXqygP3dC9K\n4SmkyFIkmV40nxBspZPKoO7I38vh2JUlgsr+3FFimm5sYQRVTHA0C6L76q9D\n4XnAlkBQuMQnREq/U0SoTUcOthJJBBQe40dce0fYAaD3B9UxJXtLCBg5vTZN\nnQZ1X6dhVJGFgGq0CRGFHWmXC08Trl9uQ+/dd59KFbkInNO14K3N2JstaFWl\neIqDKfvbwmzVrw2mGJmXtxYA10sg4pEPRK6DzNKRTMpdoSsxMAYELoMUdMHl\nuf9vgv+NRVIJcAOdcXFur4wumxXkNRbbiDUNEgOzZ//r1vRB/jYLKVtsENP6\nKkcmgvRar+ZZ8eyUa1ql3sJw5BB3ANNPAyAcQjaDpxYN85AY2UhA4hilVVF1\nHPv7\r\n=vx0/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/list":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/menu-surface":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.e89750dc7.0_1574820638966_0.7910576929696607","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/menu","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e2307fcf1b409ccaa188f2702ca8f26a3e08fd7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3e560b33a.0.tgz","fileCount":33,"integrity":"sha512-gSkFmFFvokIpU86gxrCRypWCs+jiRStfe+hKU9E1AUrP1oqPV0Gd9+4VZWHsdJv4eydMaitXaK/f+fSPgm/4Mw==","signatures":[{"sig":"MEYCIQDFfZuys+7iLnvhBYKPKmc98baHxQT8zRDQbJD8oFBmxgIhAMKlxc15tj6L3huao/eiTANaMExFrYQOgdpJZ9dYCdlK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtNCRA9TVsSAnZWagAAqaQP/0jEJ7Bg/dp9VDGhR4Ee\nfOmB9Y2Qxdykq+1VIN5qj1k4zEmuTCJF6mmUN7Gy7Ctn9nZCdbQwxL6/Zte6\nHgsNkOejeuohnvNImVI+hLs5QB4VwIWrF1klu/U6SCY2LG59F04k1qBgUOXW\ni/Hh26Z5WswMTK+zaDpcU43BMLNfrOnzsQF+dTbv4MZOU44EHKU7kBTcKrjD\nvTdFKrSY7pYdwgcGytf6ZkRJk/6yZb8DRs/BQPKS7t/MXVedy8qisqMmvn3F\nR64n30OyygYLHjCoAeWrzKLys/JbhE+BVu6Hvcr6oQGsAw/zK5+Uz1iRpxX2\nfGp4cMJKe3b3y9NUkRSM1Yk6tqgBEOPy1hv2Y9ZrBTFF+xr/npOniaCP2WrX\n3jM70OHokklEgwFCifqzINEsD2abG1OTYwHGr23eZlYS2bESYlR6hxboBE9g\nroD02nZPX1y/uhwfTe1Jwnne/LBLzhw3FTEQOGrJAYN84UBvwduKtjk1fSLH\nYrr0nxqBmPOpCtX68OOMpt/9PAGzZ8v8QpDffYLto0TAaNawjXzGnt/0iU7+\nhPKQ1lr+2WL4EKaYpQcwgXXU+c8assznCFszDkZltGAnslEu4z3uBixyUvUU\nzNb6QCXmjG5eY8xEfaLfyloCvdBmzu/EeXW5/HX1JgHbpPQSw+vQvLSq/1q9\nkXJC\r\n=9xT3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/list":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/menu-surface":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3e560b33a.0_1574820685048_0.500883541831501","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/menu","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a6e5d800cccd163884849020d3d7086feb4297e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":33,"integrity":"sha512-EWFWdQU7aCYFBFPD53xKxqFXx/hfJHOnU/8dqgVk3xK9sVvNlWqD5D+d3etcUe9WzECWFcJdcARGMu7GzpfSYg==","signatures":[{"sig":"MEUCIDzmDtsDzop//sHpMCq0VXyXT9EVvuegYlELPUvNo1GYAiEA2iVRvE7XtwLOTqVdtVQgyrJzoAWWmTKWyKzVcX1wsCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtkCRA9TVsSAnZWagAAqe8P/igFoIlhmAPExlY20kbD\nme4pRCtDRWv927FKISSkePAzXSL0hs2qNRcLKFgrhVSYZknS0Ltoxdjhwms6\np9a7A0IG8B5qum5j2grd0NlPagyeaWob9iATfxnHTUwb/1YLqfS816lW+Z/V\nUj4NyfqWpqtRr86ZqfdM3bONuGguuOUX1KlySkwlimjxOdwnKY1Az+O96zaM\nYcQ+iaY2LFOP8u9Z+vY6Y5gWC82Mva+UedjjxmoSmf2QvHOJmSTxcmMpsnwX\n1vLzdKk1ddyOHRhHrUKK8kMAthV6gVHIPBakJy28nH3zEx1jPZI+PrvPrbAm\nlzBMV7ljwKFitoRiVMRDmm1pdG9qmUqvmUZsRmoIv9uPA9L4fY4aCF8v4Hmq\nIUoHtj62K5AGMUBEYZqnbYqfFid6GGlvP9xGtDV3aqyroudv17zbDNM1seW3\nj8fARgdoVIV7Ugu0caRrhC7717RWcT3aQeY86cIhC44LVrCeh4s73Cu7dYlV\nq4Onnovx2efpmOzSmYbU8hL6ZYLJqpSF2z30ZFas5wf0OwvKdkB9GA8bxI65\nITi7mkhQpMxOJrC2RIjy405VJhxw2XovwvcFVFgl8p3/yyw15ppDkPFhrji7\ngVqKIrXjJeIx+S4NMO70Bis9SjCMQN/kTtpNiHrMhLoX+Zh9eO0ab26YMvOS\nwGmv\r\n=3d8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/list":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/menu-surface":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7fd17ce5e.0_1574820707684_0.6230265713585372","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/menu","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78a57d3aa9944e4eb68d8eef655d02bd63359ffb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ec729683b.0.tgz","fileCount":33,"integrity":"sha512-bUb7nDKnAJwBtY+mPYbcbAbiot3HjAr/e5sHuvFBlLUUshbBO1A3bYlSSB5JbmO5xX8nnHuJ9Ny9nnTzfUZfsQ==","signatures":[{"sig":"MEUCICVp3+RRienm8nTv2f2DPeq06PdShxHstiR/Y42PlipWAiEAsJJ0YeUPut8drQOcJ2ydW7GkL0ApxEdFaSy4y4UhVxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pySCRA9TVsSAnZWagAAYREP/ieKhwgPMVenpn8rD2uB\niaq4/fXMa9jCuU/6zh9kJFcknJszQzpUE1W+52K/RqVaulACp9bDY0EYJi9P\nc+23gVeomz1ZviUl+1IrSvo0u2hJ5vRA/juthba4WY2zgohuuHkuyQIB/Xwp\nMReRzN3/Mxvah3hl/YP4CkiH8zS3hXbnGLa0QePlVaxVssvDV8uOXPVD18WS\nLnSje8BXuVD76127IRq1bPXW42YJCIKskTxjcHdRKB3pfCo+d+mZPhDetp9s\nRDPotff7SW1GqA/PXOAXNNlGjWbEsJOqYF9ZUpSjW0P7CD8jbMC92RtX2NxN\nfXurNi4FbFiLRcr916z9mMqHVIyAE+BtUlL0Sern+rZMt0jdBQ8g7fJAfTJr\nM/9qAx3PY49GFgJDDA24K2zgtcp3MNxDGa62iatmGSqskNSJCGsjIMd0eOlp\nrgJq5yFEhOIPwhO9njarIzzq32a6AQmVSZ6HdZG0HCgWsLZ09J1N/nWyxLOG\n7GJQ2JBbqp7X60X3adOAfOUBtIwIqTxlQHN1hVxBD+OZpB4VWdALeV0YqXEE\nCDe1Y7y4bQ4sIiCCIcufxb+8s4HBPpxQsw2yJsUxvlsVymo7odh+k02DM0Kg\nGDuSmLwND8lDasj61u9fHSOwiGohwsbKLN0pAzWuAyiAexOKwS9CQTPIqySz\npTGr\r\n=b609\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/list":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/menu-surface":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ec729683b.0_1574870162316_0.18161426062363195","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/menu","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e76b2adffc6c2e4e0c80dee205c650907266fc3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":33,"integrity":"sha512-J/OVu3V4CxDrbxgQQXiBV/npIctYgG87Iy26luHeGDg9zssRxbBUwUJg8olttoCzp/aQXb852K9CxRRbzSblzA==","signatures":[{"sig":"MEYCIQDWAd4w9wO201HCqxW0LcR0pBKcANZRUL+lbFYMZqRgggIhALBN9fe3vfhdpFeZOKiDr9c9Z4+YiyoLmFZqhJ1gfxSx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svKCRA9TVsSAnZWagAAyeIP/2FNR2lKZZ8NYRpoNl3z\nePOvF/fYm2SIccIDgB+HR2pRMeOnSvKy5/H2rR3OkKp92BdnAY2Q+KT8Mbvu\nCeJITHYUxw1D/H2MfEFcAnROWD+CUe7XsHxt5YVVzMZajsxnph0IwdJabHcm\n3gRfnbY8PF76yd0xxHShHbaDvDLTVoLN5M/0KISB4aRnSZkPz3pyGk8kMzP8\n8b9HOvNWIogPFTsu7Zz9udkCebbcElzEiJ16s72QitDJ5RMzoYC13MMtp4xf\ne3lPDdwa4TT9HheHftjNHb+dyH4HneenOwsRTlD32ReYYfgQa4Oc1XmAwfNs\nXQAhJFWBUltfNkxu89J9ML6QAxXjJsbhr5oyZpw3wIL3WnpYnrM/6c81EvTd\nRDZ1f4NHEz1d6BA17Jd818KToTk+f8aPtoylIsiUXz/nw/iNI1bphZt8Wu5N\n7EPBUd+7LZoySnNRaLfV1f6udUuYwjLpc0xjGcmQmB3AEYX2hd9PQ4naGUW2\nypavqQaymYbP5ECZTB4qPKaHEMFeTKZY6LVqxtpt5PpBZ9ZeYf4gKmzjPlqO\nq7jVTk0yiA9NGs4nzN21k7jP8lPdd5UMZqLW9brjwzD6ZuV3s5runxs6dLQ0\nWoFR1IgEjTuwPtaAx2Q9lwZjSodltEr41+/yL36oXAuCcc5hfmgYAEU40YHa\n49Pj\r\n=b8Uu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/list":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/menu-surface":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b8bc4a26e.0_1574882249885_0.8256934182569933","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/menu","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b4f70b6a7b3c32982bc8045e1097d5a8730b20","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f978109c3.0.tgz","fileCount":33,"integrity":"sha512-98y83GihUYuXNocYw0vGI0fSaY0QidLYNmBM9loWeRau7I57xTixyxaiig6YufKi00xMHSZ/RTkrvwWOgnNZtQ==","signatures":[{"sig":"MEUCIAS3FUnRlzwSQrBH5ri8BWM/3O58MhGluCjUHxapIaOdAiEAtwgnaAzgiOZbtE0iFGPj8IWThmai9wBN+guTQL900zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UT+CRA9TVsSAnZWagAAlxMQAI5SgvPw2ECyvTCA43Km\nDkwjBGIwJ35OlxyeETUoWpn+tX3ZU6UwC6YcLgLikD3O7hTBYdGjOllfrdG+\nM7TqDthiLBWLnFm8zOSbD52HX3JmkMXXNWs67BP/XYenISjhoNE0wtV9MXF0\n/rX3Mw+xbL4brq7H+OZezID+fA63yGfhsNWNlxa0p4b1hhvzoR2erHmnAxC5\nYERqeyEpfJsPgPSKqax+LNsch7L0YDlsZ8TDQR9lviqAZfT5gYfs835LGg/W\nSL9ShkPO4EdzfUGf+248IeluioGS7S3Te/qk71nUdlJSA5pEuiNGryQVhCol\n/yCNko/UOomgDQxR9Ib04mdUcAImeg4It7KOM+UO2OmIAe89/g/hkRgViuxS\n99XBcdVNWqpamEkA0Q1ilFZE+mBY18lKIawfKYEdtGpzKwyQxpphQ/WD9SNz\nlLlH1OmGylTp/Y2wW0H2p2X7NB6v9Ts6gf6jco6pCmAoPZDJ/Q/zADb+asuE\n2vGN7jsoCnFXu+nXyY6JfFPml2RVf/3UgWZi2IMKZ72/zdyqjXlYEMfpbTWe\nSg0YixIylSnX3ae6FeZ/dhQzKc6H1iLPd+BFNtoyhys2sGA+lz6fEuUl+ilU\nNwDZJ+LK9+cp8YZeAx8wwn6c1abOwYp0JNKTezwLmg4wMyMI7jX6ltk0ydWo\ngEKj\r\n=fbdj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/list":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/menu-surface":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f978109c3.0_1575306494356_0.5436930124919557","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/menu","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ed43e610e9c5a628f95db45f356effa8e266a27","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ad9dfe706.0.tgz","fileCount":33,"integrity":"sha512-TetgA7PhSyGSqaLWxMZb70vBUU06irN1dRgiEBIFUSk6aLb1/8K1YXLBovM55yICpuLrx5cAss28RwvwGIh4tQ==","signatures":[{"sig":"MEQCIALg5NXVX9stKqd9zS5tarhTHanFYHHr0p5WJRtPsp2kAiBSH7rGQ6mtLuZ0i/eHbGlJ0iL3DeUZqeQnA9YlX8NgYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1gCRA9TVsSAnZWagAA6DIP/0IptVVOCxlWq9F5JBdo\nQyrlzZoJwhmjEBZ9jqFXw5jt4m7L6nF4ok+nOfbrh2r7ShDY+j35M1Uq018K\nxeGwfB65Qxa/mtX97N/hMgvSzjOGsUjBVOoMDIcShjZYMs8TY2DoNDY7Mu61\nRqKx0a82A8hEZsDdLMdVR+K/2xDFQQnthckz12h+8mtJ/nvjtznb861qxD1G\nPBD6ER6rNL77T5ncUniHTVIm0+PIekQINcEAOyiNnOlqZi0ROeaWUf+hKip9\na8onD++CCSD8L3OH7HeVm7h3bFUNa2DZecufe1hLF1O1shr1JdSdciQsb0Rz\n0Zrb6ykpaq3XELHFJSEECiRxpZqt/7BeviuvwZQ4u7dPLhIDtpD9jdRhndT5\nhYfI0lmgvcFCEuZMPv+SwzMWV94nBh7GyzwVkTchQ2PSSy4g1bFEATFsXCKl\nRP/2Kn8LoLpbjeBcmcerAWTbfstYPaZuQ2pCpBF7DNd9qjQmsnKpY1O2J0//\ncpXanRmA0faWzkpb3xbyaKpqPB21mZ5jIeSAMFnnGMMbPmvtmIA9M0YJxktv\nQmzrswv0W0T0KhasVBMA6e4RXWqy0mp0xNTdvNeQU3fgK9xUXhvm2k27CR0K\no7IJt14EecDw5UwsP6ydDYn8WTtV+zeLX/9+t4FbiFL8KjyaGas8gJcuVScS\naKla\r\n=oWVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/list":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/menu-surface":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ad9dfe706.0_1575415135585_0.8259582777897754","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/menu","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"710b4405b046dcebd7e28fadd978edaa05827ace","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5e45d77f3.0.tgz","fileCount":33,"integrity":"sha512-qAcC0TUcA6IwDyGENEUyEXEPDd60XOyRusUPDswstzo3KnryvB9WU/AcR1ZOEgsA4EA+fXwB9V7TXzGKpbsR8Q==","signatures":[{"sig":"MEQCIFnd62+bsgwfnfaEP2RZTHjB2y/kJ3suu4zXX7Kr23KTAiAvU0uJ4XrIRXtOB0Bm8E52T0QC0ErkEVdP9Waa4SS9ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3RCRA9TVsSAnZWagAA2kcP/j+qQbqzR7zhAhvH30qw\nzz6wTg0ntwN8GtjBzTGAgqb8FbCM4ZrPvS5t5zB/LkvK2NQrFJhhJfRzgHY0\nafXAueVtplWBTPxYhlwXtcp2uXiYGQVtxZ4Dc3d+KqdLTanHVAJHqi0JPiYF\nOy1lnXFhEraDX+xVidD9a2/XzglqRQEkW8QrQJVrdZlMrfcLr2P6HQii2Pkg\nB8lx1DtJMM2HUMn+q3wU+iGLkD+q/MnOdpLQGS72cUwQfog45FbVx2Q0XEYc\nxDNQAFMqsoErkjWGA6xejUylURx2MKnUCg/T1PiAs64sIBZ9iX3Y54oUI88I\nti4BsUQAdSqwU2Egvlf8AYGECglGtzp7wCZIJagFnP+BKqMyKOzJgW124n59\n4lc03wAbKbUA0yRPA4xa+T6/LGTe10Igvtp7oN1OUWyoYixa/b/z6YUKI0JA\nAbBxUaeMhtJibGhJvllpvDFX6PCkk2N/NcYp5VMGXshwKcJjiUZ9RRMvw8h/\nYEZQ9cerE5SjYjWEP6BP17x2BkDUOk0bMlLebyy396EwTVi0seh46EP1rkVW\nWQNO667DT0qzKAZDdem+EW+y3UoHObZJ/u1XBnpXjNHukLDRw1PV78cBOT66\nA9qSlYLxeYlt93y8Kg05PomdDxtyM5oeN3lIjzuFAfXaTGHMJNaAsUkjUsjL\n25kn\r\n=FvSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/list":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/menu-surface":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5e45d77f3.0_1575415248541_0.3443646956819908","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/menu","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e19ae7e1bb024f30765e67fe179612b83f70284","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":33,"integrity":"sha512-SdSEvxHsqw0QJlwZI0bxzr26vfpGZjnoxOgSxD8KSj2RO/gvn2+3ZTHxnE3ljG62AcXrPUbVNZU/DKQf3kv/lg==","signatures":[{"sig":"MEUCIQCarmjAO+psFZ8OLkwOAT/GsXIn05iKUzmOlEysxY7SHgIgaXiO0L4TN3r8on6VXFqbiG7lWYAaBnWCr5SwavQmi30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3qCRA9TVsSAnZWagAA9r0QAJaPKbKEZTgKxVyGUwAK\nTMMlMM6IHOBtypB5tnGfEuAsaQCzudehamSidvXGbzY1bTOGmbnkXrYqIpR6\n7SMJshIy+9KXr/4WRjSd0odepghqkRM0ck6ASwmnTkYDZZ2oF/51xydF/p4z\nuyvY7wJvASTuuEwGCDw0YaAQFqZT28A5CSLWZkSs6ikcNh19qr+A7GUL7Ra9\nbdi/2wtXsml4cl8gru20gT4LXt3vFCp4gz83FvAX56fojVJ9qp4jUz05MoYb\nkBZlI62SZ1bZ7rskp4NqnU6zc1sgBUH5Ub7+/SYNC5Kf3Nrmuh24wZnYlRDU\nJMDsGcksbxcV4R/qP1M0ECWjQMEED7kp/fP8+Rv7uZISPNa7zj8lT33mT7yx\nQ+KdEycLiYBIHMfjmVPWg4CuUujvQqOQRaAIxcJz2u6GK09i/Ay8Z1OY9F8x\nao6fDJ22D3dWVlDge8uwTs5OjG06tTP0R40EJEFCZFcBOJzNl7vpD0t1f148\nmKVa6ooT2js7vWDIroo63Brq0h1HKT553GTrAGIa8LcOCuevUwWFlh9++SRG\n38ANCbLKn4mYvQiHaMqN4bMhBGf+a2GtGjm9qtsPLEeLtFwdqzYuIf0lP7e7\nv65WdEqjeGDEC5KtSDxZArt69QnmG3G1/cJBJSa+bCe5P7+VF/UefakJ5teX\nzOM0\r\n=wQXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/list":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/menu-surface":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d10e8cdf3.0_1575415273702_0.47197467365080437","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/menu","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26536c119c711658d2de582feeedb351a48e3fc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":33,"integrity":"sha512-ekujmEnIP+JoBFD5ZNpOlXpGb4rK6GNobPE6uSc0NSbcyj09UiKlADLxAeIMcpORsI4W1JuohFO6Nx0fUmBnLg==","signatures":[{"sig":"MEUCIFDUODeRwogdaE1t7a3+Fvg5I0F6JKUnWFM3ShgC6oBOAiEA4H/gjz+25Spga8f5dvNY+1KGI+4l3JUL39NFK3chnpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vYFCRA9TVsSAnZWagAAwLcQAJJvV7NSSDFWjM1r6Z4N\nYMzbOXnFEDpsbeS58+UZV33kO9rnmoG48Gi4OtfIO9/TxZgWsJ830Se1avPY\njTzN2BWJqWNmY5kEOKNGwTiFBjYMrUYoTsmxlyXfIddwizY5Nn7w+PWG95gB\nghSw21yo4nQYQ9kYl2f+5OxPn6WGj4FZryFQR7oGUX69GDhilRz8x/kAzk5i\nCYJa19PACtdg0PqKVKIvr8qNBcMzIr7rYzfkuLcVhNiiAh+NFjhC3v6zYDMe\nkFbiKQch3ew5LlBk8WpeozGqvxyAlf87OaBHd5GlBrgrEjHvRhmLgGikwnhC\nQ9V6GW7xZKkfeGIfi5y1ldxyUi+2D+JSPES4MHwH3LNtylxQzQ5rHjRTMOSC\nnEleirTZt8tWvK/BQXUln+R/8wD9+ZwHvqTUTSLVYjlMBowJ/1KWho+lmMHC\nXxXy+/x7sBB3QqqfIfk5FmQppZqlZCJNI3RSEocQDqwCX+6r41mKTPTRXgwj\nG1uk8j6tjOeYTm8nOkdy3jqX4cebRRXx5SuZCdoQrtep4GyPiO4m/UWj5o+O\nM+PytZaGguPuj56n3ZxETXFaEszdoKa7MVnJR6fvTMYAw/oqD+eNT6A6GCoI\ngO+GyAHbvSptSbHTedtbC1TH5U2DX1oyIPgm8qw8A5HTW92rsX/WAvDTDlCm\nQnPs\r\n=aN7n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/list":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/menu-surface":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a5dbd8a2a.0_1575417348743_0.8960381016643064","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/menu","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"067d8df55b838017128c883c280c7d68cec2398a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ba879b68b.0.tgz","fileCount":33,"integrity":"sha512-0hmwidh9C2G/TGpUzwk1pPHYxk6WZ78rxcljMDVndVZrxbuVn049j/VbzErthb4B5Cr6ijWJIZ3VNI0uNYN2Lg==","signatures":[{"sig":"MEQCIE+OzIsQgZYkGi8aVECJGUy8ko1wMIegST0TCN/WhhPvAiA2OUsoeRx089VpaEK3bCG7aT1XLgD9SrRlfCr+akYHeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BXECRA9TVsSAnZWagAAeXMP/j8BVHa3L6NNP0hoR0rX\npIWYmn/s1+EIMtcaGrqhhzq2UscrkxS5RlLIz/HywzAr5dS6n0xzhriINtue\nrl1gR5Fct08mBvkdSTJrkoyNQdRr58afyy9Abp/0fu6sV4oQ/JvW4u5azo0V\nbsUrkJuTRp3OWSzZ/NkTel2l7r6pkfD9yMyMbeD3R2p7TIyQS6OQZVo1rmgb\n7ew9Js98Nq8tZaG2ojfLQd285bb3dOxYLvqVO83Vsk6HuhJVPqi+22vsU19v\nBp/Xsib6J2h8O1xbV/NRFcrU/DzV8JPrdYfXPwaQ9er7Ryp1LXJxMTmlUuFZ\nV3oMdOGhWVsk7XxpYa2EUXJIVOQzOczoiPPWeCJfyBKPyXjgvHmYhyi0IwZj\nHhaq8INu2jTHrppyTqXV47cJ//y28KUhVTOroJHPR+vdw6Yz2APTQYZ/oqL4\niEG+/WkECN0PI3800DBPCGAgaUIzvNFwOhKjlRhIxikf+BL2mQxe3FZDo1l8\nDgwDvTUPLRzE0ef308+HBRjCMxTCDz7ZBKzUzgv4al2hZBzbAJGRXlRcv9fe\nqed6ZyIMuY0NnpZSiX3wDfyW4aEME7MllZCuVqQOUmHmdREYgMU3fFac4Ytb\n9JXNIfwhiuKwuRyKdeZwejpQ0kmNGKZAWTxBKcRULlkJ6JLj+iFUAgmARMNc\nWzSK\r\n=D9Rs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/list":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/menu-surface":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ba879b68b.0_1575491012182_0.825514331949063","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/menu","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f059ef390757231d49d6e9114cdd8a2af34d1449","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.aa0eba489.0.tgz","fileCount":33,"integrity":"sha512-vDuaLSuC2IjtLwUJ6Sb8occEf+kKC1KpYZFpNUBm7ecVmtGR4Kj4psPbAuxUa2alveru/1bJ5uJ3PWnoqg6m2Q==","signatures":[{"sig":"MEQCIDucVGKp1jnvMhTfx+uE07gBLqVv4QW2sFAdKT2HIlmwAiB/UQfCQs8OzDvsiEvoMO6CxsS5FrSogrwo/nKZllVYWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYZCRA9TVsSAnZWagAAaksP/2Rlk/AMPzOWUP4ibN4u\nPUP8ZnmHP0UqwSsBHqFK4ImxmAtOypnRi5pOEsth5mxqdbx56sHXKiTDQziv\n891HQxOAXGEYZsuBXZMf8YkeMu7PquchJSRL5FhoUtcezGR3GrPZo1qO8pHm\nYqwUdXBtKmtYEC+lNM5QgSsAy28Ws1pR29hsLXxAFqHe3cU8opAi5qZowNqv\nEWRfjoY4BmA9um99VwDV1aaVxj/I0gHk6SPjxUgp7MOU7kw7jgvEI3Nh5Gfr\nfBuX0/snD/5VKrplCkP2kcC9FrvB+y4TUB6MAIpqjnC2Z15ckQvbZE28b9M4\nzSOTFP3P1SwKq9kpswDrY14haVjYPFziVmrPpOJNsGCU9+zlmfGgKk1VZj8+\nrssGvWUXnBnJFIMILJxx005dz5iDpqGcUlxos3Lz3YUMv7TWhxoHGh7ybZa0\nsxU10cgxL9QOp5YS/aebDCiT8/5VKLil1MFMsEiCDDHDKk6OZ+VRV7Nyudff\nAfcyqvK0PYZM361G7MvYDKJbf0Wu7yIsUkiAm46gr3wdip5PGMaY2g/x/mP1\n6jRTdnRRvBZCtzuW5BCPkVvQSqlc7X/6bL1bz2bwPsc8agjNT1OFXQEE0UTd\nsCN89r1NhLclbbptYnZxq5De1Qc4GhL18ThlOyiJZVbpRGozeXrXMr5TMa1J\nSL+7\r\n=30ug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/list":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/menu-surface":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.aa0eba489.0_1575597593285_0.5780762816691438","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/menu","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f79f23b07dd27fac860d50ec3cf24d819d3992d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.cb7b71a86.0.tgz","fileCount":33,"integrity":"sha512-KqkfIA3VaDjOBau3u1aDP5yuOESpsZyZ9uy1q1n38ySpaL+tg3UE0j6J3uB8NDkd5FIdX8eKQd3cFAS9YInYyw==","signatures":[{"sig":"MEYCIQCiA5aPlLlQyjG3hh7LH4KIyaIeE0MmM/pcuZ1MZ66/SAIhAKXQMGFAbF2I2Mj7bWK+lXNDuTj7sQMZ3MDN+PO9YJM5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6urBCRA9TVsSAnZWagAAHncP/irS/fJcGm6I1SBcpR5i\nD5zaUB0MQS9lEZMBewcTUMGrEfDrn6bFsoeVKvZYa7cRgUub1qcbYpUXHVqo\nmqLtO/nrXtNTprcb5HMJO4lqdb4l9MDDOZqcmotBvFaFK2Vuq4yZGGv8dGpC\nJ5ZO73osxHdMxqvT5T4hQWneojO6/h9gNvWQME10ADb/1LhXU+k7hYOzd51w\ncz8r08iB2Gh5kgkZQ99mkX2zNfZIKbBiYEhM4qY6z3kN4W+0X8mrOYGluGLP\nccRMfNB3PPQHqDKq1vmoWe3Knb1WKlj1R1U1Y4rn09FQsPMIBTbmgIXB7g0o\n6zKzKy/ulquTcHqC90+Gp2/xFawFmn7VLDqNpVJ0c02L/dB1PY4mtLE7JYxp\nUhF4ACYrJC+R47noIbXNGAYy2zOFMng5pYvHHs5ZvnaEAjCRiC31wQqmyFU5\n+mrV0trokhrUU/kxeTo1MIoYzM0a0Mb8trySdShwpxNrCM5xl22v8bWRAonF\nK9hLisepo9nsU3vLm0JppE8UlCdOwNfokElBccrHz/ai+ieD8pIsPBotEd1v\nMahOLxcCChc4PDkG9+qTBkga5C3jfqsRSjIylXP6/CnEzhtaLGiXyUKhsLpf\n/LfozS3BN5HcsXJ4CB0Fyg+ZQafnrboC6l3no6AWHKJR48kOm8+rHLPVgO0y\nJUjf\r\n=hfdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/list":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/menu-surface":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.cb7b71a86.0_1575676608928_0.11084893699713683","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/menu","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"633bcc816d17aece3511ae25db8a1780ffa9e6ab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.50f110a6c.0.tgz","fileCount":33,"integrity":"sha512-o55NHbnQCKLb0QKhQdOkNIRPYOASHPtYwmNiFnASB02sN2Rhep7BqRLlDY69iVMgs1zaMIEll/ntN1MNFy8EYw==","signatures":[{"sig":"MEUCIE1dAK2VmCcVwdvelqBIamd0Ig/Z3QYn7T80a0CaIOjvAiEAtMSjiPO8CXZv5H3HkVppapYZwGX7cKtRLPu0vu3Hf8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788zCRA9TVsSAnZWagAAyukP/372CjsjkCRoTyyIDv0N\nxlStvt8PHF8d1Ypt28+IRJITzPSMHPm/bB4XkLGb2uufW/MYkofgRiI7unEa\njdEQSN2zJzIb5ZHycSp5pYX1xFynH1Kwr4RNZDPqDxDbSMDyTymn2AIK47se\nDI62QOYz30i7bpa+vdrnS/nVZ5czDrURL/rBji6+aaNragxZuvUS+1UxKERd\nuN90cLLqVXiIGGA+NVIftC40W5okxFarLq3fSTgE27w82drzDdFwh0hgHxkR\np3p0Veq76RKBILP3WMmH9jeluR93fovDZbX1CnO6VsOGL1Crf5I5f9NvllaT\nE8OV+YxRCb2G1DaJPAFWcuBUAVZnYBMa3UISkkFZZBGQ6lxF8WH6G3r+9yAQ\nuRAGrUVSw34IuPbDR1yKHccpc1eONIIkKpyQOfpmrjprAXE3p0HIZh2YiRGK\nrUfTyHBWWcOgWoMTUW74jFeR6HCdmUtHlJ8tnSrb7mbjMlrnifS9/pDpEWfR\n/7vx69nnnKYWyvd6WZUBgG0SdgeI4iKcU/RgnNo18tMMnrTguaRII4iXx4CD\n+ONVN7LEq73kcmdMUWPeYZ2P1sN7sSj5d5dveEjW2udPE5lJAyp9zBLo0qqR\naGR2Tm28w2HdsESvGuewXt31uD7Si79BJmg1raktcxMArZTW4AJ+Prs/npJ4\nFQqe\r\n=8VAz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/list":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/menu-surface":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.50f110a6c.0_1575997234883_0.6901091529700967","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/menu","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91be44281e722f83118120215860157553299c34","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.878a08b7c.0.tgz","fileCount":33,"integrity":"sha512-GI5rgJxaj8qtiXyTdKdBfCkoHvkE5SB8FFSoEW8p618dejvBUc5uOksETfLWvvpduHg6/RBqXY+R1wiQCplwew==","signatures":[{"sig":"MEQCIG+j9oxBWZ1h9OstdGnaKQ+cMnBSQLr2pzpee7skvvj7AiAgETaRIetUH8faujdXyyC9XwpqWS8pl4yJGBAR9ezTLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U7OCRA9TVsSAnZWagAADZcP/Az9hYiu1vcu3F5ygG2C\n1JDGcdTNvagrBbbN9cx/5hcu0ZjZSoTTEAeITbP0VJ8AugQlVw3Zbp5KqOQN\nI8TvgQgIxfr+2weNNo4k+cZKY8Yw5oOr2AR17N+NNihZg2ztxQYUk86uidUr\nuDTQaG+wrjzErQB8ImrquhSYB9Y1YA8Vi5R9Pm8rXBQv9cFwi8FPgVZu2GqN\nDi8oksFFP8tc+V8FpNxMZ3nfiLGiGK12jmZ0lH6NIjy3RPdxeYwZdiuKB3ST\njntrw6CchKQmJUFuMPi6niSB6CMXxW+Lv1mX+TPoBrivj+cDyXHWPxsbVw3r\nN2CbgrQiOe93IKzeIpI18GcUPBv73oGQuZCJXxOjVyBmk1bDN2IngIQEM1tV\nP09/qSgm8ErT/PeIzpFq1AqciL1zOnXZBN1Jdxaa2vmML+GseGYZ2Dt94Fmj\nbVHtCwM7Oaz4rSNdFjk2kmKROQevtIjFrNan8sahtxPeiNH2Pl05twPJR7PJ\nHTDwtgHVSbY8OZY6ukRb/Bvug0RsXidSXCSZcBD8cg+UW+nQfEDluQGUEAAM\nxglKq2JshAjJYu3apRYMDzKZa+c+5OKusXjHc+3gHVu4A8ps0Mc30bCap/7P\nF1jM3jR7xHjXg/DbVGQhIRP8kncng4azjuGe1XftU9ITMb6OVmXWdJEf/pMe\noTqo\r\n=6JoF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/list":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/menu-surface":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.878a08b7c.0_1576095437994_0.892660747777758","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/menu","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea45997f63518f61deed5271800cbf7dc57cea59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.397905b4e.0.tgz","fileCount":33,"integrity":"sha512-wFvzeKSzBJYV2FGeriX5O7vm4pL79Ts4OtLghuYOCTQtnP7sM4uRInVJQtkX3+UC+IwuLVM1Hktl95FnMDdzww==","signatures":[{"sig":"MEUCIQC43hODcv7thkit4Rf8Cq/4abIopeNmATf2xVa/qNZncgIgWRfdppqELli4JcJ3afGAFiHfW6H+8Y8BOokDrC8UaTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apkCRA9TVsSAnZWagAA/pUP/34Vf6C4iHRcTiGFBnYH\nT2984KeVsZbc8NyGXYsaMbssNwAcegdXK0SdL+Hbjo9bdK0F0dKESlqTw0xD\nEJqVJtaJQ+JPOTY5sk+X/cQio87fNkOAa6k/dHbZfPVdX9yhU15ZUiy5lbpJ\nZznJztfdd5Nz1mjd1m25CQJrhJ2yY2V+qgAW71rx7po/Wx2+IX3dEMnSz2Dt\nFHSOq1soKazveIK62STnJy6cfC1H5yH4NQcjSD7+nzWEvSs5GZTLVWMvmuiI\nO3H+1H0XG9dyWIwYPZmBDPxmQnGCh+HynIfefuSm62M2qFGxXJTGEzy3yply\nsgGjTxlitqP3QnRv0uGQsk6rxiRpWs/wTnEcJ0YVg5ep9sBaY1ga3iF6u8jC\noVLaC6Y1Zue7v2gspLaz05DmfsO3fOthBOxFlLPNwwyJf1bxo9ZZFhFfsw7m\nK1dhU81YIiAj5Ad2vsYHYeEx/jVlRgcnOiT/wY+u4FqSDtthwInsFIFrQH86\niC5lGH5aqNedCdSldVPR+tbAHBRsifXZCRCVZ3eHnAwolri6ZNyAvGgkKiyw\n/lo8u+3c3yf9PhFEiasvp57WxLNEzhsCGO4f8ZmAG/KlwN08RZyr+3WngTaJ\nBy7Oc05X5sGw3qkygDhnmQe1Iu2esqMFvoVWulCNvIZ+6idWZ2EJZcqUvP7y\ncigT\r\n=a327\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/list":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/menu-surface":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.397905b4e.0_1576118883673_0.369338634407685","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/menu","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e6789b946e6aab41247cc42ab29b38b83fee4cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":33,"integrity":"sha512-6NOEVeXLtHuNlOsATqXr5ttA2LvXxL/oIiY+sQPA7QzqTDh37tRxtd5K1S99Aww/iceAsl8VKDDNSgCnr2UWMw==","signatures":[{"sig":"MEUCIE0Zau73Px7VJxL/MqlC4vAepVawavEliPjFksNOUQ40AiEA8Yltb8QhwnMVgKvBAPofz7Xv+lsl2TYJ1KJkCXTm82E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o42CRA9TVsSAnZWagAA8xMP/3d9agMDijzqQyAgCGa0\nVs0gT20c6QHAVvd7vZJi90Tcfr3pFXDJdGPQfwtjmdnOjtp4BxLLrkVUnheF\n4FBuws4aw/ieW5a1H+R0ob+8maUar+f7Ym1hDSy8OhcJymoI2/NPEZNYrR4H\nQNy713gtqySjcc7ENwTYv2cq9szzxDHVerhgPYB0NahaOjQ/U4MzpVE7Pwqh\nvzdmvsHJK7JLctJoU66xNDBxMfjN1u3dlLG0PTls+aYq37xXARWZ1112lOPX\neEg83/a9isU54HJuwLC/sg7CZuRp5OG8APbU2FgaOdZH0+qBeqr9mYB9O9Tn\nTPucZ5Cp6/eZVOSFh9x0hiG4TxweGIwYEa2XSSUoGGkKTxq1It5/L4BfonGS\nomuIzxpfeGROMEQEjA0TnI0nGVSKHW3tFH9dDkjePpkP3xvloyjS9jdkaIGm\naxYf/HMEcSbIBZItXG63AQor0EpKQ866UpFtD19JK5SdlRu1y++7FWVTKAk/\nwLSSGwoq+N21c1yoje9QYV1Ya3+d1w9Ta8T9r/i3lQ57WAbmdZu1T/OG+tTX\nmJIVK/+sDRM0V29azkEkGW+B/XPyfRFYkw55wmsc2eTQ+OM31J3rVDszqfnq\ntJx34V5GyDxUyY1DYjt9Ua8gPL9SygFtsYyIk/+BR40IclLdzE2x0gIRvAKi\nVWHp\r\n=oY3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/list":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/menu-surface":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1fbf5bd1d.0_1576177205968_0.7665000842454097","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/menu","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"150f77e7f272787e9c6b0e373aca59be7d6e41d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b723dfa78.0.tgz","fileCount":33,"integrity":"sha512-jCjHHtUSBqhobU8TAkOxiowu/+wL1vYfVWlMrs9zKm9UQYCEk1IfCEvGUhodjjJKL/0owHYsmiHCLiQqvAoHVg==","signatures":[{"sig":"MEUCIQCWc5XGPK+IZepp6Y8emLFam+uMuul0dMDWYhnmeGvkpAIgTRoV48UoOyR5A0WfNuD5O2ulejk7smTfrXIatVTGOEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7QCRA9TVsSAnZWagAA3TMQAJLa4b7rtaUIX4Lgf7cD\nLsio5ihV+gGMmi4eud5v+I4NtWfSDsailuSp6q35BBPIMCFFf1CPSfaMyYBj\ntz+w6Okrd3aGO4MIX/FQ1633MS5VVk/aQD5WWgsvzR6sf1c0Lw2e/bQ/oyjB\ntQQD6uEId1nXRAAMYtRt+jgMNRCXdlMxaO4oI7RJP/1soVYiwr/EaLPbcaNe\nda44uZHJJKMPRC2RDQiuo9QuXu8/IymfOsEfczeeJ9zOu6ZxPNcagjbvEW+X\nnDfQOkZ1Z0prE7W/SUoIoas+yHNtUESjF0Wfk0cp78+fvDKbpNc/FIq9Lc10\nQMQgsKf5WB7IfhR07v6CGH9O0YBv5sSrtzUmm53gfr0o0a1ws7/pb0BBeDxq\nXDVsDiRYP2RFP14CTgdMHgko+nc4w07+YycsIhth7uupz85YkZ5Z3BwH0Nwy\nZI4DLyiupb9fd+UjnQvShoLcTtli71sp+dMgq56v+An9AKCCHcB1os4gXo6C\neCOfttsWq+3ozZIZ+qSoCpHUC8+MJvr3vtR2QRCQ8tpXdWoOxLlUUwWwqC8q\nWp71pOWkHQtIZQBhGKrYm/H9qLhmgjvzpiXDImQ2yBu/sioFx76juMWSeHC/\nTpJKCpDdhZjIRh/7RbZgtPkXrxuAFA8++tb+brPZ+eNbveFuwUPce8Bkv1xn\nykKf\r\n=14MJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/list":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/menu-surface":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b723dfa78.0_1576181456476_0.3178170457057503","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/menu","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb059aefdca13e31372ecba21a0cdd181faf2f44","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1c494e567.0.tgz","fileCount":33,"integrity":"sha512-iXyaFaCC7qCPnj+OwP+PbcpYkydCkyUHSbrDAHlvup+LqqPLhZL6a4CZYAKJvkuzUSkdkEI+PMw+LjZenK73Iw==","signatures":[{"sig":"MEYCIQCBSRCADZ5ybGIDhOdUt2n//1YJ3IDNXHfLb179GnY0QQIhAKyeyUKdKbgSAVXlZMMA0TafX/GnzbybAI1PRsDtWK+g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9jCRA9TVsSAnZWagAA0ugQAIv+Sd7HaDcgXC1idUtx\nP6yTLQrZIzMzFgQAaBYquu8h3yK/hqTRsox8EqqxV74g8gGmWW8qdJWWhaOh\n/FRLB14UMHZrfQhxbyAzZjU1kizJpJPQ9K5vvzqgzBJjwWGP+UNoa4okEJSZ\n+zY07NQxsSw0V8Mg/yGic+swTY6Ql3zDiC+r1nYBoiWAAsyrawAOkU4G3TAR\n72Tw/hrtTbE96rsuJhdvRBd4XxjMQhtYlK9lsNuyp5PUzlm64aoBAvzZh8J8\ngdahHsLNAW0JxA0eo96Pdqu9gy4VErj7768zVIs9uEEi3lVgWjdtighlEoiE\nimBhg43ueh7pEkpOcDXN6veifeuGmNwm+YBPnvD1QZqvWHJyVOj0Lce1JC9g\nL0mFwwSdKhRAezRWTVwk8EvM6ZY1ugu2T3PxTiK6opL0LWDNQFLEOB8bj7lb\nuDs6+3PG7qhM5zI3cvuZ0iC6XMUGRvIwshVLLVa4Os7Tkl/0FQUE0zDhG+fj\nRipnynzRvesHnTXZD9NxUZooWxA0Jg9EYmStxKRT3by0/GwTolTef2KDYwlg\nFUfRoWjFWAd+cBp+eTscuh1hJqlml8pESkgiC9mx2xytxZs7COyhxr1CNySY\ngruQKBEI1kxA5+rjH6PbbBwR9lJ+BmrjOmP8r3hElxWiEcfkquBUCknY92ZQ\n0gCK\r\n=6vfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/list":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/menu-surface":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1c494e567.0_1576193890648_0.6699217375163287","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/menu","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"266c7151b4574b947aa97c3cd5943241a19bcd9d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c9e98a125.0.tgz","fileCount":33,"integrity":"sha512-vnMgwbou8jPwoVbnq2lPTQGwkwslk4GhsrmpOuClDqjwGxUKwqfmD82MneR8toHlLwWDiKGOkEbHKzY9dRn0Lg==","signatures":[{"sig":"MEUCIF+kdOFQUqjJ7a5vocXeHmqD1SJ82oB+ry8n+iS76O5EAiEAlZtyhFmZM2bkkv0WTDZbnCgoXunk76DrvqmCzcoMSBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ro2CRA9TVsSAnZWagAAY4YP/RJfZkW/YnR1xyRMG172\nl6ghsmrqhkFwUOkdP0Xpf1lNVSPe62v+JB4hyjmM5PYRkNNJ6kUXog+frfyP\nLjx5Tewg809/Y5s9wMsnU45Rz3J1E4DtES6y7rv4CwVfNmJXRq5zZtG/UW/K\nMMCbVyHUkcJxjNVC/4ycVqyIRBO/5xYvKmzaGI59s04SMJKLTjAhesoaGhq8\nO56aldIHRz7aLuxdOmRfAzHdGSRsqBNm4pNvIQAlHGSL8n4Gx6dNi24qGyhm\nNQWOItcUQcZaQJVxb9THD30x2hmq4GmMh6P20ehZ46TK/G1ADKHB7UFhbJUD\naWVuIpVkH/I5eHM5PkySbRdzgsGPP8b3AorK0nTx1cG37Ch19cSymxOKYuSn\nlqytTPnrD+amGRXmj6uewZ59ZpiQe+Bfz/pa4xGAS9FhpaXP2SkbO6XRW1H/\nq9ihezB/27CphSe1s0V1BeplDuBdjcmNiwI/D9uT/LMQq60x14M+JCNV/kmW\njMASjOlN4agxQsCq8CyeSCMsFblJE/jhREKLRzZsvXYN8MdgKGCFL2BdcNYl\n4sin2KOtJ5vYlsTE+rStkKtuBpl9I3cWCeJV7eCl86AcHGkTVaQ4k4ypmyYf\nBWV4J1r3BT7FZBSA8XqH8NPhKINco2NLNU/n7EkD1QaLF8QKzCVpYtMbWe1C\nJ5cw\r\n=1RUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/list":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/menu-surface":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c9e98a125.0_1576606261933_0.5110875334737892","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/menu","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75e79d3e641a3992ecf68edb8ff9fa46368d8271","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":33,"integrity":"sha512-QpLXhuRUaK+ipXIVCz8LXgN9XEcBO7aM2BGLfz+qjDPgAG7lNZEEqBWMN4jCcgjQp8UC/EEiBwPiImPoPVcrKQ==","signatures":[{"sig":"MEUCIQDTPt83NLNNgbT6OaeNrcJxVKdILYsk5JKR5gX67zaeggIgN1Mog89MKWQEufhMsNnxdfETw5jQOebYhYcr4AaOeGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfqCRA9TVsSAnZWagAADi0P/3BFk3glG7RVFBLpBAj4\nePYGMfJzXHOXLVs/bnYEp+JcCtHkMW5Lwiaq9UjBYPjnxzLX+gOvqp0XOS1b\na+rWH+Pej+hCqH/3SNvoooeKTjj/wVh2Wr4D5F1TxUFhnnuT/tLINs25O8iP\n9ZVM5z29PIwirm0cwBAAp00SJSHmzctG6OPAWU92QmCnZQiof7uTAuOz4fps\nF6y3naAYIOH2kyho6Pc8e/YxssIz2Nk0QbzpouLFykDZGqXCpc1yaChfSvPI\n6ZB0WIfDh4NzpPdC+GRRiyg7vf8CU1Uf1gSnuVQnwKpX3Mud90fltHxFWS4T\nmk+YAda/DNhZOOyVnokBmp88s597W01jZZMXJUFNYLSB1dq8TbLXx4wNZugr\nSF/qGqqHRNFYYwp8AlemZt9CIgi8tuf8v8mqdQkK2arYdgDeXduhWBQqPvS4\niqnR6qlbnkN2Pri3AyawlEHs16sZieAiL2gpgb+2P0lajo7HOil5ZFLjQu/V\nQewVo4XsLiT/QhJqazCJhNsIDuDtl4tD5SajNlLidZtXeX0sZ/X/Q+jKVXHf\nXHu81pyUeqOLWxWju23XL+iDmZ8AYrNhfhkITqhiywRbzdEIIWiECqVX1ICd\nXcWow0J1GMbe0kaseoHk5i0hFSQr5FfrNGANSqsiLyz25ZPLF9/HqJ3oyrbq\nH6e8\r\n=QMq0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/list":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/menu-surface":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5ffe8f7e3.0_1576622058063_0.6344883710466072","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/menu","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f88399c65abe7ed8cdba423da4655dd684ff8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.47949b08e.0.tgz","fileCount":33,"integrity":"sha512-Vc5mgsqe1azp6cTci/zpEhMM/BQGmSesuPd9XF7W3bMslvjLuh5yOuxeNHYqvABNMdg6O0tybk2yadZefbH4Zw==","signatures":[{"sig":"MEMCH0CB7r9U/t3nY5AKi59CgG2HMwSfgadtoj2qNyr8VhsCIHN6RXMXw7nm662fSpEZqHiJzir7q0H0dnAtJMpMSBVU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mTDCRA9TVsSAnZWagAA7mcP/0Z5aXlX38M11sRiq9yp\nhuXbVC3Lf0314cdM9ml8s1CWz93BRqGY8NMc7cRlEpTsHJ13/TBF7kYL23wI\n4APQsF7+0HNCdDm/sDexUh56bIrzh/p70aQxUy/Tu6XXn8xVlDPQ55Jpvztt\nXdcvKw3VwdBKHw8MRoBUiCzzxynEfjhbr4bn3MFtAAuOBH1L34y7Dn+E0lp9\nF9yb5aNoACoZLMevhtS1dbSJX+XGvCHvFnjfNTVkC6ozujrw437BGdfxoWr6\nvcxPq+/sT6JIqGDe5w9Rwonc/Y6zA8nGgivuswkh605r55h2X8FCrO7evIKM\nmRERigMLUE9PYJELO83uRXtKCJjO7I1aRih00IOhYqOL9rYl2ygc2l1oyaLM\n1Gs99v/m984ngnMfk/GUDX7wDBqg8PWxh1JZ1xgMHfyI/sbsHhPZzi8E8sd0\nfxzvy/fx7eDUCHNsllORbrIkCmd2DD0Pl1RMIPYoY85eOTXpaCyIaXVGfDG4\nxlDMR8e0yDpn+qoOZHb6wvGmI0ln9fJv2L8NnQLmnJBhZ+9pfPzjYDoBa2k5\nwHMC4RFPcJKLO2ERPGEzr3LfSD6MzO6uomR+ZmHCnGM9bR1Iw0JzUEGd6+Mc\nrNP92Bc/RKk3CPQViF7xtosFElF8GoBCkjSdp50QgnnK+h2tlF6eM0uW67PS\nPoMf\r\n=PNcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/list":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/menu-surface":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.47949b08e.0_1576690883001_0.9119603593548611","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/menu","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8286df7a29d918a00213a4325eeb218e65a48be2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b240bcc1b.0.tgz","fileCount":33,"integrity":"sha512-3NWBqiKF/p/BA6OHmMkNk0HrnwSpz7Xj25A7BZPcm9asC1k0YPFqXD69GOIbZRhXBhNw23KClSKHOhQVaPcUVQ==","signatures":[{"sig":"MEUCIQCHPhfEnt4KQkVXm3484rrZBZZGkap1EYQ6XCO52KjF2QIgMUfP7a7zpxohZA1Tyly8DASCnNHZLDnD5BsHVaxsU3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nteCRA9TVsSAnZWagAARAgP/3lK9yZAgbHWjr+IjgFh\nz41YCZlND9KVY877zMNOGsu3Ok/8VBsBpxVy5569uNaON69Asfl3k6Yo7gKy\nRlY7ZvKc9MJbTI7o/XWyKo53yqKkRChJcgVSAEEy0U9A5xCfCFRL7vK3FYtb\nR6y9vPV6bQvfJUW+ITBrZqyHs5C8alKYrPbuoDZIuhF317hTuEaBUp+SkBQp\nSdBg6C2CPl3MMSX/3nQUBeXnjg8Ilm1C/AjHmF9HBHW71WOiGxH6zEt8ykOn\nWJF2N+PsSEm2kH55I8AUrxVlyrWNx+ygoZVmrwgJiaCm+QL9cZDy8wvh69yy\n6yxy0GASGNOhBUyHWS9i3utd4QeHGlyWHDR34EgfxT2i5yVGEHsJJn6CXYZr\nfyJFK9VW38sK7+7yuam60rrRLMo9z1SJaOW21jrPHP3IvMTX48aEOAc4pfGE\nZNXWa4CsNfqpvnOe6/3A3hL3laNOoFfsbKXVrG3gkiU2nul3r/Ti42ZKBL3p\ncgtZKTrwG16/LLdFYl5cPBEVYQpWS4kSe0hbmjOQnw91nDKUSyv4sJ+moGBA\nCcS95/1n5EIVGbHO80U3VGA1p+9RogeY5aA9rmZvCX2Uw5So105w7GnriDjJ\nrZj2asGY2nkvHyY74LqSN7GBjfqAheEmCwGFJRfA7/eTwyG+OtXjlPJlhiB4\n/GPe\r\n=hIZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/list":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/menu-surface":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b240bcc1b.0_1576696670193_0.48593207565614915","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/menu","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5efb6bb55d0541600ef783f00edb208dd7bc3bb9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.391674a26.0.tgz","fileCount":33,"integrity":"sha512-olRvZPZCryVpyHR7dWV6vePG6dpQd45vkeeK2zu502z9J9MHbiTYMOitvcWXuVz0Xf2WHADeK0gy6hKBlqsDeQ==","signatures":[{"sig":"MEUCIAVkt9VzR5q2B5ADsNJ5ISdv1yCjWncNiKsznCoITXimAiEAuD4XHNMoBAB1Bbp+8VpZM/d6rjkNBhH2XqTqkLJ1v54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nt1CRA9TVsSAnZWagAAKmkQAIce8k4X1vMqmUzyD7b7\nvUlrG1h2+d909TKeYyqdlWiMfIjqoJGeEsE5D9VnYNdKu4P2QnCGANcGLvqg\ncLwtGo3hBZRb0Lf0GVA5P4Iw7+ZsGmDwAq3KYCIlxW+kSUMt38bg+GeSK76k\nEiiIKYMoa5DeWdKWNyHRhdE77dJEQ1+PXVElCb0ieFknAVCfSI7RqQTWwWVT\nKuF5WWSIQl6MatGnOjCIPpX++NfS1tJLmOnRrRPg/WHhActS+b1AJXtfBjQW\n0q0bkbpRu9oIFSpjLamOrjpL/wm/lnSEX3fRar4V3BGjFs4lfL6zXV1zoZIC\nsyKq/9DSJ2bYDVlJl89SNQ1SoFGNFm3w/7TxIxyrvIFnYDZg/B0XBJ+hnPSO\nbLv3/VB1YJoO0yRoqnXDkiZNRVS4v9X+k/m4HNn2tFlPHvmkZrP4J3GW+pxE\nksT3tWYpqE3VTiliTYsddFPZM5CbAQK4/9eTsfRCFvJ98YlP4WHULHObBRyL\nuinBAzoVwgcF2oqz7jiIPYOTW9xSBggiaWtGL4zljMb3wLY3G3FlmD3lidGa\nCTnP6vfKn73cerl+v8uL5Xd65cgxY2t0ScQXC/EBQbRZeRaZAl0gdhBQl3Jn\n2WXY6EE90HNEAf3dJWtyU1LfGYgIjF8JQCch13v/iechCVVxJaRwpeDhbzcA\ndphm\r\n=MzjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/list":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/menu-surface":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.391674a26.0_1576696693112_0.4130409098662604","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/menu","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c38f6bf5dfb8597ff95dbf494c791f7bbb5200f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c4837746c.0.tgz","fileCount":33,"integrity":"sha512-g7CpYCsz3DH6i1wBCiO1q6qSb6yGbYImhLEczxxl6VmhYl/Lxrsgmweevwq0IsqISIFiXAM9Bk7vht+WzIg5qQ==","signatures":[{"sig":"MEQCIC1ajfdyJfJVauw+DLdKjTRmitIhDVkSQh3+czbFtPJPAiBWT9ni/jE1aT0f8yh7YI6EqJcpEW0I1B1bfppP++RvXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+cCRA9TVsSAnZWagAAo/4QAJgAIKiXvy5BUrqrzFvv\n3QI+Xn3gBVzaOD8auz00EapPlPzfC5XMWKGra+w0pyMZaMTkaN2Bqmhf56iS\nhydnwxcPXOlMgUDatjC9f0WN1Go+c9T4PSImflDxCNuV/HCyB3AEnKkRhPhW\nEWlO6OsqfZBEFXknJvk0rASOTufXmNRVKFh82fPzYO3v6gtzivTNyYPQr7B+\n/7ReRsYj2/zj53ad5qE5mYwKXZJDpJy9wfZy6JvAJb4pAWdMZMd2RnGmDVpu\np281VU7ztda4Tr03ppJ5JSrqixUvodrS/mJUnBMotgoo3CwsFUILx1u4DrtB\ntC2s5/SRKICOzsFsktSkZU1H2fNc08WM40a+j4LG/XOJ/LH5EXp94uuFX3gm\nypS1rLRUoIBX1RcJ5KQgzMvQmqVcoZKoRRhRkIdYWoUltYB66K0b2rxx3agQ\nl8KZU4JjKUgeKvFely52b6PLz/DA3v3JzRNZaEC6bxlSu5SJvFqO+qBMJaLB\n7+nVQUlR9JACUYh6qRd/6XIa3nM9XwjCbLJdEGU8+LWmAtzcRvXtNs5P3les\nbNAyp7Wu/vu7QQxImmKo8WnL7SokfPT2+RgHEI5DqzOyIzKDpMmrRV0fd5Cn\nHi1QmU7ikCFuFKK23TJDRFxNnuz3J/laCsfhxiCqUKazX48usgHShMK3XzBL\nLm6t\r\n=rVtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/list":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/menu-surface":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c4837746c.0_1576697755794_0.8561139607658454","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/menu","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3747cb8ec54746b947997f8b0508479b7a0730c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.e41a70425.0.tgz","fileCount":33,"integrity":"sha512-hxngiXPP94s3eCUkChKZ86FkV3arf4gWle47OTqX+9QDwA33bt+3UTxxm5yyyDZK2yfQjXyNqNDniKw956lVcw==","signatures":[{"sig":"MEUCIDWaM1MRQtmQdUCrr2bJMM+9J9nIPZRdXwEE1m2owUDEAiEAuD9AMNhAIjrfAzQvU/cHmKF0hHpcbnTnacfAoLwtna4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRkCRA9TVsSAnZWagAADhEP/R8oiNeaPrKmPppr9LKZ\nGV8wPCvn/wIaiYHsl8F/NfwA/sMVHQIYzlST94mJqX/07U13YCO+NJkN5jjY\nMaUUCMKgp4vLuUBHW4TzBELSlM5ZYLvULy7UjYJZF5F+Q4xMSqTEGcLFfjoD\nk8ZJEEr8tSGLzt49qkMTgfnJNz5LyJjv4KsTys5jed3Wv+7lhBUkC8XB2eBP\nBgFJKIdUXKkJpenmmGfT/bdN8erqIw8Y2wsULmxM0N2s2ulwAGXf81Azk/vS\n1hmv4b860hFM1VI/Nd439I/73NU/AgUDt2VEZJKNbLxJwIMMerok6EVbUmkC\nQFiATxEKzoqCh7NV7z0Y2NDKtACzhJe93Gy/w5eF0BtyOZUaGotwtOHTgd/l\n3ViZCKNXMPp0tCdlqnnYZaIM0PkalWFrX6KixQZdm59GC4kzfzeMLCib1dCV\nY/kpw1WNqslbTzZTXeVFPueUwXkVF28FfGjwsnwRsJIi/ElzbyqIs3JWcbDP\nUgacdxpD301LSIMurGF1qcNf7pdSZL2kHV83kDmxL6N4ExLwDDNpDSdBaFJa\ndmRj66fF2DI8+ViLBJ7V9n9rJ73/XjU6v2ZxnCnX+gip7cGYBzCXtrjGGpW3\nVfdfotwLsHbGrrgGLVpmotiFePgzs/azbT0s2HxELXesFinR1bB8mhiDbOo3\nfj8E\r\n=SQ00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/list":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/menu-surface":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.e41a70425.0_1576711268518_0.20519497312776958","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/menu","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec66715245cb76bd7b65e510cb37de53ce7ee1a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.bac43eb43.0.tgz","fileCount":33,"integrity":"sha512-ThKf56M47qvJ4i4UDmn6rNiq12oK247u2EwZCCaCDHcZDx/iuPrFPLLeGIVkdxPYhLkYeyX5YGfvd3KzngEdhA==","signatures":[{"sig":"MEYCIQDMKcv0PX1POrCjApcHCgPEvLkJzkvXH14qaOtUUACnLwIhAMZIgZoFQtmMToxW8lNxh2ITHLOz+BN5iK6wwy23IweC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVPCRA9TVsSAnZWagAAzcoQAIGP0fTBiGh0MsIcA8dK\nbwqy2UM9mcHYI+GdFYcXrbVB6s7PjYQep1rlEOXlJL0qLD+pBC5HsB2kg8ZA\nQdYqIaaaZ9vxypg8h8V3I2zlMdUNzb5W+P6xNuoEQe22s7+VpPK8tWe+WVKS\n7v9Xx+ySD5zPXQgzRw8p+LNSp6fQw/NcGwUU6jrOb9/87t4B3ATPcVxfERuD\nGZYmIjYevK/W/4K090VsKD3tcfeX98UuriD77wR1z+ZHQ4hBNfp25nItHPTH\nKrc3kqf8tX++VXXhqo5IjA9vG/62ieSvzwm79YC7fCVO3XC9yzEdiMpaSxfs\n+2qxXoMh/MfEdZBBjSIvrORVUjQ2M0AmIvzsWrRYTswl1ZOIps5fJm4PxsOW\nZrnn6T8qXkz8vUe5wvMFtpOVeHTEz+P9hZV2z2pcM3VcjevRj8ICez4MQ0uF\nNIAQAAp301OyY+YzRISETIOd26Khq1xGo3AKOhtJPyFn64w5yvXiNtQNG0E4\n22jZ+uoXa4KfnwieXlqla+eHijjFi2xlkjA2ia7iOVl4j06JldKOp18eEMjb\nSW7vNuX63FVT0kbzX0s8HMuNZ3YU+DPnNnA3M5WcxUv5az75jAOQRySpN79F\nRtmVZadKskJh2J61yqzLmP1WMKM6bXqm3asV2t/YmlwV6kXGy51+OY3kc61B\nEtgA\r\n=K1X2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/list":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/menu-surface":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.bac43eb43.0_1576711502728_0.9835604740594219","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/menu","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"488eb86938016bfa1779765f4a1da1633ad52fb2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.2e491de55.0.tgz","fileCount":33,"integrity":"sha512-DwDmCM12b7DAjh6yRl5hhO3fx1lMmpvnveZv8gjZU57wo+/YJLjnneSCHxdUa2MYhbRH6EzHlVNZd6/hzFbLRg==","signatures":[{"sig":"MEUCIEUDUDnSVCQKTEhdnni/OwlmehvUcBoNlCmddyOCAsLPAiEAjf5kQ9GZaRA5YevCFsysCYEBZoshyA1ToAeHD+ks+2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YVCRA9TVsSAnZWagAAGAMP/ROiW7tn8Z5cyq9kmLj4\nfrup8pRibU8n19HEkGALsyQQC1nD69mKxQsvUjq0/R+1Kieo+qrh+38/d3eP\n5Pe1hZ5NwlyFSt3QkkG043HUevAHwjZKg/80FAieuhbZfxtLqT7m2jJYdX1g\n3cdMshWVTzJOX7qGKdyG991xDLcqtRR/+lYLDNLQ6p5ntRAlqbi1LxlRHPZN\nYD1f4YYC9Ws6OlZLaesI7yuAEtCh/2N/8sDZc1KYtYhCpAyyj5jVhraU/IgJ\nhmbFRM0n7GMGc4dOLMkwW2cug6AdRxGWQ83X7QDz4GJREJZNsYTP3kKlTgIs\n82I8xxKwJzjIXJtmRXN/WeXfXEUO6C+t5RdYrRhBECmGReEYznTKPcRuPEyu\nPRx41Va2/zDwcl5R2n6cAz3EwaMxdSX6mZn1NSz5eP+NwlgJa6/bMScaGgHJ\n4ElSlS2igWU3W/tfsVO4bv5xVHIVkKQH82O/L3VXwy0pykNZHm8MudWM8weO\nw38JPEqj+N7Lm+nmf+i9ZuEY5vb8UZDQ6euIHVSqstQx+oK/CUV0djV+gI9A\nlyFDwxCCf9imK9OSRHsqaQoc2E60BeiMukZgBIvpN3nzFcAq9BON6s2nDbCv\nIcbtzUt+Rjbf4R9bon3o8EeI7wiMpBGHtQ6mZNdrU4osHY+A3gWX+aAkINlv\nvK2b\r\n=Fb36\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/list":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/menu-surface":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.2e491de55.0_1576752660997_0.28604652778361106","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/menu","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02a3db47fb6e8097c6be2c0f41c522d50590a854","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ae101c144.0.tgz","fileCount":33,"integrity":"sha512-Rq7E3KhWBcUr4rWvasiwVTBr3skgvHcNFBfxlqJG3pORkWij1/PxWGv87UhAQFYHLhuVQnwCm5TieW720m+/Ow==","signatures":[{"sig":"MEYCIQDoToJeHIOoer4epZ2XK+vQv65kpjCcVaayXRjwHz88DAIhAOVV2iToaO3BKc7faaWFp4GSita5hxiQBhWhXUYV12bg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SWCRA9TVsSAnZWagAA5p4P/0PsgckP0FNeYlXNhqqy\neBXWAFQoPOTVi330du31LjlLoyYMDMwy9s2oylBDzxit/VocsYABZX9j5zF7\n23Hied2hV5sV267hP0hA/fjqZontYSV9VrETrFgOKVvElzQ1rvm+DbvmmkX4\ngI2nsgRPuXUM1hYIX5tv2QjtMJaBS0mqXDKFtycgpb6cW1R9GK02lh776Jwt\n4RSecli3LNmzrH7j+qWGbzb0Z/W8EuJTntIgblanxOCUev+oCbG7ZK4IMIuc\neUR1HhwhZdNpwRcGJ5JjE8Y82eFk+IZG1dDOR3QXqlaZ+doCay+DSzGQZy3E\nFNpWwbl8P2/NnsD3JsjSma5EKiziMHyv8I+V/1sysISV6Rzu+IQUs5S3SSWW\nsI/bB/y7GisUFFzlA7CXOMlORcF2nm1Kpm2iI2wO7Wx2tFPamkuRgQ90MTKt\nXB3gHFQgx4VdECGesDOlJtE2tPkbvZX+968Hr+JxvihBI8gCpyYDTKNIEPpn\nhjzbgrGcEacWZwL8uVjk9iKKB30eidjV6m0KAdblI2x4/kwRwAC+6kn4Jghv\n+BD5HLQ/C98gnevN/4i4OUXAYOYwgmtWUU0QmvKIHqsl44eg8WYegFg9S7tT\nCWs23UhvWwXxsQRFBydc9FxfonptKm1PfpA2q0m5zacH40fBvnsQuT0Q2l65\nNMEW\r\n=9jkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/list":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/menu-surface":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ae101c144.0_1576772758229_0.7867959454677005","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/menu","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c93bf86a150df1168c62ab4b07d425ebd4d2ca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a51c31f26.0.tgz","fileCount":33,"integrity":"sha512-zw89HlX/xEbVIV2W+RVi4LqhRobsiAyPB0gsP+0HExLLYHY6cbmS1J+IuPtGUNtiCQqW4zWdQnQAZrluKYZfyw==","signatures":[{"sig":"MEUCIC/NblUAKxh/y6u53iUQPLe/ZLOwsNCvsiqKAz50pbxdAiEAsojkcikPUV4XkbfXcxxBuzGqJd1t1pXjga1OwvadrmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7A+CRA9TVsSAnZWagAAxewP/RE3Fgz60Bhp7mFoH1GC\nYT2vYR1bQzu9sy2upK2MK8punAJ7UdYPrDxNrCLPZRQPAqffq5RVa/Zf2PyJ\nBwMTFZCJFrSGm9FcPj/ERvVTq80iHLTsz2/iNuHBlb0KjJ7xH6rWw30os/tf\nnDhbsZzZqoSFAQ1v1Fwunw+FR0JJ7ZpURF6xeV16n5WuKkwgq3kyuca7dMnR\nQNN5sWfk1vdvDswNyXt/qhFWXv50puioBJqv+fCN0liQcZP5e41fIZI+YMQP\n7TYb7Pt/CAKm2EYJRSTpVx5DvZm8ArsiMji5uK0g3nhgNuFzvnfbARkQIRCE\noFJEpBxhXdVxLTk4Xnvwcf7LZUMgdKx0QvHuGwm1NlspBx4N909MTCjB2kiU\n4f4JCoZxuuhlLGhex0Yqozeeeg0xBd+sZpTLWnPyVnidfkzyO4qSMskAMZ+0\n2XWeP9L3TUwVJvTKO8IaZS2Ki8LThkaudAkZ0jRHC/Unlo7Ks//2OmdOiP0q\nGExiIkVYxzsVB9Dlcz4tdGZqSiojVdj0BcC/0HWy0iAuLz/FyAGoZ3AtQAbA\nH0UPJkg/HNP5XBHNvBNCQS+5nLyhFEkW6ndZZssN+i3zzjkgJerLRczReqGZ\n1QnRWAHWdFNzn2Zh4mLZozO3pqH4FxeOnWXnVpZejCwvZKXQXx55X/rKrm+q\n57fG\r\n=rk9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/list":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/menu-surface":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a51c31f26.0_1576775741761_0.4917815356132802","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/menu","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18dd6753a1893325025f4d42dd58d7bcfbbc92cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.21fc4e13b.0.tgz","fileCount":33,"integrity":"sha512-Z5tFZyjTEolNCRKFsozXG60FOQ5zaup7T2uvr7/fM1tGv2Ta9XGZI2XyoZNE2a974oI8nS2uqykMtdEgqlE80Q==","signatures":[{"sig":"MEYCIQDYR/p9AFSHfyC4InUO9/GA/idg8pLk2OSAqyaoCuykBgIhAMMu+EvqDhQlcEVeKdBxnqcYvyj39CUt3MwOVb3kg+e+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tfCRA9TVsSAnZWagAAuToP/0oy7rFNYlb4FZX+jbZZ\nqjcjMEyOLonfEeMIqisNe90KAfzNL6/Hv1+i8lu2cUKULIJfqS8rreduT2t+\naiYQQ/CVQ+zIb4a7qYFMm8iWsZsFY3b8lY1Q+so8be5yVLyEK9cIJjvGu4wV\nP6CAp44T8JiB7RobPgG/bFpIQtWulAFgAq5nrPVMNMmoz0e+fEhohz0KlE8/\nVMpfkx5TX40uVRptIUKGcjZL3JtxcKwCBxrAOW2zrDylleY58lCDQ55ob4Nv\n2c5rdFFha0sv/Yak/MDtwZjiqPL2xg2R3l28jd3VMsRgENLyRWewCKJ32yUm\nZAGqOKIomveJObyIUhf3vBxpVD2wsMh+ehnY/ZjSnHmdNLzc+u8vJlwCLgTy\nYgMD4LBYJbTohBPgUNPEXmWA/9WBLTLCxIgdYJChUAMGFip3R3cCr8dJxVDu\nlpwLvBi+5kKjEOshEVAzhFbsVSA1YTD+fwi1S77AR4tGR6YIQZpYabmb7qpx\nwzlUQRePd1dL/WouFVC4JQ6ThEJABSogAyNdTx94RHuDUGPX4Riv0mN6QhOb\nURP8PzHQLN2o4REgRK9fwtpiFoKwZt0cFARXCGyjEUfKhOemlnh1nzB+3WbZ\nIc6gy/YcOvTLGhhLAUgid/Z7MJbQkgAlJEjPwv+XB/ER+6y9/mHDv+BbCv7g\nBE3J\r\n=JrkU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/list":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/menu-surface":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.21fc4e13b.0_1576790879474_0.5804142738433198","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/menu","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca05ec6f71c7a6db1ec529ae23e614f9dd948513","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":33,"integrity":"sha512-Kuu48VyTYngMsHp7lXMAOik98qmPi3SyMLUT8dmzrPJ47CaPzGG8WdiyfoW+jhHCNwochz0H/v3ZkifRUsNOJA==","signatures":[{"sig":"MEQCIDC7Swrh5K6f1iR2bEYarX9Yt47kiTEHWWq0EsaOhYdZAiBJjoI2Ovgu368q8zKGcdePNaY//8Czj7siDQSekpCmBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/i8CRA9TVsSAnZWagAAyzoQAJrZtk8GIWPMoDFaPRcH\nZQvTAqBV/l6MiyC5hTsLpTjUusMtCwLO6YH4kggmEV64EZWiutGhdljrLSwu\nv7J4AjJSMntwGOTEOSL1/5fdIVLIrRCLAo28HkOe+RpcJKNtxo7o9XFc2HOc\nNTlehKMq36l9kFqM23bluYgSOAwW3u8dMupxH7jnH4jLeDoUKokc3l9Vmvl+\nZ/RzlkDgVRt77VuqxL5Cdd/hJzBBSkQFh812j6LGv3a7UaBNhOCqxpsbhJw4\ncJ9akvi3yKTbggsfBbQc7dmytvQEIeLavQagdNW1pYpcF6JbVF1pUKVFUm9z\nWTJJD5sAa27VVCG+GpIv5GvWJc+Eah15kX8yo0cM+0gxtYW/DAAEBVR5897P\n0E39Vw2o/NPmoC2kQ8NOsfina7N6+sSL/5rkhshpi0o+kz9jxuVAj49htJ8Z\nkIscBR2Nwei0ioYVkad690CsSHZoetEXBHGwy+T3fw8CVfkrzoO+baICEXie\nlYWHSDp7n+pMCPISKtTxuNoixLA/ajoz6UpY4tRaDqc+OnLNnE8tuFOEdi6G\nw5ktiQyVjT/cGixbPM+6nn3VH8/C0Wd0KjXpI+R4kjm/goj4eO5pQZK0vl7a\nQ4FmMU8+okiGKaxfyc8SaxGFzLuzfXHilUaa4y8T1kTOy+svseyI+6a7BzNL\nLo7L\r\n=ZVWE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/list":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/menu-surface":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d2ae6e17d.0_1576794300374_0.8680193440959776","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/menu","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3517a06f5563ee50a56b23be4b45a007d8ea200a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ba30399ad.0.tgz","fileCount":33,"integrity":"sha512-v06CVsmlllv5cSUw52RfmetmgcAaw8TvMBLZuDQtrno+7JHpBU/DRT6SRdoW4S7BrxEijk9bduhLJ0Qnz7iv2A==","signatures":[{"sig":"MEUCIQDvKZFozz1ClUAlyCNYU/wnhBa92jKUoCY9Jvt88Uj+VwIgUX4AaI6Vlvbn1YQuZVytQQUuYUigfG/bP6Ci0lQuSLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+VCRA9TVsSAnZWagAABKgQAJmX1IPJv8VA0rrHAqkG\ninkZu7OQRVwdvDTqyZewL2QHWN9DtDbCA2G6pi69n9eNkmLqlSNp4zhyLRYU\nvLpnFQ28sd01b8lihYSBYKOcFdIEQ3UhV2YOl4U075hHFunCPTjWcsBoAb35\n0SPh5buhLfNhsY4EwF/H0qnVmHdhZvydzmGBxxCU2qs6Zz1qeOwl2VboS/7X\n0qQF2IwEulcrDAgaaOg4CkWbOVnBh5b0IaCBnnIxS/5ldTJeKwAdWAR3YGpe\nraoajCUdWHJa+1WF8R2xCuYa1WgKrJWAKuQPjqCBhaY/+5/9TvMclzUYJXL+\ny/H0Z8iSQw7mV+FtDQU0MqWXwUsLbArti41id6v2soI8ZVYFrYIa4gaCAOyD\nnMkaaHLqh0d0zFNohmenOJYVjvrhgb9WdkDBxCjRFcQLlDnrKfY8CdAl9b12\nmibmG6JOeQTtVpzn35oYmUT8cgxOYAEPIucyjDjiFh7ci4P0Qo+ViKCRke5T\nwV7Fktig/O3vsIzR854fNB1pF58zBgTFQqSwrIHQgi9Q36sJVSOEheUrNTNg\nrIhonFTnJnVnC06UjUJE/iwCmFYa04Baww/dKbgRjgSTrG7kTRnKgsbTw8eh\n+Oqjab0ZY1K+MrLB0wb0Re/XxJ5EXwNJpNy7maaXB0wv5XEB+dYj27dzSavL\nXRpx\r\n=QY2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/list":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/menu-surface":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ba30399ad.0_1576804244672_0.811978520921373","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/menu","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a56a1c1fdad94651586334689f011f6d38c5d64","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a08ccec35.0.tgz","fileCount":33,"integrity":"sha512-XVZbK4aRlGEqceX9aIQ+aRejm2LbXzcm+RuHevNzu0ba2rEPguuedGoZQ4/7nL2oVUNSUXjXox0GmviayyRwKA==","signatures":[{"sig":"MEUCIQCtimD5OLcjRjCr4FW3d452RDoc7EHE36Yp5u+EkJMsEQIgdt7aR9Omhk0nxAO7b2IRke17m86l+xvr/AXDnhiE25Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vj7CRA9TVsSAnZWagAA5kQP/0p4lmHVwM4A6oQRPc0u\nM/juQXuwfBcPb0A6C2nOJnh/7yP7rNUPzfyA+TvoBNEpfQiPY0qVSFCAZCYj\n1VaakjoM0eZjOzbLJ3SHEQ1aVvPWtEo3weyoYUyZi+fzddwiBoEZpnJG0jns\nMmnBiG6S6APXCMMelpbh1dcehsvMuLkdinbtWXv5MwuEDDn3aqr3s+6CWJbZ\nPn+1wjBblXxOQT33/brtHzsyxwesJ4NR/vn+1jj/NCMRZfwA4jLha9eG3/W/\n9CFiHYim6TBH30LVaxBQOttOdpqs0ePmuXobXArT1et1BUQWbFUPx3Xab2IO\nG7Y2S0TrrqXphjTwfQhCASe00wcTPXBx6l1KeyV0ZJsgxYDOvzvyn0BqnABy\n7L6+xoHMGhM21DWvgWNj9sywwVTuxXtUwMIadL2ByycFJgsKCZQOihCvOI56\niL3opdBQpjymsjiiWJg4X6RQ0h2E+l0lgNe/EXQ5yKPFQRULwAgXJMFUvJbE\nUNIfQywnFOHRRkJiQKAYZne39ejTyNrMaAdf47Kd74Xqgj6JG4WHGhbeP1Gb\nkpTt3YWxzpA1E33SjEj7RCOsTkYgqosx1rS1JGXlZky1LXDMR9+MwGy29vnK\nGrkMGkxp7c1YaIbO1rbXhdxZPkLPKwsQ5WtVP3QsamCSMlTTfleJlbIQsozT\nPT9Y\r\n=ELWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/list":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/menu-surface":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a08ccec35.0_1576884474600_0.8322808204082768","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/menu","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0bb9d885bb9c59826c189b669c0f6b92a0f3eb4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a2f75105e.0.tgz","fileCount":33,"integrity":"sha512-Or5doY4Ha0CSuqnZ4nziqMs7osQuyZAwd+nDOjnhD7U+yU8U5SDJiYnczXU1HSB9Uz7nSJU9mptAXQ3DgNHGWQ==","signatures":[{"sig":"MEUCIFtlDT1llBfxmOG3Oe3xp8ITUBLP2jqhClDOUYwDDU/lAiEAmy5Wmmq3nWja5A+lgrCVQ7dnZ4AgiQ+5vWjCuSIuFS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoWCRA9TVsSAnZWagAACmEQAIxyF9ziJEubCvt3Ftv3\nvdyIFbI9lTxDy4ForpeVqWHSzUJT7RQitN9D61cM+m1UshmUqceMGBRHFQ+Z\n+SVpvSZD+epZqiqUIw6nhApK9AUVeXAhWEaGV+ki5HA8X87TLb5yRVdRbBTI\nZbjenSePSBhikJijQ7ZBB/2P+MGnp4XhqhBcWZ/1tBMuQT7Y2akz5twtk9MY\nbH8sVwt39etoSodiIcUo7c4P/TgYKBse4aFzvlj1x0HAoMbNv14bSVkDCvcH\nkFBdSBQPIOQBohvJZa0UZf/aB22T6P1UUBkROHdhHuCOTtp9CTgj732bXNdM\narR4arsPCxcrkeNmHIANTpaTHyRW9363OM6grjOdnRsiNaC6cFNDbByn+TZc\nMDBfgyhOIGebyIVqOxbHM/9BFEWXj/bBXCrGbErb0Gyu3fEE5L7VILQfqsD3\n4o5q954OND0iqUnL6AIdKXRLr1X0TxUxsvXg3ueUSzpxyvQjpuGvz3QDYkFF\n/3H/xMrCkkgZqoBvoLuWNPNz8lG290OE0PUw+ZyEED0yR7LDHO3gbFCUQVzR\n6/z9+YhAufzJq8faupaasnPunYpSv0gi/mzzHVOdzAOdnP7ejv9rxPTcFNgt\nq6v/vjJp5lj0XPP/n2Mg8zF4pCJTWjUpmBH5ci9fTWzEDNqaYVSBAANfhVcn\nvGXa\r\n=w+2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/list":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/menu-surface":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a2f75105e.0_1577130517701_0.6187957278067922","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/menu","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66901758367a964b53324d7a726200d5e89d21af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c054a24c7.0.tgz","fileCount":33,"integrity":"sha512-qPb2fv8JyQNxW240EFHr+jSSGypJ9m/lTy8HmmkkP5nAP5hMigkndNgV1UyLDsw//6qiTVKpE87mgbZxsZ+z3A==","signatures":[{"sig":"MEQCIEf4gdK1zOGN7fBmL2UGffCFvzGH/lSnb7+HlcvZBG+uAiAmMCR7FLlT8sfKfHFdVmmrQTYVzJ2oNIWmsQQJJ56gig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATbDCRA9TVsSAnZWagAAiNIP/02jhMvVHbyEVrCy5UDf\nxdZbBKfYkHYpqtuBsjd1eV2vLTSXXutZG6PgoItBSKM5ge5KCHF1zgqthfnA\n42AInSSqVA6dCMiHvYkCmX4bGEln6C28+CPfNJ5t4USkO9Weo603jlJhNcoe\nrUxvoKt2jVIER97WG0/J36Rd965EDNUuhdISRaHeBZeDvOx6N+ts0Lp++b9u\n4F+TZeMkVX1EyoqRViQbIvaq4gsLR4AynMMlFk9o7OhDpHlG5ZhwPFj+EME4\nyW54ZtcwpqIZZd2XSOK8Yj/CMRvgpqPMyJJH7Bbj2zFxXBynwRq33RGlcxuD\nlv+BHaohwyo3jCUUTsNdChTbYCy0SicMOYmgz/iA6pLLy8W0+pwdkB3KSbd8\nhQdlun4v0/puhSwOy0iFFmdJ6RfXxJLL3QALUReCQxQekoo1W4oF/jza49Wk\nNkowwuQF+LsVAY1Bp1Q1Gp1iIIY/zhIuyd/UzcE4mezKIdiNuk8hLDZZvSpo\nMVz16osjjUJEuIWd8Z8Bljc+fG8B//4vFydLzM9jce2QcTDq4EY1Niay/kUj\nIELBzx1j+2PVsTEmMx0lB+m//kMzaCuGk0HafN1tJHCffFify5plz2V3ScwY\nxNRXs6Wy5FY7MKgJvwvor2kJTOWCW2qlAtNSdPrKmLFhWqnGa6mpgU7CC0m2\n/UDu\r\n=F3Zp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/list":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/menu-surface":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c054a24c7.0_1577137859346_0.9383728449598261","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/menu","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a6140d31e6b5fde731babbcef3a8ec16094325","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c6808c51c.0.tgz","fileCount":33,"integrity":"sha512-TdkgiefjngbWUkd31+dCuDOnc2+0PRiu0xkZHiuckq/DBW5ThA+OE/8ORSMYOXslJQKA+dXDGVoSGLlf7KWVLQ==","signatures":[{"sig":"MEYCIQDO2sZzordqoNNNuhwB1LzYzo1enFzbTVizugRE7eN8fwIhALWvFwxAkJuhTmH6klW/2NpIgiy9fNbCYkqyPW8ntMWl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfMCRA9TVsSAnZWagAA0w4P/1hiEWyQIwthvQBW+2Pm\nJuZM8TvWh+fky2mWLPGzg2KYfmsFfM82OnJaK19dXFGZAZ7ugz0BU4pShfCa\nUw6AlMttStJay/+Ck9VzdqW8BxcFrOq8G9OCmoqMAxXcRi0xtDdJpZRQR16R\nAfBIu/gofzTgAFixWhCx/nwcXCjIpaiE9ZYDF0JYyqeQoAxLYEvvj23h864m\nVOK4n23/nETDtILmzvANmuFKkHtO3lLh4YuEVfysQNx+DPDmi/WhyCqjOp7x\neX+nIpzb4vxilNOnZ7JyAiMSqwPqTP8b3O4h6s6yw1NF8mbkIZHK/Z/X16aC\nP+gvAr58Eu7zShJuC2HCmu5JyJ2URrEhdhzlhSw1mAxBnZS1j9PNGSjPuy3B\nr8c/MzS2aqh52AgLEyTxS+uRcSZhmxoLrqAOO3FvZKkDLZ0r9fnD7idWyk1R\nESI1SPiZ7QgDfoE9PeOikj6FP4RfurfEESwpdDxml1OApCGSwYsdR/WNOplP\nrfghmbKx+iNIwW6UZlXFrGojac3fehNaPA3sXweoMHFoW8SIorkhxdPhe65V\nh0ycvrxXRhJQkHQadRFCRFY3rCsI8U9ridpv5/9PsqyNFgbo/6ca61NM0iz9\nLgMC91pHfU9noypYETVoVAMf6KQLI3gtrlEBUcqgj1TBTcx5Rl8u77mJ7Qm2\n385n\r\n=5NNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/list":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/menu-surface":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c6808c51c.0_1577138124226_0.7804120392265894","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/menu","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f26734bdda37fc44116a9b6705f4482e456309c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7bce9cf77.0.tgz","fileCount":33,"integrity":"sha512-RV/BPKEiQ5Qfm3gmTrlpIputVCDCb+T1Jc89Vj3uAW/YgFNBJm63KROw0SKHarEm+7nLNGXZcktdtagmJ40K9w==","signatures":[{"sig":"MEYCIQCs/2FSjqr3PbhyYbXSTLjNUl1yDZcg7qaDwWcsXB3jKwIhAPcMRd6VJKpATiWFzp1cVYPqFUmQJK/5hNV7gIhUF/pZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBQADCRA9TVsSAnZWagAA894P/1wUojU5N/ka8BnHNLtT\nfRtZckUpl62iRUyNSn7yZJtNjiMDtJqDIQQOFsAVtES9UpjY9PxlYg0nuq8U\n028Ejtfw5xO1/6zpBKV2Mu7oXgP7ii/T43/NkDWr6JOakzMrdDmGnAnEVh2/\n6/tW5K6EujotdlPVEf02tO6KpK0V9DZ/3BkA3xk0S7DfLT0X96Yvmca3q/4p\nlAgRBgAUipJPONvfnfkjHNoHwi1gsbbO7RtSh1ysTDy1MjzCOcxmNEFkl/ba\nsaL5yMN9pGFeMcri/JR0WM3+t9CCGLRDukyQ51VJmsFVFbBDZ0I+v6otqBkJ\nzlNA5OrhtSej3v6+2a9qBG6c8D5JJ16YlBlW/6s3gx+BNaFXMgFJc6G3Zcmy\naAZvlG53BFSlSdYche4sBq3sRiztJTGFxseosC1Z0Vl3qYzs2MJg/SamJsmz\nn8LVjDxE3+9KeMnq0d5GFoAr7gEGUnQ7CT4arLNYUic0EhCtvxry8qEwrebq\nyrMoY2b3YuvntLEStjoiGg1HTUQz+BCf18kzpMuDK3wMv3+V/P5DLWFgn9C5\nGmaf+anDXMIAbzkfA2Ic/Dp9T8O57yzTsHsaZSGeWRi54KOaxvCj8Ys+qDsE\nFlP6IjlKlLLx/Id7S70g+DqOqAU2MIw+wkWfl7yrUq3X3YjYlayRtqk62wmi\nYPVX\r\n=2I1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/list":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/menu-surface":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7bce9cf77.0_1577385987478_0.47924939886015094","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/menu","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48f9724c8a2b538d8207c0f143365417707762e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c92f038c3.0.tgz","fileCount":33,"integrity":"sha512-UPV/0b9s73ycY/RAemZULkiaC3wvzb9bmkEkvg9C2fZvoGELuW49VxhcBkkXb9w+zMoBxImE0/HH5XHRRMZhCg==","signatures":[{"sig":"MEYCIQDEKDEifWwbCRENeH0Ki8/k2E6fwA0jTGga9qciwKhkoAIhAN4aIhwfwR8pK4I0aR2LP59dxWWN4an8gu3pwloNPF9c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRQCRA9TVsSAnZWagAA7PsP/3S5kbbloLN/oxG+107O\nsdklAwESBobAt62UBlhG4WudI24QSr0CICjdkytabsCbZdutB4M/SqR002Sd\nWmyIjHSLHgX5+uzC89tFXUFrbqfzNDniUxDumkTMwOveozlEA2Ev9Kt+2Knu\nUU/nFTzEnbDuObz9N9MpW0SZhS0xGdCUglj8Odrq43UbCYGU+3ciYtKhLd9v\nkVh3ae/acUHuOT9lURsZ2MUJJ9Ap4jpr66KwK16q/Oe9QUq9t4kKoKA/tpFY\nTPvjohhn7N+TvU1BktMMYthPogUUsRgpZK7tR4OFYL/i3GCxd032xhmsUaTm\ncdZnmWPDhvMAlHEhnAE+THjk1h9oVe8XnHTdwoOa07eBYyCQLs8qPGDvmmK0\nVOYNRvq4Zg6IW7p+iCIBxS0+oZv7F3mHr5o6/yaqUa2/jzeuD5d8+TlM+NZN\nLYF7yNEaeP1m4dk5JX9I4Simybvd1Kyv1VLndBJxHetj+rqjuch0HdbdjwhH\nbHbVnkBsRK/7QVyI3/OQUyZgW22/yrZRLoqO1fQLVbZZ8RzuosG8UVk+tTvf\n9XqDBFpMPTh4QzqgehjXqVwv53zx3erCQSj1Z3H1pHYQCzTX2fRckBTDKHp/\nUXlTOT+aZ59rJry+d3q5QL+x+5oOt+9edhceMYu/zUquVCD9+M/kY2pnOFiy\ncfB4\r\n=+hKs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/list":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/menu-surface":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c92f038c3.0_1577743440171_0.6539070307880206","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/menu","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d60c69183723f6544b890f3603ce389f45c7dcb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1f1ac7558.0.tgz","fileCount":33,"integrity":"sha512-GrUZbBD1mQ9FqAk1xnpQxZYtk2KlAoFSMJTU0kmkDQsXPm7i4tyXGixxdiZkbJFHryaxWtdWdOeFhJzE2X612A==","signatures":[{"sig":"MEQCIAdtG9X2A8p4fKkhatB0vX7KMtkx8CzYCpHved47YP/vAiBokGoPKaBVcoczntk8lPQbNLrI73jW01fEbWgdbE01SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlicCRA9TVsSAnZWagAAlNwP/RkUeDfW7M70wBSX5VKU\noesDCvfQ1K8o1t+Jh6wVF1TvZWUCwgvUGrTO7puBHGmS8BAxrKjmgS7QJj5A\nZekmjnsmzYQ4BWkrUvrVd4qc4/30v2Vnt/Q5DTxVsFUoBn/tWec5MXvaxlqP\nhui4lLmomNKLMRCD+7ntIqFALrHkpibiWIUFWMHydz55t4mkbrysdKOrEgBG\nSUZnIe+6/XwYCd7Mmw1dph2Hr45EybuRuaeFLpAUIElstGbaaneRYXvv5xA4\nK++vYEFgWMrBpYF+EKwoZJzsdVUKYGKM1F0jBraWm/wmTNAELRhq6K3gNRT6\nu6VehCi8tJPY6Uil7fbBGML1/Fu1dOGEM85JNvhta4vxO22WcEqDFMs0vX0L\n46HhqabErPaayhGyNOePj7sK0/UsyEhYEk+EviKPA1Imq893xKZpDOs0JcwK\nbsxeZv5aNilqqglBfnxsgi5t0vSa0ynh+5axx5wxreN1gfKiP948A8766ppv\nPqT8l91VynZ2Qy1AjhJ+V2tIqDbO6Fo8OJaBTPwzOlDaLELTckVLKLm84VEF\nYLE65piOwf+HZTi9CwfRs9AplNLyNyhAlk9KkbsX2Oc08A/InYX3l8uX9TTB\nC3JpeoNVj2WVW3X5dea0qLXb1IGxZn/2HwK0Wzv8g+p/2+hzLwyIlIKn0w57\nik37\r\n=UP0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/list":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/menu-surface":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1f1ac7558.0_1577998492278_0.9021138432911013","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/menu","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf0426dfc0935d36a40ec0e5293d6bf79e36b8f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ec26e799c.0.tgz","fileCount":33,"integrity":"sha512-ijyqAeFciPLviS4HXoF74Ig6T9LL0BP1lJ00AnPfG/lWqyiC/sq1Tptf6vvQZ98DOIZHFm8BWteCHKufxSuFig==","signatures":[{"sig":"MEUCIQDUgtsDN/nMMQf0iCMxLeWB9sKtSpViw6oYu91iB1heCQIgQiaqaBPW/uFikMgUXUdp+Ev3ioHl0pEJYsnaeKcOP1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPqCRA9TVsSAnZWagAAhRQP/jq8ZGhht0Xen8b8Vr/a\nf6kfm4rEC+ErirmmVoNMdPZQHXADtleiprXe+7d1rIRz9L/7htnYTzOGE46A\nEEpUty0dCXbzx4ZQH2XJTueFzDVnW7Q6kofIj33ixKTZaAE8yHC0bN4OONgo\nmxqyVqYP5QBHfzTF2bLeRAcpqOZl5aCECCoHVAEdx0x3Glxaqhhcxt3dFJ8V\nvZxanErccSSGYXPR0/sSR9OZKTwPGSXwJWDBTgMBqUlGB86t6SbVfSE5rp6J\nDlGn2C91SaN3kam7+cH1rZwRv4Hyl8xnlY2Rg9ywWGMV6wSF+gvDT3PEGX+V\n1E3HZz9mZaBZf/YGISdWom30tpj9mWLF6aSNqPJFh7Kryy9w7DdpG0WTXfic\nZnwDjCnMf8NjeR3i2f967Wcu39U9cbx9qn50ubHHejCaKYHX/Z4vsURkxWPp\nm+nAPAJJzFG+Qmwvq7oXcZ3spIfGuvAY+AuVWuKRn1Ah2IY4acs38Sj23gur\nwCFcGcESmteQON1vGBcHiDZzOxVIwgr70Et5v27VPuQGlcHnX+Qct+kznHUg\ntidJxznzo67f8tLBd1nhMNoX+xyE0WbDvlmUrc+1t86/yOkCC4gRETWtxODe\nDm5PXn7U2BWPPY2SGkRxLiGqIuna1LgGsT002Pd9rHX/Bo+7SFtX7OOqM1r5\nliYd\r\n=yCT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/list":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/menu-surface":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ec26e799c.0_1578001385828_0.8526284956882202","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/menu","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01e10c47d92e373286a10808209a132287cbe0c4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.0a40ced40.0.tgz","fileCount":33,"integrity":"sha512-ZsB+P5ycw87005mQMrG4KesRC2n0L63fvdU2u8BkiWEswHsyC88pSDwYDq4cAe5EZaox4nvSQ4DFBTN+gozO5Q==","signatures":[{"sig":"MEUCIC+LZ8GDWErNutyYG02HqmsV4/pBBhehRb4A0tmQxjAnAiEA6tFPOqG0KLfiDyQICuEI/VmHpupMKMKauDZ5sTON4d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3WgCRA9TVsSAnZWagAAznMP/02dMIKsIDWdvRLnu3QG\nrYPJ8oCEq0MQZQqVASJFkM4SdVsU+CaKrZ2uGxjZyiJ5NutnsELy//u3mfXW\nF1KZPIWN44WupCW279oDb0BoSETFokHdeKd/4ySwsdGHmB/qGH3V712Pg777\noyuZsMwcnqlcTR4y6f06lhkKtK3HlEIMEQKW4z+NiZWgvvdHLp95rQ8ShqEq\nWheKmXKvtaSFXUPEaD6Z+b8fFEB8n3WeoPWnfLLakR/d7vjkNhwiN5DD5jzi\nsnJQ/O+R8dx3fhx1JEGPTTU/DoV4vBRH50Tz3BIKYukposV660MK63dsAPol\n8Jk16DQsEhTJfR1dmp+sQd5tmetEKZboqmeBrG9srIpPR3RIr6Apr/Tx+Tot\nX4wqlj8OBDszOLQWDqZvlbbuj6LVxM957U4hsq+djSvVGuxgav6OLaBxitWV\nxzCuM/D30GtbuSr3GPPScW4R5qQMdXRwOwYCP5V3xTzXHNy/o7+sxopbuiUD\nYuWmwDiW/UOiZ1XEMg3IwK03Utwx5nRqgDJ1FZd0xfld7tZ1+u0y4VXZxs4A\nwsSJj9YRrZKpcok5s1w+/+L0X9ntiblYfZBB2dBdudGAsIHWT3Sb5KopKMx6\nZVgYtG1cqlFKnOl5xMKmr0s588LavdbqVInalKf29AS8SiUX3UGQs/TFhrA9\nzMC7\r\n=QOQD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/list":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/menu-surface":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.0a40ced40.0_1578071456084_0.679879888955689","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/menu","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58e49b340c9c1c3f8bdc4950c388aeadb4d64904","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3adf84899.0.tgz","fileCount":33,"integrity":"sha512-sMqWIlof14nAAtQBBB1zIYd4PIvY6prB9HoH+uYZp3f7yKVhHwravuRXo/1U+TfLM4uWGyuHYJNKm3ctqvHXFw==","signatures":[{"sig":"MEUCIESe5DotgG5KMRncXCKKO0tCGK4S3cSuawS4A4SkBjPOAiEAy3XQGDmqwCd19NkzKMgwkmIDkvOs0oFvBdD5S10/0ZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aTCRA9TVsSAnZWagAAGKsP/2O3q7hBg8Mq7mHMAWg1\nhTVZh6PlxCPZnfoqPDJoOx7ZKkDFuabWmrWm8Kt+fsnlBrDJpKCF4EgMDfcY\nwW3fYntYUwA4FilCpTkWlUTQSa5BU5RWRGD0we4YZJX7bp5VCXCh61/1dNZm\nOqRHGfhx6BwMxs8PvTOiVurzJFHjHAHJ3lZJ5+VTMK57YmADO8LlwNUa1LBA\nEr9mzKBb8lb95sqD70ainImXfMLB4EdcZlmFTxjN9ShwrjjQEKPJYDVUe/8J\nQNWdztncPX7cx9Ju/YoYxMamCHkWe8/mr0G2d9G0T/l9/9ckROJrrIU2nQN+\nMDSAlmG4IgV0wg/sPbEn62PB2hjsK2BulljIGituKLmNkFm4mBQFWrejt9a2\nOc2/d1zJFIz8S9rTgaec64wbhtF7uk6xiNX40cuozXQNJJLnkjeB8Efwj75L\neOvXQNnP0C6e1qnahaNq8NaGuTHMD+dazwlbBrHjKwwH37l3sTw/NZEs8I6w\n5IpZmD1ePyphg5wSdM4y9fpGO1SVy5ln0mUA7p0PdsNErNvsEodkdOoGxVut\nPpWy9vsLw3FOtw6TNojzktobvTsL6mXQe5wNxnHcuM66W0tpr6CiJaO+kg19\nC/XIG7Kzg4BJj2A2H/J/KwcykmmVzWxDngWMUdST4sXvGb62FDkhw33/tjYN\nGYxA\r\n=kxGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/list":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/menu-surface":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3adf84899.0_1578075794645_0.876286098447792","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/menu","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8c174ed96e485f6ea076c960a22c9edcba4d387","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.0d42ee650.0.tgz","fileCount":33,"integrity":"sha512-RSS4X8Eu2EKZMIRoZjF18lJl2Ev4eRIFNHY9jF+htCk6/3HVoiQvVHD8zDVUxS8JoS9qXnWpqJjsUNioI2NuAg==","signatures":[{"sig":"MEQCIBTIbsnnDvF4viCO/+pTHhiBKtmvFXkFw2YAaQAf+Q1oAiBtiI5KTsGgM0ZoFAKSOcAcqgumr36D+gPKpW22ER58EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QxCRA9TVsSAnZWagAA1JAP/i0YQiHttTChisSSmNM7\nY1Cu7w/TM877w6FBK4kBFyqaw1YOuEUMRN/GqAqBzFua4+M6v0N/FKR5f99e\n6QeQk4Vn8GZYYBrylqk0y2jSzpdJXIi3+MPRJ7G5qfm/Eqt/OT0c5k/cwcBL\nKT7YuM1SBA62pvqVD9qiOKxMt4GcmSQlg/5JYEqhlzGkaYhMBwB7tVeM5Flw\neruHzdNF7J81ur0wm0HPpootBStFZnTEswAhcroGr9Ro58PcWUuxbnIurAJO\nULt860s3CNnAymP8vbHL9A4S2ashMk+0RtvXIAnYzBBKBmNLmyZIC7QcDcuG\ng4K9N7+ptG3YwNDrovRXBnxy4OOW9gAnnqJsWLhhGaramgkt3sjbVyXtKYpe\nV9Ynr6ftkYnue/CcPgN4k9TRsgUG74xUL9YrW+YJY7uH4U5JXIqU2Cn60fLl\nUHK/S5qj8H3s6S+SafmKmPufKQadtxVEcLh/USnQuLWHbEqJD0Mbnlumso+q\nN+4FytppAXQIcORp52+4U8kkLOoGVs7viytxLG0xYTVOKiQOEEO2QSyQx057\n/pSXikSS26VBgIslybHPptVlufbSeVveAlMZ7BZ02FJ6glLoPp7EEY/xmrVY\neFwkHkVKqNaZPtJMQk/7s0LnrjY+84RdSZv9I9A+Nl3wO0CVb4w7Wc9OYKRW\nicDz\r\n=JKJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/list":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/menu-surface":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.0d42ee650.0_1578087472590_0.9856115319348246","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/menu","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6280fda0de5302dabde70e41a9209036f3a27110","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.847dd1ada.0.tgz","fileCount":33,"integrity":"sha512-qWDVc8kpjqJkgnn7YPiCpiDeIYdROV6f63RPpElEWtqoc8aTN+V3+SVeXua2LxUuD4tDqQFuvtrSctlfgN0ilg==","signatures":[{"sig":"MEUCIQCvmFrV2/VyRkwYXqwcTF/n6QrQRZkQXlz++EAlvh8mqAIgKScsktsUHOxkSPZFeLUws7RuOVNsorclmifzeY5pcfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4oMCRA9TVsSAnZWagAAgQUP/2yTq+3wln7q9e4kUUsk\nOAIOtGEtqi2x6yvzgOMR3NYlYqv6gYpZluq3bpB7uCclt4D2NowHk/flVhLq\nhw+0XMH8E5qIOB4io4BxJeP4V414rDDwv8vIiLFxjxtlJH64+NPpldNhZlPQ\nXiWGJCT6snqu2r4X0RdXaDV0tzR3NJJ+jaU7ATWxIJ9H9lY9FcdkJg3dOkiF\nB40rWD/ttip9jXAWz+pZArWOSLlcprKBgNwgJCUVQ7d956swwl96t5bCrPrP\ne1TxWiSQ5Ie39oBLQwP2Jn3/EqholS5A3MYYRS9uJruqU35fErHWraLG5L0c\nAoAql9+yqBUuRWMNPVl9nSjENHFfLmYvqZ/HCU3Uui7ELInbhEWVcELf0JYe\nvjD/XYz/+I5DiGealaL/4+MiLoI7PjWTH+El9Tgj6sqzMiq+ksJQaIgXpPea\nnzIhXBneQ8JMry6Cf8YJbPv+IktpE9SI43BQY2Ivt7F1JhHzWwrpeBTDLnGs\ncsKtWOj5ijLzM/Dh83O0fA+lDxNSkNiWUgEe0pbVPl5kO9dNnWkR+8hnaoNi\nvuHaxyycq1DooHXx8T3rYxfBsIKzDVPHeSJjwMWvt/pjXM2p4s4p9adnPC+5\nJcppi8nJ4wSG/3M1rRJ11vtOWg0VyR/0cu0gP6lgChtHPt8MWjop04MAXij/\ndhWi\r\n=B7qR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/list":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/menu-surface":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.847dd1ada.0_1578338828090_0.7496067612845776","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/menu","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6421e480b3ce1135b863a5fb736ba2acb72e6d66","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.39df7e5df.0.tgz","fileCount":33,"integrity":"sha512-iDx61vE9OrhdrRZPQpMm1wrW4hkYMopXRQmi7i+1FiMmEtNgLNNTFyT2wpbnVKtuidNKKhJIpu3tndm38mdYwQ==","signatures":[{"sig":"MEUCIHQxVDgQxXRmgTaP+nhvE4hrn2KX3hJDNrJsgrv2TyGsAiEA5+KceorQtmnwhL9+axdPpBe6qyrrxLo+W3ixQSb8/I0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9c0CRA9TVsSAnZWagAAAiMP/jbnNXkyijb7HZSmbu+T\nb4kSRswogn1XtTQc0mol4eM2VuyzRuGh4awF/yQVt3d2PN3iubgnVpXFEVSM\nK4sT73Q4t7uNGasGE3OJbi91yfo9tuMBw0+qqYleekGuSdER3umxnn/Ew6V1\nEwQ4LwyfYyvy/XN9DYwQX0LMBfUFtojZN/qon/jkhCZbjlK1aqNXHAChuN7U\nFrxthlw8L2u5mGTSfiCdodspOOFwwayV/ZcV+viJ0iway0jHVajkNl/REOXW\n0niRPAcI7AAU6gkgNQEVy3fqyd76rfMRWI4h1t+2V8oO2nQqTr+gIg3bfy+/\nbb6AYTtpxdPt+8ufSq8hG+2YJrV06+quVMC1JFHg5ONu/3oJeiDQh8sOOPSQ\nXMq1k/Q0SnYPvnglwl+wS7xt2Y8nk2lz54oRMN7Ogmca3KfS/5FSZyAHW2j6\n65Z8hAieg60U3BcUm6DFPqTNuvQxg64xKV9W6xiE/iRxEk4v8dtjJCzeGnoG\nvkeKeECu02Mmuqaf8Z/vlOn99yrCe0v4oBFzRTCn5H+TRobwgbU5CLl+uf/c\nAyDBwCm8hSGmuOPXsTlUlMq4fFAA9+oFN+6Krw1JHM59RO6SFAVh1vqinItr\n650KDEQ4Ri5F2pzPZJQorgYFpouBzNujLSNt/iI1N1YJpfc6qdzA3ZWzzWxk\ncW7Z\r\n=3Ycm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/list":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/menu-surface":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.39df7e5df.0_1578358580316_0.6824730002520061","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/menu","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c5b4fa8b89e8f4139b02bbbba46a33507e2b9a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f1a2581ab.0.tgz","fileCount":33,"integrity":"sha512-dRqTM+K+ohqjjefXYL/PAnUPYPFjaLwIc/o+mBhJDsLq6XefXzgpNdPA42MDp73gUzYyPyKtsvWEItTC3UFyew==","signatures":[{"sig":"MEYCIQCLyFs7TdpC5vfNHo5vi/Qba99gCF55tNA5rCBAW+8TLAIhAMpYg5uy8PBJJzAAtOmD3LMXLC91yieUERQ7Yru1EVLF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0fCRA9TVsSAnZWagAAQH0P/Ah+6oQ38ClgUogP7FGl\nxyQaTTr865luCwS6ENqw3sdwut25O4a5VlWJNPeZH44Cxc4RVNSd6dUsIiof\nFnMPc1vuu5usyoCWrabc90F68e0g/v29BGW7SLGgjdj5JoWGA1d/ZUFXIl20\nQ3BANe31ZMuhZODhzcPhTZsgFPwulf783woCDJ/YMBzBIo3tvamWZxf/Bss7\n/SBjkk4ZBM9mICIaFpqYARXI47cX2qq3MrMlrhvcSeoRAqjZNj2oWrnNoBHM\n6Pa6nF/v0BpBiPvGYCDTknLq2gquKukZUBWuP3KuLbjQNndPMdiNgE24+Z2l\ndbjtYN7njgzzxJdjWwsIbBaQulAU+vi6wP6eyu39y2OV1EHRdG9DUGPIAiiQ\nWHKVMIdKzCiXi2xU45EXOSAyGnwz8vmWheNzlYzCMwp1Qop4eGe0SjvGO8YT\nPXsD2dXVK/sGP6WWUZRcxUZsehLxCWquOepMnkGHO5niNAMZDYeKuNcsuhr+\nWWwhDerjlgbDn/tkpWQ70YXYe0ZWqXE94F83iU+gMpcoLYaiO7og6L8tUUBz\nmmwDoCL6FAyUpaOz3Xj+rUQKHrwCVpkgjJ3QDxWFSEvSdrUBv3xW4qMOcjAv\nssD8KSEw8oJ/kj8+5p4mRxZwWoJpRv6d6VAsSonNXOdUxEF/fFk9s9h1/BDH\nyqrX\r\n=/EpD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/list":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/menu-surface":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f1a2581ab.0_1578409246798_0.021962913965856146","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/menu","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4daf60c14138d0af76938bbd61a9728e02a5ed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7c7ddf347.0.tgz","fileCount":33,"integrity":"sha512-pou/SzsS4AcmWeDpR2tGyKEoKVrvoBS7EGpy60Hf6L2d//EXfR+S5ksR1MJkdVlYyyVA2SsKJHqDCMtnl3ieSg==","signatures":[{"sig":"MEYCIQC5Moh41vt6c9tnABHhdelm7XnGmGf3ASqlelS9eHF6tQIhAIY8Wh8looRCTuFtS47pb8caBLoH7KHf2Cl2sGCj+wT4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKENCRA9TVsSAnZWagAANowP/1wSZ31iin3eVBuTDB2b\nD98mr1bnd1UAfpKbegEM7S/nT8HNXonS0LQl2qD4LKnoNJygFhaoOsov74yS\niDSQOyUusjFputcLp3izv+oJkyqhm7Pw8RkIIga1bUeDwwtxQO131Relv8mM\nBLSQS5MJgvXcdjZZKVYZVNqI4Hx28OBEBYox7eI5VFNLDmcM6vS3iLgz3sYF\nPtbS4YPDqNKFrIm5YNB1DMF1/louV4kvKanbn3DYRCnHyzGFEHMtyjUHbD0e\n9omkiTTQ3RS/xxAiB3HIbABcy/GJybbdMX+xz8E/LXe0LjKvGodHcqdXWGoZ\nbf1TaUH5K/3+VTz98z00wesL9Cw8RRhZV8dpkCOIz+1P0xyOnMHdXP3XFuh9\n/PWK7Uw7naCThNfGjJj+1CXX9p0bR3rCzDhi8ziv3J0/TQlyllrvdZnT9VqU\nOpPDYgLaOn/jPGRndTy5JBhGdtLs8HIuCrPaBF8V8sPah0ptnjs3vF14TgyV\nJr7yhYfNpHdQjVEuA8BJzs8nlPzCCDXCr7set8pC55sYQnAqKdumqsQl2ymc\nQvgdxXHs/RBKQFENAaSdOOduKxD/B6SPOz84FgKXqTy5XTvy07o1xF+YwIsV\n8XHP31ZoD9GizogD0fTeUCmq+aJJjzpdnZ2QzTQAgDOqSSUHuRweVaoJUimu\n8ZoP\r\n=jM3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/list":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/menu-surface":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7c7ddf347.0_1578410253504_0.7108203670520534","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/menu","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"facb4ad03cf8bc19f9bc0ca020f59998f6df3163","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":33,"integrity":"sha512-LkkTOlTCSCdnjA6mJ57+tJc5kBdZ17HYozjXi4AtzUwsJnkL9deLAOkzQEE2ZTiwN2EpgwlWuI+0NXdNN8VW7Q==","signatures":[{"sig":"MEUCIQCR/63aC40dL6CuUleVG8r/n8Z6NG/JQB+YVFggEF6SgAIgYhI+7XivwBqTakJPrPQpV247J0Tr4abe8JQxO4U6BKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMnGCRA9TVsSAnZWagAAXxAQAI9tsChWM3xuoDnBqsJc\ndlCCQRr5JHrnX5aoMq3iDHJ30276Py9fqYMT9Vu1XBc95XwpY7L4dclNXxl2\nW1Jmy6j3iSsJUm4enOSisBPmqFDS//upF1V1Y+gKfgzKc5qrSRLbxS945x16\nCEryS9AOKS8O91eaMy82Q70A9CI0XPBGqTXmb6lGAk45++63mF7RhxFJPhq6\n6OJD7gCx0zb7dRW8e0uzhTrmd0UGfRWmNAkP47HE39Xpecls/mU1iW51d1V4\np6VhQyzHgp55wG+SF8W5NX8GpYUph5ldelZuLQDaEM1W7c13EwbW5UZopzwr\n54vtX7zHBf31uOJP2HHP2a7SgN49FP7DIMjAclJHLRMeGnk0rNJr3Ux0GnpD\nuWwd/P490jdxrZz9SuVVhrjBbU77FcFbrWncbODkGwLZu3mbuIgHVTzN+dQS\nhyG/cbIj0g7iuWpUTtyoIME+zqswdcgjq+m4LdhFhiemv98tIA4PFPFQeU4z\nI+EyhZouZrfxWEO+u4gefAH69mvKuQyq/OuCFm8lMk8VZpRGM6kcRxGmQkCx\nIdh6gsNHbjlG+C5EwajFlIS+2Vp2SvHAYIsRzqIbwwc42DAfmDUJs4J3/nZK\nfzXEzBNOgPUCCUrROotNEqIHR+4oyHQsEczndp+3owfV1MCizsXqcuY4hjTU\n08hO\r\n=iGQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/list":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/menu-surface":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a1c84d4b5.0_1578420678168_0.6915159103527255","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/menu","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"769ef3c861276941dde27d909828d9b39142d42b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ec9f16578.0.tgz","fileCount":33,"integrity":"sha512-FbG8sbPHDwPfR7zSKm7NJCl4kd7DsD/qLIKuJG2SCVgn/+CMAwGBZqxIDcLAGYHPp9+fpQHda/8z/nxqFPyBmg==","signatures":[{"sig":"MEUCIQDj7q8P887opAi6t53tnvzfeBPRhv+NQ8girgkpQuUWMQIgXXk8ptYOFzy83KP6ZIInbJ7cjzDLkHGYWcA18aiPGPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6kCRA9TVsSAnZWagAAVagQAJNTalbWWdCa8oZoz7KH\n9sX8ecI69YPtydpn/Z+cCZquPIyiFYiYo1DX/w/No/qax+SPocrowrzmIHCr\nkcNLJpKlQXkZFAo0R7D4H9kcrbThiYkoTIqfxC8/EWpPN0sUMx7UbuQYZcLX\nTkKDQOlsledTbGYcNgV+or3awMcajvDjtKY/cVXk8dJb6MWNZJr5QfU3eGwB\nJDNtfHPtKqY8zj7yw2YWuDxfC882NgyfdfHfYPv/gW64dKcVwYI8maar/qbk\nt2nLQ2DvhLpJMH0q11MEYAJwuRk7BQE1f8b7raei5DASiyHdgXxOvue1fSJa\nViIfAvSpkxDZIQkQ0GOTmeIPkcdMa7dSCldDQhHUH7ah1F67lSKe9zfVSAgy\nCLucZIfv96yCRUMXGrG4dZ/y3gM68fYM1mOLRWJfDBvzAel5aohI09uZXmUB\nJ0SSty10L7328/RaJD9iQYhTGpVjAjY6oUiOoZGQG/QYAl8Ly1JcLsXw5QKP\nfXbDQ1geXcrqnkU2w+lqPgHM8Gp3NcZ7EdeG9p5ZxjC4EKx4aOHc/t87oNTc\nKb5L4qtqqb9tcfmetSrEfPusM44H2Mf5/P5y6b4ePhbrfUb04xZxo5IybPyV\n5gVsxigUi9Rhi8LNxwGzusc23RvWaJhAL0SsX+UnFHgRxNUNmJDc0m1nfvNo\nX8S9\r\n=Fqoz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/list":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/menu-surface":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ec9f16578.0_1578426020074_0.10753106257030165","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/menu","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72bd4c034715ba246e7d25dbea16fc82f2140c76","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b602226ce.0.tgz","fileCount":33,"integrity":"sha512-ZBrKTDw0O1vS+tX6sbM/TRitcTXoN5CxoASrW6vvU9xmVmetLKXJ9Ua24HDZHUyHf1Z7+oGzmBCfpo9VhVvuRg==","signatures":[{"sig":"MEUCIQDZTsRTXaU88NKZU0GtL5cKvS9vAQcdEL6s/TAwkZBa6QIgb0I7aAhL1NakPa2jeTPeZ1JjeeOSSYQ8ViSTvt2NiWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOcBCRA9TVsSAnZWagAAETQP/jO737N21FQVbfRO3cuy\nZ5MlIk8NwJZw015OTQUxEX2j7jAAjhtPP2o+fZkGeeh9kUv+6aIB87UF6P7U\n0RzoYwym5kKC39SeXV1opQJp3LJgkOW9WeIoZ4wtNeB+imSIzc1YzQZhm+A7\nBYuCjUtLw3Vzp7XJj8IM8EAxhVYZgCbQv3hgifvXP5ONyXTDNhz1eRVIQf9P\nMO2nImlKG0i71+/ISIwbYi70X/nfcb83CUdyCPGcdOjEA6Rat0uHvz4TlJsa\nxsI4BGbRMCEZEORn548UwYQPQvPu6dbpfFXYwS+Ht+pqNUTdRcsbY7eA6Syn\nCnfSzVWXANl8D4ujztRnuo9hwHIJYLWF7ZOchsuWVmWkbnRrFiSIu77wuSv3\n0AFvfVDhgXNzBV2hIBBODiOlBYoVCZdCknlCa9s1BT+EQlbX4975cLu29Hqd\nGwqW4T4sgIOiWaji4Y5GLxWchvomsZbPU3xTvEDAVeKf3RwRnzQs8gNeG3fd\njHiDSHfFFWGuq7VGlPgGoy33mRZYWT868f8aHovUjq2thC4cN6mOsevuuxY+\nWn/z67KA9H6KHQvP3LqCVePAfpMv5JVWtfy4aCKYq+LAjmRxTlnqU4/D3N3L\nrw8jA0DMNShh43qswLjaR8/8gMcg4jNefETK1L8WUK9pP+S+MG4b3hkuOkWD\noehV\r\n=afSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/list":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/menu-surface":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b602226ce.0_1578428160925_0.8318921212770101","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/menu","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d8d3846151a5132ccd07b2b4b9070d5fdb5755","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":33,"integrity":"sha512-qP4pkArsPK3kHCQnAqaag9vJPyAYK4TsmHcsJq3KL4aI6j4vhF9jpfwD/7kDamDP6q3rVqMLwy8FsNY7nxu5kg==","signatures":[{"sig":"MEUCIQDLyddxSXYPh2/SiS+qjFNqdGX0l1u23JdG9PL3PN+1owIgSd1T50I02dTUJ2yCytu8P3pX7WBrSkDfRii8FNsAbMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPegCRA9TVsSAnZWagAAd8MP/3/1kmD3NvGBgx/uMsIJ\n1uTueWuuOBwN179v01XV8WbEbXy58PvCwpX8BKuwmYiFhVtqUzP1iN9FF3W4\nzf/IDl0qlo0F53oQ9nBZk1kOALk320iuSowI7Ctp8YEQ4CVgTGxcFrSF9G7F\n+m77qiP1rUh7t38Q79MXhXeWFiMadxmwnuKneQhpanl/65T7LoKYTaIiBqQF\nfDRj0gmF+C8temwNcvZfFCunIUILbqTzBdhI5NmHioo+mZfdBbnTeC96jsmZ\nNXMWlWEeL/rWnu1Z+mwmPkhB3fuF4ye4cavlMOBspf5nuJj6gzRXVB/sgja3\nCiSxw4Upriv4K5VeJ5wOe1AH8jpKIuOqoRA1WplTac5eNwtEz34Ofr/nGXWY\naMbsSzL12uk3kCzdkB20GZJURrPel8njFj38j+sO1ZqKugDKYxIsO//FFEeK\nw3hpEY3/vZmUFj8QOJ5l9Rk1ykAx94D8TVMecSzsT40VX+iZuYX70rLvG4EB\nHUS4qtvACWVPUXHfZCCPuoeZNSALRvVUpnKTd0PqmAArk8YlMe7zo/ke00WQ\nXnz/abxki07QoR/e2tYDzesUaFBv5io2bb9CPuN0T3auiKi+qIiO7Y7o14md\nZ7BJ2JC5osG3KXnUxJx14LuXCUhLXi8UXmGWZPyxp5jeqPyx9b/Dct1Stsg8\noZFC\r\n=Ilec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/list":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/menu-surface":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b2d2dc08c.0_1578432416175_0.9143290821151522","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/menu","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1985503fb56c5d172e860e81585369bebbade552","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.61f2d7580.0.tgz","fileCount":33,"integrity":"sha512-Du+/iCZTx6z3/hNtiLb/yFUV6iQL8lEOZde3yy8ptolbL2E2d+KKIxexXTeKm6nC1TuQu7cfXtHWGGuNLLwU3A==","signatures":[{"sig":"MEYCIQDIyZz97AVkuibUksTrBxhbjQnzXS4GUIH1FyqB5zPVMgIhAJO2RnLLEriCXOkokV9tsphSrHtrarHSuzWE454OKLKy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPrVCRA9TVsSAnZWagAAO1wQAJ1P/2zRwBwT7Rv7+OCh\n1J8iTWeYF1l3Lm4diEucJRgJtUNkvNiolvInQFj85YthU8flqJu/ovznPZAV\nbjRFOhrnLZNyrWVB1ZJV1cfxK+hdYRwsKRCAZyVHGYMxljt2NiKF4i8qommu\nHueIzT4J//pLsVuNshCSw1D39eAfZ4isX5+TnHhouD+tKfZJUCUOGwW3AXR6\nUL07k/hSzhcOAZWB2kq7PelKBymFnrbxwBTmMKQETKsISxbxTTOz/rZwUWq3\nI4J4NcaOnW1UT+wSOm3Eg/h/8b+WANThnRENLLKVNwJcw6YJXfGNLxDKExyu\nLqoaJ38E33HU2oNAOlq8FCiNi6JhZrU81q2YoDG/2RhVEmL/pwRWFujEHpm+\nQH60L9lKlAG30S8g9e4LO/SLoEJIzSExLipQCMuqWnr7RHoKUoGyQl7FXLKC\nXG0Uep2r9u3IKEB7AImAFyEtmqY0rjnKL0Vel+ArWVJRTB58cs5eSoKkqlZW\nTAEwdAleZMtzoZWUEaG7PmL0x92ZfXx6u5PSfIjL7cWIS6Z/4pwes8DJPb/T\nSeHxqzCcpyBjsGROHjN/laOojU7pOzbodDVBfj9nxFbfxT9xlMy6J18uf/Cc\nBE2JgZWChNXovyQF2VLM0q3lI1Ax0KLcmdjN2hhsx0jhEQ0F2AnVQEMnMO4J\n87uE\r\n=KAxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/list":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/menu-surface":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.61f2d7580.0_1578433236739_0.9734064372103568","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/menu","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c809b26d3d8d6f847e38b2ec896f9bdee3fc920","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d1be53a2e.0.tgz","fileCount":33,"integrity":"sha512-OYr2oEFPIXwcGhkF88tILKBPqzIq04qUnkLHyD4K3xgLrirxoOPD2msmWYGONe1C5pswJ1mZKs0hnhz967VXww==","signatures":[{"sig":"MEQCIDe3UjtiZRp18L3+i8ElocO5PiWgKRfIAJ7eZdsbqg7bAiA5uZdjzfnbke3C23FkF4Hp0JolFfLMnfZMb1KIHlyTow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOeCRA9TVsSAnZWagAAxVwQAJilOR6u9dPtl0aYLl9u\nYqYUHFAIK3a3mrqha7qf1wATOWMbEsQ+mEJdRVaa7nIqMUiFZkFqq8w9XAbP\ndOxNkbYLgVSMLgn/mo/1jLEsCRuEv9xoG6Mv/EqIlMdOCo/f4ZDJm6Z9alNo\nS5zDPNEQByMmM9PFZp3iGnNsfw4oa+XMmB//5rCm2xUJjO04ja1ppQ3tmm0J\nzyuk8cBlDKtEWSBSds0kDXi2+SoChXdr3apXpxQmxzpydLNoWW+OkbIXoJg+\nvexzyv1YE/MV9wm43NgNHlJopabdz9g2Bp3KNGPoIKrNo+XgATqMRWm0Vy3n\noYZ0Mn5nzlNZEeheIKk9XJfrYWFR5KMaW89xUHW9GqNfPmyuVa43nNxiOtzH\n3RCWSwKfCRRb37n43lx4JnWoNr98uardUPx/mN/OnIyCmU2BuuvV2Gz8OZ4i\nDpELi1JBHGF84SYOWaBmq0C7lbtCdV5XZYG6lFAwxaHUBPLnWpBlWakGpFFn\noTGsuf8A3XSomXrqTE9GqLO6smD3KBAHf1uQBA0k6gpZm52mkq9tdKE+K8e8\noc2I2M373qnkHANo8ioqKysGyXWpL1oDPTsqRGSCWc/0wVuQ5S+VZoJOOmgu\n4jsJ3LI4YAbDdlv5mJKBDHS1RjEu8LZXOYdSZsdWf2FXoYGFXY2Lq+WBqygd\nZl4v\r\n=FZuI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/list":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/menu-surface":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d1be53a2e.0_1578435485744_0.8842172045214272","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/menu","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9d65cdf68c373f850ee1ce2486658107ed65e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.9b0d06e32.0.tgz","fileCount":33,"integrity":"sha512-wvVk0mNDBtMI2Nq5iqxRH5DJiN6KvYJAIk2eKIfpLhxgOR0ZuOjsz/X1T89iQqeYZdj6qgm6FI/n2ECjJ46sFQ==","signatures":[{"sig":"MEYCIQC81+SMX51e/BSXxCrdUbIqTv8fS6voaFgkTR7/6Bq5fgIhAKBDpaxZGv1Ya8E/LCfrNLHOR0u3evjfgYcRWLprTK10","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQVCRA9TVsSAnZWagAAw0YP/ilmPEk1KJA93PQpeAIV\nLKVVy4nDZpIP2i1LBVYz5A4G5jqVyvXHJ3kedqt2+eXpD0uOUoKOFDTtSF6v\nA2aLcJ8zK9lS2sQrkPM6nysZvKTylaPvryqufhA3aKIINWeqT3QPBNtOVBx5\nGj5VVVVnCQ/KQqE3dP4Hj1kv32LGtDtHqXzct2nvV85Yi718Wn4/Q7Vv/UBQ\niDybVeKZBEO43c5l/mqJEpO/eFPRiFDfRJOVv45OfOf+YC1c5WCiGGJK3hwQ\ntu/brxppfT4BM9URJISF16RnKNV+zTFv22lk5H0j6g8deLQVI8Kkfrfi/QA+\n6CDvQRoqmg9QvtP0lO0d1rIfSDt1/+CS1bvvIo/3nu/9Zr9Zj+4AaHBbgvc2\n48hyqsPx5vxJtyUZk+OytmBxp8G5xV9P+4YKI3skNqxQnvEifNuxS3ToxX73\nLXZrr1b9jGSAEn4y0qOUIGqLc0jBIVScOtp3g0GHVR7/uL7Lgp+A2trqB1j9\n+M7NIYytSiDBAw9wBHUVwy02tQZT62OnUVFDsqHRGFelnTr2dqU4xwa/I+sF\nD670QCHLqar1arQDjJQGc+USu3ci5vIGTwciLLcEDMENkLIH1PiCNX40VsqX\nv5MzCRdSXXgwWQ5NE8EHkEqP9OLW1twwPsimKS5bZyGYkqayNn6s5jpWAwdT\nboOZ\r\n=72WW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/list":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/menu-surface":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.9b0d06e32.0_1578435605138_0.5499088510507808","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/menu","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489e046036d81e5844f406c7839db10aeb4f3b56","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.730c807a0.0.tgz","fileCount":33,"integrity":"sha512-rs1TinQaWqqL1o7jotgljWlHNLaCy43STXxV6xVGu+1ORLI9VZHphl+7hVBZuMnyfEL643TXVk+scr3kjVQEVw==","signatures":[{"sig":"MEUCIQCeoTNRlt19a6wdxlC/E8vTq+aioOb+obprwzYeoyjUhAIgH+LTZn87qlue7kDWplnWp2wudJAI4k9q06g2ZK463i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRzCRA9TVsSAnZWagAAvZUP+QGPlPDxFZJgLtzePKR3\n0KaBFLEc/HKo9sJjwfDR6szoLP94tp+mqVGGfptDczJe4zsRiFn/tW9TohED\nSNJ5Qm2E5QdUFz02tg+mPzq4IWqFsdmsJCRChyr8fWwxb7gS26cFIj6D4OuJ\n/JXy5FdpDVzx2NAmslV6vmFFfjBIQfycB+1pRdstfgahk6otr+y+YD36HLNT\nA/PbdvDBS0wUc1xn3oSBWlphmYGa5vpJ2p+OZ0cOWd+fFD8Qg7602lrzxIlx\nMiF4V8Eeb/3h0w/NI7EZbvfw6An5UVEumdG4OPoTtfyZdMLj/afxcxWrxmPN\nAMV7BdwBGdaDm/MI5oOFpWHBoLvyLiRHJWSuUo5ReiWSJJ8cvVyyQm5jZgZu\nl37gsSBt30ixYP0VFqUD7Bj9EuuWhzwkFgJ1nVyyr6bKAUpnYtBZMHBy2xGm\nMIxh9awxA4577mPUeHOpjXGk5rquB5i0N4PqVIs9HCQr8fL9VY1DUPVADccp\nEo3akBgQ1HnZPXZBt+Y5Hhg8QJ21gSCOgET8Zsj7VuFO6O6XIkFYgUAIp9Jb\nEvoDK/1moW1bX5n+jd334WpF3x7Z+CRt86jlrnTOpRpZUGkmz0DFi1ySAadQ\n8LGH/SIM6+fNQW4/uw9SG2+Q48cfVdJZjmmbqJRNmoaNiEunR3qmfpgw8VMf\nu0CT\r\n=pGjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/list":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/menu-surface":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.730c807a0.0_1578435698539_0.33701925228382223","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/menu","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af6c076016a3ae33b4bd58376851f253d131143b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.2213152cd.0.tgz","fileCount":33,"integrity":"sha512-KKVgAhOgHqH0qIobC3hhUhX6IfFS2Oz6T//lSJpWmj3DRqQw4GdlatJvAp261YErcjGjrbtTUecwgXQfRIx/OQ==","signatures":[{"sig":"MEUCIDdY4anYBeQ+BhOvbSMbI3+r1RmklGtjpPfzmBjPNlErAiEA+7kXOJE6mGvGs8pv6HdzUliMnXFmErOo5I1AYYMkv0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/zCRA9TVsSAnZWagAAjxEP/RiLFYNk8lHs5ulVBusv\nUe5WKnuWSFpQJxQjf2Df1DMehLL07nLLFMS8Y4I4IH5QDhHWuMJVQm52Obr7\n29xJB8Tix3tARNDqkDd1jSOg0kdeYlK4l1GfQxHj2meSzU0tdWDWTaMiOm8i\ne9V7ktCY/StSj9LcfkFcTVlaGMVUSzPhCIcD+yjoWJ3+c6AbZOZYVPOUNT0n\nN/mrQTQ8afrg/DVG94OkJvfSAEIFIb5Ldeu2TSItGG4TGBmQVNRHH/MgetVF\n7dzpYRlN6aTDw+vndQJVDZfYfiLs2E/hByVH7eLjRxPtVLpwp4SFGLbx0UOs\nyhTn+eLT3nKmvI+190sRkjLZHqPwtVTH5Q0FSSbkW4y0J2BrijCfxcxi/mUv\nuReChJkN3W1uQ0XpORbAE8pdQ4w+eY0EmPHLLBJAOPEnIVNnksBfQcZAe3gd\nQUkjtWADle1cbKQttxQe23AZxWZW+23NLsIHTbCZL1nTde0khR5mTSKxfbP8\nZiX+31vDLZn6siBOWp98SOfhu8FEKlhuiPYnWuSRX2J2d5PRRkrF14fPrBei\nFQJ72npmgtnL6sJqLu8Wip2/aX4/PYmtp5Qi2dSSBLIWxfzb2u/k0lnEHZtk\npVmA61q44EPHcgJGUQU4mR2vgpzIJskHMniby1cZiUAruHoCCsf3Nsb1Uo+/\neoUT\r\n=ib4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/list":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/menu-surface":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.2213152cd.0_1578504178999_0.25879734212950556","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/menu","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d52a0ecc6efc5c636d01ecbfd716621423f03a9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5750f7169.0.tgz","fileCount":33,"integrity":"sha512-L1Qv/zrqm/Vq2f9T9Q5T1OTNyIVUp6kjelpt/24dY9tdW08moV45MOkBMArmunBXi8vWBbcEbqbb3AGYqbs8Zw==","signatures":[{"sig":"MEUCIQDFz2X4ydGiKlP0RTnrgZbV2f1sP8GQeW+OXMqVkcOnkQIgAIov7BhpVMtq3s8tXuy1NSaFXCAGE91/F5zgZif+cAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhggCRA9TVsSAnZWagAA8JUP/R2siXlAVezrtUkQQoXV\nDvOBixDyewKckLEi5Fn2IRLx4BxVtXIfqKky3BXT9kgWW1lLL0lliyrVB3Ev\nUYqzt9vAiAtpWtiHmw4pT5L673+1aIU9SzGoQMl89XCsfRl6xCSoWMOBYXYK\njXzMy4W0NJVTQcbOed476CTXoGGHpphMA+dZjCYWs804z3S35zGtJ/0dFEKc\n7VvOYBjntNMHM1PI0qW0DWPG8VvZ29dKa1m0b/xPfD5TnpbJdyq+VlG8ix+P\nxdujEFd2+XwMRwZ2ESbqCkHOW527ljraByNhQrfA+EMCqdwS25d7iTktGv0Q\nNQywBwPl4Jhv+QUtpK27iPtB0b9bvk8oM5OvuS/gcjhn88KTzngc+ajFTnUO\n7oXnHRjvJoxD27lASjaMgMPlajK4cxPxtFlZ5wxuvIzT5fiinrIPqh9Ik+Uc\ne9DIWtihiktFWKoZL8l/aL/TG9Du6H71lvsqrDrGUOkijRyjBk2hDGHVtWpZ\nj9J4YY52+XJyFcFMDcCJIaya9FfBnKXAAlvLvjhkQV0CgzZFq/cQt7e9+ZWl\nMbjx2EnSQFdAzLchHOot218mU/E6aRcQnl1yFLTi1zyA1vQbgh844bHwyM1i\n9jI+kAdAGgtB4ed0mMBiInw5hnMuy63tiCPYyD9WsFKvwuE7oTcRWnXp8NQc\nfrwX\r\n=/RI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/list":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/menu-surface":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5750f7169.0_1578506271589_0.003956113444759435","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/menu","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5642022e75149ca9c795eb5d0717e08b9487906","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f7abc7a43.0.tgz","fileCount":33,"integrity":"sha512-8E6FU6/1/SUM1XmDQGMvddguDfVoibBI+4hofKg26FGNvXJEUstu0RVwqs2JzVOALHXIrMs3kdvHm4jrah2wZg==","signatures":[{"sig":"MEQCIEQsQMH3ZKsPn3rxCpuamoYegbqa3R03iFcM/vb3qX5ZAiBmJcu612EPw6t6QDOA45tFZwy/XSR43U83eAutJk0ZTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9eCRA9TVsSAnZWagAAHLQQAJfuIo7PGGKDTQ4wX2Qr\ncZbmHrTC/rAJ+4UU6O5o8zpZehZsMOoYJr6+aHMsPgHkIj+nn63IBv1/XYQc\nzT0qjr7+2vjlnvipscYOSvKTDM4gDeFoHFFyjcPBtbxWXj9KvBFBgl35PNs5\nDfuedP4X+X8TvkLi1QNT4qLmKa00Nahh8Ckib8MaGBInyUeQPPIV/YjjTke8\nlNs/zB3n8YC4spQtlaloKPAB20k0vhFxgU+nHDCDNplqvgjg2KpmkyzgvFf/\n/YFwu7OriMDE9j5xFCfWMdi5YT/UD2uluhR083tGgSxm8qSeI1OZ9HiE85r2\np75hySYO6zW4TutK2DiahdqTbRB8tH4vKtn4BwS/fS0YjJbRzFdA+uP4fFAY\nxvi9lL5bcX2Qi/Qk2fBEnHho/m3j7YfVNF0v2qUPRVHyQ6mSxyZV9SE3RN90\nSNfKbmDN6rSMVfYu8g/4t7qZZGFDHodtE7C6y3RUdOeTT57VMPuGQR9gtO+9\ne6h/smIZ08nkEcXHRKWHL4oleFbNjX0yajtnOHIzbNQrHfgolPG8XucH/vPs\naus6DmQ2o9JY0Le3z4ndSMwjqAR6zXCn4XALYqMvN9DjuUQG5vnjznaxQ8kf\n8ZpeKn23de3CtrmITpXaaLTxMz3PzTvlH1tCwr+lQDH4v7jkfNlXVnjbrE0b\nRi1p\r\n=P0lD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/list":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/menu-surface":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f7abc7a43.0_1578508125981_0.5996726591986066","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/menu","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39a2efe4511449c6ac4f320e780cce727bac4e40","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.bf7b4a061.0.tgz","fileCount":33,"integrity":"sha512-ufvDBR0se01x7g6vUNjeWVkephn14SRuPe9seg/IhEyJh75dek2I/AuMAeEMWkRdX8hCRqjn4U9M/2dW5j8syw==","signatures":[{"sig":"MEQCIEegkiCGkFGOmrzAwZ13qejI1q9Pdh5wQ7JP/piXhCZVAiBpz17GDsYlbF/Wqm+yLuw255qX5+MGkP3M/XI3E/4cLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKPCRA9TVsSAnZWagAAUi8QAJuHgPuu2F/noB8wPlBV\nMI6QD1prmndQPC4aLJRQIEvGHpk2ODgRPcxgIY7mAwCtixYnKeeG6ZjhCJhI\n3ymQcfeBRP9+z3LQrRdBRd8pdwwf4a8KqeJwjNcSax9/N/4G6FSfMtdUnwoK\n3hLlaXXj3+y2AO9/ygcbGOHYY4rrr82U2MtCEJSs6qpG8GsqFFr1+19ocSmf\nbxRELffFfAK9tE1yJNzFwMvlhb/bdM7ydoMAP31O2O6Q8ZFGAwAaNLoSHL31\nWVmSfzOmxv8dWIn6E3Q2v0CmzNG7/K5+VMqjJSsL/pyylG7TjqegsKHCqnCM\nYTlLtBFXBjR/4O9s3q2Y1Yfpyaddw+NzpWYUVRd04n7D4lKd2aRhDip9Vrym\nHRg+sR2hY+GAnBCWqB/B5/lNmQTKXxZMjVuT+Nyn09WJ13jMmlVLQxgwhC/e\nZLnvX8ERvk0olMW5PkvcT6OYetaFYocEcyR71RG0E1EdxIGGUpWGC7OVCv6X\n4uygqxd4N3VVfChPj9cJCY7qKIi7eO171OxI+AJOMAj/crfI3BPR1KkyQQsE\nwTqq6RTJxE6R5LKVi73PdIY/tgwiSL4mKgg+GUZr50yqqJh/3L4VQ8LH7tu8\niCfTlwwcOYJpZNfw6re9wbeFJFt2oJZA4z9L3lVBdvp67Ei7iZQ+RVPoRsiS\nnhgd\r\n=NXqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/list":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/menu-surface":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.bf7b4a061.0_1578508943188_0.151121117802671","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/menu","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe5bc0daf6643537f0331ce7b0689ed6059c4805","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.784fa7903.0.tgz","fileCount":33,"integrity":"sha512-ZLAvfTgD8NiYLybsKSJpIlKnaZMGEuxdOm0F5s4dHiOALnJOy9OmF+bAteE/XwaRiWcONYtnnTGPfqNLPqeOCg==","signatures":[{"sig":"MEUCIAkUJnlO1hzKDVGLzl7G+kvPUTuIsjikq2oMcbXcgbp5AiEAxsFL4PZ/v+3tuj/Gogi25fSGBgnKsiZQdKK4wGneCnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFilaCRA9TVsSAnZWagAAzKUP/R4NOcfrd7WKtOR52nEp\ncn29Tjv+0CJR8ZQ1aQZWHmfHTvCnK6JZYqmOBRYH7ng9LaS3NtASBz6b6T+k\nDTnfwoFL3Iu/L0HSPrsrqPDh8glLGOsQF9c2WDlttG0asZbALPkin5KF6ZNk\nuZZU5ZU17Pmn7x5YrsmZ73BbF6XWqEW6lEe+wZSgm22tUtasAJTKgq/ULhHN\nKok1XWksscqto1trCmcO9+uIfaX3iSyETKcmsGKRzs13HTu9BHS7i/VyWqHl\nrnWoc0nJeUBx6sQQdL0EpEu4LBy2o7vBdFbwP7BFYHd86N642h000Yh4kPYF\n2mczVBKhKxHeacPdNOZM10AmmtSf7UpLS/vlsDHU3wqR1Yg3aZuL4WC3M15y\nH2sqIl6UWUWnWjpzwgyN6OyzxlFeHoVThbdYYYsDXQO7fx4AVqJo6pTRhE+x\nKHOMqxSoQA0WXvfbqN9fk6k6IpHL/oqeFQioVyByMbmjY6hKORkE2tENU3+3\nVPL4eDp0sfOVUZ2zE3losPMPDz3tfYRj2PluJTDMYfo6ocsMWte94eu1RzxF\nIIymztLlC2JyEhrWqqY7gh9hpk8gVY5V1JDsYLTc1uHgUfq1LksFwgUn1AIe\nwkTcvg4aLozNsX/AdbioA4EhMVSeG/zmojyYz7NlvM0bx/5arbLEEC0cLX5p\nzMHA\r\n=Xv/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/list":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/menu-surface":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.784fa7903.0_1578510682266_0.009686975138138543","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/menu","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf404118adc35cd3db8179430ef0447ad4026aa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.823c050ba.0.tgz","fileCount":33,"integrity":"sha512-HAqhC2ZVGs2wATr0LRYlgUh0EnnYUczjJD3wdk5SXqr6Ko4ggv8Z08Z97nFKYPIodJ4LzTlT1zGaOo4SigUIig==","signatures":[{"sig":"MEQCICEh2curSlj3F1PRcId9RRGMF+E0EQr9N18lr8lUpiwRAiBND9ogMO2VN9vBTsFr99rEEjOHrPef3HKWl53dS6bxvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjd8CRA9TVsSAnZWagAAe14P/jGR2LgSrr2sbo8rfcjd\nQ6xVPWLHG2iFezIDMJwNVjwiCZLax83U4wbY2uH3SiDUYJ855w5BF7TPOZET\n9ukeCrWPm7vfGa8pDiRv/wOAOyGyS0hSJLrTXoeZ8qIZfEEBRYTS7N2C20C4\nBdSL5MOY1imczvYS6s1G5IhrlBiUQ+apxuJ44kqNG3dm1UMz6/mMTNIV6ohN\nxcA7tXMdZWy7ngo8iuMEHt8bJPtVKwbz7cYDZKpIpL7M+nwcu2paeee7GRoV\nvnR+fu1aAD/BKGuF2wZGjUHHGDZFbDmKdLEjRCC61NLi87HZjIVyIkb4GKhY\n2QdimeL8amlme/cNnsYLYdqeNw35Jw1D163lf3KikLuatWKYJ7X9t8jhC0zb\n9jd6jo1T0o/i/pOLoOo0sJcadfv5X/XidGv1pDTRXJKTqYCRRnLT8Abpib7z\nqBeGyIiyswLlIJGoW7UHc24knm9eT3dfcIeEjE9+v3mIOiB6Q6KiNh5Tk9yz\naOoOsSHdPrzZhQjZGsvr1nYCzEzcQpmW61zNm0XhvRa9U08lNW6dPi9FfCKb\nQAoRfFf45mY92FUcQ7cDKLkHB/QpnXZ+sxTAa6ECtTggsC5v8FojrzjbT8Ei\nu4HFFaTnPl/LadN39Pmhfs6rL2AnBKaFaQLKoobmufeb98zofyHarHU/kS8I\nc0Rz\r\n=O9t6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/list":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/menu-surface":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.823c050ba.0_1578514300224_0.2113957961191708","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/menu","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2789a9f790faff468e20e672d4ba5096d274dfd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.70c708dee.0.tgz","fileCount":33,"integrity":"sha512-oZWGQweyPwt8jPbS+MohljExTCGqQKxXRtUqUn+/UiDNv+K7RRPQzw+RWDv6ugQ0eg8Zu8nycgldLzTlHOoU7g==","signatures":[{"sig":"MEUCIQDu7KUQiHIp/zyJufRGciM5SZPbSNBnBs0Nhygu0gNFqAIgFY97wDvkrb3OYAzuiV19PrGSN/DxGoie8aVKyRjDm3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjosCRA9TVsSAnZWagAAF3MP/jMBp2OYD8XmI/iUUs8c\nFP4YZWdDpoA3RWnHIkw9Nw+PHHQm9fzIFvWpIl4JUmzW/anEjhspUizCihG0\nl+uHO9YzB9LKnFu37z7XxYuwxzY8Det9rByimOSJdqDSv/slKc3uP23NfL9c\nhIGsXzJXm15iMSe+j3Mdx120Mc8YyEUYQj3zgYcL4GOMhf+C1XQj/3g1H+Dj\n4FOw+ETCHt+ZL78365Wy9TN4cwl9CRKu/VIaD11cSmEuTbdsfJ0Nyv+JCBbp\nS9J6S+n0xbHWrMCnWbYbphnthYR+EmwZrmJih7qKd2RGcRxGHKxEOhZxMhXU\nJAeaJ/yio7tKk5EJealpnVNfrUxh4FKxX/lgfIgBuCBOznWAgdiPEYe4cF4q\nvqI5VLUCBZ9f+Ee5C/BaIQ+WvI5C7CuimbR++ZCX2BropoluoU0mR8W/U+wo\nLTnliGhyMCN84XWtMOFuLB3N0QIVCcNDJE94QEZ8YW8gY0L9dxWo/TrVWULb\nJWi0hWc8ml7UOSzXWUen4qRDiEar7GRReyNuMbiki0kPlR54cN5/cwEWCnK8\nbewFNkuLVaH5BxplKxAkMCeWoL2KIceHi3Yqz5dvcgeqpF96kVArgDIQG1Dx\n+8tyQUXiawESrS9gpCpTVyGCednrSAYPqFWlNC4/zISVAKncZIdc9N3KIm9X\nvNVn\r\n=UJby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/list":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/menu-surface":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.70c708dee.0_1578514987569_0.5748253654985804","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/menu","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef797fce0acfa9c5d1f8e21f3b3761250e0574a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":33,"integrity":"sha512-Rpupf774dJkO6w+af0UfK+WJzbpN9DToEPy2aguAfWS13cEf43XmsPQnabjWipqkgzWUcebBdo4nXWBPPXSw1A==","signatures":[{"sig":"MEYCIQCFXa/7YYLyKYXDpa7Z6sekCHYBIQR+j8GlbIJsqB1EagIhAMOGs351QVw6xfcaOynsJwJo8P043nWHtKWe961ABDI1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkz9CRA9TVsSAnZWagAAgwEP/jY6feRrX+gBpXDyy+vr\nNsKcyC+T/Bt5JgQrghUzRYcjLnjG1vRA/tN6jVpEzSAILP9bHns9yZTH3hze\nUazlouQG/Va95X8Y/DSCNSuoLFkVLSHTQxDxv++Kj6sdT6dTNgtDiSU3YiTQ\nUEBb/qavX29dutnPAt4w4oSenBZT1O/pzTQ5FGL7iP5vv1tUQ2p+7UPNK+zk\nNIsdlyNdOr1qf5LU2fptJZLQWxhE8Yqvp7ODo3spKQjJykul0hu8xrZmStOr\nPB94WErZzel93gW3wwqvlMmLbtA3aeod7SNa1cvA0/VrHdhiQWUl1psGtu+f\nXTscQs/klzjJmMYnC8yc7TPFcVW2HCeTQhY+SMxRs7i27lcx4jDsxGhmgIa+\nu5X8muhzq5UNSqznBrdF+2/CZJdyVm/m2tlAZkvS8K27/3DHiSGRL8ibAZdw\nBju9fc7C3JCKdL6TWWYHedgvLYyS/FQprifnAwJcqYsukTbBYCG9SMIkQfD2\nhWgQ073zy2R4QQ7x6luSvXb7kisS0xvzsVj6vPa81qmX9hecDFQcgVYXo1kx\nULn2U8HMvcouTBymZ0ols+q3yvmXWEsw3SuZxBddzdKyDm7ckIK93aX9v+nE\njHRWcETerEL+jYfbIdt5TB2VScbu2hS7VR3YZ0qJJ3EUh/VSTCJkbq0Eo2yc\n+j2g\r\n=gV0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/list":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/menu-surface":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5ed9d13d0.0_1578519805286_0.5952307651937165","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/menu","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1c09aac0a69f79176e4b0f252fe8eb3a332622","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.4819cc7e5.0.tgz","fileCount":33,"integrity":"sha512-ajaYM1wYGCPL13eFYc7rI37I5vC6/XJln3I45hAXIVMQByVHecjbYy2ysBR0cdDRtXezmUrgpyiNa0euOKS2Qw==","signatures":[{"sig":"MEUCIDd8SEBGQW3Tiz3QYpB1xB0nMWyfq1bJULhiRHrBJlHvAiEA+f4W6kZKqj2na4TjRQFbT8QBAWWxFOVvSNS0vhB2qYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCtCRA9TVsSAnZWagAAF1YP/2Kv0aP9Er5JqhbF5q69\ng0T1bJfj/L/j0ovjkUuwNjMOp9iJETA+pAQySArwZkSGfhG4MJQ8iL162rZM\n0vUsfJU+wjOG2FNflF1suOMLCSm66QrPoDSJD+KFIjPQaqPCEbyUXcFjP9nf\nkaT9Epcf1QxQGCNgRbkYAxjJw1/SZdJqJs4nagHXJxjQFIIjAaWWk5yHbkcU\nzdh/BO8C45OwmU0wMuGTUfp34vyqq/K+Zg3zwxc8yT+GF9Rs7e0Uh2eOgK+s\ngDiPpmXDJnCLedK8dTjDz37YzokPwDDiok/Zp7r1pf0cW2OPNNiqRzI1zD98\nmwRpSbnrsIPgrZKW8cpLf1j2SCRdjMqhOx9klHdRDsmTPU5mNkMRuO1gq6/I\n/hI+++h/wDAkBsntKqa0hQZBx3Maecul2RiMBoEzbMN2bTn7D3BjWrbw3UAS\nF0BqWGwMFPxYPSX/cwnK0mFbmSrhFiHlYYxz2GULe+qx3AOxXep1/XDsgHKn\nM5E47UcBDWnjdWN+pUuxHmqatM8zPvtlixbjUl8rM2oxqYPXBKz36yOvXjnK\netZwUQZluDv04/ib30F6qOrF4CJ38kSOy0JXQoWrB/WSsQBHwwYCsgzxIJhB\nHU00tMihNB3/STlD3PZXsI0Uza8uEyCq0zcsmoeEHEIKTAOCS76B/aIBrW97\nZxpO\r\n=Mit5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/list":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/menu-surface":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.4819cc7e5.0_1578520749145_0.08460020398705059","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/menu","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09684467b93527e87c605285c7bee2a3fc644903","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":33,"integrity":"sha512-MPWpbTmd7YOpNdkoqsbo5M8U/+2XHw0f24hlaOUmPxIzPGCbSrKDqmEPEJbKOHaVEes/FGZYu6tEjw1N0YBqbw==","signatures":[{"sig":"MEQCICTWfLTUyJtWEbBVFXaRuPSivE7iWzcrfOkhoiqh2CovAiAF1OoixPaUDYRbL2uVoU3UW6iSLv8dmRq9E/MLZCv6wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTqCRA9TVsSAnZWagAA1Z0P/0ypmEdLFOV9AdfE0eTX\ntxZK/D13fMGi1PMwWFAmn7aSv+dZkn37XgTWS37ZOe++ThvGHpnRq8G0l6M6\n4evy5VqM34XlkwD5r/ISxUXYaNQW4y3Frtcyt5PhB6XeHIHGV0aT2hXF8E5X\nbMN3QwedHTTFLMmL1/w9OLdH4mzlIo/ExT0p1zaFa6rUAEcqvzsTDDdQkWnY\nYZxB4OP42yuU94VC5DvxzdSy+TOoWsgnQEDL2DlnOBqJQOUdqcIIYFLcGA8Y\nsroqsXUI9taEt0YypYyzB1E6KTvUqfrT7grEUv+paj6kmk1UaiFu2oLQLK1h\nzXy3pPeMoeLTARagv077JPsQdq0U8EDbtrBZQUkgnjfYTfjJXeZmBlksDKhN\nw2a/jYRxdDjWbX0jXp90hhXY/Dn9Z5AxBkmqmh6ZMEiP/dZ8AKY2E9Is2FmH\ngrT7XtZGjkd7g1Og/SvLFZjJfxEHivzLP+ZVyuSXaqe7adVYw+gLCbILZR4b\nZpM/ratQiVVC2lHTd9nCj93BfRL529dyS1+mAoHgMWCltBdARRjpDhXB5qNR\ndfYpyfb2GI+UzHZRUAbdfVP0/ooKT/M9o9CYbEu1B958q6bcobNt4Jscz7H/\nDgnYp/NomE26dohcWKVUGpCBUw0M5SSwT5hXktij8o869q2s24jdYSsmB7JG\n5rFv\r\n=VIOo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/list":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/menu-surface":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.fe3ffd2c3.0_1578521833601_0.5477928506555465","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/menu","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c2172ce58caf2e22d4ae69bc3356cf1509e10c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c0e850090.0.tgz","fileCount":33,"integrity":"sha512-MqaLRt0D8GIrbjpcprs4p/5pLMia2C9jFtNFWMiQr7AoJDqmR7oyIM1Xnax9IR7IjQlS3Uh5JM1LSzX+MJfFtw==","signatures":[{"sig":"MEUCIQCj+9Hb4HzaEYZe3X0qOFD1aOv0p/qpgjiI5ipddl3WCwIgXhcriEID3v3KOdFc+ZQOjynJb4W0ki2Fzs+jmuHnZPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZ6CRA9TVsSAnZWagAAdCkQAJLbYpVDJ2KmWg9U9tbM\n0nTtqE32181qrydbWmcWdIqjf4VMJS4Ue1ctCt/tvfSNZdvbRwo/gZSf5Zsp\nzHwTvODcaByJDR6OB3a3t1z53xqOo6laLlNB9fZI69kbd4ll4NG/xLHA+hd/\n/z+1ArmLeme838qN5BEpomWZlRghVL3BLvnoXGOKCHedBtCxTWEN7LL0AbxG\nZh21asBEZA4kv4+5ja9sjQDuthRZdPDBbhxwnuvdkRBaFXkBz3cKipqmyKk3\n6MwI3m2MuZS7IfP/eJjEK1AleVGRMUgRksOyPm4dQDZL7bbeGTuhjO0LR4y8\n2OAqsb4qJ7jMlwVpqeKvc0PiTsJ2wZrI9tU78F7+Xos+O4jEUecc5Y4QO4h0\nhZm5KuAvXKjjxQkqu36e0fyD+UXd+3JrSJwoNfHm4XWLJL431N4PSkpqvH7y\nSIVBLHkePhOb+VIciqG7QpkXjZNEKEuI7lc9OFWRS1/JqhRSFZaeSWvyMryn\nvmb6BAvd56ePbDleFkxcBo4MUwu2ePF8xR6ZkwajotDMD7zyzI1MUByhSfx3\nkWU+nZDuHs7Uliwbe5vVbS128gl3OjjAybHLVsYcpZDdXNBQdURdJQPFeZ9I\nM3jgeSU+N8a5RU+5Xc+6QnfOvJYdR7Ia9hb3bsGjKBiVMxzSpJsBso/MrPp4\naHGd\r\n=+jaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/list":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/menu-surface":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c0e850090.0_1578522233990_0.38898693086724","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/menu","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ddcdccff2919d8914550496ebe6f04662b0878","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.615f86f38.0.tgz","fileCount":33,"integrity":"sha512-T1dTL1TYwZk+h+MCeGSSprtqCD+2+WQkPrKu4zwlzcTMMWfswCG9i6haTKFiGg2+WCnzgjymLJGBf4IDuc7ipw==","signatures":[{"sig":"MEYCIQDrTnf4LIDn3y2581iDpeocSRWPVmyjO2OUHbIwbvAYbQIhAK6nA+4ULR3Jcc6t93Cf9+oNgSiUogPxXARPb2mAyD4Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlqBCRA9TVsSAnZWagAA9sgP/3YZvQh5/I0YbRMUNuL9\n8El5oEBLr3pjIFR5j1nEy2lixKzJkxLWVf9727X07f3v8yWRMFxPpdwGN9Wi\nViKiZ1jCCRvQHE88hIXITn+SfWV0xDN45ouCaXX1KBNEWuJfvLaGWLPv46V+\nUqZlhgjw5Gbl8+ApPX4xwpWcOOzncYVBuinknEK0t55foXXpAOTi+h0Mg2q7\nVL01o97sKCTQA37C1/H99HUsnTP4NNA1MYI0ZqoPZd6fcVIkPXt9/VwB0NDb\n9PjAufo+tvyRJme83ynJUyYvEr0PgqaF2qZedWRM3xI5sHfpWAfHv3zAuQuF\nx0GkeIz+fERWTOPJ0R2nbDoIZpf6xpliBp4W2VOWrnyHAvC4wMbZtvhC0/LW\nCwdgUwJom8zFAbjd4z1HcTsJ5V+I+m/lxe4jI+P6ndGwSAyRwCUHU5RyhGPL\nxy24gBDNlFwcpOy3romLOvehj8O5t98fYq9859I+EY7P4nHhUtqADUQzn5VL\n3QrU9WOWKflZ0C6G/YBn4t2YuTaklNPszyqv0lidAG+eveajffCFaOTn5uwn\nTO2tbMtuo54CL/4v71jqJ8U+oT64q4vGYtGw8ty9WMVtUhjn3Nn/eESwINXX\nH8QjqjMPqpmo4yFLZRrFFmEJib8Egy6z02NlLsy44vJyqjc4HELG1maV8PYm\nqlYX\r\n=SKfF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/list":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/menu-surface":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.615f86f38.0_1578523265544_0.5132406285029167","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/menu","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311c9839d3d2b64debf904a65acd10bf217b80a5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1eb032637.0.tgz","fileCount":33,"integrity":"sha512-RgAVa4XqC2CvHrogtAuODGRjdFtY7NLJTfX31GvbWwSxn3GwRL6SKp9tFf55mS+ZPfGM/cmDzqFmS48SmyVWGg==","signatures":[{"sig":"MEUCIQDDBQQjO73Q7nLqFNRLeuSk3f+7x1Max2oqiOg+VaNjlgIgIopVo3wi8WSirLm6qhmp9EP73n44DKMqI1BJbtcupd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8mCRA9TVsSAnZWagAAGFUP/0eFrXopoqstMmSj+uOz\nBs3jQ/Op6pNg0mHipUq+q4Q9q+/akoVYv9u30MsThk31atnKqNcacXLZHJ1g\nkMoFMRfhnCMUZQ+W+Bou4lzP33TZaTTqF7ner+/2buUTsdB/hGCKqUcf0oCS\nIomvytUreAhMD3PBh/DgYegxjHdbCm+vos7Ki1jYswhrkxQZEou4mElHKsaD\nS5gAwpCP+iFfeJ/Rb0POaAhbkFrWKvP0vEnHWZCjy4ONcB7PNr7bZuSxYPE9\n26lad/5//VQKjUL5ARuK8d3LB4x+eow/N/NO8E8a/O3Dx6/KJT5QU7Arwc/Q\nqqzIl/1+63kIaCJKBPEWKsQmVDnsXMi9OL8YqNJG6MGWDrQ4wP88sAz30oQH\nx17E3Yb/ex3nXrc3+sU9jhZusw+nkfs8UaXU9s2xPqTIvCQippUaYe4UeFrV\nF8umdJDRqycHMGLXTOG/SNZmQAxJ9zt9qa3E1owgEch/NzvagbQnMQy57Z85\nhDdzxqM+Hqjk2vVTqobuhP6HeBBS8iQoiXP/fZKxUiEeXSFN1JhV3lzLZfok\naIdSvgY0zXurqN5mrye4CXefeWoWyQZ6he3qBJDGiil1ZnOUVcsDc9xnlXp2\nozJBbTd61epocE5FVTWfmcrXgb9YBb3WSG474hakmQIYWPjQLciYFkK1A3/I\nGyV4\r\n=NTvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/list":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/menu-surface":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1eb032637.0_1578524454247_0.7339768787188694","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/menu","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb58c9f500c003224b1514a32e017328b5d62ba8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":33,"integrity":"sha512-uc8BrmHBGUa7whabGBokW29/vc5MFDqoIm9AW6rIN+uPa4Y0Eu+USaic/mDLDBI8RcML9zhNJvwmQYLxjOXcjA==","signatures":[{"sig":"MEYCIQDdrRSacr5H/yk2vWKBtw3rW2MzacGT1lsxQRH5o7ad8AIhAJhqlDJ5oYr+H9RfBNnhd0SSIE60rvO68nnrDBlZqkfS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9VCRA9TVsSAnZWagAAfk0QAJ3rmUR/JfKBuJkSBvIa\ndpqMJLkoID7SSMuhijJooQwuXkKhfYtETHzdtZ++72fa5gJRq3aPfAzP0bW4\n/2F3GgH8PpxHjKbH4Te+IBGoYq79qwY6y6Fn7FfsdaexnK3EC+B36VVzWvRe\nwgCAIxmeD/bfS7nFw/TLnYJZRveKVR3mTaa+G2C5fprAOF6C6Q17xzCvQ9g9\nHsRJgZyR3mqeDYa7KZYIrPi4EbD6awfbE/oACxjcr7+1LLD1E9rf475XihK7\n5HDwc92/mKzF+c7rFCC/ugiAN5fn8vtJnmrXcKj3VshyVmg/3FnYS8XqYdV4\nGDHeZQNuStTyAjFt2ADi9E3AAUyBt0n2DYN2Q/wCpdwIekQlJHBHJ0EDVINH\nIgf7BL3y6+xbB/MZXJ0FOSkjDyzBcvlz2q0IYs9rux6bIJnKf+FsyYJsuLWS\nCaMfe+VRK6XBymPdV1K6tLtdRENZaA2aRrpJ4mGmtvpp5VVm2Vu3MePAGIb3\nhv6kSITyu2w7RybGKlVZD2gNnIWgN1RMVr4Yid32d7dEHfDkalyM1Q7ln6kt\nhPDIcj93BC/j3pgIxkUvC/S7MshfEE2FHiAHPgwnt1p+tMS2upcYs2CynCKK\nBpZvbXaacWPFhFxlADWylz4rVLE5yRAhVFZAXBXQIFu7ojTWDU7K1MyxrudR\np+4v\r\n=97AV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/list":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/menu-surface":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5bc5ebfea.0_1578524500674_0.535136303556677","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/menu","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cacc497a5c90e99f8996b6ca1eebb8422e6a6f19","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1112b8def.0.tgz","fileCount":33,"integrity":"sha512-O4DAzyTfHB6FRK462tZvRraZ39mysm81nabBxdA/5oAYYc4dP9J0otjVu9xN8/YikSrz2XrqBSFGZCBWSUndxg==","signatures":[{"sig":"MEUCIHnzqCw0MBIgZf6bTnQaTjo8j6gEwUX1NUxKaQd/3wojAiEA0N5xZsxKoz44un3/rOt1NldFoAynIZPtSKeFbfrTS4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6T6CRA9TVsSAnZWagAAe9sQAKSUhhPjZlRbUVgV6GLP\n5hcyB4/sghrYJpJl81lrfLsQ+6TjPWh+RZi2RpJdSzzY1sC/roSOIZwHbK7q\n9/2+zqB2CLn9ySSUygOcDyfltusUWRh/p2+nqsMizGgbXKoxJkezEhkGTYcw\nfc49iqF9XZk0zUDkudcHSjtrS9Dt+pkizRc2oUo5SA3aFuxbK/Q22I9NvAZK\n4trPbXdykQPrwb1vcjjdunBDgRXnbKcGblTtNPEWkZVFc/a9IDb3aJUfR7Hl\nTSeMXGXVrH/q8JKa9cyXxlqlc8PW+ln4KnJzqIktIc7WB/X056xjuHxFoZ5p\ne2SUJUNmudJrVMiHFGxQUXukcl7mPVmWzWolwLcZoaSFCJ7dckTWhigBHqOB\n1PBS3PAyqnjdLAe3oUBc1jZtgsasqflTmfkQwy7HAmmciR0mPhtpsqmPY2L4\n6JA773faLz4cZWH4XJ0xalc5NAYFYDmQNeei5rwLDFkpnHc2kHk62M1lE1EQ\ndesZFiHWoo2k0CHK/KedAZPUJLzR0f7fGJn+lD+clRqNutP0grezKU7vMIbr\n4uitGv2c1XA/VAGgjUCgeQ8QhpWW+Y8cLsu4Sv2LuQwTCH/lvEB05+J893oP\nvNugYgLSYfd16Z46uN0qlK0a3unzSyANS99qeYLEa1IOsh5e3UbD2RDIci8F\nobUX\r\n=RI4g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/list":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/menu-surface":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1112b8def.0_1578607865871_0.9623374584118369","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/menu","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a7b5a6edd810c191532f03fd4d4a335e87827b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.aab102017.0.tgz","fileCount":33,"integrity":"sha512-GFQRna12eivSp9JE2Xpb5ZnY+gYEM0utymrf6FDw7Be/C1caQ9uX/C0SsvUQx6xLohpGnLmGkhWSV0186G9Tgg==","signatures":[{"sig":"MEYCIQChKpDXRL9Tj+Kl2zlm8MM3dG31OdY9YYPSdGSvxWcUqQIhAOt8xiMxjfedwuahnGWGOc8oxtM3OBXvEz0qe+490v4d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GTCRA9TVsSAnZWagAAdkwP/j51X9JtUY/G2k8h/5VU\nOeTAyq6qlH4kRUAGjr6lxxp1r52bCd4tg2vlWRx8ly4+erGLiB10OgLua5wS\n+4cfh+VUMjT0KEZnqP0Q9Yb9C3sVpNUMt7TPV0UloMP6M5WjHlZtrjxNxpFg\nCV5TkzFbFRbJ8j8hejq+g3zy2/NW402tIxgMji5mmVTqw59MWwSr8qilMZ3Y\nLS8eW+AkzdeKwBV/Zg10mf3A+a+7MODLRkqY66aeJ5ISPvZyWtYdQs1/p+IV\nKVRMe5c9W93kaQwx/UVs/Ow6Ljd1Z9UUoOXO8+34OhQELMKWP2yEETkocDBy\nQp8frRrZ7Jb/ebBpJTcB7PREw5usRyp9dFCPVDruP04pdIpX0hPTeyBKQM8p\nueChdD53s5ppXaAZiTWkdZhae0iwV2MfOyYdjgK6IWDOquFCQjYX3FVE67pE\nCOB6U5fhRJsPbYDVKhv5/xxANRC+26LQMObwirWbZTlgSTosa8MdNxlM6O/W\nuzPTFwcZVg8VIgcC4zaaxjfkceg3/JkkbiF4C2OE3riowxWn0DhiCGI+1wrm\n7J7sL+u2pS9DIaZSc9dJwrZ/fN3X/jbJKUbiSn+9JT27vhwaw7xvRESaRlFZ\nx9Cbzd5gt66ZtdLvMzNihfYOT/W5Ht+Xxwb6NIGL1XIoe4AUQJhOJT4tfBzf\nWNZ/\r\n=LFra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/list":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/menu-surface":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.aab102017.0_1578615186867_0.5034723552411726","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/menu","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1920823c0e5039d9c7d0ed10a088a7a9915490a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.426913342.0.tgz","fileCount":33,"integrity":"sha512-6DU16It/0fVqrSqqDsmjaXVqlaQFDz7NswEa1faV1ykKfweI1o4wUq+j0JssnHMKry+zPRl/3idh/2kvWIE+hw==","signatures":[{"sig":"MEUCIHQgNaVH+BlFPBwAZs9SLQ1J+nTVt2C6cOsrEMHFbyRIAiEA7M2ni9MgkjJPrSS/LR1vIPKWGEUdYyzRbYsbP+z/d58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cgCRA9TVsSAnZWagAAHLgQAJ076ZPWkAfNzrawSU5R\n0UwaoLqn905BFvtiZodWCpQRIERGt+e5JrpfNYdNF5mqkkg7GtWMvExAFCdS\nvhWI0nbQbQKM4gqE9VaCnR/V2dri2dbVd0uubJqw250Rr9c5q3R+lqriueyV\ndBn4sCsmwZZtZwe6fM1VyXjjwdIyjUd7BZCJWFlbk06KokbNSUWc/T/Qv4fl\nQMizTXNAUV1zYdCEWlT5nAQiH0sPcBmg7NTE+nyEFAJCTLTcUF/n9zd7vcC4\nUTJ3bG+wYE4PY+j8/BvIG8Y0uO7F6bFqG6PD9SueAiSTaK+zhPg7JIzVxSDd\nWajVtDZHP8MNb4ju4+oCMlF33yc7uGyi3wpoxnhAKCfae+vpaiHln7TkQ4G2\nW8+bm4f971CuI9rP0WP8Vi+XJYh5oc9h3lO1okerSPsWW3WOWn1Mlp0JAaZq\nC/c1B8QjJtGO/nWiWe7/y3fkicoF4iecx9LPOnaurgp7dcCznVXar5PEC+nA\nwReQea4YAjTuSZAEzg4qq2qCq5XZnsptxeXF2xPho2a709qqlnrZRHpi/Xky\nmsiZLT6baYH52s2Wp682P3Je3/cqZKtW8PMrpMt15+X5I6Drm05z5pAXX2lB\n/XsVEA388z+A8cOEaVPYQU8bHME9FTTmlrgnclmIzU4qczI0T2A68YYYopaS\nysWG\r\n=w1bv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/list":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/menu-surface":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.426913342.0_1578620704208_0.8922707507690766","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/menu","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed33aff5d45b3fac4e04f32f4a179208f0e76b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d4ea9a706.0.tgz","fileCount":33,"integrity":"sha512-0JO8Jd30A+91tHULJ37REmETFv4uSczHc8U3Fre8kc4I3xCufPKAPlQq5/IZyLDVSuUiNryIOC34JrV1+zfShg==","signatures":[{"sig":"MEUCIQDFZwdTNjl4ke3MSDZ10Fq3cwIYqxWM6kA+qKYugcuvowIgdKdFKV3T5LN/oVPQWmYkAL5/kJeaP52eJu9ii6xlwUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLO0CRA9TVsSAnZWagAAqFUP/ivSDHX4c+4EayKkSB/9\n1+o9dzM+6hUHSwipgpzDkwLrkjateGZxSXMgd7TIgkqpAFsuB8QdQvjd9omz\nxEoGKeXXJk41r5EZHF2H7VNjTMvlcrunCIOODsRo+mh+JVAnvrinUOLooLnM\nnJ9FLVD1JjmzaCXCI6AXtxPStQma7Kz6qKMZRZ60RzHvkz4CZW0U1t7Ovcff\nrUf9e7pqC0sbCidwzAlURUebw/1fgkY9MIPRpkLHklC0MB84TwexwFMU4pBX\nOwORSDJBhfigixdQWgbkGmqGS7Wjp1bmtCik6zcAbn3ubYfd8GSStzWE6KVY\nvsjxCf7IdgZ4vUWab/OtmQoSC8mJ2M2vpchqfFrkNhq6qiffSPamLT8Bpz4D\nJEI3Lc/hc67SQjoDlPYBq96bS9hKtbpj11sMX8TRXlyG8UGwzPHwh2sAFEY8\nld28b4Nogs/W5jb7YclZUUjkNSkuGj8ZuCcBvaCR+hg2jhtZZ20Q5HFPPrd2\nNessVoLhm/B2oNucWdKZM5lXJ8jm/M+Z+vbekSPvSU0k06ceDmLeQSO0DodQ\nwX735sfrdWlJABenItmPdSHeT1wYb4oOEhCGhueM7tT65dsogFcJGEnXFWPp\nktVBofbCNPARNUXAUUqmXksNeZqzF4I75V2Mb3znpyfWVM1wurF8UchAw4aW\n+Sw+\r\n=uQ1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/list":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/menu-surface":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d4ea9a706.0_1578677172427_0.8816362697169577","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/menu","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad85e89ce6c68c0d0c6e45d944cb9edacc056de3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7d4ee2996.0.tgz","fileCount":33,"integrity":"sha512-iCvs+3Pfz4xcco8hcfqx/uGNyVeE830iXDfj+ikxIcYgokMM/Zz9FaOzuqXKJZtyw8Tm16kYwOjh+DCSw5nSjg==","signatures":[{"sig":"MEUCIHx90BEZaWJTfze4JhjkMsgQ2Iz19TvZcrJYuwbel+M4AiEA/17VwfDVG2yz8AjgunQYhtbvLE4C5y81jcOU3knOTW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsWCRA9TVsSAnZWagAAqvEP/Rrcyb80xn5HHMsAUGjq\n2aPeldeVDPl7yaT0mcfX4GMa6f2Etws2UZeGdtkR+8wZ6UjJ2x+e1tu+zZ6p\nDJEi2y0x+bZowtCQ8PZbwatcNIr7ce6/uFcvUV0Q/s8DFYEVrGR/jrsajA7G\ndvlW21mF+dH2+A1GVowY6IoXtBK6K68NzZyFWDYwRCz/Fc9lf+qRluw0Lpqk\n/A8b/LRRk8DdPRm+AvqGqlq5TPcu9sgJ8ms6RZpZ14hn8ZS2UWUVumj9xXOM\nagPArv+pbbolb3+zNFGmfUtZhSsx1JocGmr5eyM2cgFjdVPRENfIWkeeOR0K\nnQYzENoXoKp1nYOj7ldDVp7xOCSBU2Syv634HhRGsMW7EeE22mtr6/5h9Do3\nqUTu5r17agQFi+aaJOigbeRScguAiE0kXjB/tBx90Zf7mx2X9oDVhyMeP+QS\ncbzC45xYxFYBw6N3g8S+R6QdMcCfxDoAO+kPgzZRdYOoddOPITX0Fc1WwOd7\nSFCyht73335QsooOvi9gGwTMSjmdOtKzAaJP4VqleRsFkiIkdK69OI5WTmUk\n0wea3j8VC+ie2EZY0qmJ+PvsW5riR1dcouyOpOh+8ApCG2Xs9TTk4S0y/nwf\nHI0GdWmeSg7Cwzt6hpFjWrzs85UCJcRnJ5/FBbCW7haSBVbZb5DxbWJ16hj+\nr8h0\r\n=IyAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/list":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/menu-surface":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7d4ee2996.0_1578679061551_0.18874216199095328","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/menu","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322950f1c93264f20ba203a386bf0973d709143a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.981ec9b6f.0.tgz","fileCount":33,"integrity":"sha512-578aTmlV620t6dhQLdGHI8KbQD5ef4SEiNwWFWPbWs93Sy+eMiPKy64w2bw6z95W1qYTasb19LzZORBvgwpq5Q==","signatures":[{"sig":"MEQCIHRE3VSLsmvGZVQg27UP2nznmYDCAMav7YfAN5bRdS6hAiBIGxqzHBNyqa2reO7jx9d2yPp57KjCQlrWHQUQYWPyLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNBfCRA9TVsSAnZWagAAvlkP/1cRHakVI7fPii64wnJp\n/+p/nAzuYcAZVUPo6bS4MAuf3QTon7lIEzpe213GpY2rY0R0UoMwR1GnR83h\nJoOxB+mB4bo3JETLuS+UrarzsF/FPbu3cinDzQQVE3ySfT85lfE5OCe36AX4\nAAhLmrXHx7gCkafWWdbFlnoyDdxxBDvbrgtm97GoCuTitKM2wQQDmf9LWnJT\nMcxafKVghbIa/OoNmSC9nbXgEiYQj4okN8BXfTgF6xIU4k8/NP1Fy62KnZ9l\n5zwGyuuJ+GTvvPA/6TL+MmwoK7qfAW6Kfv7FBaOZLxEmhWr3dr9hrWDVB5vk\nF6pfzS6zjG/2zGQ6reC6uFfNmn84sOz9UR+xmIHu2D2XstXIY5kVU7/crTjA\nf/KIXCYsrVi+B05o0n1eXxbnPe2jWOBbDse5g1sO9Jykul0lhPSUqSOzfiqU\n2al/hs4Z3rVO+uNa1wM+Usrj3g4R6gfTKwMb7ka5f9eaJK8pe0Jtss0Wa7Hv\nw0wePOkyjbHxqgmLhTXryDmfk9XQ8jfd5ZjIuqtPq4KJtOoXp3MuUFfCLl5y\nnalf/RBkyGVdCsFqB0KMQYFF8D273Qvf1h0UikxfRODRlvriZus7Jl1iuRxo\nDBH81o9rcorOrB8/qY1HWclZc11xL3ib5kpJBNLBbKr1qmKsEu0WH+yQCIAl\nTYAM\r\n=kjiR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/list":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/menu-surface":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.981ec9b6f.0_1578684510820_0.6843189116346626","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/menu","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bda69b1b8a72c5e6174049b0b4a3a881d1948e8b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.737da83fc.0.tgz","fileCount":33,"integrity":"sha512-L5uQOfOH4i+V/SkOEl+g1/FPfXfA3qwMPqtar6WVvCjZ3mrhQoZbkcU6baoQIQrZHLtKZrLT3bmkZw1A1s9GsA==","signatures":[{"sig":"MEYCIQC3MYB/e+M7n2Im7wATsX8phWqfe5Se3gDI7D581r6mBQIhALDntXhdeif3JvMgeXpin7iv2yuw3q9OdKx2BH69pgq6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOprCRA9TVsSAnZWagAAnVUP/0ogTdhgPk/vpJXv/JyT\nSQ3myTuL/L/yD3YVyVJc+5B/UO0wkcI4/l3K6H3lNZD0b1GKJBDH91mPrb+5\nybvLuBninisLkKJbg+k63WPfMtLT087od0+2gVqMhYU0+n3JOT2GE7+RZw8k\nXCzrzhaKSxaXsxRlFBBvMUewDIQ6djevOocYai3ZIniZeHUfOM8ESK3MnA3S\nrzkmlU3/48UVyH9kunzWmDpxlbj2U1KKUAC0AA54BRpeCwoibo8opwtY1ApX\nf2SYYDq0Lvnd32u8i6mGrfnXyzqABb4qvi1fxva4y4BCPmEy+FzDJ06Ep4BQ\nykeknmEuxl4/+13IbbuvLUErnSDIfXCtwtkhWcVwdSiry2tES2GVHY6lowq5\nG25ihnPUX5QN+lDnYIiNXwtAnxrgO1R1NYDqKkoj8MMDRE2pKoOcMysRtYJx\nRlo5jeV2a3VlJa5SrIADRhYfarDkwgJFMY6Va5pv5ESLmYPVPj8g6SSL4ajk\nWEOIEjuez5tGY1+WwuixOUKEVGTyu49bbl7dvHYyN6PnS8weM5BvlBRDy8Jc\nEEJr9K3H9N4vIJFaPmj8ec2HMwvbZ8TkcxWMVmZERT9oUZEl/S7RNqBlpY3r\n2J3ZNc/QgEMD2tD56S2kmClqUvbsPBGmfOfEeFDNwoixYFkOntCKBgkCC6GO\noN3G\r\n=zb7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/list":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/menu-surface":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.737da83fc.0_1578691179262_0.9116432279850573","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/menu","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed20fd2fd31300f769f855fba6c346d54da36176","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.aca8e6c18.0.tgz","fileCount":33,"integrity":"sha512-07IZDIUMtDL/dHHGoLdMfeMEGBw22IiWkZl/6IzqDDVCAIxOpAHK7Tq5HZDSyyIIKhmH32N4aTYZYdxPKSoK3A==","signatures":[{"sig":"MEYCIQCdarEH1T1lxZ/r+v1+3dTNbMgwyIaqMMbeApEp9J228wIhAMFwrFjcplcwp/RzmD+bVkJzs7oMwVf3VGJsvriv0nZU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMYGCRA9TVsSAnZWagAAqzkP/0xUz321wNPaYE0Mwe19\n23eA81oS9lRu9X+U/EBAwOwKgUY/Apw92f8zC+LUYI6Lzwa+1F6smJU5paQm\nU1LZve/ivWlp1xWbfKCrJOwHBQddxTAvesqtqqb78UXm0vRhdr4KOQS6vlcs\nA9m9z3QeHL+MwAKovXbunEiOjWtoxtu0OpWHh/+3Ejdhk+cPqfRtTLy338Jd\ni3h85NJ2e/jErx4qOg2Z50+c2WxKvoTjIz0cGKVai1jw3S49kRqpP6tpt0/X\ntcbG2oqNWaE6Jk0cWXmTR/PvP6trZK7iInV1xhiLDLr7TQidR5D5Dzj5ln1y\nQlg4/GmUUwf1snY+x+i3t2pnP/DG4IvrjVsOY4BH7M569y6ryGtKI4lIgN6d\nXJRHadu6vhs3ZncCRJ39cFXpbt57/lngs5ucaPpL4nhlCskT+1bGGdcledgw\n4LVhVRNCHRH4uyxqRfRSRuhWaj5p3vZjF0hbU/ly4OyJCch3u9IbUbq/TAVX\nCYvF/MGzGoWOnX+RxmFvjv6LEkCce4qwDe3TI4rQM32rqZnQErGJv2mos97v\nru/VGRw8nX29NTy32ASplQn0eEFoc7CL2fPaf6Xq0PV8RMfmEYUcOiJtcjlx\nJKPGdRI6iSPSHjwuMsr6Uii29Pw6wSYQuX/0BdBRZI3vw7Oh8mB5pz4Ov0Mt\nB42y\r\n=0B6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/list":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/menu-surface":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.aca8e6c18.0_1578944005982_0.8111996090929077","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/menu","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"755d70c94da3cd6872b61d12949ded0da8003855","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c38d84e21.0.tgz","fileCount":33,"integrity":"sha512-doHuos81pV+ULazV2F4WMDY73sqF/C1th705KHD3w7QmKMcScAls8ZRFjiBtsZDDYuxr2blikrvYb9E2rqogew==","signatures":[{"sig":"MEYCIQCIema/dXLh4fQLfn/5uvQ3ErjEfrti1HtbiNGMbZhEAgIhAL9naOzWGRfSKK8tonf4sA6DNXFTqXGgTK8I5uyfwjgE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOvICRA9TVsSAnZWagAA+loP/2M2N/6N6BIquc+RtUyV\n6gneLj9PCGcAewXPYuvXTKb/LImHNr1nFjp/g3her77/IqaO6r6pT2naGxxw\n4A0nEQFJU0h+Sba8+rk38Lu3E0KkTZZ1XFlnnjgdJaGyl9DGqg9Cdd91Vr75\nax+wKsD6RnQ8MAN6OC4JobTnBQAEjRKH47EXMf2ZjBT6jmzSxEx4+y1STMfZ\n4v8mwJsbKKhnTXxb+MBLzlUUni7S30qsrlTyLLaAnx0ncIIdsTAZip48uR3s\nkM5BS6KYAcnxLc3MEWSXKYTTL24FA2810WdE9cNCztezBCR6QXPVTo2tQBPW\nPth4r9KrKe2e8Q4FcUfpfL7wvJXB0TrVW1ZsqiGOoZBdzectKaKiTvsHVaSN\nXpJhT9UDkA/d6SnaO8G2gs5WR2nfGPUFl6xncpfxqTsITMpr4dLWPCa/Okyd\niQv6toVuhcbpk9ceqN8p/NmgxWnFc1OUswaH04BiweV0QDL00hyEUhbaLhX7\nVm94Skx7NIhxl/pm2MxnQSiiebdVQVxQ+6aSVx8Sj1UdIhZtF6XkuY/VjzPg\nSMsBoFHeo1U6MOpT9G2GA0Y1qqSX8XP7LlyplTD4As4zzOCUm7nRZZmf2rZs\nGoQFGEdSlK7urUBqqP5afH+n24AiyYLReZEXmdjG2uHyyY44G0/zgef4DBEb\nWWWe\r\n=oEZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/list":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/menu-surface":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c38d84e21.0_1578953671936_0.05565379289394401","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/menu","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b820ad5e6186a395077b69f1a6954b47cbfa65e0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a4db5fbad.0.tgz","fileCount":33,"integrity":"sha512-l9kNhph6UCnjnRnRrEXgLVr7Xb9eT1zhmUWje/ANGfV+SXNOvVvFA4sv3oJ3cCxPfAXfQR2xrNBO7AvBFaKIjQ==","signatures":[{"sig":"MEQCIFy0Ih2HAuuUf0yLDHg+CrevFYcrcamoBHrjxPIjn+f1AiAnWKCuHTyhpdRgmaH2tgQk0JStlfK/xOq70DlkbRO3EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRoCRA9TVsSAnZWagAA4UEP/0S2XNASreVBVslAMqM+\ndTh2eR+mR1f3hvoJViG3qe+w3p26aWpR8n3hOkheexBwJJKRaNjOjoVWOBYe\nmbdeoLuwjWqeeI+3DMdInNTpuLd4YKc9Cui9TgFOSVjM/ypsWWBHrX9Un0U8\nrsx7oX95g6sZTLzUNo8jTwuxnBCz8I/wiMEWKFDjwGkJsyNsS/S6SkD6rLp/\nYktOD9Np1j7WJpqWfe+06eOoyQTFBvFVb5OYzuhSTuCuAgYXT+Ix/iet4e2P\nROaTuVCctnmdzk9Jm+jPTMiC75GJJC43dK9BahmfMfx8TFxpSXLlHVv5+l0J\n+3Bj0PWPw2L0l9igxSyVeA9H+wBr2YUmpiwvDPHXPLmKcFR2nABMcHnpfygY\n7U1WYni5tBfaIN1ebvGP+R3sJzv0ZuyVNE2S5ESG7RqbB7GQJ7/RN+U8x/Xr\ndtD9DYbh61xKpIgM3S/koFO0X2ongzklgS9bDLU3ZSvv8cnwdl3z/4OOCbSA\nfwVyCC849CiMGQu4BGGsmVTsjXDJi6aft4X95ukqKAMpkze2jp+lk+APpdkw\nW0Xxz1ZKjXys30DHOEVROK/ZO7uxZ4A9HXu0pIO5InwQXVfr8WfGOFg/chEM\nL6I7WWU5fGmzCktWkONEbQIy/HAZmhc5DQkgMXa0IwAGsSPVCxUGVvOF2tgt\nlcc0\r\n=R8gL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/list":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/menu-surface":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a4db5fbad.0_1578968168265_0.42304184975437065","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/menu","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13451e60430b932cfafa9e9e9d7e10e8f785e05e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.faa9af310.0.tgz","fileCount":36,"integrity":"sha512-m5b+dyy/58a438XsNI7LdmOQnexmZRSJXDyh4btSf6qUDUZGq0DbnvtDu5u9Ad1OTFvkNEW93gJhUXatppLgdA==","signatures":[{"sig":"MEUCIQDEcexmmDUgFd6KYWtxinR7TjY+a21EUzBybr1np40hJAIgUzVgK/mR34UQyzni3NsdIyRm/yBHT6nUCusvwD5kDE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIwCRA9TVsSAnZWagAAJwcQAJI/nLSNPdQ0cB2OQ/P0\n3G/Hdu2x3wDGmr+9Oifhf9Xl1BqC7xQ8yP16ukTGp1Z1X8Yd1VOcYLz+5/VY\nKICBOiGrDw403nMDhq/5RVff7LRfQGX0f89tq3EhYCthehXvoLX4+n5bFOec\nJ225thhn3onlQTNGVyCNy6bZcGfuQ66QMZhEKzgCb7DcqMg49BTxOO2RvT7+\nqzYozPNBgZJjh28FLIJ/ApREfGZihg3pT/jBwMVH7BwsD/ycqcteGFgQVtFO\nqGBZiZTeQEvxLm4cGTKI0BqzNigP9fRMDw+QwTkya5N/UFlsodzcoSVF1RKp\nRDcTW7AmRO+pRxbW/syzzUxYaquZ7ECNNuY0hlVAtjNmyqeeSg+ImnST0l8x\nhZfbjWoITWslW5rfPk8jCirt+3t+oz+sUJvAoucUUYWsPx/uu4Vaiy8obWNO\n4XLZglHAKgpnC5mw2nlOupkU7G1xr2eJwFThf8Vj2XFTeXfdoI2r8aUA1+NI\nQfxIbpiy1kjMYaKXbTy6W9odJnVHuJ4lCxfaTGZL+Mh9JbrHvU0zov5YcTNB\nlhQy1e2jKlId6RydCp1raTmgF6tanj5B0ijTNOBiWbnH645oOOtXQ6+DvWnZ\nCZHEe2ZhN72H9sXofPxbJH+yUanOCSyrY8ey+/guniAEZl77QaIFsK0Yux1q\nHl82\r\n=R5Hi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/list":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/menu-surface":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.faa9af310.0_1579020848404_0.3050778846737623","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/menu","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0015e01ea5bde26a3cdfe11e4123caa9d89078f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.60354c577.0.tgz","fileCount":36,"integrity":"sha512-U0KVA0tONgF1geQKc7M8/uLdtqvquEJ2qNx0AzvWlMoWyZ2DX28PCaMt5ZmEMUZ8n/D1fI40NOsJ1/S7EkOvgQ==","signatures":[{"sig":"MEUCIDwnSOezqvKhMCk+J3kf+KgHdbZKn7AZ2eI2mKVJ0bTNAiEA25PwcxEuw8F1vb6EHPqC3k5HYxO3XbUHPEyRMMG+x+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTmCRA9TVsSAnZWagAAtWQP/05N/9Znu/d7TPDIGRfl\nLPnqKiK3JrjU1xsK036XBJ8sTtI8AOIgWX8SgW8xrYro6P3Wchc+/JSaFPQQ\nTKDEkbjDHgaVfupM8x3CNqWL658qlRowbUny7MU/kXpEqb+848exlfK02lWy\nxTYKk3SHu0P1ZO2ytymdOhcajgBB57iv2sHgJEvDjw8oKGU0zI1E0Sq98njx\njoqewGyXk4iL5vspTod05WHg3pFAqNd7q2z7Xz2MS0HqlBtQkmXks2flttZ6\np7aibEXAv7Q07yFw+LDm9i/dDiYAcJC/d50thgrIVWgc2o8eNIRwxjSldt7M\njjReEtnY1m4I1q5h9sEdf4ntmvFlXdG3cyZ0H6H34uB5li9pHIqhO7zFN5KT\nMbAgmSMBU4tMOkY52V1GvnprzvNA+UUcJRk6GR3h+0apBcRj8DOGrnON04aC\nSmR1zizspZzaT4narevlQrj0ZkzRhslaiXRgw0WjwzCBJeIV1YBrAB/Q9P9A\nTbt/52LsUWP/bevuNaspe7Jwur5eITDAarDQVAG3TT/zEUEu6cz2eaTDJztz\niyOAr/fkmO7MOEpwMYb3DjF2Lnal/ccrKF33kWxDwYKGl8Ba40diEvRklwy6\n7Yhgf49Ilz85LTNnkwIEzQ9K/yiubdasuU9azIHmPYQV2vlWO7x1c9mKlYFM\ngklD\r\n=xDBM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/list":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/menu-surface":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.60354c577.0_1579042021650_0.07634965539396221","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/menu","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4ab96a2e49c0210970f88a89a651477b2ca645f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d07c78daa.0.tgz","fileCount":36,"integrity":"sha512-dP78eJsTYD5xfW147Rfehl9RMgpOciTOtnVhFAeIePmN7yjbn+cRKOF7kD6Rf4Ckz3jDFVGBUa6ShKsNAOACmw==","signatures":[{"sig":"MEUCIQDxQC7Crug9CxmGRCPNXiiwNP9K+aiHNnXBBnqiAeXurQIgCgyeOfp5okRauQwc09xrZiCtU6y8uKx4QHp8/ttYE5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlE6CRA9TVsSAnZWagAAAgYP/1vqnz0qMOBw4cAJ6MiU\nx/PNe4Fnza2h6pqU49R3oyJ4Uv5knPqbaEqa5yEIt1EzU1Zr9+YB1wy8p9ys\nGV55+FbcjjbExL0sJPDr3T0PyLt1YXh4dr5t/aIE4xUVc81/PVHkWx+zri9r\ndL7M9JFWRcTPR8uJoaB3eqzu/SPpZTowhf0939TaPh8jZFpkFeIV5j9Bo0Uv\nwQWXaj+U1CtQwzhBPQLCR8B/dtIp1nrMZJM9MxFLJaDlVbkbodckOJVQ6fAI\nt04IGDaagTOaHcaNSIR6u+pm9r63Cw1YZo4mvrk2PHmKe6t/3E/9GSAKeXdM\nVtaPtbeMyEAHT6cgNJyx0Sdd9PfeWsngeigDDvOqRdtrQgFG/h7MIWsjIOh8\ntDgbJO+Dwt+A6h7HrQJXGtZD2Yl/BfXBEBSFEOa5uavl1hx4FUpt98Ur6duj\nwF36a189PS11tuCTKxFn/wDOEnFYdel/kdPAsq98+Lcv+OJh9g92KewS8juh\nNvpr++IbjUZegJb5CSVE+sBl7x01DXx56TkNN/N7PH+wMXjyldv4Mcp13o7u\nDS2+Z1e2Xc1S8byZvRxJIjFkRDaHPUiV0wSOCQBW9Ntwl5ZvXThBCEPT0PW2\nzCKF2dNYYjwrpiI3Jm+VgYoZK4b0tqkEDlfZyr1Wnc3F9q0rGtyGwUm11tjO\nQS/2\r\n=BC2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/list":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/menu-surface":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d07c78daa.0_1579045177847_0.6036622816132942","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/menu","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2d5251aa72b555cc58121ab0933d4fffd2389fe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":36,"integrity":"sha512-mdJRPooVAa/MpK6JNsd1IJLS35xkQtxB1CJs2RZ0U6RvO4nsx5dTT9L/PCm4AOGd4GTb8xsV14MEOOByebDfcg==","signatures":[{"sig":"MEUCIE21lhacCvAnohnUbACWHF7CO2IER6BUe0CIJbnTxS0jAiEA23YySq2tAvan9k0VVoiGB+j5I7ySD3iaEP5D2JO9DkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5cCRA9TVsSAnZWagAAl+oP/2mYnpE4jQo0v3i/OaOl\nVdcQllTgPK/7d9RS/KD+jz7NiIYtn02lN/x6wCDbANtpa7VHWp9XysBcxtKH\ntTtpMrVcvSkD3mRuw72LMFlOb+h2o0PVRuDEbgSBtu8OhEyTibQgcapKHZIX\nYsdGhWMsnlhF8+rAZcdna93tLRNSljO0XX3NL3yjxS2cet8v5hrHUtGSwwzR\ng3Z1OtECNJgvnfygwTudLCCHRiL0UTzF9UlYRbwIHWSDd/SFFqOavSpC7qHI\n2Sj1cSRug2jhxF7WDtKdiXTnDhTfuwXAAh+DAWx9/0BwiufmltHknbcoszoQ\nmPOwIDh4MnfOK1QM5Q7Dicfu/nDZ3mmFAO4VZi5c2NHind/Fxj7Q5k+nqaPf\nFIVCH3KO03DATBq5ZOuzKh2bvGCit3/Nc6ILVmntXTII6a/MdxZrq694FYTW\n0q8g9gJ2nZSsU4wfFE+9xT5f/XcbtjvPBlJu0EEzdXhus8Fp8s7NlERVpDKE\n1WHxZqAMQIMsfrGrpgnyVFJVaj9dg0xlGBrOxPrq3MvrrQYbU4ypCKwQPriN\n1Jxx/akAHuD1zkMg7AJuuc7OYlzbJ47E7SOXMKqzPj/ZFfPsoGhURHS8Vu26\nmboRHJRTJVROG0wPvJyIqV5+rYl69GSJeqaceiM4oVRMzMa+/LhpkhLbYZsu\nz/fx\r\n=4Lwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/list":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/menu-surface":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.8ddd5c6dc.0_1579052636280_0.7673717973686054","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/menu","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"764f2c8c55b643656b54f03bfd1b6b8d9cbcd180","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a9511d870.0.tgz","fileCount":36,"integrity":"sha512-oUug9uNo7wmduNCU/G8g1h47FYWAfYekqNCSnX/TGhj6soMGXxOZfdpNkIR8U+acyQWW/Y8+Z8linc3JX+xr+Q==","signatures":[{"sig":"MEQCIGXGrACoDIMbRr1l9QxgK7FVxfnk+54YFpeOFPMDQEftAiB2ynedM/wyyvi/cXPSELCzVFydJVjiDcIcPRPHLO5log==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PNCRA9TVsSAnZWagAAM8EP/AugUYCEJKpG9no/m9Mk\n24hGXWcBpx+53X8TJpeCsPP5ywR8RM2QVwVCXBFZUeOU2koHmkW4ZZGe7SK3\nbLR6h3eagCHURuqwbgXI6SMIlzBgpwDYXMFoClGFoRbKh87nJ2m02BFp0Ef9\nnWpCOUQU6LGz0Wmoo5Q8VbnqusgkbDaoAsXprkUzrPDmeGsnmuVkUQqRMIeZ\nS5Q+qOOIyNuqCJmhhAb47geMhBhqwPIkqIAzWQxzXQfZqkOI67NC3dunBGfr\n0r3ATEUVYZrFERAD4DRSgbrYd5bd2TvD/rkj2RqvUFz78eDq78W3bkKUOS3/\nRuJEGyINMYT/qwXcULGShbrAjH3yYDPFt5UJjFjoOTA7EN2Lh9EjXJpTl62t\nT5OEq/ydi1hG/ZrobSX6kVtqVPLytRG0+wkbUbENBcj8EANNuQZmY7D3xRhr\nEGcS34ELfPmNXK46ZwmA8wQq7kMPamz7dQCC9CVejtKwqwtTlvH7ubYI1IEn\nYlvFmkDdn/N7vFebiWmumOrt9Fp1U48JFdj1KHJFrtJecoxa+KqhPPMlZjLf\n+Z+2YviC+sTLK2MzmOCYcsPvaemfpILjaFxZ8lKQOdzlqG6fg1Itcmx6U605\nHk5SWTW+ME1rCGRezwSc1k2ciqqL/tI4hDYczM3nRlt3MODHa4/HslIoZk4d\nGEun\r\n=THvt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/list":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/menu-surface":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a9511d870.0_1579115468736_0.05441368236628663","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/menu","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef3604c2030ed6055c161e7ba9f737e578254fea","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7c8583c4c.0.tgz","fileCount":36,"integrity":"sha512-rrhE21o+/f4Ok0s0Ilx+rs5Dk0YMK+DWiyWgVGduYvZNqcr5yvhg0P0Tsg864Kd2uTzgnyalxo+Sa/HeyvMgxw==","signatures":[{"sig":"MEUCIDRT48uRmntD1v+tEcYuJzKSdMN8NZTeEZVXzNiK4IYOAiEAjoXsmKWBWa0rX9ZeLt19jLYw+p9BxCB/xY4eIxyMAgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bbCRA9TVsSAnZWagAA/OoP/3JGhxEH52o7r4gbriR+\nkryWg1MCL4jCHDEeJ9bM7SzoVxeywLhWILR/F9jZ+4GDIusKrQX9DzWzbt1l\n8mawGkFL2GJXUDSYuqkdZjWgGP6fPt7WtC2oIFYKLAxiIOE9nZfqtD7uETzi\nt86JQEiZu79a2fo0yZinyDoXcpRjkVVScrrDNeuYRNcLau+1W4OBjNpeqd5O\nVJWpK7QmXHbzBVdSZ8nSkxiojlPOGS/fFGFRCGABivUUSt4YocoqGCHdSPxT\nZ7UgHODHj3AChLob5e9RZilCyLPRQTp3rHlc7c8LG92NtI77pVJ7gk5efvvw\nZeoWidRT4ILQilftg0d6bhmeAlPWlrn15zpJJi1JKTKnGj6SLkZBaCug1xyW\nMS/9efSehkaq86Cuiwe9G+fnbCkGJ5q07RGJASJ8xjzWs3Z1aaYRACDc4CZW\nq8xOn2j03NBEjTrG3BPknLSz70Y9gi171WAMefbsmbQFvBoehK1LRxBN4U9Z\n3tPckKaoTwE6PS6R/ltr5TOIu1PNwcMvaaa8BUOQFxf+p+AOdeQNL0h/3t81\nYtUoeC8Yj7F6CO8zQuPXfeoMYHeP7DoPtJjEOEnvr0t5QVWKelKHWLWXLqhC\n7s9GEPJP+61EDh9Zk1h9wZxu3i0GyVvpcUaNj1MAGu0UqF9r5ZDHsfWGuzbz\n4Gks\r\n=5UXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/list":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/menu-surface":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7c8583c4c.0_1579128538721_0.9820751587292327","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/menu","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fbad8c6d610ca57e671bd9fcfa5c46c7392a5b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5d4b82bac.0.tgz","fileCount":36,"integrity":"sha512-L/7vH9CL4mu5c3350FBETbwziJZ1d2yb7gnQnztul9sM7BD3iV9NVtidowZytYrjYJj8zeez6FzQr2BWHmLBSg==","signatures":[{"sig":"MEQCIFgXdBpZ54x5QI1YY5pbtkD1LWlOsCFuJSLhothjTF8zAiAEuvOAwODzydy0rf8p10uYytRgT2AEPApUyaR3vP6pCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bsCRA9TVsSAnZWagAAqyUP/jm8GcGOPcJ9L/U371rQ\nusw0Oc/OXvAKAl7CI52eNlUicAUzNz7oNW1vHpDqsFj8QGCTI0SZw3fkdK9h\nYLunJOawMWGjWyB/nPdBoyc9tDtZfFLekw3OygznxFhs/yRVh25zTtlakneo\n345d04GarzAgr0cEuEWad72yFF1iUbmRdMs8z4D8jzP6Wd0VT257B0/O1K3y\nNcP5HWWnYjqvxiJn0/jgx15I1DI+nP+VGyePf0nSPMlnemZtCgfh27E1hpgg\nVG6yFpcmoyLNHuShAfSdkWXiD48/2OQhXNw1nIOleKx/0zTvnudHsJTSEL07\nPsUCaO8wR4y89s1563MXYPxxPOS3ny1vG8IrYxUAQwtj3lgMtsAip0lJ++7V\neWw3PE51XS6fSQh8GhGm9WslLNdWX1rifhdaz9DKwgaGYwfoUGr917kmtJy/\nug4oHqL8CRGV32akfhNYiY8E0zz+R279lBL/n0BVsJd5quBadB3zibbbZjjm\nAoDEfSgqZq4h3zWpqfpHrdkxB9kb26irOCBT8BTXlGivUUxp1ibnMgxZJOq8\nCXAm9MvGuRhvwuvZHFsbbz9hFPra+L2zBkJG1KWzfBN25BPasmbnnS5iExPg\nwqjqQa4TMpXPtq/AZG/SooiAgVafkI+J1FfJyDe4322qYG5z5QGpFB6ryXnM\nKLDS\r\n=Qagr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/list":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/menu-surface":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5d4b82bac.0_1579128556278_0.24427061445542564","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/menu","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8840e64e5c1b63669cfc7ae42163e986ef7d8887","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.57d0186e4.0.tgz","fileCount":36,"integrity":"sha512-NJC+JCnJZkFXBhjCAc/XFdn4eH4+BedsKsEO0eNyWlnuOpwnZto9c0tz3MH7YGbY+pkKXKbhHvzcPrd3youRKg==","signatures":[{"sig":"MEYCIQD7T5FIYCB/PoshY3nlTUYdHSTCe0czcuD5D9iAOWZ/VwIhAKTD6tC4KKusrUF+6hnGu/QPEMtCKZVaMZ/HFRpDGWn+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjpCRA9TVsSAnZWagAAWEsP/RxYusCL+jiJcbk173u2\ns5b8fE0qtJemWBCxReyxs5PL0/F2839/QezrIC18C/aJ+TbTbjt0jagubUtY\npV8fWBGAqCfkWatwElyhprlYiF/Edkizv2IywPm0CH7Jgv5vsvdGSQWv8Ayv\ng6UNVffSpa2kgWOCzOZ+p3+2lS/qUqFeYMt7BLhvLPAKQUqeFOeGO66Pjs+8\n3YxSGde202o7xJsqfk8/spusw/FeY3OLTqRYULSSxOGPgEMG1RvPjZB4bCoh\nOqhFFlSUG0X3g+4j2ErfP7v34l9vJ7kYw8Pafausa5XKCr/KbWPBRb9vz3vN\no161AUWnfky5oEb4UtYu+4wT0OkSvFOZW+Bjwji1XraHqKP3Xakz3YUjTAuv\nBycducV3LJu398ye2GiGabcD74HRfl7TqPA6d/3GXw+gaLVY8qFaaPTlMw+T\nJv1uvp+5klJxlb4U7hdMUXJbmYieQhUkWYA7M2PLAmZaPXr8VfXBHx8N2Rra\n5oNmnD4pwLrpDNEYFjR6dzJ9RSf3z5emWVuWY5lL1EfF2SNKYWWnm4jpPHJF\nyFNJu/4k8zIwkgdLRPI0QXqoMgYpATTDIC12HZ2t+0+4nCI6serpw68aUcVW\nd2LqNrTkVEjiYy8indnhzkjr5NY5maOoEFvQxjJHDgHpcRWLb7OJrzx5RZWq\nXoUP\r\n=lB6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/list":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/menu-surface":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.57d0186e4.0_1579198697159_0.15716993296117154","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/menu","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ec4b6583f5a80320154abe4743ef323f14bce9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.071a6ab70.0.tgz","fileCount":36,"integrity":"sha512-MmI7hF1uBQS9FBvw/bTN87rYOX1e6HcxlrFvCzeYjQ/7R5NcZzaLQR7UTpu9yYsyVC+9N/r1EyCkC3UlhoWs8w==","signatures":[{"sig":"MEUCIBMEhE5rgohXnMAmRwyVkJsjmdavXDjJzQ2RBvpWWUZCAiEAvw4HTZz9/sItFuZ6SyVaHil8avOHpz3+eHdIU6a6lDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKp1CRA9TVsSAnZWagAA5PEP/iT6w5mqVDq39hI/l5Y1\nff3we+xHOLb2I+dqbSEEKfNhh/fB/xbeN9TjoLYV1/EMdEv6Tt4hy/kAOKoU\nJre1sFDwI096dplSt/HlS5/bDfRboJYP3rfvO2sx4PhN2EGeH1SXOOwUxoBi\nVNHHdB76L8F3iSsSwrDcfQ8NpuCMad/3lKJo+/LoAjRtCn3VjuBOgxMrSU6W\nRfbw+riUV/l6H/qzrAvMTaOie/h3NcAAR5iQ6ubJmqJttubwddklVwfY7w3l\ngNWrZ5mtXbLvddniTXddtvk7cJeCTw+kyErohQLT14ru8K5zy/OnFcrCMBzo\njHtDQBt7NqPblXoL9b+YK+5M7CKHIX07AgRn0UNVu47ZvFI9C7E1pGpYFrao\nB1LiD/dAuDeluCZmU4jjf9uAiMeO5Jq97DLcjXzaWvsftl+RGsxWp1/xAp3W\nrBIjSS5C0EACYAVDiOSpoSmdV5vw9zrCHdIILsBfmZMjc9YiLP5wlbXqHAfB\nSnj0J/XtTZJhiHSE8CjiVw6mfo7vumvmHQF+6AtoDjai4mVZbthG/alu+94N\ndUL5PZyxCYGdEVHMxFhUKQNkP3Phg5jFDYv3MFooSI4ccu6RnJwi0lqnYGX4\nMiCxn9XG/s5S1eEOpL74dS3jiaZbQF6SPKj8bDPunhchaIVRL4A5P0oC0sgP\nC+AH\r\n=rgOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/list":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/menu-surface":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.071a6ab70.0_1579199092985_0.25049773512049756","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/menu","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06d1b3b924fea310ee0e358c2a26770de24b6269","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.22e0cb618.0.tgz","fileCount":36,"integrity":"sha512-8Gh51zu0TVhR7GcfPhn5cxyMclclRR5YkMYVB8WGzCaL6BEHSvApWX0VC6tFOyNqYSqjVr1WbrpiXOqMjp76dg==","signatures":[{"sig":"MEYCIQCm1XZ0QImVzXyJZTFbQWPfOGh7ppkjQiD7FfReFz7p1wIhAN4/EIn1JOrF//n9nK0VP7IXPJ1eN4cwCPIbE60+eP+k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/VCRA9TVsSAnZWagAAzyMP/iqdL8c253NKThVmAJQj\n75nhTV8YfIg/lThWgkCoYzSn0t/vMChXaKcC3dnQrXzs2/+QVWbSdzYZmZsy\nx1ttpDVBZrv7RvYtLq3Fq7vKPw1lDEOk2+Xh7wcOtCQhs/Y4IAs9nq4HyDqp\nTKG5mxRfLeAyb3s+tOoMqFm5n3FwyFOOaV/9FqbAnGsn96mZUD5zR81tla+E\nYn41YFq/qiUXikdIUQmo8eyj7Dcz34ZcEvf4m6cVYQjaU4fMunQp6vF9Y36Z\nSY+ewo0aZPHAGiXy48XDJSdIxEZTuXENXXnZgXiLHWmG8QBALaIPgYmk1Zkh\n+IkS2Pm1h0BDOfHxq1ZLh4KnMSH9BvL3+uV2Nil7Alu6dLAwlmCf4j0hj1LJ\nSz+lWvgcOFzX9WkQm8Ito3JRmyHepGUbGJ3Mv8yduJ5LruGsbWtIPGN63+Pq\ninNk+0E6tbC0elytWxdrjlBANNd6cqjPWHR6yLZfXOYfBKx+po8KJM0eQqiH\n40nu6Qh3gwh8QDNlvU1X5uUM7uPhXUpDUP9qP527QSIlus+JCIZZF8q+5dss\nxT8F8W8hsm6aE0Eic9DoZEardC9NdVpXLwBj/R3ofc7PNgk9XsSzcMI+y+xo\nziTQWbF81fxyoCTMPbnHsUAI7zdeXwwmTSjjTM1e+3R2Y2uOFpYNxJE/FZqk\nDsWg\r\n=WcuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/list":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/menu-surface":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.22e0cb618.0_1579200468812_0.03309102874929204","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/menu","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf3c495d319882c2d80b375638b7eb92a94a9264","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f16f15b8f.0.tgz","fileCount":36,"integrity":"sha512-j/aH7GjVh0bZY9SeqvuEne9TrMQ5yXO3J5ELdzzxqGNEM0TuwTLEqg410EQJRfUsABV5vbe3uVYpFJFlYPbqOQ==","signatures":[{"sig":"MEQCIH1GH3/W6met3CY+6RqmCts33ad9GrTum8pqWarUY/enAiAPEtJ+mPrM/Rvrghjkz7nULtpbJ9/pXfVW5QV9wA7YvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrjCRA9TVsSAnZWagAAhRcP/1znPj3bLu+kbs5M2Z79\nyo1IyFWoAzD+CDnYw4QKRPxmCWRN7p9gbTbwhl4Y54r/y9ppmuk5EG/SF8R9\nhwrGDBkO+Nigx5SJe3hrA+eZdTy4ueGuPponWV9WxGcoY9cBYUpY2RN1NLbB\ny3IQk4ODxDe8k1XwogR0i3ZTdHRPz6Uk1chLdk0bHkjCGQkQ6NLqVSxHDp1i\nP1/GahjvNWLYlym2EEYw7g6r4xsNp7JCwMm5Qw4nlklZBzFNAnnAbEgP4+Ur\n9flrajEWM85otGWSKwDavVuH9pi1HjuyvNxtpBwAN9sIv4hUXMu8mNYmxTPg\n1/ynnNcwXERH1jPMZn8IUM8ykWVAx6xVECMdpwAuGtW1BPnJaiHu53HPhW6g\nzgxc5Iyh5HZapwvqdzEo4CrZ9KL1f17CuI/OnEKBgNizcdGeA4FBA1DI93NL\ns2s8VhY9KQIWADUZTzpjxUbR8oiBv6Vx6Mwv0+val+mv3S20dYsd77vrrd38\nFBGN3DECqVfszZOp4ky9/k2XA7zwPdKlYiWMiJ2rFL7ulqfdHuyNvNj+cJ4E\n0Hno8xqo7wue/ye8ADhQpMmAKeZZGuzO85fDJ94jwyYn3YNfLa/C0qRuW45Y\niD1i7W5wjEbEsgm7M4ITDA9WPSZ3yGtY5u0UAU2PzwvLgL1vP4o++58A5Njj\nqMW3\r\n=4QTK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/list":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/menu-surface":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f16f15b8f.0_1579219683289_0.801813015061013","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/menu","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5cfea873b6b36e39d5344eb92783993a187412","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":36,"integrity":"sha512-dON3VkZnaRVUkGlRLjey5YVglLiPByApYmtVOq9MsgAYnGnFwZ+LHKp7bkrnA39TNFvNA0S6396VwsqTD9kl2Q==","signatures":[{"sig":"MEUCICtAaIs2F0IkBtTybaAVefNEFbEqFOcJv53oZsGqHByeAiEA0uJEtvELCKF56OxwJ5Hdvbo2E3JpZfZDVutrvYScFto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHZCRA9TVsSAnZWagAA50wP/iQdOPJfCgwbNXZ6d/bX\niw5KtJvEv4+vwSo6Ib5Ged7uhhhnjfqrOyGxE9dapke00tkJt5aJKF5bFj9p\nP0BU7w8DQfhF7CqQi0JkpbXc7+2QiDINSjc2Zu00lsDtkFeLk8oTK6ic28In\n2f1Hgp3EiGcMLMkwD7FWUt+0tLciHzHv84iVunidl0YmPLfFdVwj7Ci23Unt\nwwd0hk+V1GFasmoxPnPKbA+y7Ife6ahtNr37fzOdhtkrMQDLkhlXtxhzBJd7\nVvWyRL0+Y+8255xiGRlaVQnPTqbxRicDfkn4EtOB1UJiDGU1Pv5LGhA5Aj5V\nJuDkwC7KdWP6HuXbpDpybbhIdYhY7IbG4sVdf1hGRoy4MxJKQLI3J3Sd+lbC\npZw6q5rgE4B/+WnrnBqNgyywLyUbWvVrCRHJ5NgMk/33eaAARz9AL7W6gGTe\nFyPeRujd8DOT0O0ip6wRTAdnYj0jaUwh6o2AHio0f4zUzZAc07Ft/IdbE1dy\nDqoUupgBeHkRSGAvnXZavZ/BfrIbH0oLAfiiSr0KQ9o8WjeHxYLfeXTqoth2\nAUMvLdiPIFdaKv5dvHDGBktzjpVmTLDWQUoEK+gHGPjPdffkiVbYWzd98v1q\nAyfYnTFOwPxvHm/1pUX/ixvlF+ZZHKtA3ui4/yURABul6cbpraylA1zqxhhN\nL2Gi\r\n=a4jK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/list":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/menu-surface":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.aa8e43e9a.0_1579221465569_0.7630901982110441","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/menu","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fd15eed8f84f8491b7bcea8c7713b48df460d5b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":36,"integrity":"sha512-pvMAqZ6EBWuew8NmCvRAfSzLZkO4G0Y9lRq16n8uGkgaoR3BLSrE1FxrJ0mNKX1wysq7rGjNd+4eVGMqfQp5AA==","signatures":[{"sig":"MEQCIAY3oPZw9Fz2Pfn7I2cz4nMmNEAfJ+D/o7OfUQoJVdK8AiB65WkZZBUjyLUit3Vl1Tpg0dK+3FqkQZ+rPLDbTidqGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdXCRA9TVsSAnZWagAAHp4QAKQD3+ePgDe6qZS5J3OS\ndgN4iPwAMYpmBqOTcjoRDaoVRozpPJPK3zjjqFzPT7fYTbnSfCNFYtCbKhyb\n6MSGIDqMC8oujatg+86/JG5weiVm68jzn79ofIu2zkn6P8iupMl6muunA/i8\nSq3hijsc2rQyVZtx28CsUt5XyNrf/in0irgQHCuo+FMinky96d+inIGJlEJf\ntW7zmWif5wCDoz9xXp79OhuPIZJZYtfc34gkGtkiqk4d2FBz/nM1UwOZl+pp\nqXAJMg9MJBY8wBWQaFSPlJ/jE2i0yBABTCLZesIhWuZOa/itVW5T099+Z9fA\n8RBv5IadroLO1ctM7ZELMNg2uKDYFEL72Jzt/oHo1wSdJ1XljxKIPtpavlmh\nrPPfCKWmB+X8Au+oJ12qo3rfV8oyPjctO9fxN/2hkShAM1A5Aae9gyO0zfSQ\nIBVNc25m1J3SNb8W77/VZPkuMDGYoakRce3zYd+d2vZXMpngYdQ+ScdQQbnG\nQ4c2mnOUsQEWT2JrirLAsJ+kVwqJXJ93BRQF6mYojl31GyDPMXWc5TIcOAnQ\nhoNmlgmeVGrK69SONdHt82GqsXTHxPjMiYtawZTxOLuvjfKrgG+DnLNe8UNs\nZWl8B5g9oVsT5Bk7ivD4fUweQ3w4vw3D0byHRb6+FLB0L5NnobSfqSV/b/Gl\ngiqJ\r\n=F98Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/list":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/menu-surface":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.fe1f3ca07.0_1579222871070_0.05785780843254318","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/menu","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4304930b6b884be72d350e240b3f9c79141501fc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d405af26b.0.tgz","fileCount":36,"integrity":"sha512-hKS1r/hV8o+89zk9MjpwvhvXcq4FMtb1YKQPmLttt8xPvSUU3e4nxyrg8+JDV0yzIXA13HbrBLILMr6PFINoIg==","signatures":[{"sig":"MEYCIQDTRuaUvV/VjJdaSw9ZOZVLqxpox0jNhAdH0GB9ciihVgIhALIeXdazxXRtJ7LAOpXp3PKi+oC7hB1XoQuBJ9J76Mfz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpkCRA9TVsSAnZWagAACbMP/1O+4atar1+NRrSniZ16\nvTACFlz6tZpTiAQuGchCJ9Kw3we7AxJqmofkmkT5WD8k7CQZe2VaNEUbs0JG\nGgloxQZxaowyMBdRV2XPcAEN442PrZnv4cEDXWXr5BGIivaVBisBzk+3GlY8\nTLBZWfNyoJIj1ueVpVM91oT1lxuE84Sm38HV6XwK3V1smIlpRZhfXuZ5HekQ\nOxpgPzRL2eIZI6buToNgf/2jayYjIprdMnk/CLVDVPluU0Ddn9fsAeI+4678\ngk5cAJNvfuym9uwGVMdHZc403PEKEmVtYeYspOsOHRnTtW4FbFFylT+YxvSM\nZDrwasuVTLMr0m167Imf+pcnPBhpcou2D4pexYhobcCSjcKiCvS0+x4SInGK\n2RaqL0YHon7PbO+f9oR5Iejsdl8km7IeGj7qEKsIK1s6TSYN0kRpf1qUp7Ee\nifwEueA6ps4LyCXioWQaOb/0bKI7z11+YDSedDjcYyB/VEQ7g3O9SMcvEJb5\nhJMEQpIhJ2TWjzGmkznp8SvLmdP2tZpRcJ1PvCXC06TwNCBS8uI4ju1tmtHN\n1CuCth52af+CpiSBZOxvvR42xMPzoqZpc9xhefuuoOlG2eLME2ARzGns5T++\n3s9r251rTcAaKUh1UXeun55UXWd7ypNw0v/TNOxRUf8vtffV7uMtvZwWpixB\nbM0x\r\n=xJB6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/list":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/menu-surface":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d405af26b.0_1579285091536_0.30797456629548314","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/menu","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e6f7a43220325b2776aeaac2fa77df0fa07aac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.6e857aae2.0.tgz","fileCount":36,"integrity":"sha512-75SePjZ+SpVcperqMV7DEO4B257x8rBn8htdSSSa7EuD4lxTECqiUbawJSyHOb0gag/n0SAvIXST0aRIrLx22Q==","signatures":[{"sig":"MEUCIGIoQNBEgE3Z+htiIIUcpPPIVdcvaUBmYO1nuMXbpDAPAiEA3TRict0OeR5w3IQ2mCAHOGl4zc7zkF2BurYHWpTIXxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsyCRA9TVsSAnZWagAA9c0P/AogKQy/Zv8ZcckMuQLT\nzjFheg5ngJIZq3UYvB/yNT1lPeMCRnljUOzfsCTvDqXzYPJNn6gg2e7IZ3Y8\nT7FysRmq+zePHkr437TlHaPX0uNokZ6fR8dPF7rIQzJljoS9DAIJHz6OKpXC\n0A/jYhxcPKQ//jtLyVURYMVQzCQTMpZ6rlZsVIkqXKpOKceSTzaOUnfUcNWf\nxfIO8cG2DK0tYz20h8FdkBMXZ9dGuzb2xAwJ25RCTAVfMCZ/2Dci/Tv/8iNN\nkdnxVPZDkg0a1mrYC7vd7xTX8l4+J826VXz7E15cVJSuZH0QcJux4EV5E9ax\n+KF8+7yJZEohNU4+wY78Giy1Mf0OoZSCTGsC9es/0c+mhr8L4Ye4GYzi5SNd\nbsAhvvdfg8TeixjjC5ggMmuWLx/+nzg81zB9elU5GrcCHa4+Ip6HRXc37cEf\n/WG4yFEUa4FuEAsbdsc+RiX1R+SpmyFWvdIeKAwHlBDZ1soVXgEh0VPIjD/X\nkibys5Wj4VIdCUMX4IrUE5AKYbINpHx1p1HF3agBRTeyK0TH0h0/Uw4xswJe\nwFInIcs0TJEPwsQ2Iq+rlsF4fbYVdMzUgacmOGUQDXORg9ym0oAWns+gJ2za\nbE2P/ZL7hqckx+YB0noJ7OXdgdwBwNAp/oXMHhCB1MWFeZgkp8H4BYvBsRfb\nXAQ6\r\n=9Hd0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/list":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/menu-surface":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.6e857aae2.0_1579285298504_0.8007885681219138","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/menu","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394a047e1d3be10b51dfa6fcdc693a719a6a24e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.e2e764f7c.0.tgz","fileCount":36,"integrity":"sha512-TQCuI6uKfNA+TKRuTbsfghAQDjKwPFAM/t8b2eWRHDLpAYvGHhQ2WxqqFMjesaqid6NRAnSvXyJTzVsprUyx5w==","signatures":[{"sig":"MEUCIQCllA3OTGpNtIztCcZIoBg8aPOWfZttddDYYCX5QVc2dgIgE7f8v2HVNT4U/SjD0tyua+BWt6LGZLh+c2hlPhjHTRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7JCRA9TVsSAnZWagAAlHgP/j+jtAtBZ34cfLgEdULE\nWkstsyk+7ood40bP4f7OTVurgRV8+3Wa9y1I1r6mup1cZXOb+YHn1DU4yOBc\nEpExrw32CKqcZTR4Gy+nq+Erg4G9xG1Uf79879J+0rvDqIH+7viGivEjSKMh\n4OX0sl8zPVX5Z7Ak+YbAnxLpdWUK5cyS006r/xwO+ZiQgfY7mQg/3liMO9pu\nLS+puYKiGw5ohhms6V3AQujb4Jp3IjMVAruu6YgYNjyUMbWxKbFONRPpJdJH\nDKmml0d9++vU49UMiFgIMCHUVLGqtq19HRXcJImf4vTLHvtE01jICJHhiHxX\nkO8JD9nGdECWr6l7AWmNX0V5oaDB1m/GQIEP1uaTgZ0FcQVrd3Nkmobfs13c\nf6yKANWWEfI0j/xjoKVnCXE5/nDrfFlzVqTJeftv1VqzV8e4SlaI3awY7S89\n1mQPXB7/5VCjvy8JCRn8GbHQ+Owib6/v3qJwtkPa2NGU6veym2nt54de6C9b\nbzI0j/XHPtKuJ2Z7fPzxW2yntp6sCc0APWsSMvpbVZMzVJ2wJINhnEsYKaRK\nf7AMO36nnyhx2LNBWKTdMcQHzFzmgAdf5xJ1saaDitl5+mmxjerBFs+RgvjZ\nGO6XpqCW9CPwoDvTt5pr/vHC0qvHiZANdN+/cjJdWjgwMV/hzLL/hVNGTwAt\nDFvU\r\n=s5Jb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/list":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/menu-surface":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.e2e764f7c.0_1579286217366_0.04955255965840499","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/menu","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc32729723fcae7ff14b6cd08aeacbc4b2594664","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7ef986a87.0.tgz","fileCount":36,"integrity":"sha512-0UNT1adQ8AqiSWWoCmNVdWDslzHPX0b+G+3Pa/7qx/Pm4L+0i9AhySy1SC3NOS6WLX5A6BvG7ObY2Ua2VtoaUw==","signatures":[{"sig":"MEQCIErHGXJK0azWGD+nSPDov7/v8i6Z1CEERU2KGsG1CLVTAiBWnW6nr1vyuvOEfAkltNVua/mG+1x36/KciR1Jd8C98Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgufCRA9TVsSAnZWagAA5OcQAJmONOseBAVOuPCGDfer\nmV9Zm3sDW141w0PJlQyE5pKEXlDCadJQgIkQspMIO7Oagwtf3SWtzQb3exXX\n+pokpPrSwTLTf01eA8VOvnMrniNPPqNsDHePvIqwlU6+HOaFh251EpjIT1jS\nK0g8cbFoUK4yLncJSqptAs0mWrWDquvbk8pk70nxcFozPdITwcznr1Nit69s\nPV6XniQX7qYHS6r4ew3d8if7qChIUnUCmjcSwwsKUw0QflLPQ9ld5vnPZkir\n27T6STrMEhL4o6tplN8ZMd7DwKoCBJ/8sJExyPXv/u2VoBeziEZAePRyE5fD\nOg+rrqNvsDZrwsfP/c4kpCiIGA090XngZEPyoT5PXsbf+uGbjcA4lH/EXrqL\nouDcTmqjrkd6iGuh+6nZkUg4zeVJR0ywCho+B+UfUpbOlYGhi1DeHAa9EVty\no8LXSBABS/kOaSh3BkppODa/19tJT9gKC9H2bFZf1c5djKTGrNNon4jQdbpQ\n0gsY2KNmf7dtxmnnwAYnHTNtteuYzSeb0FaczXWROtDtLz42n7DspcsmMDhN\nt5pWe42AhLFncIRLtjP07EvRLPsllmysHjX/jyJeJc+SlhclhVuXNSO1+b9e\nJXGFHMuYUPjinI6zzUtntHFW5YRXF/mQsdTICTX1iciWqKHU/d4zQz4fRfxg\na4wj\r\n=j35y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/list":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/menu-surface":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7ef986a87.0_1579289503494_0.35059515670728003","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/menu","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73c5783b5649994b57225d37bb320453bdf03051","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.29402e2d4.0.tgz","fileCount":36,"integrity":"sha512-JnHJgwYrMF9cZNHpZeEwKRIxb3oIe7cOYleeTQdJ24j9kgBXggBdGTWIxoi7mR5slfHJEuWHUxmaXV9QvyOSEQ==","signatures":[{"sig":"MEUCIQDcnBeAGRfhir5KCqKIFZXner+RR3L2deEFBTOjLFfi9QIgTvCY1Aj4hWmSOA73+e87gjCMF4IhPbk5C40FulXQPLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvbCRA9TVsSAnZWagAArFcP/0Snrcc5fm6xqQMytzCF\nDY+4Yf/Mqd4CXni8JB+e/umsdijc0F34FNg1THLADAAMTcDZShqmwg/6CjpY\nZLVck3Q0gBaqQWQb0A9wjssbAhO/HspyPGRPTxdepiTwBl/F58WEQh2RCWTm\nU1JTkQYzjxzcSf7ACgugrfiRluA/K/v+X9wG1nnqewWXcAyvT7yQGTeVrQuc\nxXOE2hmWG00g5ancR5Kj2LJn/ZD8xPPAyWI3cVbLpWr57JJr40n0Vk7vQcgM\nDT7kDj5oTZW5UeyB31nUVoQo+VD4WCG5P4XVCVccCE8K8XBBLqq7ZCb92Pg1\nXMO3iKnBO9JA/MF+GNw+dvWeSjmi68MAx0DRWkHXMA8mWaXzLIFADCttTSxF\nvu7BDTWYCg6YkeDgg+0LfotS+lEdym9ygkJZtpp/rEMJGi6Yon9QdzktopuS\n4uDO2XJifwYuh7fIMCsPreNsTajNjdK2qZh/HF6sejAPcBcGdOmFtK4H42IR\nW8iuuBKlCivCDlRSEX0lqizVS0SIGGe2D7kIL/oZI1HKp8jOxxzBFLHwEmlF\nbhVf4qGA/3zefLIxoHXbU9y82/2ihXDyRCYV9R05ZOAqhFYuasC3m2dIuOg7\nE+60WLaZn+ackCQ5xYcbT7+zMqWMcZ5z2mLKIse3MjP3vi8LZLQcVK3bv+kJ\noMdX\r\n=tRRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/list":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/menu-surface":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.29402e2d4.0_1579293659572_0.012021496308848967","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/menu","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"329d5d21aa5b88ad17be120b88170ff3743f4a59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.2b3ec563c.0.tgz","fileCount":36,"integrity":"sha512-Lc9coP5C72Zt/JBcXrHA9ycbS4i6W3BtBPswIkuFJOstGbNNU5zHaivspWifioY3xIXLwKuf6LabFUKRpt7Xcg==","signatures":[{"sig":"MEYCIQCv8QxWWgCa7YjydRgHgmIlEgqJV7zzPZAI1p9AHv5CvgIhAP55/y/XPdCIQYyDJTzk2nNcNrInWMwcpSvPrTVwQLAB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9eCRA9TVsSAnZWagAANuQQAJzB7XDHvWmuFKxJRM1a\n/9hfaVJZEqQw6sOInfrzk7koy9Ei2IQdDXM3659QCWSbFmrbvK2wo7jZfJPV\nIQ0FkHAvyqjGhKZyJg4f4HR87UKCcHO/+Sc1G0E2Pqz+bQtiuyxJZyZVRpWQ\nPsUJ/GEe1445ojS1VPMIBXLZczzYndqO98ZgPeCMFw3EpEuLjzvrdig/+/zZ\nmm3rDpgGaUfQppBLwG1fpQ41Z40acDIW1UZmAmlG8TF/D6Xdl80eUacDbbFv\nCmTEi+VnnwyBPhou+bR6Ts4gkCglOOU10OsJpWlEYfruNhjWTKbFoJyYc7v3\nsfwTQJd9NogXo8gO2F4VQ3hR4cuoiT3f6UWSEODEgJG4CihaKFMYhA9dLBih\ngWeOEgdN20hz2BK/1xSi0f6KvBjxd2h1ngGAPfY6ID2tlm1+T7q1+fU5tnvz\niLsCek5S7ApCEKB1PjefXrO3KXIRfW9QM+XMRzaZPc7KbCR4PtB46flEa8rQ\n1WIriEO2iMd8BzLJYhw5g1yeusjIAuo//i6pBi1ChxLuDOp9m3ozp3F/+9so\nLfVkb/Qj/tNNkOhT+y4n9WIxdXXAzJsChRZ4i1L0Aa4+wkyR+oVmVHw2Af55\nJiPS/lLMxoGRzA8QKatKDxpw7qeKZfhc2DzzrtxJvki1BuQKc+UcC1oK+M3/\nxWbG\r\n=MRlv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/list":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/menu-surface":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.2b3ec563c.0_1579302750199_0.1280211133468805","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/menu","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5cabeaa0c5d169aff4e986ffe0536a74547f1b4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.e8a993677.0.tgz","fileCount":36,"integrity":"sha512-0n8Ht+yCVwdFBIpi0nMVv0imUP11cAWQS8p/Rz8S31fZxCZIPoDPjeWAyNlGnj2yA81KP7V7bJ8wdSRraxbQVg==","signatures":[{"sig":"MEUCIB5CZ0aE/RB3fYYKUp7tT4OZkTDUy5GU/MlMH3WZg5zOAiEAnJYn+r9flKsPg3AjzZirKM8fr1tbUKLNlVYc6xiYkB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvnCRA9TVsSAnZWagAAyK4P/1/5Qfodu2X+2zxumgqX\nq0vooQs71MfqhClcoWP64TzS7u7cgxkzkT6XXCwT5rGo7mc7rGUZ4rD1HvhM\nnilYSjJ+aINLwPxXLRTPSH1jgjXbdoCWtD+HPYIdMLjtETO44uGcyVASD05L\nYjLKsCryzP2JCJ2sbzw8tUTqYhpU/XnIW7Amsw19bcis5r8yhOyFdr8CJbGu\nS8GN7RpBg8Ju9NKworMZ6dEOv2NQe8vlU8NsU+MbI5E1UZZ3QpupxJ+Czop1\nn/q8FLJ/n8lY7/Sf3m0lO5y6VsDkvai9jME9ofptAxjSSh+BHX91nx7nrPx9\n61hAStfKUuY1xuFSUbdvBdLxrrgBOcJoWfKpiLtyct3H2jKm/f09+OFu0c7/\nR7OIcxmaBiQOUyeN9E9TEXvqGJltND3i2HXcP/g67owkt6vLVZQlKwjbNGtt\nep7bmyS+jVablzZBm+8dg+LqDWL4KNB0yLspURqawjHAnhB2Pt3LtZJeBU59\nkXiHwnuqt5cn3I6UPUSN3ftZ4njB4hrWh16aXSoAAnH8oJ5EPdiv4yx+SBXw\n+YPIOq+QMuvcHbkuBZFVbI1d/WGjddNrcBrKD62R6K/rC1vKGr0/VMPeQ8u0\nlhY2rt57roYOycocH15faCWKwY/vGuOwLhVO4qJFjVWm49/Qgd14A9gzREdx\nL278\r\n=elEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/list":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/menu-surface":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.e8a993677.0_1579625446708_0.7724754657977884","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/menu","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d52955c5309643fccf746d1def796d1ea737973c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.cd4903304.0.tgz","fileCount":36,"integrity":"sha512-LVnQ8qJJUO9vmYL5V/xXcpniFIN5UbbD/bvaXeNML4+y4NJv/ktvdMHZ81VNaC+PzVReAfHO29huv2/fWDCg+w==","signatures":[{"sig":"MEUCIQCu49H1F+4fR2nE9WAn8U/p1mUPJ0DkO2/FfCWHP0P/AAIgGJizSHHoGIncXdcIWMTrHjxcKLWpEYOOtiDczHXzieU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28/CRA9TVsSAnZWagAAazIP/1xQbCpWz31jm+CtMGxR\niKMVmnFQQ68G13wigV36Mx1QkYqT1C2WGJS3H7nttxHV6WTyR7zB0qBhdqex\nHTe7l3hEhjtkpvtrX7cwpq6OhJI9jffrWQ5ieklWhkaYy1GDncv4M9YOoqyX\nNkX5uKvlO7NoFfwJtez/DopordT6m8x170Z8xk5/vH3FyfbqCZGN1qoopeWR\nnD5astHMlbpI9dtZ2R+ibBTeG9oQTn4XiwSz4NZsB3WaV0HF/bIzIN0Yz5ju\nyoY5RZwnJIpGQx3TBcGgJlBTJkW7rlod5Cd/4dPKONZ9SAyJkzRrxZqKCMBG\n9M1+ogTPpanAYxilKmQoFiFDvWTuAbZbliIfmAgNWWEonHWDaCkBit+QE04u\n5ira1P0zsRlz4/rKtTkHDkyyyj7cD4MSvf3svFhfMV4FhBEeL4GyALZpjho1\notwKYbk9FhRpCq0xIgOePPPq6WY8465lyRqljTN4T+Rw44nqMtCcRycDKNCk\nssIWwiWxgAgdo9VZk4rFK3+zV28Tr4lsG4jqj1JYxdfka/ss7LkmdVbP8dLx\nemsJNO+S0FKD3oZYIy/3mvqlKLIY8LS4uSoZNlibmQ3rN8s+ijkAG4l0x565\nR49nT8NiXHyb4msGXqtwEuY4zI3Y/trIEC5cDYPoqoDit5Epst+LyZIdBUTL\nyNqY\r\n=hhqd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/list":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/menu-surface":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.cd4903304.0_1579642686856_0.29133287492642257","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/menu","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d467f188bedacccc80fa278eec023709887d90b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7e4b04b25.0.tgz","fileCount":36,"integrity":"sha512-x8fob/i0jaTQdGPnbGwWBkUk/yt78D3wCU/TC6Qqrqq2gV3qfcFLvWr318Nht8cNZ8Rv3hbq0TsSSl6XyCAsDg==","signatures":[{"sig":"MEUCIEMPLkOwpMShHJvz/aaGtDP6/Z/63X/r4yinSKBmWOfHAiEA6jKcpe7JuAhvper+cmCd5f99sBMhTIVm3v23rjtsv84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39wCRA9TVsSAnZWagAAXM4P/itUWBHgdd9B4VjXT83p\nAJZcM1X7Ik3ZSIf847eA2LQy4alW40CIvWa+8X9rgjy4i+ETM5g2vTXcG7Kl\nqkMAO/Uch8w8ab2RrbhZq82Cgvi3vOAv/dr3xsITSnaNFtoLF4pggJT1hCJY\npLhIh98OgKBLxn/X56mMQ6tNo6/Vnc25xnJpJbm7JlZRiq/4Hni2yjgPK6kG\nw/mYGwvX8LgXQ7yoODOeJTsnD61cyHg0OwyGYLyLWwyo48ggfVTLeJJ4FqzP\nToVEdl7Y4T79Hel0wNiVO1Mj5H1oCGG2G74z2duRxXB+kI7Mr8dKUIgdWIfF\n/K+i58vaXfM7f7gXRx4L9ssW6Icwp8TE8WrlMhtw683YdynWKt+ZKck3tZoP\nEfPHNz3KIexazKpVTDmCEjvDCeFieSRLw6CeyxiE9SBQX9+TG5qFjngqLA+p\nYoWXt6Hg5Q59ID/orz5D+xhWeGPbCxASfsUxRaTZm3rBlBEfYAMFaUUp39L5\nUEIb8kMnWd1v9UCi+P6opB6C3heKZ+tDe3XcmOgfQtIlZe0T4GUMhz0Gv8p2\nC438z177ZePHbwojEwukk07WIApoLnjGYpHRZhRmgeioDUzVPWbrzP7678zt\nW1HcokCqljCx0E3DhsHV2MYTLyTLCfyRTYtb4GnUgiuPazZrGnMFCqPVp4wS\n1R3z\r\n=fN1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/list":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/menu-surface":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7e4b04b25.0_1579646832514_0.7328258465199817","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/menu","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a1bf2cceb96f5a755cf924b3441a94f7737e12","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ebc296937.0.tgz","fileCount":36,"integrity":"sha512-QYm9vx65l+iWTO0CBtaZ25JfN/71F/yO9YVEYUv/G8hYH/W/5MgtGPyTooN23K7Mg1ss0SWzj6Z+z6140Cp8mQ==","signatures":[{"sig":"MEQCIAGqrL/WiEDKHAu3P3GNbCtODHeUY6hqLDgMaJ5GfLVyAiAZwG22WZRXMbCeB19Zl0NxufSHuSw4WvabNXrHd3yPpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40sCRA9TVsSAnZWagAA1ckP/1eYSqhPLI33NmwFIzgm\n51jGup/xkLGAvstkgFVdPhKu8zqGCqYgRUfuuyH9H2SMXRS6n2fJEAb9C/pp\nPXKNSN6S1IeDzreMFfP1OybCee5Y4OxkxhBvGBT+sLj8qK9yDUw3e23nIszI\nLdVNGnFI6iMf8IuXrag/rViESRkq7UpbJuXKHOyHTXSMsylJplcQupp2Hsse\n4nPRThmsogbWKgBHFz3ajRloCifyceG2CRob+qnBQvEB2eR+2jM/YNO/diwG\ncohQ03bx7pP+7nbQQPVvMvJnUUuvs5nfoX0ZQgN5Z/cP+eTX+fzqBEDNTVyJ\noNitCx6JJqEf/CwRL3uI98qMc43+tZDN/aROLNDfewxjD0FyA/d3xP3fXk/p\n0i3DtU5KGU1xEDLyFIycbr77f40nschPE5ewmjMGiWf1f9aTrUtLxGAYGMSc\nVqoga414WUZmLpBOw/43LUiPmd6PPeRB5kNeM11xTkGoEjYSwBc2PB6tm4Df\nD5tVXN0FSvNMoHmMe9rY/6rp4jFFSHESgMrOnl1lS2VT377soOc9Mx2In2dg\niQQRitQQypEkDtNkz3xFxtjfRwE3ydeH+VpOH4jJogBGMwLoROcNTPV+ctbP\n9P0y+nbzcNmoXJ0s0Zs/5uDwnDYpxCDoXpV5CWtNpYqMgCvnTih56O+EUapm\nSXrE\r\n=l+0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/list":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/menu-surface":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ebc296937.0_1579650348148_0.8430787851996999","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/menu","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e2e5fdf4644d18376603c032da4bfea95342e18","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.cf33f113d.0.tgz","fileCount":36,"integrity":"sha512-w8hNt+F0nrY2S0EL7VDGRZrY7AgawaUVB2P1Wbv8cpI/8XoSfNPM1kTZ2QTUTrcobX37MttOwfSo4UubVU3JCA==","signatures":[{"sig":"MEUCIQCEEIDJ0u6S/Y1bUW956OxxMJFhIK5YJwhdtm1dlt07WAIgW/dV8eijHyn7AfrIPJ2kqrJxgSHsgFumLUoR8nxxtfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QRCRA9TVsSAnZWagAAI3UP/RKROTbDdErBRFSzhpsH\ny645bi4/nyCQ/c0kCXNOkead8eZIbmfFCr8tMNYMhjTxM+FMn6zlWqRS1mUH\nyGxUse4rc621k+T+WkL3GNVgpqz5Dn+QswxfEu/cOYOH9hAa0c/GHDqtW3a2\nOjOCwyOzLsAssY/LqUD2MC/X/4ChSiew8Waapv5MvFq9HJsXNmJnBOmhRrVi\nQXKrm9SpzRd9vq8W+DN3dJT3ymg24z7yGMx/X2TyvjuV2ikByVmMsVfF8NxR\ngXCcPm+6nASqat3qA77JL7LqPO9BLuGDRBHrJNClRQ0AAu0JYmiKRts5HEqG\nGTKUrKYJbepxr5FS6iknKtBngCf5K9h39UP93yCj7XoRMzRWnSSi8dZoVX+E\na4MKOrqkEnmblh6JzfOIhIVhO53xc/MIErh5UbDucoxXu6JpfErUpoRCzwq4\ndkFGQ9sfeSDIvqcpwWS3Jtr0dbP3gMtWKoHKM6uoGW4NEx+luXxLgeHS/XkN\nLxEhldnVu54KbOre37D2NJ9kJmD/5QoiEU0qES3U0KksScbNRdXSoidSxhxl\n56xF2x+HWtIBhX/9Rp2LKD5BoOsrsKOSWQB2C3Z2RYNsCd4cJupH5BlhAez4\nqU5+qnFFpMneZZQqHwgGB9HHMkhqvarJhPCff4/4u52Fr7I5jNZipoUS4vm7\nmosC\r\n=f6zC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/list":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/menu-surface":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.cf33f113d.0_1579656209230_0.655676217425712","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/menu","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d60e0cbd12c1f08d463646ee2f7c4ce4dc4e829d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":38,"integrity":"sha512-uIHHZb5zNrbeSVp45Ivic2bEfFwYZfy4d8Hh688q4ZjG3voXiUgbUG5+3m5PGnLNb+NEcq/+Ud9nNg/39ah/Ow==","signatures":[{"sig":"MEUCICsdQq2nygdHedlOQFSMi3EOQVQMuFWAmuN7NztOgAZeAiEAmA+Rvwg7/OgVPI2LeCv0WHuf3lDTUQYCblGUfsLynNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH7CCRA9TVsSAnZWagAA0v0P/jeoS0x+pAS/WHjKwo59\nLowndt6ZOIHo3m+LqWrg3+7VQna9zj8r6jYlvWxfZyNCy6zpQWu50QY9yQPU\n1DTBo+sfvcXB/A78hhrM+pcUS261xjpkS1SiqPHrt1EBMt7AkrgUapWTsSNZ\nRnSaYr4z/I7NO0GS8RZS7eCqV8U9MGtHcNah9sEVPyHxbv+p7ZUvoKkNjwLq\n0a6NVWgmJ1T2r9v7yZz5pzwexJIKXCYmlPq0l6CAP8ROdlx07ztejzZNLTRJ\nFrg6Kh9jXCU36p2EwFCzxlYtuCFIvVZPQ0Ck+ZHYuvbfm+gOBgDO9UfM4Cca\nslmyAK7+89KBeQGMrMeo2MeUJdJ9lee0hdTdM/ckKGawI8U14fHx5gjlOGpj\n+MbGrgfuMUiwph5iK/MkrCP6HXXkmbqeAAmLCWALFOHcRVE97OlJ1pn3SO+g\nRC+HNIBfuOYuqKsuWD0YccUCEUIW4fb5f0exZ8xnhcYZfm/mw9NJ8lhEQd+Z\nFf8ypK4yt1CWmvwqe3/ov4ziiyei+EOjSLlm8GFf3y937kDPgv8T7VtgXGt7\nzUJIJquKbD+fWAE9zqa2GoEIoGFyth3mNhgXxHaOo6UG3+hr+2cCH3AEZYy0\nLAqFMQn7t1wkW3NuRn0IX1A9Frg5nEDASChgVeguAg5EKCnW6IA72599VieP\n9U8z\r\n=wIoj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/list":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/menu-surface":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.e1d5f1be5.0_1579712194037_0.048133120768083515","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/menu","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6253c420a93b099779076730ef0b2a51e7688c95","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":38,"integrity":"sha512-RCPwn77tg4GCQOVMSgqazxy6VQRT+UABlqMxz39K5pSsyK1dSIRsYlNK/C+oo32IZLXLweRT1hP6oLJQ9CpevA==","signatures":[{"sig":"MEYCIQCLqsJSimfYTgpAwHm0c/hSpAKcZ5NQdxmdpg0RNNwoqgIhANjLRpmWhCRXUB1udRhAU30mkPPU1dl2U3TmQkFRLgL/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1UCRA9TVsSAnZWagAA8S0QAJfQ4/1X6LF6uDtlxgAW\ncX3s4JJQ5+ovPaCZ+CMrnXf7EAzvcEr7yf7r1sqWF/cmKupaBPGvWfVLA5j5\nSkALb/ZR+7Az5VDp3yeNNqJtds4O4f1xJIc5PkqkbJGu27lnNXMI7s+APY6R\n23osi/Z/Bwcn1mdpCTmjfW0HWiorUGE+CX4T+Wj+lNxUliV96MWi+VszhvWK\nMEIh9vYmcNK317glC+IDkrZg7Or8GO73MqgDE0aseqvj6G30nI1JMqOMjP+N\nwiYPccGe0bZgLQgr0E/qqrSwsf0odTsQtI/4jRP+NEiOMtAvJ8kKLN4BBDA+\nX7CSZ4fLkNfTSk1pId9ssmHkC9uRtAFsBEWwppBqTS4gmnSyiPy6TUuBZEVJ\ndPnW8IdgPVjHSMOjwEh5qLJphqOH+naiAJ0hNjjIQWab+3ngunAqpkF3eYut\n+fKSsnfWvRHT3swVuQCp84ngqqziNxBMcm5MTn98Uv7r30FZJZroU6hw1tdR\nyKDc5UVa3YKYFWjOfeZFi1aaEIfe25EFDNEM3wIvwydmrcvYu+YfClmlIuVv\niBcNu6lyAV8pFZayxZIedQ5OdC8OA7/+XjGmeKC44bPmZna4nWo23JaH70WJ\nTAVcMSxru7jcW6rTnJKBYVH5oPQre49KX4VdyFidZzOisX22GrMr+6zMTqYM\nnQoH\r\n=8jPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/list":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/menu-surface":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.6b6a4ff92.0_1579715924437_0.9869412862464055","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/menu","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f448df373dd73b223ac033f75bf3824f9d018db8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.6092f71ee.0.tgz","fileCount":37,"integrity":"sha512-JMmAZfkU7tJD+G8w3Wx1vyLMm/DB++nNI7Fo/3mLyar9hTWouVaCaEdemHDLsZjQfz5bmal3cCjvRlJ19XtobA==","signatures":[{"sig":"MEQCIFZoO1YrkWILpXMu4c4XDUmHcaazSp+QfwPcJXOMLtx6AiA+wq8K6LHahW6LPU1NzvBnZ77dAZx/WQeXnLvQRGdmaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLwJCRA9TVsSAnZWagAAeFYP/2oDsToEEctD0LR5+ltG\nIAlNAhi8de77utZOHaysVUAHtrJof9ceWMwN3acxx2ZTiwIPu8kLOBEUeTUl\n7GU9BBxk4BiDD7/Rhca6ai018htH9CuB8qdeFHl7U4j7QEVzm1wqNSvu4yqj\nFeFVSrE6qtFS1sLZq5hEcXTH8BgehxJrw2XOvnq8HUBTNthMAAjbgo7SQ55U\nLdigCsgIU7LZ8e/Mlj5Zyrl/vYWTbqHhCmthtLQdodSzUQEPqOkjsoskibWI\n8fgqrYBjkyP0IfJRscqpEGhOVKW9AmP+cP/FfLjFik+fr499v9BwPdh3nSKU\n/usN4ZuwT0ChinUfQzmRswIHCveS5RaipK4XOGiDvVxq5TGRSvbc9JDT+9Tz\nneZbsCEkPeLID00/3P8qLw4Eqcfc/pX/EcAoYwdKxq9u0L1vpCrx5iPr9f47\nqh5POEPeB82aDIoMXVh2BBDPxp7qJDtUxtvQHn3tXLAR8rXYK3zVpePsoMAN\nrCr0ylubwkPQKvb2WzhpOeN2iRh3BJmRds4O4bjlV9IojTnlbpleVd0ywotd\ntA1F7p5c2rWAM7/HYJ5opgptr858KJDOaeYOWSGCOaAUYNNhDZU7vb3PgVJ/\nnXgN0aO98MGgmJO6ojgH4EOb/imBBro8TW8IL4ut8SVeIZROfxXgKTgicEv4\nrdCv\r\n=D4/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/list":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/menu-surface":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.6092f71ee.0_1579727880656_0.12907079634713914","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/menu","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daea454d6d5ea4395aefe4acaed3f9bf1b3d2cf2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d8d95020f.0.tgz","fileCount":37,"integrity":"sha512-rPSOhUcgNwxUH/v0ewL7PQA2L49lGtdfNQ5TdlBloeLIYmYJBWWNwwLz25BQD/oknEIZPimkzlafN5W12paqsQ==","signatures":[{"sig":"MEYCIQDAFtkkYjLg+Ox7GuxHfhJNR1M/74EnuCB6h1W2YX8f3wIhAKjGRLR6izEoR0tzjmzjcbu5Ga6wvRLwDP5XqkVpJiLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZYCRA9TVsSAnZWagAAQMwP/0feQ+dWm0UbpQP+SGkz\nY7UlIyt6CS7a1CfPNGsifEDdirmgLS9FknOEv/arm/vCljT2Izs9RIg8oisl\njOxyxz/gvrbJi5eAqKadGWKPuhKLWDWwHAwm+WhAqUm2M6K0o7nN+Zwnjwwd\n9D+ydJXBTysxDI1CtTE7oAm5KKxaYm6Vkyk7qIuy6EFrmoP5EMiXcZeL0sj/\n1jrrGRqTSBoWEgWmJsLgXNhfjUmoQwvreqMmzr+fkAiKlX+ZupYDFbeTZ1fh\nEIK1vRFUgLvgSuTnA9lCD4lH3C1p+Lt62Hdf17eENt/AjhXkT4ElFLyp4x/d\n+v01ZwlYZUiPpN/TYQkefPdTS+EzFdzW4jjNlHscXb6AvJkq5Qw5vLwzMjoZ\nkwHtU9ZnK+Lj1LKeHLszmeEw60lWZFJ+pyOABe8eVH92lHNNHZ58kAp2kdKq\nk/PgRtRoTQa6YLgytOTgngRDcTHeEShouMjTTZVrUn+2reot9xn4yKB6WL81\nxmbwL6Ygv5UBNn+5WdNGeg0ap5b77OHm+ws8eyGMqxteEoLFwcs/zuVfQoDy\ngU5I9812EcpkUcQRMlNeMfL9+TNMsEr+COWXotAC3N5U0Fg6ypCZ74Hj+oW1\n9oYZbqNVB7sSXvplBvp/9MILBQOPElQblG8YnP3VSjCgIFT7B6aWI5k1COhy\nQtx1\r\n=ubnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/list":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/menu-surface":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d8d95020f.0_1579734616434_0.46732621382231865","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/menu","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5283936f0a0bd3100a64f784281e4ef4bd85adff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b7facc628.0.tgz","fileCount":37,"integrity":"sha512-yuszxnNAVgXirFpPxBEfohcGFw7QD4Ztj30N08hiOlaBlI2p+6ctqXeS9RwVFB8yzE9LueeAlth1u148DV4GGQ==","signatures":[{"sig":"MEQCIB36htosKnyWMbg3Hxz9PfzhzPRtmtCbuYh0+3ZwmkclAiAJahTPi5gIwa4z4GiIIIxII2H0++Qmr5s+PF5al2iMJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeJLCRA9TVsSAnZWagAAQu8P+QHx6IniqBh/6sNMf9Qm\nr2spkW8hf19zEMPr698cAd9A2AciyFUGROaxx7z7/OHtpSNQhV3edgYCnj5W\n1z+mLYmRMr3q59z+vCFYDFjQFWz2arjdZGGm/k+DxqEdvCvkgNNEH7Rv2+aE\neSPMY/Q4nrFkNNdEr9ID2hJMQkPeaBRwXbFj6SZGNLt8bZP9Jdg7KsZprJZN\neh2IqlC30VfdBBj1mo8Q0/MRG2BngS2YbTRKg1mZP7whepO6mp4voj/vbzvl\nO54q4+QWPkOAqJFdfBVX+hIgYR6skfpz0f6tvDoz63671ORNT1u+XA0VEYRp\nx0fiGq8cfR7EZrR7RF/V+c7OIE1Xzn+u1ZbKVmhnA8ztkspAJabioB6MuEfy\nOxPnSjweEigymqQP7AVMBLNHak3GIc/0L9I5um9GRP0Fdu98fC2T3NoS9Zn1\nbATUHP7DrTp04ndYkiYfA/PgmrrAUbWkw7OEYBxTLNHqq+eLxbDc1mQtekgA\nDdVZI5hoIL901VR6lCmobKJ0e9qjVuNixY7tDZq2vmQhR7PtLjXs9RnlTvum\nvykgRi7tFpoS5aG3Vk7fsrOIl2sUpdJ4fUYM89XhyjLwRJd+AAhTUCPewWek\ngrxaUWJrPXcHVaRlzG2dnD+veGJtTz0Vnv8CvPCMr3fkDrM3kQ5kNrUHdOhE\n4cmx\r\n=sNP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/list":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/menu-surface":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b7facc628.0_1579803210856_0.36196706741945306","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/menu","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"536db8f6fc126b006490f79fb027244b6a050e8a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.63f357dbf.0.tgz","fileCount":37,"integrity":"sha512-aoYxWirzeqtxqdjB3XQb+5Gm8UHJtvuNlie3r4U39udL5rK4ZPLAjB6gb7Q+r8W1hDzEmh9XZOPp5gQAi9nacg==","signatures":[{"sig":"MEUCICWMgwEv9Bk15tisTMHEoPrzkpb98qUi1GDXeQeJxXraAiEAuZm8bqEBfmNdO70Cg6wnGeFIVViptFhWuvuTeUJcxfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZ4CRA9TVsSAnZWagAAAl4P/i68ZjCAVYSuBVqFpPQh\n3CgkKgwdoTyWwKTVIXOil6yL1NMw0l28F+p8DwSngFn0OeY/ENofq++yG8U2\n3z1Uyh17h+XX66/eUTEpMgxrSPNKykJtDV0ODh21i6fXp9UnQkBF6MmQ5oIw\njceJRoNUzC+4HIp3wVgtuYPs9wllFyZ0JAPftOpXWAnGis1pykJ+gy+Lqtex\n39M1RYh+HiKVAGzJVQb924mdNTPVjafxzyWB1Ko7yclOzGVp+Y7352H+lC1t\nB4GQ1x2dbjOcV1EEI3vzj7LpDyLDU2OlAMYYOJWuKb1IfFqyaZsZOPT6jlix\ndRQIYIt9+K4iRu1ZsFd5NrTUBLta+Wn77mzpW7yVb45TGxGBfkP5wYVDktL5\nzfKSnFzbqtcCPACNFFBjqGMbbTJNOEP/gM6dnCkSbT3IAQXMqapH0V/ZXuj+\n8YiyxgD3PqSYOBeRKCwW9GW2jPGLEsSeMt/M66Jm/kClN0FsP/wTUQ68gtx+\nzy8dGecp/xBgOPrb3MpGo5RZuaDgM9vl/h/tG0RqRWz1e2Wzwx2yAisv6uUF\no+7EmuovSn0cprWUhgi2ZGuJOVQiYtzoyecbyD0los4k0p9Wefc1HZxdMKLy\nwRNWNKCNmHfKLw8A7GIsbldPm971A/rLcTpR/szIjjlt6pHTsYYTE+8j0045\ntnKT\r\n=YGVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/list":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/menu-surface":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.63f357dbf.0_1579816567729_0.07562706429944033","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/menu","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d7dffc44977681e0110bf56a0691affb5ba0208","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f2426d26e.0.tgz","fileCount":37,"integrity":"sha512-Gatm9QiKSCTuR+N7xcbzhBA676f14bZkwdjikyMRBkGeqgoTm28jq3eLbc+AI/6WOdu7ZEM5tJR/JPZ13BgDig==","signatures":[{"sig":"MEQCIHEq3yw++pVlsSochkZF+/KVOEguZJNVJ+3wU+l6k0VYAiBt5cHE1Lix9yum2dBAdRRJOGOyXX23BIWt+0RRzuynUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKLCRA9TVsSAnZWagAAh9MP/0gTthx92fTPdXmRWEzb\nN2V8DIUgzn6HVlEtCmpDwJG0jA3Ib8VRmmDYDuzr6042eywGIfkd1aOWdtJb\n38CAv25r3uCbo45r/CzO9WAbOdN+emxi6JBTv70noTm4cHd7tnVE6w6ORky5\n2slbDCEW78R8FwMcAWn10ULsuWl8iwBQvf2854YrG11qmRRYt26XVri9Tovw\n8+WkqJrEFuJpUhVA7T/Zt6vIPB41Ram2OGIq//R8DCk9RrB8w1ijPQvbvA2L\nPtoLgdyoIkCCf6ogHgWIF9JiT9PjnFIQf6GyKtMynt2vziK1gGjqt7IhLj2c\n0T1fOy1J1RCRaH6Gb7jwtul67/5MgYwGAbrJqTO35rgZEvhN1YPPfeo6QOoa\n1ztDZrui/dnILrhBIXiM6DHd6uLr6kFKLQgUfYUCvNN2dkHo57rf024UGFwS\nt3E/TeYZ3IxY8c1VA8WRy1T3Vdcxw7PT3IUTm88DFtc8O7WxOvTi1kUmOXhm\np1Io5IkpTd/zqJUDFazTtqP0kwN0x9wZyDd1O2ySRR9bZZhr5X8jxTIl+APv\ny/w6RlF8GhbVHS6g9wxBKlmFUpc3EjjkhFzlIdpYELwpwsFjrFsfN8jXjsi0\nFqfPhWUdrsdCZhkwOPLBuOq+E5A0SUEnJvVz5QAiKiM59Iibdh/LlWthreMA\nBZbp\r\n=J8Wn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/list":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/menu-surface":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f2426d26e.0_1579823755018_0.660752834885346","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/menu","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbf33827ae556936433e3229e4846d99b8e0203a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":37,"integrity":"sha512-O0L4+qlHbqJ8XoDAfJOnbOc0z1eYMe95iqAZZLwUQjqWWlHoOZB/l8ZPUlyEEcUiJBRudvENQ28YPqKkv8FIiw==","signatures":[{"sig":"MEUCIQD3UoCKD56e0g60VMyCNhZgdXFBa/yl0kjTz/sxvZhUawIgaXcmXSL6ZXgBdX760P4JiFOPqv3dxLJHCP+5mU1BIAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/YCRA9TVsSAnZWagAAVd4P/3fKsEx1MQVJiMYKVhLW\n4g1uQoB75Vs0WMHEj5VU5PI3PHKqGhGOF3PR1msgy7Pkm/KxNHkj498D1wWT\nOho7JGjWYGEYMkL2tjb3enN6TJMb27+tzs2IYCmxfM8z6CoXn+h1V6cgrhrw\nPGsXV9+QITCUoRZ5oSiXl5du1GMD7gBa1jPLwj9PQ5MO/zZ4Bl0Lc9Vsb8pm\nTFkFejg5HIFqBezcsvTf+7G/venCKEO3tpgnaoLZcEOEjnxiH/Yo+8ViJbt7\n99YaJpaxGGI+g5duK5504goqxbDFH6hWNDR30b9WV4XqrWWFe233yAf3l596\nPV4GqVRx7hD8GZNDa7YZtcyGmcYxrF85R7NcH1xDlfctp5MqMw22tJCQn/zt\nwe7ZBWEsbhW2CpkiVmlwsTU0zlwW0AeKehcI7rYj/fQ3CTSm0giOnn6iD0YD\nDTElL13MVb7RXuSscv8UjPqzDGVDRd2xrS1HLIK4SeKcKAfo8EGF66nc5bJ+\n9KVM9S9AyBAfk07JKsH9CASxGVRNKe0NLGVyReIM1mhwpvvb5/07h27Ct/1f\n6V9zW4YEkImoXGnJuExuERWxNiPpppwSx9d8Y5Aa6MWLYDSnzqph/i6s94ab\nhuiF50hQ//QkbOi13MXcpvHDTgO/Ye3FWqet/Zj2xYC5Mqm5nzqAj88Esmmn\nJKHp\r\n=T/Jg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/list":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/menu-surface":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.7f5e0c23f.0_1579884504451_0.8573267516258218","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/menu","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"154668c08b28759a43a5361e044db7459063ad2f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3fc3ab520.0.tgz","fileCount":37,"integrity":"sha512-MqiKLr4yH59FnbWHJuPyITN8g0PDjJCyxeS/BUtLphWfcp6lumnxAZIuHQ9zahqv+1NvVtltAh2povsTgpsdMQ==","signatures":[{"sig":"MEYCIQDDR+MraF2H1Zksttbv25AAL/ZO6dJ/HpgGVAvu7lZ8SgIhAKAAdkCoKv8UsUFugthqxDx6MMmIFwgwemMbVckZYMO9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKye7CRA9TVsSAnZWagAAj/4P/jfSiebnbFw182cFsgBN\nezZ9n/DmVXdSq9LW/bTvn8PN86quyAGSLG5jlgnVGc0vv/lWn0o93YQRMr8T\nYmv2KkrrNfRrdITCio7xK910uObleopql8bqNsTeMDs/lVK5ivOpXJBkPll/\nnFpfW0Ohdv7llIVkNMPdq1I4DweCVNgH2MH6shDnCUycViWdB2ArkfAufVxH\ncozqEf2/cKTlvc+j7lAUu74UTjxZk/b1WUoKzUxkkIV98k+KvtMWdLXpGjRu\nINLMVkClHAqueaQzADqz8kjydwIhNQ7pdnnmJdjSZC8XlOL9YU7w32SDiT78\nuyzzy5jqoL8eS55vUoc3y46DTwEihm4O7vAM5C9Nb6Cx/pRR3DsGzpjKi7mU\nbJcwfMuIafTMc2a1dl/GwJDWwO6sHjgpkKeMRp6MTUPMMeftOooF4Td4QOKD\nrEYzvZSLT2Lr9BMjpUQ/6rAVCWHs7Q6lDeyKtr3NDNK+ZUR/D/vW4i9tqSjq\nbNRh9vfxqUg01gthloRBXPfauRFe4SVp4KYLL2BrtV76IcT4RKLpn0LLsE7s\nS/CRus66g+Rrrbjoyct9LBLVB5yPlPzbgjLdURnKSTb2YwgP9phBou8wE0Ix\n/SaVMu0B/6SvTK0dGAsEcoP4CsIMYHYlC8a0sfFFAJa0Futexo+j9VIppkyB\nPK9N\r\n=d6Dj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/list":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/menu-surface":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3fc3ab520.0_1579886523279_0.643862357702436","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/menu","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"677b063f937eb4ee8bd82a23ba8787a519b05eb9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.80a4d326f.0.tgz","fileCount":37,"integrity":"sha512-y2oQUJ+dysZzh4Fv585QSxB7uTD9VSmoUIhKwcDcBiYLnYdG7+58ZdrSvotGmZjdnoezwJnPZbq1Y7/kZNvG6w==","signatures":[{"sig":"MEUCIQDOFQs9Dd/XN/7PFfzkVh4/TKBsWBHOXi6zvBuiUXiUNQIgSC9ITI3YcUUnN1LCHWafMNZyh6QzWJWoPi0ahALVibw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1e5CRA9TVsSAnZWagAA51YQAIh8EnKhEY2kPTtyu2Cq\noPIkBHj0PpOH8iCQVsoJTGrKcsA7bLlN4C45gqZ7KXE+BYWp+5PR1otS2weJ\nzpsJKhEvFWy9sZyGckOaamQsoX2GzCjTQp7IYM1n6oiQDTRbqvkDwZZ9Pnsc\nbXiNCwa2ueG0YI0+JAL/9uh32OX3YvO2XY9ZULXsRIE13cpycnYnnGZn4KcH\ncun6UBvyyHtj9P7RNWowNWW+//8K5PN+jzBiKJY5winvuTazOOIOFOmlnAL1\ndEZ4fUk0naY9P35qc21Y1AioUveHyEsDspuYmy6aPbgQh9j08bum/dLbFoLD\neLTid6B4qsKevihjKKFbTOGJSmozgYiIPVdLUM+uwU0d1bzrqoF4jC9XVgJ5\n1023XYUGGAGUZ6u0sD32YJ93NtlU0MVX3EOd7WeBMpqCO0QaiCSuFs6gK5v5\nyBK8FB7Qa5mttH7JsG23OyB+AbKfyrEzUBFQr9R6YBIjuE5v7rBlnPYYI1AL\nVtONKnbt+zS8naSC2ml24nXjHsXBpj5M71AlT6+tRtqvb2ob1NhbLpsfRBHm\nRQL/RsGufaZ/3T3rbZaxRK4Wunb4nZmDkprgfBFtVskYPwnHzqB8QbzPkvB5\nPbY3j1RR1wfXg28flxTRxfxu53UuhIohHKG2Ehd5x3joh3vJfPsfYGKbFmVB\nFDcY\r\n=jd9m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/list":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/menu-surface":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.80a4d326f.0_1579898809499_0.058571181557458996","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/menu","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a8677d22465f521880065ac5089ada56e492a80","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ef7de4def.0.tgz","fileCount":37,"integrity":"sha512-D37iVvrRZjhx4gDHqcw4Y9rxNGsimrd8KEMJfec4ByDMOZcZ+kiE0UqBOuhxkyIxpVC77t5GVJLZB1F49Xj9rQ==","signatures":[{"sig":"MEYCIQCkPoEHEt1QGykG/X7A3MybDHM0kq8/Pz01ze1csfPHpAIhAKqS4aINazriZBPHRN+eUoA+SUsLNezqfjNWdzRrRPRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KiCRA9TVsSAnZWagAAvS0QAJdplDj9jNhQxRvtwOKm\nLytRP8OjUtVP5f9vk7eVYnPRqlgWA85LX/87tyjbryROqN2w5Sb1pPKPHL7G\n/ytRwxLH7NxNCjrzU0skgpu1CB16TVbwO5Cf+08kEtdCel94vs7bhmNNLn0S\nQjlzokkY4jnP/OAwXKpY+AkTfqbqswJS7YRcpWlg0H0b9geG8DUhuRu1roTv\nuDt+fCqa5yI7mtPDCjIxa/x063wTjWuyiGs+zQr6dhfblE8+1Gau4m8YsXFj\nPDxEG/N0TILsao/3nFPR3UKojiwQzD9pHBKkwA1Tk9mkGgPKk7fyTieYKZKw\nkURTI97Tl+VpV78+9lzpxmfSRR3EiLLq/SFrUUR0c1yjUqSlAh3JF1aNBiza\nZ2lYE8ZUx8rx0xVKgUZYfP5I2VgItzEGY0zz4CGidAzTd5ewnF367t7vLL0y\nWsEVvQEvKBMO+1WeogJX1dijSoUSIs+Xh5sRnYCBinPLH50oEd3noyyzKj5y\nXYXozoFq8ILMSYmyCLCTstjEV9VcWCDSe1w26n3QLMOf5tLjC+zAllzOVwkp\n66dQyX6T8ZM2VBlpVKx61aQHYp65q3NeL34Y3x4YM0Yt4P+Cq/YGpsUh3PwQ\noPo2oMmJF8eeb8Ij05Q84T5ajbf17mwI0RXAOK5ngj+Ev6xCn8SsD3JmQXed\n/VOx\r\n=dWRx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/list":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/menu-surface":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ef7de4def.0_1579901601770_0.4329446603869722","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/menu","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"674720bac299a5404603a192d16f8acab39b576f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.93e2288b6.0.tgz","fileCount":37,"integrity":"sha512-9TeQfaTkY/m6q4Clwm+mJQyGVtMPjdGsrKhdhn0zuMhEfjbb9SHzH01CFCjsSUR/2lSbDVk/LgvGIZgtP/HuCQ==","signatures":[{"sig":"MEUCIGYNY+MjVCg+lGQ35lVAavjG8kfNqB2rGkVcDAny1P+pAiEA4uaOyvkhDT4rp9gOx1AicBGsz+4IkDjxETNKKxpqkoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGfYCRA9TVsSAnZWagAAg+sP/0AfAowtsNkp+yYac0WD\n7iBZpo6YELwYdhJrvNqlvDTudGF7D1yqn4umWiAooCXEVd7BgUuEqUuuUTQd\nQ43NEuYLo3PNKVOB1NgxyErREfiZUP+4x0+9H9+xrv79/xwyxE9s3IwCSb2m\n9byYBF1SlaDlU608LmVTkHCu8O0z6TPE5zTvMJHoC9tIW5b83692mNDBIi2S\nsHmEaRqLI3BqgqMZPArswulxhLkezpMHZmmrh9khqOrIZGenno+0IACCuC8d\n/srejp4Dar37H/2b30SdOnG4HPdCn9A4RfqE3lOTqKIUOlhE7CFa10rkptow\nkiddoNHcwVxFhkRzIdPK+86U4hPpquWNSr4NeaiKvLGTyGrnX+Jk6oalbd3E\n8cFwNrG+HU14ms4cCOI7HvL8dWGY8dnmYzfRsqH7GKu5R73lS7cvuzCOcvQV\nzxYXezKqqmGycCG4PdOS9oINDuwOT8K6bzbB3dX1p3yl3b1iFWe3ASNUw7jU\n3ExhCgsmlZiEIbxRI5JxSl9wzqYRsaoDNOGgYMhWWgfnt6kyrb+GtRf9Hv1+\nhZjIwWtOTX8r+oq7lvO10sbcLQJmz3nl63qnu3KN85quoY7MaoDjhxsIDov9\nZUFQG+JefsYU9bkDHzP442ryryg8l0/VdDdCixa5TuGk5mvQ9YGD5fmX1/mP\nztoD\r\n=Kc/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/list":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/menu-surface":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.93e2288b6.0_1580230616418_0.37355505292769875","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/menu","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"415fec0c54893b2eb1ffe9e3e9bee27a95c7f422","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.34ef15f67.0.tgz","fileCount":37,"integrity":"sha512-YRRigFQWXxJFZonbddC+ZynrNmbd70ZwB8tNVKl44nvCENkpZGp2qaRWHm6nlTpl6JUz4R1AsWNvlfjoTPTblA==","signatures":[{"sig":"MEQCIEj2y9y34M5AYL9uPP1glxa5K3U73XCAxZI2dSVEqDPlAiBkXUIx9BB/9aEu9Sfqgy5VRuIh16g1/SPjfRGqOwJ2aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5yCRA9TVsSAnZWagAAqxUP/jOhvnhBWHOvb80lGnbW\n2WPPxg2yY0q+54LujBJ3raGxMP8WuCg1ot+6GfIKuA5dw8HpWO7RC9vr6Fjq\nJP9cMKR75ZdFN5e5A5f6hpvq0lNFin1SFvO2Mj9G80IgRFocwnWs55oFfkoa\n7BYT1XaLXs7A0gry1WjN8c4r/xDdM05P4ohOgPYjMwYn1BAlt7ZLVa7T5YV7\nSQ4JdTWd3JafmwAl9x+3JzZqNOO8DVv/2e2nWapuUfQz/rgKdCWzYynRUlOf\nVHV1sUCXde/0H3jqAzpVZjNIdPJcmkVIwCkbVG9urgs4WZebBiaEAAl7Y332\nxeKAQ+usAbjyVpgL0xuvtuNAUgr/8NbMe4r2kAi7GZNwWQ3JYoAbwpp1fj5h\nyq/RrQV1ZGphaiz4GjAnvgCi5MZFhlN5XsFvFpHqQqd1+31AC9qZn6Zp9Ojx\nd1udghntcO6O2SRJGlLO8FdTqokSm2KBec+txcPOGyFqmB1+jZb9Lro10cE8\nrS0ykR5untgQgJoCpW5qHR1T4bw2LBUnBBIxfZgIarDSsD2LrHu6tXnL41bj\nvDeDS8dTreWh6b7x8gIw7oQdA5Gvc8ExRcfwr7obo7BZmIZpdBpejCBHbhaz\n1+KPjRROpT0ICf4yahV9iYfS3fH4TZqDPHGl9GQzotS3q3mQj1sTt4zY68JX\ncOwu\r\n=rkHI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/list":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/menu-surface":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.34ef15f67.0_1580232305582_0.453883447885959","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/menu","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47205e4a8dc56a5e9f6e85615c3a5391bfad474c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d3d176ba5.0.tgz","fileCount":37,"integrity":"sha512-v3qWb3jIVzCQBdOVoNQBnyuGk/QClaA26798zUA/iHR7kFpHyyF9ol4AVsYv9MnskIQnJV4G5GGDqKdHdptIig==","signatures":[{"sig":"MEYCIQDi82r3nYWGD5VOrG6WwkQoiplVJUrH1Oi+9yLMo3qS3AIhAPZZT8J1DCDKvIrX72Zs5zDsgf8q5CTUNprozZfwsMbl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+lCRA9TVsSAnZWagAA1m8P+wWdJ7F1KAgyW640uNQ1\n5MyNgPQr829/ptyx+dIxwUliAnY/K5aUPZRkMR5eBi36oV2HauTPS82Fszlo\nwSihgZhW5Y6dEPaX9ieqBzuRAdNLI1GW652VD2oEMxClTTobeS3l+M0ymSBo\njzU9SYkqVEtbwdqH+CUzJdTPu8ulzemYTUgAgFJJpTP4J849zwNxP7LwaBI0\nIbM8sAUlSDQTOJQ2AsXMlVovghfsBwWQV39/ce/cBLYWHNBtjcXL+G/sPoNt\ndtHra0yBuCHMnF6YWtlP/dS61TaIJaNwN7D0lXnSAw+Jie0zvlhN+nzkZhci\nEB3HSJoyNLFgBg522o7KzcMZgg7HKoc5oGmPL923xBigtNJ0b7mgsy3fXGDU\nUDmqbDpmtFpicjzikPMDuLZSNwSSEcDOoKzZYjizi2rFD3AIMDzaMv0EcwFp\neBqpME6YZxrBQptEvWMAQ4LPPM1G7YES1xriUuuqhJ3wxRS1JtTBGZKvF0PN\ntbxG7xft8FF1FveqnjfcS838FqKNzijfYaV5RDH7Jgq4O7KcSPt+E9ShQQ8G\nSWgurHbqB7d91QmWNLcremOTo5O9n5LqOaP0yYwmqXscS24BaF/yyVtQKOql\nvAFSTpmEHvZ1sLSduUmwJOvtDZNi+LZcxWVBf/4sWBZbXl3Q7yQeekN7zZ51\ngM/B\r\n=luuv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/list":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/menu-surface":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d3d176ba5.0_1580232613503_0.33133697739128176","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/menu","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b47282f5e429ba956da31901a095f4be7eb65d2a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.32c1df133.0.tgz","fileCount":37,"integrity":"sha512-IPwFgHxWe2F8vh2o+P5YHxMQpeO3cOZUOPiAclC7sPt7exEslMo/0ojoBQNnGduYpCsBhAPFt+gKJsorJ2E8Jw==","signatures":[{"sig":"MEUCIQDEfbszf0yLpS52EG9EAQvqLP3zejUQFOwLmLLS9sZSSQIgVJzOikA9eDw974qvdycBdkKgcLavErZ/+gxNFrfs37U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8MCRA9TVsSAnZWagAAU8oP/1pgG9bFW9rGBLwfGwSj\nmss9mGfx5+70lyaX93xtpmYxl5bo7p8Vu4RZLcIukqcvE7PVZPCl+yp9eiZ5\ny98HPhL0ei2XJT6uT+baMLPDScwxhr9Q5FasTeBCN3ibq1AQ4SY4JjN7K8TP\nmPAojwZGYIfA09n312t7J5NWg+EBIKYPx9jCfx+jiCvzwLP5nIdJB4Yi58DN\nQhulbA9v9rw5hkQXFl+FzuHuT9Dm/wEDNLltyOkIV97I47xvGfvKOy7MDeAz\nmk5IgMp0dZ0lZVzSwuwkhsXYpm58l/PUtwRpZkSxjs0C64EHKbsLiwnOor1Q\nA0fvP8jC70/lu4iDlGtHuRQ0b/FKRQZGM7gRuzahC7EJ9vjzT+Iq4VJit5iG\nwjmTdV4FEkWOMKWJ3Pcc2AEv5ukW2w+8c2DTDsam8N97JGt7rOe0tv8Lt5Zy\nWkSsoIAfMTOfkJkQLbHzoit3pLKUJKgThXyTMDwEiZz3cnm3x4aVYgM9CfeR\nKhvNj3aogCv783Ng8uvrIk3KWsvpStIFsNB4OdmqYAAry/+TMvL0Q3M9p7ne\nm2iL4dbn7MrwwOw7J3J+7xeTmA6NWqvSp1RhLdbK2pukX+ePwxlRvXa7M5ky\naE/AxkHhLWNJkX/wu40fDxbn6d3HY8de67kdI9ElwzMyC8lhT9YXVVAinOrt\nuvl/\r\n=rPGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/list":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/menu-surface":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.32c1df133.0_1580240652177_0.3321305439581017","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/menu","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ccfed865dc75a9e870a6d7c652c862e3f7836f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.f3adce86f.0.tgz","fileCount":37,"integrity":"sha512-NjVPvByDanVYChqQ7XLOTNupcG+1ksCIbvQJ8COgRK/qWFxXcdCJumZeGKmxC4j23VFpghfY5V+pmIq1P5rNDg==","signatures":[{"sig":"MEYCIQDgPJak2AUrwBgXWkIgcD3uEP73yt1QUVCRgoPDt/0DVgIhAMjE9K6Cswuwlj+HccV1TLG+T6uiNG6d5GFLEyaIJQEV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKx5CRA9TVsSAnZWagAAG54P/3dA1RS7m4XDtYuprihW\nXm7+J2V2HNZXae2UITc/KD+QxX+EL0T4mAtqz1sA1LIxgh/U/Y0k5F1Uyknw\nUBR5xncv8MBqw1dWz6C4Od4hBc6H8S72mINh+5LWYmoql8tVpu9B9XMzxRJF\nrIdRtCAH/rUhmG4n3G3/bnYS/fiG7W7bCWVMa3KPHyC75CCvkRtMWLW5Jtqy\nJce2oqOShVZ3K8vvYogvSVZqtweObx3+EVhjcBYoq22Zr0WN6MAuZIKOJaVe\n9RhTWfZ45BnH9h89J9Hl2pnqj3MlvNMsmsOjDEHtUzPpIx+uw5s7u4X9HCS0\n/poD/ahc46ym5TDOF8OF4B8Lgj05DRPUdHjJiQhWyNuT1gPcL9wNSzA/O6kB\nCO30ohPalOQTX/PhkEoLMcXVMTgzRWBCZd/y5q8cKIzY7Q0IlavWROKCQVWw\ngwraMD+YjoEu5sN2kZ/xJ1ODWbejKAi4xwV3eSEWltj/DmKsySnzsM0aW6iw\nHdkJVgTwmCXBNUPkMSaZF0JnBZ1ldO0L2LzqdxDzwP4zITqfASbL3lv0VjuU\nlUucYlexR/EQEOjCz+WZZf0/vjJ5iIgZYj6SdOZiPx/qX+Nz3ytiwUrmjaz5\nnv6meihEJoXaxuCV/w/3H2w0uIU5OQP+QeHvtkZx2qRq0/6ukG6PWuXD901T\nM2Ld\r\n=t16p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/list":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/menu-surface":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.f3adce86f.0_1580248184691_0.7109716205503507","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/menu","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db30fc2fe9717686180eb523860e278fd765c967","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a4423f890.0.tgz","fileCount":37,"integrity":"sha512-Uq2yn/4gXVapz5iytG9uf57twG1EKkeJzS1HAOKHP87xbfc5RbNG56N2i6TXa0MbHN9I0Qmtijt1ZFwiwfsKwg==","signatures":[{"sig":"MEYCIQD7kkhTDJmA/HsvLqgiicn/5aST920B8XGweHLBaNYEgAIhAM8xvjgbUzLXhEDq6XrwIWBzNTZmOAsq2tdxKw8SBZno","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTRCRA9TVsSAnZWagAAgr8QAIgMQ2FeVev28kV5po+8\nZlX5Z1nVSeuLxYMlqIWrHs0gWP6dDy/BlZ7P2NLFZsv5/dQWCZ9oaEH5Y1Li\nn7JlNFwxfvGO7hXbA43gN173J0XiVLEpccQWLX05X+x4hxmpyiHuN1sqiCfH\n3ZnhvnCxsksijisLjb4E4oN6qVbxHjrSbquNffWw8QrGFx3K+gtE9uWqcAg1\nlnCEjM5rZlUdHKmgGIpuG3qKGs8dl0SwZbUC6MkJa9b/CfOxFUNfqsB3bXFw\npWCvRkMJ5aqwnjBAgFguV5LWrUK1KOHBM4QkJDTUvTcOgCG03SqnZdIOBfwB\nOVogiQa9wHNfwPsc3PMCw9AZvI5PIHKySYUhFl19eToUT8yyVLLMuT7LpVHH\nBno6MHyT3BTKrkii9SF/jGiBgg/s34YA22Zs5MCsoo9gvdLp11gUmkHMVEKz\nlD7HcsuYK3ggQipYRsBqLZQ7Bd1AYyu5PbNqVH/jlwb3RL+MBBPIY27KzGbb\npgFfGsSdBqJ5GYg5Mi8CTXhN++TiX8RDqMmNizaLaKaKxAwsbbfCqtmFY6S/\nqknOeJ9tQiilv7ptGh/gMP8bKyrwlotx6gSRJguwjIWKmj+VF6XmqLWCJFQD\nEDW6flh5/6H3Ps9aAZX8DpHG3T8hamDOt/ja1hNQIB4TiUJ5Dzv588ief6d8\nmicR\r\n=nuXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/list":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/menu-surface":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a4423f890.0_1580332240936_0.8913465408804679","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/menu","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11f42f1bae0917e1ca0e919309084ec6dd33f5e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.9351f167d.0.tgz","fileCount":37,"integrity":"sha512-hBhAe9jxOdZBgP4Y8Gl109duBYUdjpq9kpIvwBQbIm8OoMU1EMqSn/3bAUD/BZskvnh+GWGxY0Xte8X2SZGrcw==","signatures":[{"sig":"MEQCIG5ogcu/kf2GJ+SLDvpyo+3eno4Rdn3uvyajZQZp/d2KAiBRKMix146e5c6fO3BwJHDjR5ZjkxND44YLwtREUsG9rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+aCRA9TVsSAnZWagAAndgQAKPJzUghpHY30ZAMFGkt\nb3CzaEddY68fSQN+ZEFa8rZFdIpfQxACdpDK1v95Q64388Wm/CncXW2cA/NB\nHW23LYIRm/ZDQzUMgF78rnhgM+o5RJMGeWQ4/MUhT8xgECfj5n3Zy9XcObZn\n+uHyWUU2CyefcF/n6HN6Wo9JA/vv7nYVmxY8AAgvjQhdcE9DQaafNHWb4P5V\n/XHnHhpzEt4mO3E7rvwShF8ATGquHOil0eMqf3g66AmAJN96sGH+UqNLV+rV\n2ZivOc0FOhu7apYcbtzSpfu8hL7X3Y5xXlr1zXgISq9gc1d5uBUs+ri+v4mR\nzaQUo49iYG4pwSDQvo8+3OwTuYMLy4qUqbl3D19xKKWQpkN1itVr8Y8WvxAe\nAt8F1eK7BTIPFSisOMiNq1uBIaQgAQsZ7AbHS6sMEhU+wHWiqTVq2XFq2oDs\nAdT69tGqaE/WaD/kD6UCdoq32xtxFpZZv7JhCj2Pc5iVvBM8m0hide2TfoMD\nYj5eP9+Fb/qqJEHdv7Q2yC9NtogoA1b3OGA0R80Wc9fWg2UVRbx/lBMiLUK7\npBfonYtNjBlMRGARk2We0RY6oEpfVNvF0N1fjzw4cuzhNfaRk0NPirowAwQQ\nEi2MzjWg0xD5r8wVZaRT+m/SSFN8iLh9C+jvjrkiu3w7OPhWwGICFLhylaZX\no7yM\r\n=wzGD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/list":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/menu-surface":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.9351f167d.0_1580335001580_0.3757021706250956","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/menu","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c0992376a97157c76d3ddf0ec0fb80e7a38e6d4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.29b89dbc1.0.tgz","fileCount":37,"integrity":"sha512-MwM5LH+spIkO1QmYbuHIVGlZnDHlfNKmG5m5tyChj2+y9Y3HulREm5eaEwl6z5o8ZsxY4UJaLbZdfYx8pBOfsQ==","signatures":[{"sig":"MEUCICfeQOrm2Ls4rfyO3LSB9/0Fe7riR+6uZj4rM5+MMc+WAiEA8PVMnn3NMOi7NI01MQWXsWrS24p9iVxZEomIBG4Ss54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgSLCRA9TVsSAnZWagAAzsAP/inCdycP1dFL5dlKbPtA\nrdqsTag2YoHS6D6AJCt0HZ0GcyAIHAGNQFalERLsbB+1+YxO/7MZBcoGQjNN\nSZP38R3rX4rYUvQVp79RsdV1casA1oqLQedF7SwV1VnyZqKBCOr8BzM6YcwN\n3W/Sofy2zF0DRjYHisOAHiA1mjIE52pWv9VqFnzjLZV3uFZ6JeAnfMVTlDRm\n4MIoSLZ5SeHRvE6PFzDja7xwgY+H9vU2myLYlvlHWbGCg6bK3cx6s2Dn9xVF\nTdnDAlwaIL7PR9Rim71LOShngIHpyD4oIs7kN6CeNP0+ciRFwIC17Jbv5Fvv\nxegV7wC4Xn0fpUao0/Y68uNyFS4hAhlBtcuGij75Bm/3eyKnSMCe5IQ1wjpl\n1XXBYFjHWQjGmq5d3Gjohhuf0SegPNz3jwyzih6g9L2exTSQGmU4yrAhESNr\nLa9v7ZwOcDvONYuMIFtkIw0Suh+pAYBUeTxMHIGUgySFF9v+5W/pauHupvvO\nXI/BhlqvhRreYAqM+EpQxSgpMypBalWxFsufPwTUpthKt2g3pBVV9MAg1LwN\nqOe/Jg0YQ5IWZBzHpzknpHtiJqh4yhi1tEWjNNyG2ECFSlYQmUmFKeLV7NMK\nExmFzDMm2aqJHUqXYPSCsL0i9kNbISwjP10Y3fNmdlTHzCztAgHVKIGkZFi4\nTfTD\r\n=EFa2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/list":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/menu-surface":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.29b89dbc1.0_1580336267275_0.4368460742848821","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/menu","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17c3bb8f716d7ffb09d612f7d526244b135e088","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.45985457b.0.tgz","fileCount":37,"integrity":"sha512-uMwPVpl0pLLirpZz3OfMDChxXj5MZ1uI/SRMwKxvujLxFvTuNog4daaVmZIz1pt7NxePie7BCCqj5qNdRLMleg==","signatures":[{"sig":"MEUCIQDSGy4ooecGKbzinKEjEC3GT9iCBTbYZbzoTOtWfefsKQIgTcxsrcK+E/0Y4l97bQE8L324tFX+E8H+GPIA39wcp0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZvCRA9TVsSAnZWagAAn/YP/1MqaWbuSHe6p6eyH599\n2Sq/nnBzb0SlR0CEeyDx7lIw9SyKTTjP/LGLF3OAbRu1MLRNRwr3L/owvhnq\nLmRgi3flMuVUU/FeKlV9yO9lsTntovzh1qcTytm/mZxvU6Z3QPZOnzEO8Hfy\nqwHvkdzynCuiewMcmnSqMnE+ukJQ6+ksCT/0LX0NqYISL/WffWssatS4kizP\nA/hXD57yQO/CDbOnN5ATJKAq6kOt+BnajQxy7m5T6At+001ZkaJ0vMU6yAvv\nSxWhVqI7S/4jxSLgT9rzi4R4xpl7djj2ThoyJrQKq/p/3v8nLSLJK5Mli1Wp\nZRZU7BlLJaDHJK4JHDtf1hg3BJnIpFwdU5FNDZERKKgQT8pvBromwnte0bOR\nVMM6RA8XACtYVqd3FGKVHVoTuzkuLgQqSCxzuoA9qFwcy5MFwPUpDbss56ut\nWQshfKkbjmhg2dc8rP2qnAdYjUy1aP6fwysSvpb9Xamw74psWzP6zVdRE1Pa\nIzoSPFl4pCjX7LpifOY/kHYPCV/e+yQNXhO4KAwp6FkIVSyv9P6kXhMfFHQi\nIk8Q9xl2XGBwQWA8dX8Oy8GXdlP5Jo5SRIuUSGiSHH/BnUWhe7NfmAHAStkP\ncyjDcij8S7PYVjp2MU8SMpyhdIg2br0tzwg3abD54aLiK6BmuC1a5aLV4i2O\nOEcp\r\n=I1/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/list":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/menu-surface":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.45985457b.0_1580340847362_0.4013648965412897","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/menu","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d72f67635fd6fa19e96f62b158fefc8f2906ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":37,"integrity":"sha512-NvZ578Yd5rfqKWbGcsyDBPqKJsaokuXxG0kUeK6y7w2d8cPs2cq+x5usJJyyfyu0FuDjoHynaF9O15skjE5M9Q==","signatures":[{"sig":"MEYCIQCFq/cpRYKkCdM4BNxd5pzFKmLR8AN+DbR16BBia3M43wIhANgKglLI2lcwA1dksl1V59oinYzPzULKhtpCt+vZ2Iq3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxSDCRA9TVsSAnZWagAAos8P/jh0OT3cV369O0dKiWIl\nsEpuu3Y8C5rmP6AVWv4geXTy1kN+4r/WukIOf1xxnD93iX3VHzLylu6y0zg4\n/JUG7l/gDgnUNdokxHdhFezXsH4V5xd/ODXNqzNgFuANCqV2xvuioF9W4Mdw\nsmS9x5CQbW2AZiA1Rl7Piq0mPL3BEqnH8ZVP65G8hz0kOfqq0HreLwevLxcb\nbHbZV7Y9j7hrTFfiyX56pF4haL+NF6Hi0pkmBL+5KJiYB4FPVQT61lVjMJnf\ncVCKutqlvy5lFyGsOXhFdAI2V/LuiCf8H2tdnRPMeUz4QKL+A7o41WuUt6jj\nDewKKlmTzOm7LdjQ3z6YzzEAyQOmB57ZkPOLnA6Q11S8lJN/5IJfxyuiQsVi\ntjoISh3AbgBW07E46Nz+xumRNey0aDtHWMAe/z/QYfIzbfTGeWoqpuQNC5py\nLxLu61Oa30SgcMeJ2VNfzZQxidAFHy8XdpZl4TmLQFuDUbwOOVHibmZJRpMS\nTqBkNVaItrVSTn6WbZixm1r5M0iaDUtprj40UKjvsgc8M+9EnXB4LLc8pNDP\nHxlO8xZWuFX/yZZrhc7LM8L+Qra9NrXd3EbLLxkR4DxJB5dSyYTBq9Zzm4lw\nDmLYxzFmKvZTF0q0xceNdoe2gTyKDEUF3DgNGw1HAG/9ChgJioM+6zKvCt2Q\ny/JQ\r\n=mdQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/list":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/menu-surface":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.a1a0deb3e.0_1580405891095_0.3163050430555765","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/menu","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"580466ff73f047c6e273c0e2ec04d6c071c5cc30","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.181486643.0.tgz","fileCount":38,"integrity":"sha512-dTg+xxZH2n5/u7w0Iv8owAKNSukUFnUZ407qrO26lo1HeediLc0dmmc8qlvBtEk1mpKmtxmG96y6JNateNgGmA==","signatures":[{"sig":"MEUCIHuG6/NEVcYCW8mB8XZ+20Oa0VFYUlS+1uxhrEno0JnmAiEAruIcLRN69zhYb+l2YdzaopjjmOTsHtO6/1Qq/bIPEYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MbCRA9TVsSAnZWagAAX2UQAI8heA6j4Wk9piJ7Mo/9\nuJiIc7k/1tiEUzHTXJZgQ7ZpjLO70T2jt/BxaRPgQLl4JQYQ01+GJMP1dQkr\n7LHX4d29QpjwtPAvYKrjRrNt34qdXUs4kgVjmk2eb8si+miJ0yKSNXGCgsVL\nK1TuomPrpht6+VVKHElfLfPz2g4fcH0vEGGb1rxSwWX2ixxgRzK8mU3nSVJL\nqbgV2DWACdoNgRktaCS2v/2vFRVG5969hm9c+abCBQqmYGUZRWyeeI+dPN4n\nUmMrzecm/vBvc1eLoS1LCcJAe0c3WzSIxQfgpljqG1TqkBEqQpu2t4s0TkcB\nFtf0ZoUX/sNEn+Ir2p62RYrvnArMMMPdk6T+78R2QBf4cbJ96ZcNYrshV0Hr\n/2BeyorP1oG7gmGF/WBuXOjjbgpum5rZUcyz8NFfqp17NH486igJzYdlgC9J\nhkG5gmLPy29HHV6cZZqUlLdpR2z1BdFdhzbEq3bsZMTvBVXU5aGAe8DsdeOT\nQ83cs3HddVqHBfwVMHvnSB7Ohaw71eOxGi/QeUTpftKiKpeO/TudSDbeS98X\nX8atZ3Dta2GpuHREIyfXDF4EQJ6hpHwhjd1882oGmGtAAzFDLe+kWLyrtWP9\nPMMMMSA8iArUxbAkFnQI5Nrxe+/YRPnizl1TQi3vZMtZJWY0pQ6M1ie6F5Bu\n/gSh\r\n=jWMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/list":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/menu-surface":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.181486643.0_1580417819476_0.6858184475526286","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/menu","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cabd81592075576954b64581407e1d908ae1048b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3a85313ac.0.tgz","fileCount":38,"integrity":"sha512-MyE9r6SZBdMpPsNV+YSuVOepj6bulMguj3RNcScD7Z7Z8RA++14CavgFCO4AXPL0694wbc9fVBwSSpsSOsoh8A==","signatures":[{"sig":"MEQCIFVsfqXhXQaBWigvCBOBISdd31lNsN/qKLuT5maunYAxAiBgu3Dv/RoTSHbZRrsa0lHpmCaz/ONfxY7+6I/FGEFiTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSjCRA9TVsSAnZWagAA908P/jHf+iudtdYUkOYjvyVF\nnIYmmJknRABlFh9nxPAT3mcIMYucUupw36qijqns5czkpkthGE2KORdU0a6s\nuOCIAbepDroveFArI3+m6Z0loD2rLWrp2d1GW9nPI+LtOeoj215X9bfMnJq+\nZNmbSjGIM2aEJofHKwSwVVnLo01OccPwl0Lwnk50U1gGBmbGtY3tRRN78+L0\ny2dhz/5dhQSKCMunvmKvmSjqTGPLpMQZ3+pnc8XV9mqq+oliN8DKna/PT6Jf\nc1pDFMziXcl1WbGOqwW9u826KiCLJw6lldojdS020PE1OPkdd8wThK/XgqJK\nAAx1Sbv2dtBReVIpal6FJaeoqx8hGev0eHye0msuMOqhW6oaMDDv8scVI0FV\n26ou4vQHGSS087GMrcAdP5ey7qaPn7FSZenkpyJ6A/vT/gxKdVT3Vdk10lBM\nTAYmqHCud6hE1P2AcjgeEF1fMNtyX1dG487ABb/Ian9UrpxpggFzx+J4UH72\now6fNqOcLV9fgkgmeh/CZ2ZMIFJyDwzNhIkJKghS1SJ7/OUtSAij6RNmf29G\nnqzTTcO55Y1ozArc+w4UVXGl1R+O4VKtOiDeFF0Ac7Ymlj4csuo4fKZty8yx\nAhiuV5ZZHetAB1orwtmIa4kB69az2cknCjUyXgH3uwzcuo46/hMhd9w9GmTr\nKDxA\r\n=n5Gp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/list":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/menu-surface":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3a85313ac.0_1580487842605_0.6291086298303128","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/menu","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0bdd90c821dd5be044fb5066cfd5b21fe0354c4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b6c7f624b.0.tgz","fileCount":38,"integrity":"sha512-QRPiKFj4s8A/QTrmwHIW76h6LF4e3vlDxq47vXtaJj9ePsITfrrfUWpW/GtttA0hoW3vZpRHl/j8Rl8lfkUmEg==","signatures":[{"sig":"MEUCIQCqW+ty+ztnj4UAq7RHV5abiVenNWDVAJio54l+m1tSPAIgfOmEs3hOdznm9Drqz1j/0tKnbl9Ubsf23ieKuqR0ZnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF34CRA9TVsSAnZWagAAmZsP/RfqG3es68OlAd4V+g2z\noKIqkHS2C2f3ITSBoxNDSrkzkfRZaM1jRqiM5M3SXHO/WGEWC4kLOHCtySrc\nzQXVPCkSfrcFXYbvaVpee3Mf9a0CY/Yah/2vO2s9umGonpee8b6h7UgP44au\niXO/9hsuXpR65Mt0n+Ph7yDa9L5ycOimo2Wouthw4u4xIcemcjlBQDR4pme3\nnOS821yJX6Y6wByTiFaW//IMQm3FbSANsu4TDkW41U9I0ARpOZepBzmfcQDK\ne4+N6lQ4cZmqxlXo+t8wIvTfVm3s7fU1QINu83ADQDaUkitqG6IjOkCRhlXI\nKllDjE6ySo5o3JtnP5lYlJ4uK5D2idyOx8y2yZsbopEtwcO+8B5cXmR23K1W\nPkPUsnTfcpnrVBFO3kyUYLT/EKFwujOykXoVIAKqcKJP5eTiOMBdDNar1Udt\nlLDhiQUFetqPldP3MtTqVuqQ8j70jzJA9B/2RmwQ+A2IepgheV+xBtEU3+Hi\n1Mk42DP0GnqCgTlLde1tKYbjKn8DbYwS5fo4WFEPzevWaixpA1++uRfhrQc8\nbw7Kjg8i35GijAlIyBSJX8WvmH9rXQgyjkyJCYhswxXonI+bVaPvxreptYwC\nm4O0UnPdUh8tzPszWc45gaDukD1zEvkSFcGlyVPXr2bfisKtai5d6qnHeoAE\nma77\r\n=sfCx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/list":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/menu-surface":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b6c7f624b.0_1580490231727_0.0826563443010846","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/menu","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9123386b0370cfdbff3c436af38a1cb912b35297","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b3f70ebde.0.tgz","fileCount":38,"integrity":"sha512-0Br1KnFjZqMp14tkYQUscTTFAMJ9uh38Rjn8D9DfKuLJrijz4OXUvoxk0yhHU9YAV10C/E1a0tCtoME5fS5R1A==","signatures":[{"sig":"MEUCIE05MMxhBfsyVB+Czk0npzLglQVyOshLyM0XO1FJRORhAiEAmTWeGILC3hUPjnR7UjK7J4FDAE5BABxwXFd1YVA3a+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInhCRA9TVsSAnZWagAAi0wP/1zlyodKEwph3paDSt4M\n+IgabtAOBCDCI2POTGYCkLqOAoGM2GqdSH11YS3BeLZIxnrV6mla51IPgIIK\nDw32OFhSOvJmTjx0t2DDP8l85YPaWDogQvF/o+EJTZWgjfVauptJXDZxH085\nhUIBeBWDxicW/BjAHSpbymAreM9iHnxUcj/+L+aZQGEfPYXZKDMCbeCT+3mX\nvh30ifkawIVaQGh1a3+Te71Nj0nL5JxSbqSrQNMyt2E9xtr0H4hkoACz0bR6\nAKiQY1mDnLi9UMcgFlITztDwZBga7VaxlcDE760CDnMAdyxTXgD0SOe24QUY\nG0Jct5sJblUr++feqnnrZkzdCMR5xeQWs7WG3hcHeH3OHdUzIkcijKGw23S7\nL4b9pl+9qDcmgY54blNHT1EAaPVklrCEtrYQEo/kDYW9T7Dun45UVX4lSJqn\nqJmfADvWSzrVI7gXe7J50cGhyuRjGGSIxqc1seChMnCmNXHcHe9QWYptDGh0\nQ452DQxNQRfbNHCzIbp21duAXqJzgIvtAjpvT78sOdXq16ddISp1GSKJ7U7x\nOhP6BbVGqOCxeiT8vFnBgVHLXsxwEmvavorar0HsXNzh3KBzNK5kZzTBobHS\n9hg0pFEz4lZoafLItLNyrSjZ/+tBzE/iZXHnXU8LFY39GK1Px7pTnZF69MeD\nrwyh\r\n=1PbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/list":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/menu-surface":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b3f70ebde.0_1580501473000_0.9629312136469819","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/menu","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b49cb8067e9337814406c2efbad5e9d77f1f10","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.3e782d8f8.0.tgz","fileCount":38,"integrity":"sha512-kW2enQ6VaoDyRZmmcSQpo648G/TNrBQsj+xQAXxG7hoTyKXEW1FcHOztfodYrjHUVflJR3l2oD41gOTSQrQjKw==","signatures":[{"sig":"MEYCIQD6vzKtKnyAHT6TWDuStp3pEgCr5NwCu7x3MlU3yDR0ggIhAI9iHlmnBieJEurYrQyP5E6ftrcJBb3bU92w3xhAuM7H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiI3CRA9TVsSAnZWagAAaI8P+QA1yn7fEsPAQsYVF3hY\nvS0bFJa7s7nkVfpOK1Y+rQFq+PzuRLKRT4k5+vVY2z4kFpmu1ZtA6qv2tl2L\ne+BmGobF7ru16JQlwG6x6jllYb8eu2VZ6ZIYe46vsEt0qI5OQ2JW/yk8Ql/u\ndlvCUXufRzUV8IpJMRJoi52HuSW8CzMjFt/JbR4hXmLblRJnZ3L+hxlqwkU1\nZTOJMoDcRr/to0HhiSdhxE2o+j4fB/OydA8byn1KQrlsnvNsHks6e09mdPI9\nZ6qMVjP7W6diU3UjHh9ap08hGlhSUYjkYA13cNn+LhB9Oyu6sec/zLVNn3gv\nUJusLPkzwQ8c+FN28kuAco9n+oxvsAgTZDK2sS1JXlUdu0HN9mHwOX287OTB\nK7B3V57Cl+Zy2N5O9+Xgbtk0NST++W91LBnzt6mB4+QpQ7QRk3Gh63w+DR5R\nN6i3L/7UNpmrCs08ME1o+adgcg2LlRHbOXJOtOYlNES9fl49CTNuaGSI0woV\n7dr/e18M92sb0hDu6AEBz8H4eZ1L0C2kcEfDrzzPIJMOAzNNPrehlYp2euGM\nPXJYWb85b3CfeJvxRgHmRQvy7G9ibnui0MLbSPsBukVU4uVv9umFHRcLph1x\nU9yxQYalcbRiKkvlRbfTe4NdN4gEPQ2Z/5MLICpmEuDNtnQO9nvwPTmOqfav\njd3u\r\n=gwey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/list":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/menu-surface":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.3e782d8f8.0_1580606006953_0.026587408184184813","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/menu","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a55a3907f58418612df512cdf1bbb248abaf134c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.535398572.0.tgz","fileCount":38,"integrity":"sha512-KASUsRfhnwrBCmFbY4u/dNwiH8qGVIJBBmxeXCzICb8ZMH9BH1iq4nDdmu9DhmA5OmlOIFid4Vu87o7mCiiADA==","signatures":[{"sig":"MEUCIC1BAnB0qU4UP57n7kcwuulczhxx65kWfMdJfmzc+vucAiEA/32URonjXbYPdllspEbEPfr71L1qf+dh5mSFd6Zv9NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKrCRA9TVsSAnZWagAAr/gP/1wBlEq+lNfYzNEwrh6u\nuLq+MpsQbtqEjk88aDBf7h1qjrc4UiioHBDD92wnqthuiqIt5EBXteySvKon\nef44OLsPv5L+LN/TR5NiHkq0+6RW6/eFhIcc8mQ0dFELAshyENZ4DMZr4Lfq\n1i7rW11AqANnLNkOLC5uCKGo4NcEfowQF5SLg1TC1ZbDwPD7aZiMipSFAoZ0\nH8X8I25V7bm7WJorCLO0bod21XVTyxenpvkGT2O3v2Zuy2+8hImIPglSBEu3\nUPlIjs+AJGQcd4imi+D4NnH1cDwAetN9mVpdvHv39JJl1qx11b1shIIM8ueO\nC6VN/jrP+HL6zPCh61ySXU8N2/uu+U98m8hnnznYzFVBYgwHd6BFrT935tOQ\nK8embPMJzmCZoMUI8D7E2SzV/wWRAG7uH9f05MQKUlVDqg9yy8KxOoRv0PH2\nC3OyVPexsXlrFHzTahUqXFRrmSgKcBOfoJbJ5sOYLXo1m6KKlivy4+sPI3jN\noDNe1u39gkpXSNuD5L2nsPSKyuBKTvGoHs3RDpLkRY21F/cbUSH6oBh7L1K+\nLviMFJ/Naze656RDMGyF6S4BlMDoTiu+t6e3xcUzjLUBjtw4wFGl4zfBqDq3\noHaE7z4jd7+htp1VW3BXEEn7IQP9R+NXA3VDHOpY+YXSSG/6VlbnTX8Gm+as\nqLC4\r\n=vfnX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/list":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/menu-surface":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.535398572.0_1580753579311_0.5112577494188524","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/menu","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91664a532e5c0bd02e037531a9fdbac7faf0e02a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.5ff33802c.0.tgz","fileCount":38,"integrity":"sha512-WIGvqpCgApf4aDNSQancXA4Pt2/0aamFRyzqDTi6c7a7c8CKurgiTNGiJgDJWO2B/XrfE+dTliA8dXTkn7y8mw==","signatures":[{"sig":"MEYCIQDhVl2s09a2sPSYbtsFaD8E6VSAEN/9tdbXkd2UadOu5wIhAKiDYxvNoCdx2aHAteLbhZ6KYt/josOYz5aZ/SV7X+OG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObI3CRA9TVsSAnZWagAAlCsP/1c7kpnjdevkxHFe62mj\nzc19jPRSuFzvT19fM8ToLCT6oumosCG9x7q9MhgkWLPy9zW22q5FtCNTrQGI\nYLl9D4JIV0o3r2EYPuuzFZ9ni9e/SZMHow77oomVsq9sdEwFYutPdTgGH/2H\n5/Cxt408AB4KVtqOxytxARqkE64L9+SGDzJnKvF+jTeR63Ozcne4pPtqS4CB\n8bLNX61ciE4yl3PGVxZrKtwu3Gl0a33GqpWjd9MvIQe+OcIDLvUBxUWMcJAJ\n1g/fUrPizbiIBxzHU7qdd4Te6vooyFXXW/kOTanuSxh/x4NuPPKAGWQFRM5w\ngZxNBjPUIqLKffE8cLAv2VkoPbhb74Lmsx8fOVzpEzcreR6hg5YOTMBS9D0f\nTUX5GYVTXUEelS5gqxkxeH0gM9JStLhddscC6fZW1KU6Dca4gq6T+qNE2yvn\nXNDklQXIYXyXcNHdbomOZQsS/w/FmfHLQzv7Dyj37oVwBeObiuJc4mXaJz8X\nzAXWIh028zlCMp/YP9BSU5adQg4BkqQlA1+myLfX3xyb4gCXDo0FT25Wr4cv\n+0FGvSw3Q6Ll56RayeskRfSsKQdbNnR3jVYmARTBqb2d1P9GNeWp6tQW2YDY\nWxfn8e+NKNdemwY8HgYlfIWiJyBVhwoxzmbfOnKOSx8H+OhSzav3H9nCyWu/\nmu66\r\n=Wr2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/list":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/menu-surface":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.5ff33802c.0_1580839479394_0.389162379232598","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/menu","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b5c44bd77dc343b8ecefdb395381507a669d30c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.1eb29491c.0.tgz","fileCount":38,"integrity":"sha512-/yEibtNVvcCTCc47MF0XoqmwF6w9Bk3rB2gutr3wJLtI218G8iqiwNatYh0WPBij0VoS6zXTuhlJcopWzm7UeA==","signatures":[{"sig":"MEUCIQC5+eOoi+bJeA325JJQR88HORLgwfBhGrIOa+/z1gsTewIgNODRIXjzWfhN/wWhnZ0hqqyk4XL9Zkrn7eEHkaek4gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdu7CRA9TVsSAnZWagAAHfcP/3Iv7X8FjOQ+7EqJqAAO\nE0ZTQ0SWcVSj1ur6E7U5uqrG76fLs1HHefXebH4IkWtLKOPuFpAIx19ivw2b\nhO3AmHjsZaEfRfmuuBt/GpGyaJd8hHsQzUwHNbWyEBp/MDKO8Q6u7KA4WHM/\nFsODtMO/5n6YUV55hIoJkUIi/C/Lt+ecjM02Mm3/whu3WVgS1/oyB/5xT3lz\nE5AjUP6BywRPvHx05wAfe+1xdVoay/U3I+ysTZh33i4miG/no7VleKnrLNLz\nhT/7Bi32GxiEnC7GCB8KiGpU9S1yPoXmsZZh7QC5RhUtDyI7osdFccWzVqFA\nu3OrfqzH6mNO/4XaoOYvik5k/nCEz+lSn/5BieeuEXWZifflmCmmXanjteUt\nYgoZH7yoZoGfH1Ns4ZZZiwQ0WHpz84Mg8/bEH0OUreKBQlAg4BMUUxvxjmPu\nRBIAwHUuEWFVGkVtkCvHKaed1vlZ4BLTW1vYfyhXACItkWwIvDfjpV6TGZI8\n9bEYRK6OjeqckTaHbDnwf8HO++i4Lmmj8GMPJ77Z4nxLiaT4ntO0A/ugGtB9\nS0sTT+kU8RqKJLkguXr4kQ/uxd7MKCm8QtSdM5RTXV8vU/abwRcbgI0/hwEc\nogBpkO/qWkDW619VjzsnFH7mbyrik2Jck21DaVVD1odjvf4Vwi14ZNMM3O84\n2twX\r\n=Vr17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/list":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/menu-surface":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.1eb29491c.0_1580850106517_0.5484024570346937","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/menu","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64388925aefe2df3a2aada688ee832ef44dff231","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.4c7154b26.0.tgz","fileCount":38,"integrity":"sha512-ZxIfkq45/cWC2iqvBOUZ8T/eql8sO16hShX3awbGIyClohLHiTDCVy9FGV+EyZ9VE0ZGF89lCazLaMChrJC7pw==","signatures":[{"sig":"MEUCIQD8kDAZF8AZZ96GANTP3M4alnl/V2kxVaEJ9zq7CESfqAIgDFrl7KyUExBQM1dGI8Y5RpXcLLurq+GW6aQQrIzz4gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOue1CRA9TVsSAnZWagAAWdsP/0qVUQ+afH0PS+8QGj+5\nmi5IaH3SGUV7bcq5r3HUF7vZfBWuGU+ePrz+Vhlpx0t1NKRVRU5JguOuKu6N\ngEKPvlgoutC3s/RlyN/YYPieLNA9irM0gOPeDKUNQEpvbYT7HqvowobuBaGs\nq3VcBUgdvZ56FEzpSzLdFJg6ix0SdZRSXqiakj71Qi1gbqL5YCnFNKAn70UP\nVhpHeuODx3IW3slMJ1554/8fzSR+DaEnMUoE/y6JBRJIytZNCLaASu3dILXN\nxl00rDfAAmVHlOM0z0oyVi5i7DKDYkVmh+eBujao4PzcIA0Lij5vW2+pG5Gm\nnAsVzrBvNnnQ3z00y9JadBx1qqX03a0qT4j5NNBmnFdLGF82di/12wGC49a5\nK88mlqzzxKY/7dC7wOYXlFFQzaOXUcdf42X7ZcLnRxhqj1qMM6fnh3OMSBR5\nqarhw7fjZnpnOB0Oz7Jzo0FwTpbAUPatL7d4NerkVgd+ybdjBtfBTi3RJiIM\n9kS2lugmduSJHbEuGJX1IoPaOYczWSXdh2d4WpsZQA7Ps/z+nGdoBvks/HDs\nJcLjT12jXzYT5EUxyf7KewS/sWxJn47t/nw1cWZMK6zDtnnVBXho2TUbxUKB\n1DQ1dOiIsaMaJqJ6fC3HqzGgpCzWz2beayebJ8/rZGsjqQFfZ2wg5GHIBtq4\nh8Gc\r\n=OjQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/list":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/menu-surface":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.4c7154b26.0_1580918708725_0.31755886533811517","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/menu","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74b46d5dda97f1bf90646f5d6e64a667eb5199ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":38,"integrity":"sha512-1DuOnpb4VuEnbWa51F0KTPnx3C5AeYU/cWnhA7Y2WgYUdjjGQ8Dd/JAJoeckyp/+H02zlnnpRXIcRPHb3DpwHw==","signatures":[{"sig":"MEQCIDOnLXBYQ2a3RiFrK7UL1xTU0d0nUD04/EGgz4UwbaNWAiBuCkigutNYE3pjp5XWoZ+2zur+OoFh/WHJ9aib/uvYug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DyCRA9TVsSAnZWagAA1qsP+wVTNwVZEQiaRinsqVIx\nI36o9THmnlwjoij0AmIKecp7qSKK/+ec5OrP0z2O3NZMjuc92m5ah2aXkSf5\nZrsvnjZMkGj1bVRIIoaaRZ3sIM6FNOuQal37R3uDn2XiDOFSY3Q+2GQiIPDZ\nUfTk8+Ax7DMTyumuTSJhHZvSi9Ke5qxwgMHPlnf/qTylpsay/uLbukz36Hq2\n8GC6fkBoc2c+S7FY4xBHA7/W1KYeFbUpzdnXml6FOzBDyUY8ki8VODIMHp5J\nf0g3/7pQcOUEd06Dfe3+OjTLuZwOnKrRCFOECL4i5eOW5OrGmFZf8GapEWhu\ndOj2c9e2EVfEJf/iQebuIn6Ybt8TKdEAhvrpCOyvzgNdNo3hgvI+8eOEqRC8\nWaifCNsbS4jj3314ZdB1rburTffu2OM1qQmY9p5p4WfiYXA7rXMnMAIbz6UY\nYXNapZF2W2WOckuLcAWG8UZeSJLN/BFRfK/xBj7yj6ow86DhdgfCmnRKkfDz\n34vPcoV51ASO+KNObi+ID3SwI5ENj6DRmoJRhrMAxmYKT4RaCbJCwpVOkiuQ\nqzDfMy8wmXXzkfn9sbcpGX0eZvJDMkUNL7ufmU32QGyZj4qTrrOZPwfpY6hH\nstV/Q/a1MYuNvrYwCdXZueQmFPXHQULDlnAV0D4PqvBhx0PPb6gp3rHsn5A6\nB9ux\r\n=IsdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/list":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/menu-surface":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ab5f49a2c.0_1580945649798_0.9067380486848131","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/menu","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01d83a4606d9234f0c7c6f0fe9a03cc9a3c5127","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.c541ebe15.0.tgz","fileCount":38,"integrity":"sha512-1/RKgvcudb64bmGrZLQlgkNZQsFyUHagR/3mGDODZbT+HUDOrH+25aIPkAdHYt9lqjbN9SrUuDwSzzRXsB2I0g==","signatures":[{"sig":"MEQCIAgGKPqKrUn0yMKVypjR0JtjUgsLwd7ZCSQS8BbiEQnnAiBXb3VBojyZFMzY+omSdl2spkqppXoulDoGG9n0ZaXKBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOSCRA9TVsSAnZWagAAE7EP/3Qrz5W/jwELZ3ayrgqC\nnSmJeq4xnvFbwdqUKWMEwW/XMFnjak/M7mabXZL+yzl0bwLK67ZKu4/g0Qok\nH4y4CmZ8aDhBX4GO5xLotQ04Q7Q15WH8x4yD16OvchdMN39SIr+zUB7zDdtI\no3gfyMiZPK6zcF+h4/bqdVa/V80Z8CKPAdTF+T27vZgjjitzNmFJp4pv8PMK\nTD6SyGLuRysfi9gmz1z3xWePl5rt0IqF7HOIct4ibzcq31215JsL7m5rrT82\n/Nl76fbKKlUzRNmVW3HculFawf2jQgf7z4IN/+BD4QM2gRXEkNyb7Ix8y+Ej\nnKFIisZtIPcgANtIZFuheGS7M7wRdOsW6DTVNY1riLS3WeWpfboAS69ahIwc\np+OD+Xl69wBzYeDJcPUVKl7F53Z+mpDphwaEx+IAVCggxEbFQWlizhZ1YwsM\ncrQ3Jrtd8oCkQTYy8GQiOIjflmm/kyxhQ8zcLUbkReAUGxlMMfHldbsOJzhF\nyo1eXrgJYBvCP3Ck/CPq6Fc+RbYn+/RXyJiEKqa4yOzZlkEKLHIXXf+durBz\nEKyP5kSlXEKiFYQWD/dTy8mSQY08MnQfY3rBR/cBdsL21oWB0a+pmIlMvuk+\nWwQWUpAPMngE7Sg++YyoJaQ2DbjgBEPuphvdmueWUNLidtcrC+dWT2eSgOop\noYUA\r\n=aNZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n@import \"@material/menu-surface/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.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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/list":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/menu-surface":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.c541ebe15.0_1581028241376_0.06085738943710872","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/menu","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"344d1e921b20e49bcdca8d8b11c5bca59896b60f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.98f7faa05.0.tgz","fileCount":38,"integrity":"sha512-NNk6z2L4IK8BI5zuh++E+Dz3acMZy/Z3HEKi4b9eZK96Ur+OuPQ+Ip0MhVMM+Hw7wAE9ywrT+kZcoAZEhDSgQw==","signatures":[{"sig":"MEQCIH6fSX9J5xU99WPXj3yrwTxOOSR0ybSLnlD+QoM0o4gRAiBP1ag8RcfFPBBFqCH4L6KdVfqOt8pmpjFYN2SwH4Wo6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjYCRA9TVsSAnZWagAA464P/i1Ed3MXrrzhSgxOIRof\neF0IZb2xzsr/B3oWnyw/auhsdSdlA+Td4yUauHuwokHvPWwSTg+LNgbAY1tr\n0rGkTIPcpz1hX+PHgR2F8kjbUuEUxgxpKuXV5Dp4YMrhKB53fm8tG3p4wMz+\nDAUCUlXoSp/qLKU1EtlW/UQH6aMZjUkhhcmIXA9uT2f397DfQBjuNBnjAUYv\nyYvZfpDI8jCSnNW94IWaca7tpWNhlgqdOt3Pxkon3JdXGqurEm08+h9fw9D7\nAVodre+dm3MIwzNn9onlRbKmwzjd+6q5N7rzc6eoBeXlUDkdjC0yCoNuKb+G\nqrMqqdlFHKdS31zvpTh4lrvpxrzWw6feO+0H9crJAw7PzAmps/1ziVPiENb7\nOL7G/5xb/wZTNNf8aN6znMiHoO618vzCm8NkqiHhvDu7zZl9A5X4pw91jnI3\nvja1uF4IDFlrfAiTKCgVmvNzIRbilvOyHwbjau0YdDjHUOFPlvdpqEuyMd6o\ndv8QrYlLqtmSJydnCvmHwEM+E/bp1uvHDXet811Ds2qHAQl/ry2p9N6QHBRe\nb9EB6uFU58OggV8cZiWxnrPo9H947S+uMrIUrb+k//4+ewwR95GpZmf1vZSk\nNJJdNpz1s13XzQu/ovqniMvoJoNjhamwJ+onsF8r8YgCU1k+P1/QLi/RGSlW\nZREs\r\n=mFhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/list":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/menu-surface":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.98f7faa05.0_1581103319706_0.9970141578937359","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/menu","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e1ac8f1e6917ed07b1726fe85ab97b48e48a72e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b4727e43a.0.tgz","fileCount":38,"integrity":"sha512-1YQko/0pVX00swnwEIay560WI21Va6SEmGQYCYoC7m9awN+5pQJaWhcvinSU+sQdACS55JIcxGc5RQ7LlLjVwg==","signatures":[{"sig":"MEYCIQDrZtm3rOE2PzSDJkxF2azER0M7hfOe3yFb2YN5ccCBYgIhALH6PDzNK41OhoBxo8nDv5KhT/Dfl/6oBYJzemPXfJhM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDjCRA9TVsSAnZWagAAciwQAIWPrceF+5osTnEHCb1o\nG0PWVXUCaGsEKV4K16ENrR5yiphUR84Zs6mikZkzrGgCxKwHlxftCg0ReKAz\ntcCd7YKgp4SVG7rch+p+WQsJ4XmnEsw89yunHnJihB4SdLBSkuH1Y2RXHD6R\n3BJDFfcr1drdXG0gNfRUn9I1uGfbK8801URdH+uPp7y/XUbBFH8Sy6qFjkH1\n7ia+HPq4hj8WWI32GZOoCubJa7jieG1Ba5PvjjwLQEpTL5TN0UcjJKjyyus/\nPK+1sIPoEriFirNJ7/j5wGgyAfVzR+RvDQQQfcDJ3bCZwupWXfGqFmcbgIV0\nNaBvLV0yGtThAhFRLYWTECd/PY1dShI9nXXdhTBltqzF3XI6XJqKn1a/4OpJ\nGUlZS/H/i6Za1UpjyVXtZ337Ew0FXTLAueV+MrfBFmii5SKJV7GwxlNurW04\nNy4ijQ75rCRkvjzUXTRDZZEfL45ze9S8ssd9Hbb1zISDZYB8s77l02gesE90\nNeYQmU0p1ii9iN8XuxTStsuy7mPD86NA20KRYKYyDXsDhg5HcC13lCy3n3PV\nFQbjCKqJ5jEsqt91LCqUC0W4cHesnYwRtixnwuim61HD7cn7/PI/4uFkvs4w\nEBtBbIgR466NRQ9rcOkSsSij5jfIRTsX5nOJlHOtbcxlrUqv0y5XoB92Ryzh\n/3Ln\r\n=HKTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/list":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/menu-surface":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b4727e43a.0_1581105378583_0.8986848488541084","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/menu","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f26731071c41c30ade5c36ad8f984cd6297d22","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.91d9d5a65.0.tgz","fileCount":38,"integrity":"sha512-mxl2MVyckGVRJkT+MfU5UpZH11QwEcYxVpa7EF5mF7seNgzzzQ2H8qgajJSceGnbLY18t0xDAhlGG8VzrMtlMA==","signatures":[{"sig":"MEUCIQDcMKU7sYnHNATGWyxfSreY5+IRobYiZ6aqMC/lpfPpbAIgc/3MoKbHm5yQGJdzmZlm/qIKJJ4tX8g4TXcR1L3qKfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePewBCRA9TVsSAnZWagAA78YP/3dT7/SpG6VFpMVYwBW3\nQiyZG/yOfd0HGf+GTZFHB9JIOhyOjT4JtcsyHJNwhqrDOOAdY7aNDlbevP6C\nVvs42cTzD7lNw9z3GBH7wB2NmjBU/1vSCvq4hw0+KZmTd3D5sWZtXyLHITjv\nb4Vx+dnxC3tFhln9cNQpSPaCcrQeo0Zd1N/3ENjbimVHxTZd5IFOG5C10cBK\nJTXhOGAaXkCvvTPtEClIl3huZnHh9Jiff2CcYebz4HA03+L8+pcYODdt1Nkd\nseSvxZZ0aahOr27y4xY0POq6NrI1mTXSTmq4sN952NbgVb4w4ks4208dE3IR\nA3Th52eFupvFMC4NAcYPBRHd4GQJOxb8HAr8MVwefnRmwEuU20etizvnpr3B\na57GTX9GzDoCt4bhRkbfTZV615ycEU6pxPtuWFu0dCvrjRycQmJYPX7oDTh7\n/sQkSkZRFtz6QAQJ5Dch3XXWcpsJFmFhXWaPOJGVmA4Hrqo2exwQ6NzrRHp7\nG8BSbT4d0AUuqZhNf+Y1o2lWIDoiAEeGW25sJwZLrH+Bl1PbVFmXnZO0XBbM\nRG4tGTaDHOfxdDcLMKs3dpvlOaR+6k9/xSKOuqABjp2F7GSWdf1QLgSzYK1k\nPZ1YqnIFla1+eNy5sYPv+iT3MOdoUC0UPprtGfVbbCr0344afovY/Sp6FhdO\nSzL0\r\n=w1M8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/list":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/menu-surface":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.91d9d5a65.0_1581116416427_0.6645257559081421","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/menu","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba603421d66736dae43cdac4d63e47b06530abc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.d5c006ed1.0.tgz","fileCount":38,"integrity":"sha512-bAhUqaGeIl1cMCWpk8njmSGHfTu/KWSK2G6SKpK3uERW8L+aUFOrQOb671hEMkILLW18IpfXPkjNVFJQrvUOUw==","signatures":[{"sig":"MEUCIQDdVJdgjPNa9MKAu/sBJM6glXrt64KOy50Jlxw99OG9ZgIgdFby1k+SBiagR1BKgJ0EOagcDfJOeFUQbxLXvYsTHCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmjCRA9TVsSAnZWagAA3ssQAJxRtnkxK1+AdJ1lUxmb\nd9UsQcgQ1Wzk8ialQtaUIZb3kjlNrnDG6fTbdvcvNs2TTlK27gUjFl6gdY6M\nC4QPyOjyFqB5GlVTJypoW+Z6B7lTlBOhBg5fmkew3BIUDv+6FIXVEgoxYi4r\nbBGFbrT3yoa29hTL9HmR4TVkZPmGhJIiScS7GkBv8hpDQ60SiSlYx41/pGIw\nZqhM7rjvIYVv7F3rkpBt+V2fK4JkOx/BcflMa1fn9QqyRHHbqTAZb1A/TN93\nH/21i3/CYtVLwPXv/1kBwqh5NoYH9BatHeFQ8Z9K/M8+XEtfrO4KDpVDEC8Q\n2bp6/xkfJCzSiTE6xMMMJMMR4R4W5hJJlaNepa1OPnxZrQoFg2R8mYWJYKa2\nWIcqUxm0E3fKOyDh+hxheb0Mf6BiV4PWPUYxMGE8QGQZx2Nb4F6kBX8COHL1\nWB4oCCh9GCmyNWzdJaTqZ2YPlnSrOyQzxmeIc9d+Bea/7R5x7N33VE84J6Yd\nJQgvauMg9ABOZ8YlB1IafthWnaQnAl+yS4w3Kkb8Zyp2D358LEhFXAGIHL+H\npyuQc/V0/170VRv+7gp3xjxTNXoh7jpInny+MP7NXh5rwPjVUpyaynj7PjaW\n41KVEsNvVHn3f8TDO85PpAvvVOZu3CbWx5hvLrwdfptswwBxKNWIAwHKen/i\nMYEa\r\n=Mc20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/list":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/menu-surface":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.d5c006ed1.0_1581353379317_0.11049924546914225","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/menu","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3d7c77da2ee5f8d963df0b6f76544d885edcffd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.559f1a570.0.tgz","fileCount":38,"integrity":"sha512-7YYzmaOU1pwiCRNv3t/nLHt4ieU3pbd9JXtCcSDyl4uI0zuTWohH4GONdyJUdCH+fp4kYa/Uy7cka1yuby9UCg==","signatures":[{"sig":"MEQCIE7XtA1i4+dvmR/Ml0ZcWmH3FiNGNRlt10Y3oQSBC9U3AiBZqHU63LlupHN3yrumVQgfa+Jv/f+NXnRbVVxKvv1ALQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIzCRA9TVsSAnZWagAADrEQAJatNLganPBEUhXaQJFy\nQR6sZXDnY3lRY2Clab4smkrE/IU7gWluSg10a051qWrkdprj+CELGhviYu6E\n19Ouwb2zB6Oi7XKlb75gy7KlpROtig9NWEaVvM63UfPC+1rsaoUZjhSGoLNx\nAPB38Idg7qA6vuk/y+mKiRT8No5/zR15I2PMzXZ8HD/tyTNpRx17dvcjr/lQ\n44MJrL9RT8N9sS+N3wjfhm91BCDCsVB5Z70JhU167qL3fdu98eELwLESV4fk\nAJQc73WMuTIdi/3cPOUGygxr1CXWEkyJDfSEJreCypmse4vzo5qg1wnDST4K\nuFNB/eXrORTbuS4c7sZKrdZ+orGBVlyrWodAEBtJuheHY98ICPKWJz8ba+HU\ncOiNDS3+lbh2YxeKUb5nNFw2cSNexfNPFayXmwwBGNArXB1kC38rgpLrPuxi\nvlQ5qQhCfcFn+1gltL8Zkm9LdTMm1KDPeaNQ/qPkQ3od+LD740Ia5TWPgjC0\nZKGYWT+pBq1dWnQAqYHKOQzNPO0XhvwOYBMR98mpeo7qxodAGUO0WMuclv9f\n1GrOiWAjbwgDNgCa7cz4cvegZ/eLycnnmlCjkJ1udv+bWN31M7pGWPxbVzMt\nvXyeOAczOGCssB3bvS6uaOD+WCbcyZPaDyIBAtQzFqx3zDzD3n76fWFz2jDh\ny73z\r\n=LXbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/list":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/menu-surface":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.559f1a570.0_1581355570978_0.1191938924361351","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/menu","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41d1f4c6203145bfb5264eaddcce197f4744732c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.ad3bbf782.0.tgz","fileCount":38,"integrity":"sha512-Q6Th7L8SWFhhDfQwnEwKXs73hkiPgYWDog1Nxxy8SR4Pzh2J0FZ1msLW29TrTXJe7bjgSpCwi3lSFCY8v1fX3w==","signatures":[{"sig":"MEYCIQCbf/0yKCxzu/xdjv+p+49g8UMjpfaYRFrYz0h42ooLAAIhAMG9XLol4XzzUcUQCKvitmW17nRT31ZpAKTBnwQvH9rf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQashCRA9TVsSAnZWagAAbz4P/RcttPu6MTI7kNfo0vdV\nNYBEn90oGuiDJBmUOaTELZV+fUSpMLzNa9mscshTch6odpPxjgK0jZ4cOBIQ\nfcGI7wWbB84+rcGqcR4DR5X0k4ZRCxy+fqDv7Pp5tnz2y2nWFcww5WMcC1lW\nwiegxioJx6g0/ueRCod2dFvjsIBfnoe/aEKl6CCuaqbo2utvIFS/kb6T+ZIL\nEFlK4lxdSne9NQE4pYaudfMoexmZjiHM3eWKWNPpNACunBNwoLjYMCItehAp\nYYM3wtLME+21RFKRb3lESmJsBWj9pltKHpT0hFYxUJlv6gCykdh0UY6NXHMz\nftUKTzN/zTnIDlPxGMcVwMe9rFg/wh0/lgiUt9wJ+ntcslOTwpfAqqrI7kW6\nL4uNtxYqKJfC07zAT8XfLWHUapbym8Atyfrjz0hot9anhWSsSeJUOec/1Cv9\nOlJq14w8q3djXwj4AAV7chvg5PaRiKf87be1Bx7xg0td6970Zs7vXFtYidfp\n8quGMvDvOwTG6wooA1ySru8KqEkO+HQDF1RvAUrWh/g9tGWAXyaN4nLCZLgM\nOijIBn0o4mV8kCl0eTGOWO7KxD2i9qxx7wrfcMFnqDRXPpdPZp+ARFnYT7iw\nx5cZHRBb030ZNmviR5mgbs0Iq9P58j6U5GWDfJz6JsInVYExRSld3IBoV6MF\nyIGB\r\n=hopc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/list":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/menu-surface":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.ad3bbf782.0_1581361952368_0.8249273315418035","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/menu","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63443913b0bf186f10c3ccaa1b2040e793e90eb4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.570d8e49c.0.tgz","fileCount":38,"integrity":"sha512-lwJ3dbELuSQ1JsDKtSxtubp1UNuy8nL+GGKutpieg6+leglVHZ/VfpR77Z/DAWzXK9VSFTCSwQG/48X1OdIIHA==","signatures":[{"sig":"MEUCIQC1hlYTvLXIwgiS5J2/hmSRL+cjB4AA6FbitBpk/oTP5QIgfEKhznwDTDq65Wvn4k8otmfHbgzjLCWmO8+u8Bjv8y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCcCRA9TVsSAnZWagAAmI8P/jOm4l+ULzuMaslpcvVC\nsigzcK8/wVj6T3DX35Q7hb98gAOYZgZF/0UEeCmesVMDUATo3td0hZLe5X3+\nXGEsedzyOzT/N5xUNoH9hUahvZ2BI+uccpLggMiwRmHRJ4cpMEWSA8r0cuhx\nq1H4DwzXBZkd2tkiwVi+5NWOxzKxFd/dOTR20Ko+BWvvZpjor9K1AiDQRSiQ\nvWnoa9pKRW9NFQgbEL3ckI+VTq1AaI1XdRUtcAwk1pjIKhGmBrci3Ny8ge8Q\nz69he/FVkvhgzM3HSA5ARLkl/z9YGsKtAxoPzzoKoUCYiCJ3G3glDRDtlLg2\nN3Yge1HVKnGaP4Y2PVKcw0FJFjCBSYcxmKtyjfZ49bdqO+DZPnQqydiKqAAy\ntpj7zhNvjirDUQkbfRy1psxskYUuQ8A/BJYEP6KJEX5AN0P5uqIF/PkwnDO+\nE8udn92Xq+MoGReAaz8gOlTPL/Qbeqao1ujycJwXYo8Y6ErygKqYTGUMV61o\nyrViE8lRpih1kXn7rCzDni8MbTEiIZ1n4j18ynB2ySbpBpYPg3ElytN+lG7f\nSGTI0qdhz1a4lp62M/9TQSIwk6NZ6R0rhe9n1edv8mILj2UkaJfzxFaIMAmy\nIgNVZ6CU/brndPg36VeX4HtyB+q0PQN6LFKfHBYdZscpY8TM1JvP5yrqP85y\nQrkh\r\n=8581\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/list":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/menu-surface":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.570d8e49c.0_1581367452264_0.6706604494312773","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/menu","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f42d1ef99fe66be10a686773ad75b7caac99c615","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.48b06b89a.0.tgz","fileCount":38,"integrity":"sha512-t/qne0t8E0fpDgu0OlBU0CWrGsnaY65deNznhTYASvyLqi+JzIAdzHK1+HxvzUdR3a1LQ14C+B9Pj/N/2hfMvQ==","signatures":[{"sig":"MEYCIQCvhLcuwJoaBuYDtJT0xapzWP6pEgOM97V8mCFh55jb2QIhALA/3dhIznQYVsPIx1Ycn9ib5Soi6+kI7ALLUkH1rvia","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXyCRA9TVsSAnZWagAAx3IP/2s7akG4m+aU/Exs9Htq\n1DoqlC1G5PQX7DXFgdvzzNyaHeaSm35HACY2KB9qBzEW9WcajcSk4YrVhtDD\nUiuBdP7UHgfoACgtMTRi8yNXiI+X+Ec0LQc2UVeu0K+oUvUtH3M1FnftzWYG\ndC8IASgh1erGi2b5qsElGzG1OzHS4WVUgh239hbw5rC2phHWwPnqjf8XqIJF\nR3eAg/w4oPkjVwcA3uYdcJWlxQtNBjGGmfABCp93iNhyFyfuLZp6Zv1nIOO8\nvxSG/KSpBbddhpTq+2dsl198PXlPWQ+uXzBFq4vmo+0yhIi6BR2ho7qHVvPn\nMlzp9AsgZMiXmQmTQ/kdqh6D47AHX9MoFw5jXUSqaMQHST2hjVUwKI9eChNZ\nxNC+Cj7orm11gfNpBuoY86U5Dw6dgkHJOozVCMPTMAKRs06A4oGIraFL1QJZ\nSKhXERRM40KuGqxGSBSfWXPq5bcd9SR4uByd/zzs5YHA06KFCMrGnzkiYaAV\nqaB05IcKK9gwd79TNnlcNKkcxg6a2m2fYlGnOLzit+VEoJm6VgNJZNLWoGno\ngVSQDk6Su5DEgqhyLaGMXPtdiC6gCBgQEc2SNDbZQ2sHYuXW/phZWRgKX/2o\nHMxmRAlVSbTlt2BUUM24iiC/Y7w1NIHgXpcvx3W5djejx+3UqW/QnoZNxZAH\nvsvR\r\n=u3sE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/list":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/menu-surface":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.48b06b89a.0_1581446641429_0.448221536188131","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/menu","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa1b268c94f441ebddc6e5c5453f58b5ae840db3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.612443dfb.0.tgz","fileCount":38,"integrity":"sha512-VkRdR7L2M9AnGbZry+ckdtuEaCXKk+pfa1fJ3NmS2zoq3UoNpCvud3EZTdaV8HQxgUlNdb8tAS6qGw3mrfZlmg==","signatures":[{"sig":"MEQCIEvoyocgiZsj7zXKxaeUDLNS56Z1u88RgHxj1nDTLV0zAiAxNy9NJ7IpurvbCWC5RLgXyEUQoQVobS5f0wBbt0FkOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwWPCRA9TVsSAnZWagAAvhsP/RzyE+bTaJQcIISLlliU\n7E3JA29zfXOAIdBzXr7wG5q6XTPGBn0CO54MAQIjH+epWDaGSbaiFpgOXHs3\nclyInjDiTtyW3s/hOJ30xRN6h7iOhMEHRPiUoCsd1I6FFyWLlUeqETnPYLBq\nnhOQZjPstzkwl14Oj3rQfiPUFx3V7lUU+yb/9ejL1Gq6x4T+X3s7vZds2Wvp\nSjVqVPzC7XAsmKwBB9/jzhbl/6MDgtBvpzAlfxPVIoYnN9SPusQwbIGcy5L5\nrcydlHKJEkvYa5MFwdkAjG+CpAIUs6k32Ct7LEsAgpNjOidU3mwIQeWlj1sU\nIntfzCi8j25lFqd0TaA3u5yOQ6eI8wh1r+C99rwlwaKjoAJt9BcWqJ7ZMcwx\nFshInCkA9XpzypETqMklAJDujEXOPYEW9du76RmbcxAjCH7m96SDzVJmKgD4\npDJWUJA8AzhBk18CWHXI5UyHzd0uOZqViy4G4VnjL8HvsGlvtycrXFFaAbR4\nkgZQ5nmPEDTITBmtba67oIQhiBaSV3gQuD2PSYphzBmqUykc2MK+RsPOZ16E\nnwzYkgBFCwXHQAClg9ssIr+rzgNAm6/EfayyX34fwLXoMtKaJFNGJuXZ5f/a\nQGE43XWCQkS3YZezzW61icLeCj6tIlggfC1rGlh1CG4WMG2sejC/iszCGIVy\n4Vog\r\n=iFyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/list":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/menu-surface":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.612443dfb.0_1581450639166_0.29739921019457416","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/menu","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf63d20876855d7e6a4eda9606f4ce7354862775","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":38,"integrity":"sha512-xpE4MMmaS/edHhh4wYdnPEwNwLNTCFCXl3DHPRLZyhElWbfQmL7VoB5jOtRKoWgUYAwC93QaEy8kiSFUkmgYSA==","signatures":[{"sig":"MEYCIQD5ltw3jk/oExlKlJREXj51wMgt5qsLI4A9hEVUueUx6AIhAIZJdZfguKrh7y+h/UlVzdA9BTETnsaOFWLB1K4fO6US","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7zFCRA9TVsSAnZWagAAJgsP/3Lm1pt76+qbLXIwlR7T\ndUjjII8oupoUJRDsbNQWYtgIcYi5Zi804q1gceu5JoAHI5KhmAIgkx1C46VD\nZ1xhi4UCo3wV+5wPh8DJHj2MjW88t7qOm9DF1/27nHxpPJIUzTmLvggGG/HN\nHlUGjtdXcsfMWSOd0ZyDdL8st76Sw3StHiZl6eNWK6xNpf6Ov2zQGSA9lK8s\nqa6CTxEJ+zTDhA2eV0fhKMm4XnuH7UFivgq4wP27St7IyyS39NAiShp+ck/K\nRYYvnokj8X2t0i4+WivKNaxLGfYtJUmH28JAJ9TtHeXFxT8gqF1joIrqY6Ij\nWLgspiTz/LmyKOc8YaUmOK2Wu9IdcwtebAGNKn0bCTsQifm5TwnnRZyIM78T\n5C3j3QpHyLZ70xnLmfcMqvpuOOe/ZzhzzBOw8+thH6cV/h+ZOg/pLj5rxY7Z\n+mij85cL30ML7W8vXCwjlDWnTQBGgy//JX5bYShatNx20RRYlWUiYGPicKHX\nL0Cs0h4YXAJHL75vTTmgIWb44uTAVSU75+7lTsmdvvAg+jnGTi8TdgjkUGdA\nmoP1mk3kAC+v7eGPK4pCpLFl18iFmEKC3lQcG5T+2Z+CZSr04b/s/yMYQ7IL\ncp1aA5TwwXeWgcTUZYKxPwcSORYB1UakN4n4ponJt6OlPrxyYRl2Vw8KHiIJ\nQ4st\r\n=otR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/list":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/menu-surface":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.8c11ea2a3.0_1581497540660_0.7200857661263855","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/menu","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24aa49c4e989c8b688416859f129d9ffb4a7aa9f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.b2f3d311e.0.tgz","fileCount":37,"integrity":"sha512-KDdJxvFeMqgm6ImMkA+6ekjXgJVPkcSd9OAqR1N9FLL8VBbBoMpi4gdkvIwzIARnlr7L1jFxvwwj5oPh7kqtXg==","signatures":[{"sig":"MEUCIQDZEqn/7lSS2K2BamyEXCXa2DJIpaQpQs8bSCz2tH1xxQIgEGtWDvWZFZn4RO82eJDP0yYzc3p04tbHSdeNOkl82Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcNYCRA9TVsSAnZWagAAKn8P/0yf/esau2a2TrrDktaG\nzni/FTBR2SsT4sU+fNipN47VCWVJVw7O665vzJh6QdSV8pQYU8jf79Ej5j9A\nOBwTA7SPu5p5kXgMcbgDj+7g4OUY8e8+bfqPeJolvDzSnFzxdIzSShpkFMca\nej6VaJ5ff6MX61VlwlCbuZVP4dVCYkAAJPgFZF0G0eZHuvB//LJ5GG1Pmknc\nPoqZwCxXeqTx7cuOBnLlX+n2xkDMUzBP5rqYeoYdqb8uyzHeTL4xmaN8CXBi\nWeEV5g1VRfGZoL8oGC+tOu7gXUBMgd7K2AAFNI/RG6U6P4B3Gl/dKdhdfhRO\nVtmo+x86klJskNuz1ElhzgdC5+1cvwv55aH6n5PWr6342IpsMlJ33RV2kCPr\nRKOY8Ue5P5PtglC3F4qaILzrxnEdUG9nJFxbjSSM0ZR9TBTfajoySeXSevJX\ngdkE+CMuqunNBlS4WIBjfgOQJFETnqDp4naXI7ECW1Bak9haTotYdEGgoSAy\nTcIxOcdu/ej4FdfuZQ0bZ0OvK8KU1QbI1A6c4QsAbK7lC45suy6Q5DEWh6y3\nd4lDJ2uAQ58MNRbQRdY9Vtdy02OUwkezvG5QyLABSoxwSdrkKRKPWmHl5jYY\nAr6zxdc1kU97oVX2v4y3gny6e394O69YHpecu9a1+VwgNf4xuyGB1OSGoxan\nTosY\r\n=UmoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/list":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/menu-surface":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.b2f3d311e.0_1581630296463_0.7122759574821393","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/menu","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c5f0d947aff234db23d7c4c33e7e1d48567be8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0-canary.4f488d0ee.0.tgz","fileCount":37,"integrity":"sha512-AxjRBGc/HFaW3hAhfgWfuuYACqoKULOxKPtN0DF/teRanLfi6G2HyxIi+xAc/x7Q7M4biD0qgSezkouETyoyVg==","signatures":[{"sig":"MEYCIQDwTosA2ALBiUY1ktH/QnEsd816DsOA5lg6i5qdg44jogIhAJDJvmzxmEkjwPF44Dksg0hg58k0t+0WqspGQwC3cyEK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaYCRA9TVsSAnZWagAAt7AQAJev/IneUYr1ycER+KmM\nK4+bHL18ccEHwNtRMYeKe3DvokOB073i9S8AxV1qpQtgtGFygwuhBN3eWRJ0\n5psLnN2to24x+/7hri8BVGd9L9xuYCGvzyUPyXz0SewzsPsI1CzhUI7ysZ7n\nETqThQ0KBUvRkhtyKOdzh8pb9pm5hGa2gWDq/0Z8TK1sFyxSLyJkyaUymaZh\nKZxxC2bcpwnf6tnmDXRpE4Hl2leMgdGLybLIGwlsjSf6PRIb4aH3vpgjveMe\nmbF6Otngb0t6Bmv0/AHy+VqSsOZVYWa9xKeupqwTMXKhQhpVEsl7owj705gk\nxpElaDolJhDK/CSWZmb3JROSjwSbFkij8seTt7BwN4p0fXFUZfECTXuRvp3n\nFuSLFoaRzZrujOG9pzmTcvX260M3FAvAArM7DyXdLy2LDloisTry7fGwAEls\njozTSI4XEdLMgbOzULwgeTinPpbjseRaoVbeXHKmJ2SFGhx7ZlR2N7vVOSQZ\nwsuVc5x5mhloBboYGSyOcTtir/LzAUpxBqbjYRTd7sPihgDWonMJ+ccgEbCT\n8W4TSWQd79pEi3mWCs2AqqDWd3ovkWw1EdL4KMl4Uxx90K33HCLAgtfVOjL1\nUvM5Wuj8WXoUHYZJwZIJ0oFl0xhwLLQKL8mB4NKDTqz7N3qGrUmstQ3UNVJn\nZceY\r\n=1jv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/list":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/menu-surface":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0-canary.4f488d0ee.0_1581635223791_0.41714890002099314","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/menu","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac03322507396d70cee5429890fe7ebb5430ab5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.fe79de07d.0.tgz","fileCount":37,"integrity":"sha512-kje58g8cwMk8EJApHBuzRtpyF2MmL7hjlrsKcXcs+4ciQCYXg4iW7DpPkRs9TXg0jyhwnZCjFp4xL87ll72JXA==","signatures":[{"sig":"MEUCIFOS89K1fbC+PB9MGRu+A+DWNBrLYr7ee6e8S4Qa2k+yAiEAmHDf90XPv7HrTWm0gZ9p+zC+45gPr4d6rtQJ0qFOe3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqvCRA9TVsSAnZWagAAqOsP/ilZRYpGHysQy9LP1wvR\ny/jR5bkTJOqwUjSLiPbkIe2OB3iX7duGiY29PBfKM3vR4tuZ0Yiq/XS90gtS\n/uYB4y3y5RY7UdKB6twCddHfSPaRwDt3JoKuWk9DDvoMrWrKwwTy7mMj8ay4\nRNGeAMxWrXm3JSh+Iy8qeR3LClIRS46a3+uMegB29c/lyt5dvcwcZmhdXI8K\njAE3zEiDP+G1hGrek2hHUKEAqsuDqH8bGr5q7q0bAxmIe4A0yPLLmixg40gA\nasOSa7yGtdu6HnHVbTK8As87/MaDKsvw6kvZc6P3zDqVdhYhx7K5k0qby+nl\njzlCQeR8g47bA4/+TLJ5KzqlVcxVP1ar2gc+GCaeS+sGHCA6F9wv0ikP1Ra7\n3o7iQenvhHcvHgI7q5Ldnk6IYbiIdCh6ZfVsjR26puljjtsavdEXrFAVsJG3\n9wXl8sNhftyO2i2oAR9zMPWqmORy5LwvruUI1lsKTSdkPOk3NOT48iUpO7vO\nj9ePdNHH+nRH6cdEyM6s4LRmEXcN0bRNKt0tx3qesXgcAkkvkkD6FcdTdHr5\nK0ZB9IMMfUXATfmU3Wg9zoVztuiyEcXhVBP1IvmpKyN6AJqBCuH/eg9tGr5J\nvFl6CV1uQI3bRV46JkOyoGqr988pgyodwACTI0LV5ChAX7lcENXoXGo2ngcR\neXxi\r\n=C79M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/list":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/menu-surface":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.fe79de07d.0_1581636270605_0.498917753134255","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/menu","version":"5.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"228806891cded8000a69856e591ab6fd59497abc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.0.0.tgz","fileCount":36,"integrity":"sha512-6P9Pw8VY3753AmoX74cx04XIldD04MD1dUO9LQd5uTSw1y7SxcF71Ajmo9iedZiJA4VglYhqror2HTOwYq4fIg==","signatures":[{"sig":"MEYCIQCGWAdGaR4nX0j+b/LJwwzZ5AswCrD3AGBcBm32iyQxWwIhAPZWxOQP5XDRWd6I8WyTdvFh/Jjh8sK4hFKIYz7eU5zu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReVECRA9TVsSAnZWagAANJAQAJp6Jve3KtD53ky7u6Xj\nxeag46mwdViAw2KjO1QPksnnj1t5mkDFNXrClQ3pOxzK/SSePe7uB3/tRpgU\nVz6KDM+61dgQJ/wRpZuFfAUffhHBnTNDle8SOagnGcP2WoK+b33qfGzSeWhV\nhCQ7apV88Lkhl009zH1dEfaTZRYGVK2zXSlVCeVyDnJRc8PaekAPE/TkDSZu\nS1GtjgOlmb8fvZiNQhBovRg9nKo45jWsbj2eHB/KC4R0h1pL/CqCrRqKsdI0\nOXGKFGrhjNU4IFuKZErRd619djRIpaynKS6UkvftHPXiASkdOk1sRCgYMYH0\nuL196SATluSsbgIhPdPissUXQI818r/KfskhPBidzZ7z2gCcyDfa9wXPsPis\n6///24pP2UCsfXmZa1OhsH7kaCxfVAcq1eq6xwm+XdZ+2dVA0qB4YRHPNZe8\nRIF4pPqrz5beV648lGJhSMBJ2VR24P6RLbEBC+OvSbAc6zYbBAAIBtmxyvZC\n5PC62XB2fTOaaB+imQZCRIOVmIw4BkU3TPO7n5HtWjA2IIr7XgJ165Lz1ok0\nnG5ohgmxeXWIGYptSeL7gj4pyvB05WEhyIdacsjBN5MOng1yIu/D8ygyeAds\n9K4x2NQ4XUmbTtZg7iC7DiErhgMXDaKiUIhpFmvZ4GaWnsIEm+45EYelHkIh\nO9O4\r\n=Xfin\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/list":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/elevation":"^5.0.0","@material/menu-surface":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_5.0.0_1581638979620_0.9582251668705777","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/menu","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f81b1c9c654bd047d5254f192b9033d12c0e7899","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.5e313b1f2.0.tgz","fileCount":37,"integrity":"sha512-Dec6dmbokJdIaR4kA3554t1nW7764K8+V1JcZdWLYcscxwTBEEp2p8fWm4iZ5m87cUAomFUw7ut22vW5NCu9mQ==","signatures":[{"sig":"MEUCIB4Z0G+7d18mngVlotXCr4r11an+OMrDm5oWKvMOe8QhAiEA16nN8336YAeA4rELEZhsGkE6tTC+IKaLLA17CzBUm4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHuCRA9TVsSAnZWagAAQxYP/3WxGsoI6MOyFhkuCdBx\n7INpAdnkr2g5dYAT1XcZunkigPZ1yw4HgtPjGg0QvqPRReotdy4cdM5WvESV\nJvpM3LH9AyzBt4iIN4Et2QZwxRv5v3/lavrHLx/C6dWcVAwMRn81KJPZLB5y\n6gzVtQYfPYBE9bmK+kgbzOaysTokXpa46Xa9AQS3A9Yd4GM6BYPDGpV04aiW\nXuzGEh/5uHn41KoR4aeWQ5rG5VtIhNw57wyD7qu499PaLyqwon1lNiBLKbKz\nyI/wb2HY9dhHsYm7ZQ6tT3Z9buV3HukA7UN9BQjP6ZhMXEfim5El9bIdt6j2\nmtpzM57p6qeEDwb3jP2pQfo4siO1Uk7tJc69zGTq7oLrhVfzv68gw0NUtpB4\nZpKjO2Loi/Syc97ZNiF9xOkwgcmZNAl6Fao5QGZ4XhuRfLKRlTkD82wSGs+v\nJBenjxq/ED8aUChGP4CF6vsmCzx05HsEUHR3veuaQP7rKEWTbeYi2GybTOAa\nEpYIT0iS55WpgT/U8Ti0v9NCCYFeGqCKNTu8EMDTJyCSmAIFQ0JjJbAYENV/\nyBIUQrlrQ1aw1X5npwZjnr8MEspOdCHvw5N5GDxmuj5ZXqKg2IDnAN3h+QVT\ngtYiiMq+qCcWQ9z7dDDbOi5b6Kv7Jbhplf2vfTt3U4pwbBOimQeEd8G+R03H\n7xdY\r\n=X9QT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/list":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/menu-surface":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.5e313b1f2.0_1581724142518_0.5568404357225407","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/menu","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd95c7bdebc5a951ce261e93937d5c58fd0ecbf4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6a56f387c.0.tgz","fileCount":37,"integrity":"sha512-q3yyFqc3zOZQZF8RihDYhk6rtVt1otAc5/6oMJ32jDoiLsbJLm7LKDWbVaD6tfk+I3XxWMm6fLe1tZ5R+AtGCw==","signatures":[{"sig":"MEQCIH7iLHc8QJ6f8LmWPDmviGhW68wn4u6dIA+XynEzxn4VAiB/ipnrx1EE6cJvSOCjl+1P05VCa7CnGgzjxAPRBnGN4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6kCRA9TVsSAnZWagAAlZcP/i4STFqt2wIZyqmFESFr\n40zU20xiSDapQDC/O/n+djaWWp7LbIoZE8dsaMXkk2iYkFBI22pXvKZIIHpA\nrhRnFaI8USa0lOCByMQHj7jICzUvWkgsiDvOk6R/pwdpYJgp0FRB5Pclu1ND\nvqmW8+zg5Pg/bLeuS89CPnRnrYqdI9pEFVJ8PTjNeXcGXCGPQ5Z0McbMFXgn\nd3oakvFHH5kWrlHD0QMIMKzdUhIsTNpo913gPiSWCImbWDmWyLcgfA/MYMUO\nOWgZF/7p4zRnWfqQht2hlwBZmBfQS+b37oAdpM93KJr8LbHOgezA88iTk7IN\n1/SgNOi9baZFM+weKMKd+a4bY3JUghui9AlHER8ZwdEsXgzhBLUsKWgVQHGL\n+Tt5v2K5j880TH7ZrivdZr/w32FQDSnBOabL7lkW4D8iVDRoUyJa0gm9XRTw\nTGyaUEPHRpRxnIqHtag8A1odUMPYdhYR5A49l+L5+8sFBeVJi34K8J60RZn8\nKFlbME3LIP+fNS9nqB9CzJzQNGB190i83MF/EwUeucVNAdSw969Nz6XLztUE\nd/SdrcMizGnHrnR1skSvnbLeg9WmylaDNXbxTqkTmOyF4Y8oA9b7kJ1wuHwp\nuGn6zs2tIzL9+xtibmaGvAuNXzvGMAlCFiFV+v5UF3JYgXh+S9vV4S3JRwLR\n33sp\r\n=eBR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/list":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/menu-surface":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6a56f387c.0_1582055075932_0.448825344076055","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/menu","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e9635cafae9fcc4538c46f1787e7962c52a780","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.bdfd52632.0.tgz","fileCount":37,"integrity":"sha512-Oo+Nqka9xuY8NhFqsvnrYfvE8xzVdsBjjdreUjy7FG0nP1QItQ4h/x6gmgzrKp+RHeLhOr1Wac+oGsE+mlCmnw==","signatures":[{"sig":"MEQCICxjulaBbRhS9pL708r8gHlw0QKI4l8srLbH9ho4K2TeAiB6rHk2pOrq1l2yfijf2dNklqfr3KEPXRKldJ4KTvKExQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZlACRA9TVsSAnZWagAA/w8QAIzmH2+NQntoJAnDLOjR\nXkwBOoFWD7NvPAWTrKsAJK49ctBBg76UQEBe08dquuAA/dXCS4/fQwLEHhb1\n3uYM044px7J9ABuVwrtNzXUXi88RsjSm8s0j3vjzk4y9kGdY4kO9oMVY0vBD\nFZlHptQYMCs3fb1h0lbCCAxdOSLFrIbbtm4/idQIsAuSV+osyoGOOxiZJxcp\n5/MY+B8xF/wj4c32EcLQGY/U4XuMIvloAUOWJk0ZopBhBtiBqShkRuIKTbkO\n+cXCEFQAq/ar3m2FD9cBD0qh4reDIPidlfdOCIJ6oNXatD2Sl0JZoRgvCsep\n++X3ViHhUMSiiNSp+SPvMP+sfYMPXWQAyPWTp0QXgLb1XTeviy/fuYiF+cDz\nvzDzotoHFqVP1JN4OXC/mtx0lXW6b0g+5QnZo2jw18pxEzMqziApPBwhPUY6\n8AHariJ3Y/rga3XdI2wVu1PeSwvkyXfTxl0cHaBbLyuJFwT6ZqwUwWpHx7xw\neS+qC0h2PPJdkf6kMM4sppdiHaYoPAmWGTc5ImcsiD1FOhcTW8/L6Jgf4ghe\nMxEVu/U1gMXrFOVlYQ6xRLFzMor+PpqAOxFiq0b3acG1YRVXMVBdxlazPwjC\njYZFTccJ2ui0E9j9geSQK3Z3PfTfuCBij5Yfdb9tB4BLpcMEDHE+SkMUvSoe\n7Km+\r\n=byKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/list":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/menu-surface":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.bdfd52632.0_1582143807765_0.846379642990321","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/menu","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357800cea4b9c77939a9beceb200abcca83da420","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.ad2e4376a.0.tgz","fileCount":37,"integrity":"sha512-yHG08XbR5/bZRaBL6p80a2o53DuGDm6GbTULCE1Eq5pXYTmFMTHg8Nt/ByUoZ9XwxhnbfsBgUyFWCHIHNwno/A==","signatures":[{"sig":"MEUCIGMeUgoSwheLJUDD6Rs43pf/52C/he6DOxOy1UWVPyDoAiEAjJnPWAz262d9U7yLLLU8vDxH+p13xjD69v+2sLkvZFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNpCRA9TVsSAnZWagAAi2sP/jhxc/MOpgny+id+C0oI\nB0qRlQXIAYGvEfbHOGFUirpliAA3w6r5NvS1TTC7Nt9h781XT6qqOdRn9lm9\nsbhhVwpx9aL508LIXItbM6ngp/oRUtG41XZUFZhncF894w25aN/tQJPrv/7f\nDndYUGCx55r9n3WTrKpG4stS/Ip0wVxOVD+SwlK2qinwsXWn7LYp59ZKyNEN\nAvVjxw7MlvphPdkCyuPGYML9qpeTfUQ6TceEDgnPrCKQYB4UN2CGHrGIZJVQ\nQkdqTxIxka4HZe+2kRSsGD+gdIwq0F0ZshRwj+T11wgRLIDNaV8HG5lX5h1S\niJQDFu7oy2er6Jkc618hp8cWbqgSmmCjRSqETqDjHbVjN948eKI+v8HcCvi1\n2JC6qAwUXjYq1OnB3IaZ80qtQ5RHTlq3Rul4BMiwjcpUbaPuEZkNwDof27Vg\nlNLNCaQZ+LxNjhmsLiA89j6BleXCCKSlAAjUH1+Jczd/bpQkbh/B0bpxy5ga\nARjOFfKcFW+64cVBKkv+z4p8bT7EtT7dan0Paq8YBFw/qVkbQvzlaN+UDZ0n\nfjN/HV37oXcJ3HmqK+obIrrXQC/tl0H8lhQKACY7F81YX97x+PETQOZoRoW1\nKFT4VMi3lSXyt3oMy8A/0XpMNEAWE64uZao46spiyxMjbuqdqu3bmIoGfFgb\nR5RA\r\n=bplb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/list":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/menu-surface":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.ad2e4376a.0_1582240617157_0.8646498061918739","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/menu","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f79815c3d4abca50f020d67326e1e20ec530ed1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.765caef18.0.tgz","fileCount":37,"integrity":"sha512-hFOe+VNokdklS79HL+b+9QVZjgVhwaIS4dS7FjN6ZitarrtLWKDHRdzER7PWzkcKwbpQ76+plAi2vjVNFCnjrA==","signatures":[{"sig":"MEYCIQDrcrZk3q78Aq8ZT6hMhYx9FKZTfhhLzmIMlQhvURfGdAIhAO3FQ+N5ApFXzR9m2+u8BRpknwgRTxkqp5VOocjQ9r7z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBSDCRA9TVsSAnZWagAAMywQAInGZVKYMAnOpQeXEOVD\ntZIYe/ehwl+RUJtwoAZFwOcAjZNO2Z9hTZ3X2Ob0EHUqkf4rUBoKQsG5hci9\n2JV1gn85/vud+xC/TeYn9vSl0+Z/FBHgy3GaA3cNC+WRaTFeaFq2ShpWauya\ng7w9bZaWMuEoimjGDsgpYossMd+KLHa/g2jeL7ORCHXN4cIgngSas7brzVtr\nXLtj15zExpfyf8mnwkaLLKUsKEMXCbQUYpm3kUkhmlYyrcwjRsWD9UHd+HU9\nfmVQruddMrKtZMgpvtCaHPpbv5xVWVabXD7Rq3dUY/ixKj0y1Q39OUd2zXBe\nvWbT9LGOu+hTmTSckfe2X28TaSEnLv2+mUgf+cVIXyY+VyypxvGcMUFae3Q3\nnpHkQyQlxwLFGfMOg4r5RsaI+boGkmPth/31TaIN2N87W0RY0pYZNIEFaOR9\n/3bDF1ycU+YMpaF8SJRwRGxPbuhKWgTGr4LKBisbAkMBuOGZWOXV7gWgOdHJ\nSYbnB2LsajiRYk/iKD8KdV9kD0v3ZDoiGyqIbs5hqdmCFaV1LpMNpgznFylD\nJ2RWBCvI668qM7x8PpNBOrGFnXP3qnIakTuvDnvcExFxNl7QLdUBEkTJDFCT\nxRhQShkJLkW3RFuXnLRDpzAh1aFes5TMhEKycz79BJrUlFqhQblvDg4dGQDs\n0IfV\r\n=Na9T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/list":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/menu-surface":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.765caef18.0_1582306434854_0.45434684923702906","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/menu","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d45ade931383fc921703d6f4da5640c750a29247","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.949562303.0.tgz","fileCount":37,"integrity":"sha512-ATeuPsJWFygBmMw5kW0zALkHg1o5iW/vLREXMnO963vUvTTqLt7TO0M+1rGK18ibt/z7K00ZEe7E3WCBrAxXoQ==","signatures":[{"sig":"MEUCIFUZstKATiHsYwn2BVqkpUP+0cDXfVrdLu7W9jkrNgVlAiEAiVsGTQW19VWiY9s/C+XlxmcvWqs05UnzGxPPYWwdNZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/PCRA9TVsSAnZWagAAEq8QAIAXA6vNHK2IEe8n7L91\nKxcWiqeamEidOPWZxnrgFl9Eolxj75YdP+2SIlq4+qgQEEU1CFrELZsewGvx\n6Byws55Ey6yYPTc2WHpkzHtwqxx2DAxVfcQYh66X5QTjc0O6L4levqq6bgB9\nolHlsk6KyJfuTwi1QanlWqq0xloIO8kTvk1JQJ1nL+7PjKaDkq9ahNUAGu5z\n5EzR4yY12ikbjDPcRUSUCTh0epEvU+f5YWIvAaBx8jhVTvMbWFzX/pzHKO8M\nEwXgfOCKAk1M7bmTtyNo//48DUJ/DmGRGTcJkJOyK9DPfmRFKVjsHxagADv8\nOFMYxZkI+OHoJweMdthccRvYbARQjI6+xsrZfNfwYKtk5c5j7SU2qfGSPgtw\nNRcj92stx3bwQcIekzTnbWVUUYhqqkh91Mu2dkQMd+ee9K2qdKvTs41B+nTt\nVm7z2tYiNX22s+rpyXRb4vCU6xPW00wHjHi3fPwM2yj3VP94r2InzA1b7ufI\nEbvDAfFffENbuSfyixi2Da/YfVcjh2yO3QUgM6Evbb8fIel4Ww+HCy8Q95P2\nxEIfzVklN50cW9PYDKtzAUKpAL/zeLMQ08eaGOogpeDdfMGzJtZs4bVpOhtL\nUIPeaS3FoKXFzmBrHEa/FGoN4iMW0/fcsbuBqFPY0LPXFoaxdsYccW6LgjOw\ntmkl\r\n=/Pej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/list":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/menu-surface":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.949562303.0_1582317518618_0.8019719557422933","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/menu","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f9947d99e8b15e829054fd50a45b8f849c53c82","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.7ec96974e.0.tgz","fileCount":37,"integrity":"sha512-Dd9R6KVUX1p5oZ+SZ1E9MTgQ/a5Ni74QzMGRrMjsbuFHqCHD1Fe+vdTa40HS183NRukx+ePuALRfx+SFK1RuXQ==","signatures":[{"sig":"MEQCIFzbL5/L9PQZgNC4MyO+stWALJAEUtWlyXbmDbQEW9BWAiBVMW5Tm1UEBNN5znQgNhGGqDw3f7l3vc+pZOun64b2sA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzsCRA9TVsSAnZWagAAPIIP/ibUVc6U2YZJOO1txHqy\nvmd0AHi2gTM2KLf+QUzWVZ5d9oUNhyiF+QxgbGQfuBmSu1AcL1nHHqd21HiJ\nSvukoUdnSPj8kC2r5mYDDgQ8wBi+SBxCWykI1lJy9NzGjfboI1MXtBznuanx\nylzKG1p73HXwlUbrW/6GzLauoPgf3X5puMwBukkts6I//qygzQfk/tBcxUJ8\nJSdb+MVAk2MNn5vYQjLgFkoLhMhb1xP7w5bdT+8i+N9V0m3KPlT8o3uENOWL\nZuwY53YS2pbbTkftMsvrS5gaDKILf/GEMuXyannAJYyaBNHp73oj1tP4Suwv\nE5960QDC8kUVyw05qPSkpNm+x9i+7IwpsyLhL3WrY6LF6VfZee3TgnsjRCl/\nfPnMDlOd4F7abZkyOH3z4/785b8GDPT7AkN3VSGjfVhN/cWkMJydNZ0VTKhu\n9uRr/BXTNsmkehQce28F3M7rYsB/ylrFo5CY4JhvRcAhTnk/p6Mg0XK+17Qv\nP+KVxB0E/HYx8EIckw3GlHd8UCQK+kcGu528gN0bhA5zvZPfyfuXGUQjNy/R\nmYFrcTDmYw5cpMNBmIPXEp8XLj+u+n2xIMyt26dfKoBJo8/rEL/NomoSd5vX\nYZh4058zaVQACtkV24arzVWYWH90qSdi8BTlj7kKDvRuKmH8rw27cvSZTLyT\nSEto\r\n=9y0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/list":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/menu-surface":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.7ec96974e.0_1582570732111_0.7951409693550398","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/menu","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6546bcf05340fb87f3105cec059e5a6f4733f8d9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.265ecbad5.0.tgz","fileCount":37,"integrity":"sha512-rZi0oJ2tutafyRgx/AqqfDOIQ9flnqFN853wXfYk7wHZV/tRjOyV1lMUGeg/HlkcmMZFYYyhccQDunXKrkMJ1A==","signatures":[{"sig":"MEQCIDUqLO8dZv0rdHMYhd7GqZ5h/BoEl6hy2RKMOu9LGaBAAiAaGqSq4flK0ZeNnnjDNGFTCmP02ewdZxT7NdQKnH0nLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYstCRA9TVsSAnZWagAAv6QQAI8QMJq8UACRYALyBzDS\n9w5lxEJk6U6ZTY3czwL/HGfwwlzplVIY9g+RVZ2DZsTFYwxMzylvJDo/M7WF\nOgQNCnpUrtXT5aFg79L79EyyS1Se21X5WbLGB4m6PAt4dX14oOwM5qlIODFQ\nFi4B8tcD5Gu8pLoUQtYy0jgNskdUhtXm8tM1dkcLbMglS3KqLXmirhEvZ0dy\nY2ARlrMejkKdCc0gGCqWuE4ITv9p6GweznFhmCky172xWVx3BsCexsB3SMpL\nTWBf86O8jKJV+ybvH7IUt1UJCl0AQnwGbKr90B3i/y1nxXTgtCQKznEv6sqc\nOe00EjedV59lc++0xiIjy2yKZhTariJp6Hrj4awOAU2oFadDkCYqavXZUBVU\nHVgvfFC01xN5S2GJ8xNnTjqeTKAPJdK/OsJYQT4D0KrUo9HzdKOD47ShyRFu\nlisScGKDV+Ud8DVzB3BUyX3LwDaIwBw/PJt/I+jChvYAXyFhflqDc5TldFQv\nd+DrGIEQZwk8OlHkQSgfWddYpPz3wwK7NdGqaFlyFvartQgfSXot9LZzRUps\nvqp3RDum91t25iomo/1XOpzST7nC7XTzevtYSChpndPYF3HPLmKw+g/yGTyq\nc5oocGhe0KvBw1lVcNPoNOFyFWwFxn2jXmLcqdowuZie1ZAEx7xEIPQj8bRZ\nbKdM\r\n=xFYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/list":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/menu-surface":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.265ecbad5.0_1582664493478_0.19293800064936217","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/menu","version":"5.1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28794c1be742a227e1e20f3bdddc896178890ebe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-5.1.0.tgz","fileCount":36,"integrity":"sha512-ssJNcbdyLewgL7hnj4C7JeXO3GvV4G2i1//Ych2s+au7AcJ/6/YeTTKhiCkoSpS7pb7axB3dMKwQWor2glec5Q==","signatures":[{"sig":"MEYCIQDUJIBGDfKFL5QLSp5VJv2lVQdhthujFh7qbiUhYSZsxgIhAMZiFHd98W9bVkRPVAUWfPixZTmTwbmrky8p8umrXrpW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPyCRA9TVsSAnZWagAAFyAP+we2oTpN3K90LPJFgRhg\nTMkbrHAhJIndi9co8gnrtI0/SwR1SoNuAtPQyLVaXsSW028caN78WV4KJnWu\nN+pNEC6FdVTrj+w7YfGyKiGwVL07Zz3xxKkpyf+SH0C2GrLfLYBjW+1VuP5G\nML1VC/4nIdCtAv67oq7ouNfUyf3s2PsTMCxa76lxU+46fUMFE4T0Vn8o7YKD\nmQU1UJoCl8eHUE1/U4VMhwVcC8atrqiFdOnSXhsFqTjYdLlheyFFn8UekSlL\nlTeiDIMjh8ql02ExFuHwxDB6AUshUz56NpjOIvQO8oMEDthONmZR2t6gEIof\nlhui6aypPzJi721aLzh2Jbpe+x+n0pDr1Gt5KGZ4UcL4BzIYqg2Eoz02Y6Vm\nVqBhkBQOAt3J9FZHS1sIP4CX00tlereEgvOwOgrsBKBmN+QBv3eZIbBKERLD\nRODcd6sbDtBi+rFsNpIU0Mw1G+SLQRJvTovIGEh872gkOLY47rmZsF8an33M\n1w1rciqdWpbvVFZ5X9Ho7q3g/NNi23iNs4AprMoL29pgpGn0IT38czC+9ck6\nKo8I9+iYv1JX8JvL0YvsRq38UelKJwQHrm183yx4H1M2OfwaXpcCHplCiqAB\n15gLZ6ES+CBFBhTRM/qFeBFFwDcWc57o2/VhMMmaq6+4/rEpXP9Moa2XzYGB\nKKUB\r\n=gU0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/list":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/elevation":"^5.1.0","@material/menu-surface":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_5.1.0_1582666737230_0.8471624173874668","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/menu","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc8bbd1a762a81d35daa83e3d59181494a837da1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.2cf87456f.0.tgz","fileCount":37,"integrity":"sha512-FvF9K/mbx/jw67cr2EJvHPckU2tJybWekuy+BLMe/rzRvHc0Oq8IzO22w0IsRFj1w6Eumv7lSUEIab8+5gBfQg==","signatures":[{"sig":"MEYCIQCgVREideP/f7wuRj0eH+Gd2+CL9QfndIdUdr+uQrvX7gIhAKzfhJSrtq5sUvlV7ctv0YsynLB+RCqdTFoV6QZpLpEz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZQXCRA9TVsSAnZWagAAa50P/3TEEOAGEY7hRYPoPA2L\nAHpu9cqlkXF0Z/1/qVb05UG5YMpIlWwBr0RxYDeTeyXy33VGtQIolS230WmX\nti8w/68cS66OIH4C15MCGRmvkWeLBiIkppR6DFEmCX1D8zySLi++NYcZAZ8d\nZPPxoIAozGQXKIeIxH3B8zqDSabOFIbgEMNW/QhjaZdujAzqigtQ8NZbPNw0\nbXRag7S7R/9vBhp4O51/AVXuqT2SNrBS1RlZ10m46UXsqKLOHJiSd1jczHTR\nIYlTtJWhJ0XgdauzYT1OEv48hKr6GP5m2X9/d3xqmj2YN/AqbQUls+HtD1jL\npeBu4WSkIi2/muOEzytupONGMtkCx0WCZi23wnYObcxYscIkPmfUy9Bu4RgZ\n6jwR7I3H1YG/6zXMuRMfL+/o8cBfekubbHdU+3hAc/25lb+hmLV4fTzRkC+8\nuC6e1NpNEeEPxntckddgm63qpg3vKshVCeIkXfD7qiGmVbz+Nmpazr16ihTS\nhKsTWTeeVaLJFeT/31fM1ZLc12rcoDrFTt4gF73TZwtQQxNe0p2NcyROKD8G\nMM4/GKsPwA393VLqp/cwhKjfnAvIuOOenCeMrLIAmxYwq3NOY5SyrTAGX/az\nNLT3VK7t3f1d9VVo18KjqQ8dfdD1dgoorkotbqXyNrxCiTpUPFeKaE6WpjOQ\npbpB\r\n=sa4V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/list":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/menu-surface":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.2cf87456f.0_1582666775558_0.3569427653865409","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/menu","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1c67d3e9fda48a60a84fdb85b5df10191a78ffc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.781434a92.0.tgz","fileCount":37,"integrity":"sha512-d7xJpExz5Sfw8vsiQ79TMRBs+ci4Iq7gjNv8lvXF1Ee4ao3YLKvScish2aUADq1JqhzhFKEiK8txX9DdaQXogw==","signatures":[{"sig":"MEUCIFW/Z5hYBh2V0bU9VXaCRsNic8D6A8FqSy3Mb4WGJLXpAiEA30xcVkL8E8vt5bHrbCQmDgjVqf6XHGZjfQ0frbJXuGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2xCRA9TVsSAnZWagAA188P/Rcvrl6K9yaaoD+kHr7V\ntLHCh+gQjxOuoyRbF37IQLLlSRNErMQ5EPA0audH5+9MzQ5UnpvcNEusV8Tm\nD8OLNiStIY+TRxJsjwig4IsvbuMy44Fnv5qsYOaeAY24lXd9XgMeglwFL2G6\nw8jOuEjtXKEci275+GX015SDfXlnXB1jWxMnlVq3xFvGois35B8kCDeG4iaS\n1mf54DFihc7kMS7Q+c5gbvqvBE5CE0OFYxLD6wKsLp3rvgYoelSvZkTLhcum\nkgAIekx66Rkd1sWdpxdAOOWkuHyOBh6vPhE3OvW5WBtse7rER4v6y0NEdkye\n/M+llPYlJ2vSZ6hozO4HLfFxs4qKwamZQlG2K59ZrIsNyMB+LVnozHHprVz3\nygbw5e1CWjRYBZn/+FE3l3d928mbMJjemTwlqgA39bzPvrLQv9DSea3bYSIE\n9qp5eVHQNor3kMA/+Y4wHFWHgxdeQ8HG6CPHyE6on9ZSSD98YxrxMTL/unPg\neDTGVBTU+oHq0zvDzFjRM8quNU20emINi5xQWRs/w7EL0aHschH60xcSTZqv\nRDDDKrEUGkgB122wbGpo7w7qq8grGTNQpyj2HTdGpaIhYnUSDQRZsW1AUwLz\npmqL6Qhfimgl4y4X10tzGwGuXPEI4ifmJjfoibfgDTZm7P3i1Wmz+AWqlW/1\n3yNx\r\n=BOdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/list":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/menu-surface":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.781434a92.0_1582673328872_0.5129889082042809","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/menu","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc13b7f4e1f746ae430f573dfdbd9ada801c1ec4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.d6f60c98b.0.tgz","fileCount":37,"integrity":"sha512-LkEDWdbOmamgCzFYM4/NyK8ZBcKynFvXcTUq02m+5bMZY31CI8UBAhh3PlUnPFMixnPHhilFz8vn1NqGcRSz5w==","signatures":[{"sig":"MEQCIDjrFw5VTYXudcY6w7E1E7XjVKGV9GC8OgvxVIhcfNUsAiBYI+L5caez8OYYKmuZmXe/tqMOl2ZKc7jjkia3TJIeKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY6HCRA9TVsSAnZWagAAwWEP/0qyZCLrY8tWX/NJ74Gv\nNjc6nsP34Eb38/rfwHes3KSmktEyq9VwK1dRsMUs07zyXt2CsvlUV1+KR0CR\ncBgBFtH6Q+9I0j3Zp4Dlegq3HkU9yxODUViYMSJWLqKnRoEZcHVEBA94ZOkZ\nEJWfbxm8mOcX04u4eBWvYtva8fMas5jmvB+23y3IdyouMqy0sPjyhW7Klb6m\n8POdpfKwACuCOghiMOKZ+iuJi7CDUU3sNvc5Mk48azAX4aMfStMTReWlBCOm\nKMFUm43FBOAt56GFpnyvkXCKg6xGLNXSdSSpgfge7RDry40qsTO6mHv7+mEj\nwFsswnAIAHKtFum1ogb8J0RIp74fsl2LppKWASPzamdonSK2Dbm/D+LYHKMj\nBaAZS503hCshh8WtRbm10qkLd1A/yHl0Vitvbn9N3zJWjq3+QdkSy7fqAVHl\n5bQnqVS6pV2CdI1OMlCitp4pHQI3lrfmotTEY5zJQXPu9YtVlEIfsBXrgxLw\nPxHAPeAMB/h4DK8DqZBXvnZ+RWCpaqVbHQrLXzdZrcx2B0pwvmeCtCzX0e/9\n3WWj4vJZSnsixLvRp09M4caXwXaIkZrh5plN6HShOkUNPUOHy29dkemt9Niq\nPE0mk5fQnNt5ho+aLU3yjjwx0v4qsacyK3wyVhW9PtN9dnIfLyVcM08MC0DV\nnUxt\r\n=fAnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/list":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/menu-surface":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.d6f60c98b.0_1582927494793_0.5245288985413512","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/menu","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45befd726da8cc763ba92b456fe5a381b73b222d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.69edc6e28.0.tgz","fileCount":37,"integrity":"sha512-OnBa/J9sgbZTvFkVxXs1RINHJBGb9Tv5VFcuRQ14XtTrwooxbM/fhsXVRLSjBRf0BamQNi2Cml3KMGpg11Rhew==","signatures":[{"sig":"MEUCIBu1IJV2LSz9Eu46+/qtjhfSByuyzMImztslZ+Nn4ijPAiEAxXCsrrqjo2SnLd+M5uHCzh51BYWCFPkPBnGskI6Sqe4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBsCRA9TVsSAnZWagAAjs4P/iP2RYjnYW8sgRxDaeVv\ncn1c3jOvAIrWpyNP1thK9X07SwLta6WdjjQlHdizd3aBOmByVyFeHxGWghSz\nu1L1oYHKohLjZRHkUBnNXocPdBlG1ivKm+Abl28myAx/Foiy04z22iDoixwv\nGDZtaTiJSnxw253/2ndGHZH19f1NB5H76ea1GAxkOSmqa71ezT/D1PCDNVJl\nlqqsY2kf8/YjnMDDm7tZbcUCzCH9jtcr91mfQ3xWud2b4i5/E3kzrN4uyCSN\nABUWDnPo0zbsUAjSXAKo/r3A8MmkSn2N+ffauae/uCGn94qPdAv2LT/ZLmJk\n7GmwovSC0yTmTDAG5PaX7nQ4V+4spVdwzInAxVz1ZR4hpYLn/HrgRbl9kzc/\nJh4HS7Twm6PggWonQAOoQvUh07tthYf1ICDHHMKX8bA3Fkwf4rhR1FPw01b8\njbqEkNxfWSqItCJW8832Sqs2e1xf+c4Pv1PQ4m309VWrO1TsAM2rx7Alq1D7\nF6QK8K2mqe7kuPxS5FYt6twTQKiocezXK2HQAj39hESEgDEz8l6qCSVZgjru\n0uTPj8QM7+0Ua47NfbhRW3qQWh+UCDxp84IhnLrVWUiYGLgn3B9mhNZczwZX\n+L7L6TmeGoYLsKThnAWpdVhhWlOB9lBU15dG7DskS2rqllCnRAj26G8L9oRH\n+IEI\r\n=ANCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/list":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/menu-surface":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.69edc6e28.0_1582927979663_0.47877347322799935","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/menu","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90446d7ac422f3a68af6be52eb4738e044e557c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.9372e4939.0.tgz","fileCount":37,"integrity":"sha512-KviY+StBpd4ZvFPLcPeZyv5zP9ImhP60UPbfVoEO+hYXMTRBPVuS5RmGXX0V7vFXntCHfntpBJyNVrIyo7fDVg==","signatures":[{"sig":"MEUCIQC0sHUdlr1vvP+JVTa4caEgKvLSxsi8pRZih3Qz5SNXXAIgWR08nG+AaYezBq8uQMdQMfZmT7+xh2f3VAZxZrqzji4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvdCRA9TVsSAnZWagAAKvgP/10YNn9pfLxz9r2k2nIq\n4t+hFobrMwJhyda2COS6uci/7EoyHrP+e34N+nGtlAN0AugKnrzHUEHMXaDE\nUkCnf+yCO4JwncR0VK8z+LhlII/uIUNWvwl98gFns/WvJau3uKqJhQNxSpWt\nglKOL/HQTr9vxHegJi7xQDPoazZE1TaRRLW2dXq31I8qXnixvuqY+Q+t1EWy\nOW0d9OMmYJeZvnhc70md8/DV1Ak9HP3otNAfc/7decGNCWzSpKL7k7zgmNA5\nTF0eh1B1eQxiFxLZdGOgSYrTEoLvCJ+gJpjYpyfU3Hyf9b3lQo7j88LfHAKL\ncxY2pDZ/zBHdh6CefYxqs+Ih6aSeGx1FiRmOr+WQJILkFfoJiWshGVDObeh7\noXTKtf5OXPR9x7Ne3sHOP0X8qqy2psuZHH0YyTKYTFrkkF/OYIvr70srvMjU\nR4ySNGQtOWxxa9p1y38GC50EPdvSMujeTBDNRoz+07xtJDSzvUtzwAvIx2RX\nAgm+119IIe/eVkaThZMEfz7kXhRbYyEyF0+Tfjkt0M3/j2tPI5rjWj6BgKWs\n/cmcnKy8lI+xzs+dXYq3ZhFJ+fLP4d0MArJVfw1DjzNf7nEbUmKlTqhreDCR\nelR+hMs/MkkjDS8Q4/35oYb+NOH8DVFgDeKnHQbEVub6Xc5XVEPu27W70mzP\nGrXW\r\n=hEuD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/list":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/menu-surface":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.9372e4939.0_1583262684723_0.8141918485777029","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/menu","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eea612cf76aa5f984e7a892a1a7fc13e02c7105d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.9cf5e9842.0.tgz","fileCount":37,"integrity":"sha512-9vLyritdjyrQHiwD4fVbic+ZiGqLEKrtoPLJT1tn1CqMOe0GuMsjPOZBg3b8z68JOkgIzSCMhYqgBU3Vd9cNKg==","signatures":[{"sig":"MEQCIGIHkde1kiHuwDWpICy3UleADbUFP0DuBPgyH2CgWqOWAiBJ3taXm/5wwdk4WKSsHLAQ3F68FsP8OySAVpM7FAV96g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXufKCRA9TVsSAnZWagAAvd8P/2/jQJ/mrxzR0ofh8iKb\nGDQM5oIfsfZA+qBHTqD4r9pNt/TAGOhlI1GNgtzWe9v4K5SMni4OHWnmAV1t\n78YUIWO6UTtjAw72tNGAhDjBPmd+SmADvvgLDqX7mj2BnsWpVKcZ1YBHK4J3\nNYOxjzAyOqhhXkiNoRSUmiLF1gVigK0FScC32UPxxC+y864D+cArOKLylGvp\n60q21a7dk4MVHm5xCbaN9IJurRuHMJm1BQKX2XINfpOUk+cF4GWTfm4iU3wr\nf6lKXlfNxOl27WThH3OcYfHuA0rJMnkIVflCA0MdABJfnUU7tqk1m7wMWTp/\ncNi0aiUMvL0T5JEtW+1wtKHf/ytgucsEF278mmcQ9403jync6YlcAmq6Nnxg\nOsLfwnZmHA9bUkurSozLODH1Mh0EV02i8uu0R96SKGU1MtAbs04jctHd3bFq\n5NmZgGn5rDRy+n7zhbyWuY4CwoLA2PEmHnYLIF8bwrj7aFyR6XxygP1O/h25\nhlo/6CaXdE6LNJuWOqOnymG9DGPHd275I79SIN4TclGoaTWsbgWb7oTnSwZI\nsusxf+4dw8toC1VTEV99IElhhzv9HUoT2QNC+6aFA7mZloVhX5N94iJX1eRk\n079ZphTxymA2RC273UZX2FAlk5xZe6ebj5/9jKBXEEIM8jSKVQlZJ7tQn1b/\ngaaJ\r\n=I6J2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/list":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/menu-surface":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.9cf5e9842.0_1583278025800_0.03966338957211435","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/menu","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b23197600f647726104740ec8fdb15148db8122","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.3657f8863.0.tgz","fileCount":37,"integrity":"sha512-UpVcL4wLZlT9VlOsvKqrla0e454prWHoGXWlroe1MW6rWOh5ouc1gaWY40mVmCdIj33wiY1RVuwOnk2P7UTz+A==","signatures":[{"sig":"MEQCIALfj9kHZ2+lCxD18gYZ87dVoCLPNdjFcmuab79lrifvAiAD9s3yCHqEoTJ2cAqL23dkM4OjzTfHI4N83QcDKW5B1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kZCRA9TVsSAnZWagAAsqIP/0v10Hjq84QZF1HiC/OE\nkdgdQUggx9ldyNL6N3EuOwH1eQXG/JgSOHE0iKjGMTa1cvAhMsSmBV2nt4Eh\ne4CElPGwhaIRft8srWd7YGCALGmGwUuW05YVpmeEmPF4cjyvsV7gs1J2oL9b\n94COir90VafZOHkf4nRBl2Yj/9a/js3SE7ZqFLmoi2fRpjFNtxwM0TP9jqYw\nKmaMPlciTq88IEvUvxQmyc8fugH843FU1QDm6EGB5Y/Hu8KznietkgdibGFa\n/aA57l2Dln83JoBzWxEuqQuDaaYtwbTjHb+bfZp9SWWmGQyngEsKPErmVe4G\nixGrBepwWK43BKLpPdbH33UBLwBDPNg2uWkG8GhaX/ZOYyLoYC6NkmhYCT2Y\ndbfBfAT8kX8S8nRZCWnimoRCao+sLuiwP47fUtcEtaKnEsWCxrbERWYQwmtW\n03/qmyF857wnGUaZho57lmI/OL723M1YYQtnWKOex/xNfoDrqxFFdaK5ckeK\nWxxI4gfp278NFGeLGHYOTq82i/LKH815L0CWaMeoFoH5MUJgZoKFdtn8heoY\nIodaDCPgcNV8+LK7JSdUlSEkPpqJTRMJQ3irHr7ZcW0yp6FDvzrb70slwzHL\nF9+RQxT6cnsgdRDFEIKIqlzz+IlLAcc+LLCBixuYJ8m3EjQNdyYADOaLmetg\n3hkI\r\n=0i8q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/list":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/menu-surface":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.3657f8863.0_1583343896753_0.021006514315999203","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/menu","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65d0ed64add1db7b8114d59006726ca9569fa9f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.98b843417.0.tgz","fileCount":37,"integrity":"sha512-amembDiAwz+Udwt1fW6Ia2B/8y/X+LaW4vofAMzqdXmkZaxj/htffRmVYV8WM3eYjR9wid7FMhWnb4WYo1O2Cg==","signatures":[{"sig":"MEUCIA7jK2ODchPpiktUy0QIiEfmSF8rKcJAvMqpqTtAFnxlAiEArXI7K5qiJJQ+JXsZ3ftXRGvUErKUvoCRXfUaqE200NA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWVCRA9TVsSAnZWagAAY7QQAKC3fyKib1B6hrJqU7ju\n2MUsUtWfgupFZDMTajQIMP9TdmQi1c/KQPk5PwW3oHuECmhTzSUkBagLz3pB\njsTLDcktofcjVc58YzQ48hFjOWx6uzPD3MbtGPO9AF8cm0kWITnh7Bsyn2yK\nI0EcWgqxc69ntXZzmF2adENsUrIv4jAUp609BSTJLQfeurNWfagZx4a6WrFv\nf+UviDNv+mmF6phta4AQYF/xMvkS9VkY0aPlqrBEfF0+0nQllhBBa8DWNj7s\nb7P1tDIHkXVhqvMik0S7j8oPpziBR6tTLKu2U8VnUMrPXnGK9NFiSnbYMYZT\no1nC67B8CeLwbagGUCbClbQdSuaMZkqLVi7BTCvDE7wKMwLJ/ELBoOOy5Ys/\nMGZ7jMLEumJ+LypfF2Cb5jtOUAhUFNggt0XPaNChxr9m06Wta1grddRT/ZwO\noucOEgWJRWppukue2KM2cDgCYTbBR2o/51AoEz1djg7FoLyrHEKhv/LKhq/s\nRn+BWAqbc5jZhkvYA75hIe9+kYHtynoKvOya2jEP8QQzaM3npQCiqlvoTNQD\nXsfhVwFymCAyENOy1f1fqGtvrFxTJavefE3xLohf6qtReBWMHIYszMcFUJyq\nymAhl2lYBciLq9xi3IxRoSnIrbEBraxio5yR4tscVXIxBJOpN0AJ2WhOs8Ag\nIz0U\r\n=5czg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/list":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/menu-surface":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.98b843417.0_1583433108825_0.7077598554626008","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/menu","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1c9842428e3689766e3e0d5bb29227bd38c3bd1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.17b9699c4.0.tgz","fileCount":37,"integrity":"sha512-IsakYGio5XFOLuKkJojH1L3NFYVY4T2IDzMZmz+541unpRIvznn/b2iWlU9uN/Vy2bwpa1Dcen1fEqoTuIssog==","signatures":[{"sig":"MEUCIQCsQahyLaxP+Xek6fR9rJstncYnYeSuAOSY2+Igxy//WgIgAgUCjfy9mVJZAtGRBAKMsfY8ssotn/W7k1auzC6ayfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGjCRA9TVsSAnZWagAAolQQAJraqBOgjxJ4mIzYiX1V\nxRdvESZPZ+xvnzmrDAJC5UIKDsU80d4pJkc7DKuR7b7AnhiBed9rPJgv4BDR\nS0XvsxfT6IsNMyJT7yDzniMlBAXiB758CF/rZ0mCf6pASX0qINXSfKjAx50f\n0gceSbkt4YODgBzUVsq55RTcA+FEMynBCX6cdavYZX8xpe0+ZOYUcFqOziHJ\nw0dxlaAF3MxGqbIAgv30FK5I2BK+TtzaUR11NMToDg5eZLuBltz3XtC3Z5Pd\nBrDYYWSuZuaaC8soO38EkdDCJKooVKOAbiNZndIzLnWCVmmtwI2DgQ4jQDmR\nzcDyvAYGoRqOhJdbI+vCyg3GzaaBZCb0h204D2HL5S8jItys2c0QpEw4E6hj\nmeY0H9X1T1z4zbXHV5bzoQY75deWxVdvWWTz0flaCOgqU3Wa/yteoOSvh4f3\nCNM+DfgzYzF/I+30kacqGSt4dFZTUhoZNrfgL0BbEPAyfcNK8a83vELAaOkL\nFZ5EGsHkgLdLsn9wveVbyKP1V54gO6dWGUOQx7aN2IPIZ2eKgxBCQERavVde\nl4Lwc2MNDltIx0wM5clOrrIy9yb9c5Z08Hhk8c9r8YKADqSjS1ug3uQHu6uj\n9CM6iRZZsXOJUKypbhDJWYZsP1mtaujeecYYXxxCzVg0+yzERUkRfnkD3IEc\n55/w\r\n=MXtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/list":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/menu-surface":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.17b9699c4.0_1583436195398_0.027994963161237063","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/menu","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8448dc6f1cfd227006aa9917e5063eab312698b5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6ee035572.0.tgz","fileCount":37,"integrity":"sha512-cTl+XgVvkGEC4W6S92h08eMV5qoBzXcg0QtERr2rVxPUuk66bAotrq5PYedTMFlpbw3OSzms/N7r7aFCWNWYdA==","signatures":[{"sig":"MEUCIQCPIDl/cnxiG16Bn64roFUau1/sRofzlJF9LCs09N0rPgIgQBAlrNFxuKVxoFLUZ1KSQTFVRbQ37Agxu2sDl8WdkRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNFCRA9TVsSAnZWagAAfLwP/RluobDE3mbhTSwOk8sK\ngGj2q6eZODDyTfLuXS06Z8rTIxJ3CUVjgAjEUKGQgWsyU0ClFhpLAYpaki0v\napnqupVAkY8MV5QD6qMCVfC9LCvsk+PeVA5E6eDJDgj9+2QVkO49jC8Lax0N\n/L+avNQ2lxdDJ/PS1Eu886hlwwfEecMHjORSh0WXNVzfv3GEOUzF3ryXSaKT\nTETyV6RYQfg1EQV6Is0ArZ+WdDH3AsnSy+u+H1/YOYuZb3KVrT+LhOOz9zlb\nMY3vCPyM5UD/c9sJgKjKAkXnMSerfSlugwD12vcpIAxGYpQQfyW4uetwkrL8\nRY37gJBYJe9/Q0nN79WmzS+skHrIMs/BTMxA6sFYdXz+jtSmSSYTzMSpSVHm\nmdtZiW8OHQ41U+BhaaIROJOg6c15b/p4tS60Lo9FmmYcHRxDYOoC7Bf1pjib\njsXF6bQq0gdoUlKTOW5cwWtBzClaXV7OtzyVM4eMq9PQCQ3ZWy9bpCJtwuNE\nHTpHSNSe52U3A+EciQCgiM78de8DQJOHjmKjex7Z5jzqxTopZU2sh00bq2TY\nh4E0W1ywWLV8dAMaNPDlx5DbLLAVcOb3S37/ks3vLiYiYWSlnWX6qFQJ+W7z\nRFzovIDcCTkiBsI0QZl0BtyIXKJomuiVcOvJxLIjYcr6C6aFcTNIPsd0DjdC\nKZtp\r\n=JBDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/list":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/menu-surface":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6ee035572.0_1583772485331_0.7218406397788806","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/menu","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a496cf71769044d6aebdedf4a51d91db0f7cdf32","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.bd33cb56b.0.tgz","fileCount":37,"integrity":"sha512-QK51zUgmfkgVFisvqEQnIMlPsFM7b2WEFFmHFEFX2AuJVA7UChPDSWwbgpRkAiD0etHuMKLmjt+JVBgoizDO4g==","signatures":[{"sig":"MEYCIQDjQQT4YZBAYJ+yTHMZQfa+Ji8pL5FY8zcaE36+u5NOOwIhAK3s9Y2FDhOHEi4dXWbRSAzfN+h97Alj1kFwrXsbHgCv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnt/CRA9TVsSAnZWagAAG+0P/121Xc0WjRuR31O546qs\nqcsOJXyJ01I7KHHE4C3XsGsCStw0QXHQ7JbTM1SB9PWEFOatiT8lRTcejObR\npa3oyBd1pcQaK7hdJ+8pd9ZNHF7ITSejGsox8lTz6JeqpXbuW/VfDyWUG8aP\nvdCu2qKo/2XBw+ZsllKWAYr+1mzWlbjqDWR6JXGTgmHVCSe2h00ix+27hWKw\nvc1iCjLqYPXSeZGFym5v4U6lk/eeNJjvVqfOA7b89j3yfA0tn0gxYZNMFy/J\n1z1gWNd/WZaOcDA6MhASt+ltbkpOZGNV66fdYtC7T+Q8P8qoHiuiHHiKfiXX\n1XwcbiVGnvSqmCwv2AQZ7kmNccDOVfNmnLtPJv7s4fnob25l3CuXAa/ihg29\nFt2k+W6cxlSkTOsmRvPoAibDVguPe+/9g26QiDWJNumzShtP5jcA9YcqdSCG\nMWpTSXScNVDhWLqcrml1+7UMsngBPNRnOzAM1Qa/82rtBFoYlgTgUlaRAt+W\nL7rc6+8zezOhNHKWWk0R08+kUFt3OuE7ZSmgAGnUvCvNUW4bb4HgxLb8nS9X\nTJsX6NPodJ7fOSIb1HeqMykjGbu7G3uYK0HSvQcXpJoYwrwtj2mOEC5EqKio\ndn4uB9Nyo+JbYO1hEINa7btKaovTKSQOlz81NxyR4KHroNaeuDIt4SrA3MTq\nN4R3\r\n=AmOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/list":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/menu-surface":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.bd33cb56b.0_1583774590656_0.9098411623091318","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/menu","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465ca3c909516b40932fd31d673ddb358116c0f8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.26c049afa.0.tgz","fileCount":37,"integrity":"sha512-Uf4Tq8+K2K2qXhv7VSReKs7bqDHqwCDy3wjShCXecYQlAbz+8nsUlyXBpqv1GxiP+X12xVnxif9wM1Ba466yew==","signatures":[{"sig":"MEQCIDUIjSKCU5bEdUXo2Un4aTX+jC8Fe9kkTDeEz/mqJOoCAiAKvxmjZ5gFRAO7qEOEcxWIPcG1gViw+P3U0HHJuyajlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hjCRA9TVsSAnZWagAAqjMP/jtm7IGEb8ye1MtauMt7\nMAIHYWGhFdHqvevwUpZShxPRJvNGX5HGHlamZQYyGlCis04WVgE4j8+TMFUY\nJIZPqV1bf2sFGEDrcqNLvSLhOZB+AuNXS2G4UlbyZTRxQoEXtLQkZ45AsgmG\nmLbDYdn1ODg/NutAlDIqwaz2rgwIY3+T2tg/rRcGR/zzcGzysZQ1rjNQOEw6\n6ZikTWNdxaxSz9eWBbih1jhz1gHzJ7bPDus4s2whKapp0YbThyALSoGhvxOm\nU+2fVYygIObR1crfHqnmT3KtOEZNy0pAJ0AVOG60Brty0kyfjzJHyl3U7KnS\nogblRQSnm1oxak3q+85d4cK7Gt4fDeyrZtmnP07rhHC39tKxdOulo6+CWAcB\n0J9xBK4TTodSssvxoVd+ndqjdsC0zj54O1GUTf295TM1MRHDjz8h1koqkMj8\nwoR82mBYMwT3wyS1kOpi6xq80BJZlTr4YzCzEG3V9ChoUAuXoRI2rSrKbsjA\nqGwBfgNvz8pJx0umC+hZ6BwCvrRJnq0UYn1Ai4WyuuFPhH3+mZqKKURXWiU+\ngGCLlU7QSM/4p2zUGTo81R7UPzB/Z8L52rtQX1Hl6fLzl3zKduJqs993Ntfv\nftEYoZVTK+33+fJD8pbKSVgCC7tXerlpN6i/no7kE7C55tIkpY9lIvvQlAPE\n7p8v\r\n=RqYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/list":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/menu-surface":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.26c049afa.0_1583859810506_0.8390524581174523","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/menu","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"009412a48f0e8544d2ac661f46d776a8d34fe713","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":37,"integrity":"sha512-ZkDNwvKjAPlbGuvjVEtx1W6Txzhndz+UrxRFhvLwJlouevAyKPG9XIKNT7zz5slL4WksWaUy1L9LFjG22gJigg==","signatures":[{"sig":"MEYCIQCflX/X0oJHgmm+SJThwYehny3yTa59rAZz/Yi0GWRdzwIhAK84ojsNdVrHZfNCoIPyUFyzKKygGDO/juBXi6+XUDtD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qrCRA9TVsSAnZWagAAmbUP/1ekoFlN3gUisL8DH0MN\nUnCQHaLNacZAEPENriqfOltDY+T4I/EwRKRqV8m3WPPUVC152nOTEpDC+24g\nb3bNHqTp7Q46HSb5gNCOR64BcuunMoNXrFInSoF4hwqkWzN8vsLjEb+0Ik9F\nf2PaMkNGfDMEuTRPpWlbr1uI7bHPh2Pqn4Q1Bfps3Nu2P4Kee8b9aU1Ro4Da\nui0Bdx530D0g2cNA3awq7QiiXNNsDiNU+bPOohxh0ukbDW1K2Wwt4Jo2Mslr\nsCyRtWbHu+GlFLRQdZ0CfVIwbKH6tP3dXNps15lL9ZkZr86CITPWO+7u1is5\nlCgZ2tfhtUdH21FQIpxAgV0M28LmDIxxE2SjoOE4/ENhEsyBRsOSI+N+IfIW\n3BA/gKlhHgwlrI4QazIbOb4ldxr5a8e2aiQkb2qh+TYOlXlm8do+C5MCEw8W\nUZwFqe6ozTV1wCkwsuB+HZuRWOGGW5CbGGg4acT9JIK0JEADST6Bz7vU3VOO\nlxmhkq9lP3kJ4Sk/mwo8giKx4OwVpMhyyVmX4AknkZppDS+98XDxk8yAmK9A\niP85UjkWkxCtRVeJHwfwBfEt1X4VwhAWuisHsNKTozxrhj8dXjSZohths33w\n7Tces/cISBZDf0gtvObhOEZdniYZyFRpGb8xoeMT3qtssdSRQZmA17VRuvIT\nE75x\r\n=nuOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/list":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/menu-surface":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.1db5c9fc8.0_1583872682918_0.32989484823405246","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/menu","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33358daaf48c5e65556ee0701412f2a00d20a84c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.4971637f4.0.tgz","fileCount":37,"integrity":"sha512-KcM+sQtAJmlM8Idpy6cDpYq8A40wiMyI5h4VQT+ANNEQfECSVA+vGSb0HGrcN5C+IWm35CLOGQc9aUroSCcUuQ==","signatures":[{"sig":"MEYCIQCsHnWdHI56fXe6Hp4VkPrDJebMHdw5JzvNUAQFG0xW3wIhAME9HcVYDxRiBdD5GK2LjA55n/+iU2bCl9Z4CXLkyEQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvNCRA9TVsSAnZWagAAdVoP/1KLgyFunuLq/QcW49p6\nGzcpGckAq0uqggxnLSsQyt0RUV+Wo52sLsYdS6cbfprzYvblQcn8dXawNM2Y\n0e0EhjajX8Q30VyP10FUGVKAX3oPeyhu0Ly4qu2pdCtpdFu2Uakca48gCRvn\nzJ0aFnJUWtV3dr07MiDibLBOz4vzn9kpPlEF9FxZO5Qct8D6RNlKM/VHbgiZ\nEkA6DUX93xQiqu31bln68LiFcrWLKWH2J5I7qVLfJo6PO2dz3rsKhmtKg7Wr\n4kOk+0IUkmJGEae7NNSHzPhS/xlpckZqp3+zMzUSOuaIW6YZwWMdnSL2Q2a1\n3Q7emMPJMB8ErtA65ORnBjePTeUS9TV1l69gXRm/5Hdv8cSZXqbsrETHCSub\n5lDiDtha7P5RZKMewOVh7xpM8PKt76BRjif05aVm/zaB2bABrgW7mKWjQ8SV\nuCLxFDSUkXocwe0xyEhoVqs+t+wd75YKlx/YmLJ5tM++q6E8xjEhM9AVL8YE\nVcQaxEhTdFPeUe27VVVreouYvL2JYfg91ovCTui8sFKxAxecc/NVnYm49SFa\n2G3xvtsLEvIDCuzlxdhyPSQWmZs1tF15703cT8NFv3nzOpXre+f0YNf+/YGw\nvYd0CiwXtaMyGDZBYdHJTaWOj4HADSbQEbY0MZ4okpHtACk0Z2afg/AOExnS\n/YuB\r\n=v0HJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/list":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/menu-surface":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.4971637f4.0_1583881165447_0.6022506925761504","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/menu","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58c691bbb5dce89f09cb3a2d77771b0f62330bd7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.1ae8130ce.0.tgz","fileCount":37,"integrity":"sha512-wFtuAdRDu+5Wj6weh7tfpYk08kQewuOntofRUSqYHbS+2e/KZDyzRfIJts7+fw6U7Wr+meqAf1UDG81Ub0W+UA==","signatures":[{"sig":"MEYCIQCrgdaV9alFDDtv61nqRh7HLLCV0x2ejP0K558ydxjR0gIhAIt3FZgvnWOm9X1Wc5bPg8NaA3cRtyJpQFRfwwOc1IZb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1oCRA9TVsSAnZWagAAmuQP/A4pBNsj1VeNgNDo0oXZ\nxKHMmw14BEOiN5oRxMkVwuRnK0W0BJTyl8HojHYJWXakKtSt5ByZvgKxIl7h\nWvd2rROAdUPfPjW6zWhzxqIoFSI1MYsqSqUuiU2qqmbKbaMt5g7R0wrF/Ewg\nq6jzCny40qkmGkVwolQeS82dOCNaxwzAmBhMstvgJEwHzUNYtRKqHFW7XJxr\niVqsJQ68zqeG8z+5NdxMWbPZxYguKBinhFH9f71nye7Ef5RkZRac/uy2KIOr\nhDRDf2ms0nVCiOjmDUu9k4uh6TY8nS4KTN37RQ0R3enJTt+x3wLNC3H7LnL+\ngvne65PzSHBlCABtNfhpkKs3lDpZgj075P2JvCpyGSdHzwQ3ciBTBCH6w/JF\nYn7VPQPF4Z7t5J5a6vQ680Z8WL20oCYoWUYlZ9JquMcCpV25l99OueQaeVDO\n+mmnR39UUamWfo4cPSmWUD0l7hs42qE4GuUc02WSSIKXKaLo1qoAdemMAzzb\n5d3mpKuLauIyuVcqnNcE5IrZSthIJmKsWz3g6ZybceR8fNao19rnERZDOls9\njTOVBOZ8mE1+IlAy/P4J8CFHIurNOSBlUkLe1OSi0f92v0HVNkLHpokKzn2a\nF8GVS1/WXxtSGz3kKvFqql4Ek2OknccVPgQEBrScGECyUlJWbRbnHd/x5CtJ\n8njY\r\n=dPWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/list":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/menu-surface":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.1ae8130ce.0_1583881575522_0.5863911610794887","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/menu","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6795cec9a74cd25b7a7ebadac088a1e15ca0462","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.8639c2690.0.tgz","fileCount":37,"integrity":"sha512-ZEd5hWPHHl2qhJfqRj9MYC6CPXhXBtMT12D0NffahaJQImNt/lq3ibTs/gixEm7khn3wRbs+SD5twxCozjok6A==","signatures":[{"sig":"MEUCIHI7Ebj2G0mHGgRiSGSgvso5XHiBhq1QKYlA88TWN6HQAiEAmXbPJK8hXhhRADhLKl3CtcJw639tVw27ybhJMUMwIgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZiCRA9TVsSAnZWagAASpsP+gOYVNz41ezVNdP3nxGg\nvBWOETT+u27rrfP8r1VZGDUScH9BCIeq75YXRHd6Sk18odO8AriHWqx6LgGm\nC9YKlgW4OCxhmRy9cjLtmPm8UQKW1HCBawwWiRiicEHOmaaWb930UV0PI3K9\nWI4XPFkRetvSXEbTork3GhA93HzkbDxrRJkIMC5cta7RZ9I2F9R11ln2dsJq\nYUKMAOlpfaglRkhA4CPjnUmI54Ag7xCOKeL9MA4OmE0CRkzWv46KpTMm1Uk1\ngSS8Fwwv2nQq7lpuZgacQ+x9m5Tn20oZyaW7TVYu3KTGSqa7lymTUFCkURJB\nXZq5IPEem8rAS/T1Kym16ddla59LzskmOsapKhtew1k8dmC7LQiTEHjrWAtH\nYFoT+YUVxDqZ390y2xMGVv/bsIkf5jr0eHAVUohg9ny9DjMRc0C1PtKkQiJS\nJ74GSODqy8SL0Ihn/swHkgks/ZE47Y2srnyB+O05v4WRBvoCO5sWsUUVH9sl\ngXMlgvzAUsKLuS0cWHQge6/yAkZcgafoLHavoDnEtbMqRH0pNIwM9nuUsxi3\nGwKXrOBWhKW1aaK9rs37LOrG0yFg4zI5pOJNMGG/LmhG4FCI+eMuMlXe+1uC\nSWCTiWIgyOrzqBIJ7nHvIVsGRlM4NsLZY8/QzYkBJ6DeCMhunXcFKF3r5tCk\nXbFW\r\n=lmrl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/list":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/menu-surface":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.8639c2690.0_1583908450203_0.5453908706499888","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/menu","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e41990435448c0ae2e89f4b40befab9bf80a47db","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.d5808057f.0.tgz","fileCount":37,"integrity":"sha512-Ft0pDpt+GfOLIVU/96Scj6bErEXqJiAfYEVQOdDd+aI8LyzanmdKve3Oej9lLPKUopiGplxoStsAXfwmIBppWQ==","signatures":[{"sig":"MEQCIFgSNkboygLNvDQa+M+AEiu+Wxi5SMP08pdXWByehuoeAiAN7L89lKeqdi+cC0w7mlIwTY6IKLaccxw3By+8nUJHxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREyCRA9TVsSAnZWagAAFQkP/1oFR6+m85pYlExTIkU5\nUXUFeltnII/kWBEm5HuMC33Xdg9Ru7CabwPcswk04jd529GNLknITMD9LwR+\no+UQMcHuwpqqNqmPcXbtCmJ8mQoo/KjvF5xurf8afWfDvZw00svb3d1jPLR2\nQ8a6+2VlYv+IZk3ozgaTu7fxuxAXzlJ5R/agaa41jt7r/J7mxezPlFrefSvm\nsuQxa631IjY2alyKmfMfBqaJr9/mBetA6duwl/blVLbF4EY+eOIl3ac2hps9\nIXEE/b7fS7hQcKw7rKyRx1pQVRXRMY6eXzWPZhN7fz5LRopQlmI1H1KCmjka\nkahAI9uluM6FIHrsdsZOviqdOdXqleR90VZX1NHZvO4BpQ/py7kKtep4nk3w\nC/YC5WUjfnh9Mk5vsKFnprPygnhfrA1GZXmLk8NfiZeYvRQKVvUFbRrDwmu6\np77p1fcL4hKWz+DZ4A98JhH++LF6WgprnlFRcJQZz8/aNAl/8r7Q5QLjOoaj\njOSdTvU2XvrbSeSNdbyatKwnvk/RPZ3iclGw+eJYcGBWH/QfzkuSrtKmsP3s\nXt1oPZka6dIg7449ZSTXzQ97oeAfiSSMXTbSIcmczcE7Q2YfL/o3ILRO39y4\n5QZ9qhVT2aPtEUpVXk24b+YFEt3t5e1eVlG4TVWALNIq4TkJh4CnJ0QyEK0p\nPBT1\r\n=IP0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/list":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/menu-surface":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.d5808057f.0_1583943985719_0.6193620461490443","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/menu","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b3a056008cd3751b723c4dddfbb95308c86571a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.b3f58203d.0.tgz","fileCount":37,"integrity":"sha512-EyOc4pf5QrJqbMygLbh6M7/HrN7QmcL1UwV44uyqDZVEHgRw2+JzE0uF8eJx3/Gf4yZ+hA1Gsf2SspEaKQzmlw==","signatures":[{"sig":"MEUCIDd2c/HK+ou4md9ehgVgcvXqQvZDhD6mD9kKcBduHqTSAiEA84Ak1rgU/ukSC1a6eMkAA9X2rFEBbuJwPLglOqb4X70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5PCRA9TVsSAnZWagAAEUcP/A2viof8ju0Vcp00BQRX\nrJEDr9p1NGyuVfttfS+jorCQSWalUWqy2yTr38Gjoga+i3Qqt6cbJmmCO1s/\nqormaku/d3MstWc9pEbSYNU+DiWeA+q9DUhLmYgYJw2lQddY2YYL3YQ7/znk\n384d2/1YCvU1VK1y8Zeg755bUYCsiSS4WA1A0caOkllI027sbS3HR+u0kFGs\nJO0a6pCSva9lX/kHNlG+OpKogNzEZKlTnZLOAe6Mhrt7mga2xheU89kKhZiR\nbOtwLiu2kQHyC1gwOqU6S6OTlmiFT+HXvc1Q4LGMln64uRTPhmJTdcqNV1hT\ntoYV2C1MvkJNMm7EmDbA+PMrKk48MLq2e4PBDfXt+FsLLlDMwe/Vs+gHzoCL\nYgTnlLqoXR1JIBlq1I48mP9qPvSv2Yu33hhMPJHKD6/XXFZEraP6WroEcXr2\nPLo/Cd9FM9T23n+OQrOjSXmrIM6bnXJgzo7k1KzZOnE+5MUtp3iv2YALu/ac\nFhkZ1tTynFHjqgcl8jTqEDk9a7ZOS/a9aLuI17sMTEYdbKKDp0RIblyB3X9T\ndXEdfP6oWnrtBOuc2BYIefKXFhUfec9Y8EyuLvXjcX9gKhPajY3Jaj1acTGr\n7Vr6vpECxnnJ4MWB8c6u5W7eLVuMm/A4OfSpaT8p1+Pro9gYdlgOueX6Ej6t\nQyj1\r\n=JnlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/list":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/menu-surface":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.b3f58203d.0_1583955534592_0.6152063392522682","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/menu","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd822d1485db9ca28a5a5933039ae6873212f08a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.bec065920.0.tgz","fileCount":37,"integrity":"sha512-oX/StWSojWsfMYFjzD/Z+KkhYwPWUDBu+fOW/ejnxu9+izKnW3j2emX8Qwpn3VlJq6mBofY70Je9PUB7ILygQw==","signatures":[{"sig":"MEQCICshNwxMI3BqrYYiwXQE+N1Y7BwPcaye4sCYkKMN1johAiAPxsj/frv1wptp/E+CRAnRJZaaJj7rHxHPmWSmQx4BSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapnFCRA9TVsSAnZWagAAnmMP/3Ik9yRBIChL/CtEr5hY\nyDwGKSMbGEhk269CEzBVqOTwz/3wRGZ/lk2aqQhEshMlZV5J2eeYIqwEIoZa\nE/B5GFgQGkHm3virK/oHPRgH4b5WwlKnaWx+Izj4LgmAm9u3yFArPFCnxlPi\n+ilHKn7ndAbPWvW6FEFxxW37T+ai2jVSK9NLLrN7MC0fxHUGaKQFmuuuquBp\nidJtE64BZ770L/96z6LhCoPgbtZ/OOma0URpgHGReQNUmJbEQE+1R5tn+WNX\ng4+KEUkwbRCF3JzyKRt2kypObh94h3Yd1uFrZNmOCAE2A1v6l+38K2GLxzdF\nghrswDvw0m3jo1qbqf/kYx8w2GNWFd/7CIfAyVHpKcaqo64CHo5HbbA64qX/\nGYKV1b1qaZ/FsyZ/c6p7MTYBdFFFjLiQY6eb0cXISArT1Nj6wrILyoDdmvkU\nQrTjsaBOBRe4Fo1pZyjtQDf3/XBFvIQt4NmjwTe5QqipgwDND7C32YK8wd7C\n2rmzpHs3o7Anp3ksiVm0CdbFxe5NMpcQtVkhLNpkQN3uTXpIstVbo4D+3i0G\nYonOfmhDD6BqHjylalsIuiYEumE0BrApKoE+ZUNIewhr58wrXs4SQXAc0MVv\nL3EkwD+03MG4Dpqu38lVUPmEj1RTrFZef694HII+8a5quhqY4Ana9bgKM/kQ\nlRFV\r\n=UoZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/list":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/menu-surface":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.bec065920.0_1584044485002_0.8237471129037299","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/menu","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784593af4844d234adc9a0281b7f1c9f7cbc1618","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.776291ef0.0.tgz","fileCount":37,"integrity":"sha512-h2K/yYR/PKnh3GkKYLvG0y0EE/Yjk6l/Vlv1sV8B8QWQRlV8DabtTyOg+/aG56Yunmd8JR0ZAAeBDKDCT1u4Pw==","signatures":[{"sig":"MEQCIGjBkImUY4rOZCV+GyUJonRngLDK9PPjOP6F8MD5yvO9AiB1jmhg98JWTKH/pNtM+9zfiQRIM0vZbnt4N8iRT/BZxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSNGCRA9TVsSAnZWagAA2p8QAJZcAH4Tpk9O8PlVqlbk\nu21fuzkVdwWOp3Ld7YTvQbd9XdhWAfw8F/hj38GmUPJ6lDeR52SvQ2tme8+2\nrogquRUnw7RGyhPPI3h6MnhwBya+tRJoiZtXjLFaUercYPhvKrexPx86/AQ3\nYcZ9lI6WCEY46S7CTuq3jpizh2/5RuGXKM/IEKtovSIY08cW5Dpi26SjTCEO\nQ/yngRMk0EYzMAzO3qak5neo1OYArkC/5LzjDAW7nGKplg3i6Tulp6Z2FNOS\nzlKy9gOALUL52f/hdig7zNrT3lZL/bvzSG64vrgfGJmDY4Bjt/VM+NGCxZgR\nXXOyDZEK1ijvgB+q6EjkJ7dabetYytwxjwB1xff/e0oqtvD0wsJKCv/HR5zY\ngblT9As+HfhcG2O3u1JX3n54TaFAWSYizQK+PZd4Da6g3cdxWvhZDM0g3wqg\nDPmvF4HeRMdv8sLnFK62sbIHsuKAKj7bVgEZ59+Pt/iJbxgJFOAGvFfaiNrV\nw17CkpCE9I9WSY7TOOHJusHhNsQh4SSpeWH79x7hmM3NMg/S6MWWE0g0nG13\niE/6JN+8nUQRmWToXmI4N4YM/I8K52zRwOUAeXSIokO7VgPUUAppT0NWO+AM\nMRJJPl5CFNCgJDjkmMwJyzY2dqqdss6w1PB5JogboxiwZerIVYyXGpC6ldcQ\ny3o1\r\n=sSSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/list":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/menu-surface":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.776291ef0.0_1584472900723_0.593589312456491","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/menu","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17878104a7a8700970b39505c9feabefe6e48d90","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.ece19f3dd.0.tgz","fileCount":37,"integrity":"sha512-Ci4gQzCrxkUo64brFVK1urM5H4/SlebtJw74qGNNVhK+JZmXqTLR95HopvkaWiE/wUYGlmib8kE4CduHrE+1EA==","signatures":[{"sig":"MEUCIAV2O7Sa8M4mvLUQ0aKz2X4BjsIjZh/b6n0jZNio2SiYAiEA+ef4SK+QTatYBx3uA0/k+FQfAfhRUUrfXS20jZhCko0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjYCRA9TVsSAnZWagAAgpEP/30d0IWJMsaHXXB4aH1B\nqwxlbSvcEmoyMRx4yE7RWu/FTaYYE1xqohva1BcXh6zsuWS7pAVPl0OjyHmu\n872rH51swqULNrChw06K3QGGdJ7mFuZwP+tLhfXhft/stEg4FdfJtOGhhU2u\n0fKJPfYB5JIaVKHpDpXkc0Fzo8RJlEcps5NpcX7Ap5D56EIgJDEoVNz0OaI+\nZ6nvT4WlaY4BXuE0L2dDkMGFEi5DGxKnU92jruhMQgbpl1OsRaOxrMrF1Dk+\n/Oh5N12mxc5BOzXSqsJ+0Gwa8QNa/VnjiQbOAUPw3PF0qDPt6ItnN0bSiMw/\n71wNgj9KrBnUC0PDM7VVfOl0NF28yZEFFpKItvnsD4nTssSFh1vsqMKntanY\nGzLGQWosZVJeO4RwtG2ZIqfGpW++NQgOJbIyo8C6Y7iz+xXCGkacjFOfDmaj\niDRpM9jvF2YxQV38tMHch06beqXR3VM5nxxRib0KPZzXcRn4Wx+0Y7dNHHEi\nk+g08EajgeAHZ0Y2uyC0fpobgEX3t2GAoscA0uMR/Z7fqbJmovin6pxFuaS0\no4cnxBMiWW7ilEybMV4oOCsV5yQMeZ8Y8Q91x5SZiYpwxyd5QZw5iVwmQOmz\ncbNyOm9+9M8QUtw6lj5KIMNnyCKJmHJ+R+fZKSd+pe6W4irzi0DBWV0ID9eT\n8ZTd\r\n=hF7C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/list":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/menu-surface":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.ece19f3dd.0_1584482519739_0.2433552074059071","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/menu","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81add1608d4f4dd77eeed89988ac6fd475aa9fb6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.4dc45af6c.0.tgz","fileCount":37,"integrity":"sha512-Us9rRzziJ1HRW0HHVDzTF1koMSSzFip+BHEHe5O028WzdTz43dK0m/RFlWJ8+31VpvUA3rQ9Qg44wQjfgkwn6w==","signatures":[{"sig":"MEUCIQD6kcLP3fqFr+nuqjugSOMYBGnZpZXE2O3eExHeohdXoAIgctw+NA1DIExvXKwTmjhua9gN+sfYLyNuCG/7NCFxu9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX4ACRA9TVsSAnZWagAAb00P/RhnU0ma5tuF9q/5y5Vk\nbFCdvsMvav6p5NpSS06ytkjQJDhYeD5ov+tmRaB2C7Srl3rq8fFFPNigEMU+\nHz/Na+4C7gB/ZsQ3YZi2Py0K4KYjJNY1NUv3EZwA7LCobtHpA7lO3CshLGyY\nQ9NxfcYS9rTZ0J9ORKLNcXJh7DJomg1y4R+caDYe+i4crhE5mudA2ScRGl1e\nBUTSAA2NBlRVXyzjtDBr6IissnBeulbc70sAl1hWXYDY4+Csp1fP+ql77xRm\nyZQtfg3EtMpUSrUvAHxR86bs5MUb00K4RUQRgJRIaU7XInnWQsdRBuP/mwm2\n3B5J4Y681KGKpR9kFrgypuuj+fPP/b9J6tpNt2p+ZBGmskQCxW9113rv8p6h\nMdq4fwfdvy+bU3/sPy/RFB2tAX5XmYVAV1bgrNS5mdPtP9gDSysdYmVlQ9xA\naNAbKB8BXcPDj+LCNuouh3Njtd8PAh4U3YGgFRuZMIxJXGZse+MlNUz4Xox3\nRBkr0L0wwsfJ7BmcqBSm4XwV87hy9giASV3sZ9coIAPd7jANLj3Tk5iH1dhi\nal1JTNGhvPWYmhhyPONAvcncoii7E2aa3lbAk6VMh+I3gfXuXOK348Jd6usK\n5i3nTiw2ktiV77uBX3KQNf2Kp7QoeUiN5aFxJhPSxaB/ywsxBGBaJa1TzWbf\nzAF8\r\n=XUqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/list":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/menu-surface":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.4dc45af6c.0_1584496127349_0.4469393063460356","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/menu","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3c3b7e2fdf529b4a3c95e275240dd34ad18d1b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6b48781bf.0.tgz","fileCount":37,"integrity":"sha512-ItQ812BAxxXf5VavWIVFfslc0WvdzVEv5Xk/k5xpTiToJEaNyWXPNRa7USw5AsKbB+7eQEugCEAoVxoUOtPREQ==","signatures":[{"sig":"MEUCIQDdKnvt6hhWV4pS++nzSNtuSH+MkzjGmwU5rT9Wn17v/QIgU1q70lNB+lBtVMJA0jNmml7mkbb01PnMOt1EVgirTeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/TCRA9TVsSAnZWagAAInoQAIHozt01kBHbbHfqOnQz\nsa/kB9QCfoeOaCTJWa38Knx77977jX4pHzJDMyIpRJcuR314in21GS9fHHd7\ngY1oXvuhks736GpnM2mk7K2lULOmb9i7/TdK7q4yuZWnsg6oClhwLKLbaGfa\nNfi2MZE2G1W1VRWjf0VV/l+pGGVR/xGeui+Ny1meRJqtDdM3jJY/QLjFS0pl\njXgbSHjd/ojHJcEmlaKTBbEqgHTjiazQDvigmT/hISkd488iIfVfayaMHeJ1\n9BVayTJwuP4WOJ6iUQ1DJ9+jiLXjG+Jrvj1X1kGNKcqAnRYRVSkZC63zqsjE\n3wve653xZ9Gc9s9GAC61IdCHeYdGWIFb/neGH167qJ7/LCPXOSWlR2cOADr9\nfIJ7cCHxQq3sSEAfc5RgybL53QZP2857G1EgKIbx2vIPTkNTiMjhyVwENCV9\nNETaqxWrAt9IVSoceO8ztcn67LeA5yCZ/WkfFJWvaExUw8/3+E4joqqNhBko\nKqrdwOlx2PZSGqJo+lP1t/xFVv6r8k25v2pgYuBHZsErhJnmVRSnuA/3Q3ZB\nLeymXhMYmHqeNmI5LkjjdttQhWheAPZM99AdY9vsAJ0nBporlUEPL4dTBghY\nxGWhHaLknMY38bUoKxv/jbxe/k8tx2gZHhokLZzUpmJbDqA/xhAG42m6RXh7\nzrNC\r\n=c2Zm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/list":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/menu-surface":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6b48781bf.0_1584545747269_0.7025922227960577","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/menu","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e053367be0078ef900d5dd408f66383ed43573","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":37,"integrity":"sha512-WEuK8Y0heNL8DoaCqzSgW+v+of8CRRiZ51mwSr9ogkqsVB22yE7Oir12GX40jNtxLHO2GrOCQlQuQARtOeXvRA==","signatures":[{"sig":"MEQCIElXy26TX2+rupqLvzy6bwiDwtd6SN8LLvTK6z4a2WfWAiBL9KiiMbP5y2Cb6v8iNz0rfeFizH55lIMEC6JKLGhpag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62qCRA9TVsSAnZWagAABKQQAJdV/+vPS5AxQ9haL6WH\nfVuITWg1lyFtKZ4k6XrlgRflqjruhP8sFV38l7KyUiKhEn3+JxDsrIbq77wP\ngc1WnD33cq6FfiKov860myA5x6o6Rc6NB1PZcllNCfgE1NpkuS3+FjCz5xE9\ndB743GO+5lM8OcUQrWC8NP3FS3GlutoU0Zn6GAAUo6lNMAGAGJjFyjPNIzcn\n9TXXm7kOciGlGmtTbJeUS/eFHsGl6z8JmP1nniJx7whAVG8bHLeC70lC+INP\nkb0MHUe6RmI8zjRYDuLMFPqTVHbj1WeMgFgabZaXCy1Lke7ERV4ZIVrs71ZQ\nFtSI8FcQ3vU6a86lAJ+3Xz9Ja/pg6bSc6XbmXuqLsk/NpF/kvWmMLX28FAUw\nDO9P/aN5OjlX9FhAs8lgixi2K4y+EC0CmXQYMzYzWHiO+/8qpR9Nnv0EccK7\neOmt70U9Y9jIvODbAVYfl21ROhA89zdpQd4TwgPRUqdFby9HdQzcfS3io1Vl\ntk6LmCLEaRiOppJE2cq3UWtkSpjSTVLGFP6t6NZ5Z1hP0vFfmeii59r+ElNW\nt+vKvVpw0fjuJWd9gza2GdNEfkaOsvap7D3kKT+i9IA7HCiLd1Y9nNivBt+5\nayots8M0sWGLaxucYi+dYvw0b0jVZHeSSalzLTmD26WVijWZvwO0wpPIq2BL\nbfv8\r\n=W1Fa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/list":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/menu-surface":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.a88c8e4dc.0_1584639401508_0.7936132724854645","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/menu","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87209059ca78dfe1945df507f4388f66f24c3d65","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.cafe18860.0.tgz","fileCount":37,"integrity":"sha512-3PLoRj31AE1BnD6N+rBSJNR+mKEWZcglpgZX3LillPNGaowfV0zeMHEzynRFCZp4be8wOWK3qHuTAO2mewmVfw==","signatures":[{"sig":"MEYCIQCd9MFVcHS+Vf/nGst4RhXosxzpezTON7Fzv0ObkRwmwAIhAIguFkepNmyDOVQ1w667LkDrnltMBvflUog05FVEx1LC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkZCRA9TVsSAnZWagAA/S4P+gInE6CniIGZxlBgBvfV\n9t/RwEbH/x9dJaoeyLizdX1ulQ9aBkmb4G2bSmKZCViGnPStIjgdxW1hlK+c\nbZO4vRMoAlcFKwRn6Jhhpn1J4QYaztXy5EeR56Stzk9NnGXqMiEjXs4f2du1\n5JMU16cZBA/sZrHrmUJMZ6v/dIj/v+gixu+rTfxP5Ko/l9WqvB7LPlQFJBab\nyJ/4r+ot6CZ0PPXtA0v5LbEL+ob+FqFwvl9UrFF+B49tts8eyNPSznbqJSOe\nK5Q9nB7hk5d3ZmAyqwqaVtf6IdmwrlzhqN9ufcFpQyQbGGhdzFTLE8U9t9Zl\n2RIjH0aD1RtJzZyl8S9i2aSX0JnHa8ozxJQVUA3c4zjEPhm+3SJLd/FajGfl\nJ6/G1DGSUDTj294fetd8gqiFmCXjcC1/tGwM9/4duZHiPgwPH3HmLPilOyzm\nbG+GRL+BccGVo+NPJgzHjjtc1cogSVPVF0owHsXEpE6rvIWu1fOMN50ErKaF\nEDfe+QXV+Wey+ds4sIMcYu+nUjhNjIpP2fbHpUU5rJbep0DjzguXYNZDS9Xi\nWRVAlRt26IPtDE7V+X0g2+XNXshQQpZs8LsElmGnizzH/KEx0tOlUFMHdPdY\nip5YANOf++KNNC7Dr83CsOJ8s6JqUWhHskqE8wpoJvF43tUzxjpJgHTXpvBT\nfK6h\r\n=7Rug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/list":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/menu-surface":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.cafe18860.0_1584716056586_0.6892073268617445","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/menu","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb4e0f26b25cee046020f7f7d2b8f5c91914f593","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.35a32aaea.0.tgz","fileCount":37,"integrity":"sha512-WulQ0MsGW9wikBroUzaAc+hk97+0RwuhShPbs8ZAIch3/hW2POH6Tw4EHdhJUNgTds3L0LVCsXLTaiJGN5XdDw==","signatures":[{"sig":"MEQCIDWd1+qHu1WQCgC2sBfLBPsKB7CefJvkzMCu9TbzGKDkAiBjIkINF+GdxlkswNU/cOuuQWZH+cZrlNkRyoRc/ajOUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSC+CRA9TVsSAnZWagAAX7sP/Rptg0Knz/x29L+rZ4wd\nLdDGSsuab993Ga0wLA2OnhcDlhw6Aur7xPZ3vn4/6baNN+5dr0AhqciY25tc\nNdXylGdWQ4MoG3k9EgUhuYzxvfOlLVVxoxgqUiAH6p+h8KJw26oGYeXBPcW7\nC5UxanybiM8UePho9SEWrwzUI+VXrbET45qMHRIQGtIDFOn6/WJWqzDRgmaZ\nPL25k6+jblUmXKqhQtBR1/DGsR9ivJckQWu3SidHlG9/NVJVbqjA+Cej8Ucw\nw0WC5SOURWqWira/JTonOC2KYa+SULlHiWKbQdunOJjOoF5wIPXCx2X8gOjx\n2r5Pb8L9KZWIVuom5zlGhpBvxTfeha+Q3w7Q7CP42ndXJ8CV7hCq0ALHcRWd\nD585sDc+1Q5k4AqSkp8CA53mBwqIYdNPdIsXbyLz6GyUGdCXw29+qxCOPHbl\nev/tFFKQzsp9S1zA1xqT3zks+xdsK44HqzjWE8Hm1Pe6vpbtM37jiuxq4ifo\nId/SS8hryzmUNcSj3UwezxJKF3fp/VO/YNBMkKfwVteo90WqlVic/JXW0kem\nJfXW+aw+slkfvWlEuplISgpuS0Z08TGDZy9IvD9GIRi36qO8TyAcq37snHOw\nBB5SPFpGP7JKiHZAxKIyRYk81YrihWHntFLHyRDYY7BF0tHvEJdXJ8HL2wLp\n8DVe\r\n=DILc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/list":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/menu-surface":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.35a32aaea.0_1584734398430_0.8541680660778317","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/menu","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5c351069a25db3c2fd6ed8079f52380f6fb1407","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.e75deb854.0.tgz","fileCount":37,"integrity":"sha512-YB892YC4QKDHwQhiH9k0U18vm0Sa0PkvMv9UMgYrir5j9ucRaKVeNcZaG/uP/YtuVgGSf7JwbEYuBUVaNky/mQ==","signatures":[{"sig":"MEQCIBb4BV2dOzx3FE3N+RMdoQtsWbzZBE1jch7Gk+s1KtxuAiAEAC2rfGYBsPmxZf6AHTo6jsv+wINF9An7MQZxYVQijA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCkCRA9TVsSAnZWagAACVkP/3cTmYA6/6vzUrUgc9gx\nwCXZVI+sRkztGjgSp/epGFfcpowGjwb1nA5SrYFMR/6Qqo/JFD5M9Mng5tCN\nwDfdemqH5dX+DiF7cAtVJq15Jdy+yGnnnO6495gq4RE95Ddq7JpN6HqrNCZq\n3Kohx3tywvjDH4N/6pErpgIbPAJ2BMUjqmn2SLKKbNpLQUyrSVxyPdXcakWU\nnQxH6JaYB0/gxa8eS3wuwZjftXGSH6FdKfiYwdeY9TSzJGGTI44Pz5geiUAh\nNbkKW2z7HSeRhBCWOHGvD1rKBHLo/aRsxQXvXOPZSyc0iwfuvuP4ZkQpkSSy\ncVEYk3iGGzGGqK4DGASuKCraeKgvw0nuu0DQe8QgXHJd2KOTQ6Jjd1iqnLPN\nKdYAGWEUqVb6uF0zm/PYKp/lp4bFcUmS3dzSBoVIu2XP3iYXPN8f8blwJGbn\n26ABl1Utl6J+LD0lqkiF/QrnI4ykHVpEYR3zNXb3hA37UT3LtvTDJ1yCqN6X\nHLyU6yn5LmHBJydZIMYMOPouijonPDiSWFP6T4E9eiRLkQahvi54BOK4ERS8\nse9pA1P2imfgiZedFYkB5bMePr8vyQNVydl/6OZ83dwk/gAaPfTmA0CVpEoV\nTZVnM+JR8raAgrV8PAxhXWmYpl4cCAoPAyVEFYWF/cfSmSMxY1BBCT9F/r89\n6kSf\r\n=zXvx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/list":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/menu-surface":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.e75deb854.0_1584742564137_0.7842146976915554","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/menu","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a4cde456d1c55d98e28b4fb8fa5fcc81873277f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.2cc6966f6.0.tgz","fileCount":37,"integrity":"sha512-C+iw9Cv+VoQDWFM9aMuCwArCXzLyVzW6vVICBSzIqwaBuh6+XUcDoMoBySckdeWUHxVwXGjTPnVoZ0jh2hNeDw==","signatures":[{"sig":"MEQCIA/5VC3zkDaD39HHLY3H9v5jYQakmx570aGrCJU5MUiGAiBT+nSnuHGwDw9ySqUdnh+vvSLBfQfEhGUDWZhXgfohlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUQCRA9TVsSAnZWagAAyy8P/0PxO9gAkwbbOsLcqMdd\nLE9ZB6XspuU+5Wo7H3ZqDSwZClWmoJvPlLMm7Fmpg0ObYAH5ammySr8EQEY6\n3/rCqEHDJP5+IYI2p6L9Kr7aD7/hO1UFlMSmn9VaEr8z8nu+XfCXu1XnUY6C\nvRrLWyLc01BGuPz/wXSqnnIslXr2UCjVvtukos8JpVuRLozTz0zVbmDmNtc2\nZ7SPONS9pa6BuIWuJuKoty+KfHniAf0GC9xenZIiEpbcG1W1EGSdboFe3InV\nZQ4wJL/StDk+y3p5vQRh2K3JPlImPihCcxOSgVXWy32RJZDU2cPLZq+Ih77Q\nx33YwTcaSB42uxJ2EmFks43PKYwMxnYIK/PNZ9TqxqyRuVYzaWvUR2Bz855A\nCNx5IHkjEyhZMsjuLvFc77TjxoFrZ5kx00rKeLBAJItsH3N+UJBYKLoMLoKL\nbwQB9JuB9putzRXXu2XBEZ33gA4snoYhsMu7T0uL1btPPUnj53e1S5io5hmP\nujg53+UBLAMk3nRo8NB6BjLXbODN7IpXnbnuJomQLvFisQ36nDU1MlQnu59V\nKtBHJcciUQ7Yz4WYtPHCnlvKT6Z/CPshGIoT0nAbS6rB7ffcR+xWta7JIcgp\nT7YeyIGakIwQCM3Iyyl25/kzWR4QyOUfbMGESOTyxeh1uhwuo8Z4Q3A9js3w\n/Sxy\r\n=1C7F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/list":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/menu-surface":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.2cc6966f6.0_1585075471673_0.4670806932432099","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/menu","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f2e6e201462165e9109506b1fe02e76486a44e1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.8707953b6.0.tgz","fileCount":37,"integrity":"sha512-CsAaOl3zju+kgx4qPKmroJVhvtOmI1tgZUlnLvQmfC+ZYAaLwb+Zw70c5+ET/usotsC/idOFnJ0iUaxpdUgPBA==","signatures":[{"sig":"MEUCIGQ/B/50LIg5hYkhog/ANPzqPQHiI0FCt2KtOQmSysA0AiEA0UW/pTYsQFnhOmop99cxCKmMjceVpdqubZ47sYQdvY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXlCRA9TVsSAnZWagAAgswP/0mZrgijHSSjrX+xWJQV\nmF1lqHPYj3cc4uHIAtti//zjKK0IShxeKcgy+DBONx7rrm31R2+Czk9Iu302\nHV7dd+DXipoNBLcA7sLYRiS2RJBwEzk9mHSREh129kYSYvf0jeLv0vHNJfYt\nIdhPV3UjdcI+QYtrvZAkngSiw8YmFEPQEw4Jsf8WFZeP6WS8SiRSdtHZgucx\n8LZ38rtWxllO6ggEybMoW8BdYUXwGFeK1PB0exg74QrwX265HOm1su8pgDjj\nosdEWUIIJE9UFy2ocnoSI0hDcfuoYuRGQzYilb96pRG6n2zzpf4sA6mPbRZ4\nnah1IT9Mwto7cq7svzz0wfX8uj4u8+JRcsQbmYkBO4+1QbgPNc8ODgy67ISf\nNPfTP+1jacdy1JAC+Tt5wab/yCeQp4UamfbAqGxPFakAW4hUhvCFJ47S92jP\njgL4gD66vM/M9gVcuspsNHIkNT8Obc45q2viaJqEutIggezuhKEVJMXNSs67\nlRGoX8uY3OLiL+K7y4sA9skvCIo1rn8ZX6ZA4o+2hwBSr3I8vyQAzqU971O2\n8loW1liiCP7pHust3wdiAtwZklmli4tzpMSj2KR5q9BFELcG/cbdij7CbAxu\nxdsMgxXeF8++GfaIG4hNQYa5LloBtpClXaMfHfrWx0PS0dOSeHldBZK3E2pK\nyQQI\r\n=FSMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/list":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/menu-surface":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.8707953b6.0_1585075685408_0.41784599750440554","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/menu","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d06520a59dd77b238e6e58e11fb42c95f6be109","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.10af6cf39.0.tgz","fileCount":37,"integrity":"sha512-dFFSwRRRcYhf/YKqtheItNCVfwVAVY99r2pobcQCQ3pAJ6vsg9dagrhkTGm5lup61NF98HtpQjnZ9GairUywYA==","signatures":[{"sig":"MEUCIGhzeG93Tfs/GQuxolN9mxYu8vM7BUviqRLTuxoRNa9qAiEA6rssSqNtofWzOkehE3hzb77Z1TTM+gJFfITP1DOHhF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CgCRA9TVsSAnZWagAA/DcQAJP4x3YGzjeyNgpbwEBg\nDjw/oyxL9Bi2LTCLuNc5bvE7Rb0VKg7DFKaWe2EoR8XllhTbAMV8yfNK2tar\n4cESa277gTE6TBmxGd75a016JHiPKM/DOCWGEKKV9rDlRLaCEQwrx9nx8sG5\nBtlvRByCrqUatV0nkK9pSXgUTmzaujdehhfuAs9xMIhCNvsVc7RHtM2ytuLC\nJkwRYWRxGGzJfN7AsWbyvFntyl1LYW5k9iL6Y05lnBEstP5n3+sLOq1AG2te\nHp2QjO50jz//B+L2BaxMk2EJTJZJWShlV8CurFr6xYfavcWik0jSG7PTbLX2\nqifOhg55dcziN2Mf3mthOkeCr0dKi0PT3HtVdehTvTMv4JbrkLCf/MH72nxb\nFJcZ9euVP0zmIEagzY5D9lY+oz101se0pO9EfzeT0UYAvjl+mVuLob0z4UCQ\nnTUMg93wqPWofKtDEATpF5+wQWjNMcZgphiSvH6l9YA+MhHpGoiuX0BlK4u6\noDYlw7KjEZ+MBmrOl031UUWipHcyR3mnvM0PP5eRALnamGWJlpKEIU1Wp47/\nO2SKXVA/95GwXr9bvjEZPcu+9Wcq4YazSyfXnoh7b4qGGBRgjU+D0kTpz1LX\nhf4QK/aK4QUhGirfQ96k5bX+xvEFmS7ff7RDJimTZgZJKy4jANGUPgsQEjOW\n468u\r\n=zPIG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/list":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/menu-surface":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.10af6cf39.0_1585160351884_0.8343944312044476","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/menu","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b2f09a7aa085b74212f53b399071e98adb09bf9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":37,"integrity":"sha512-o3IRLF2Iyk9FyOqmTLMLr029EjHXmUrTtwEhWoksoyZNnB4gfNLMCgSD5equ0P7AJWvWZFoE+Ob8PY2NGKOUkA==","signatures":[{"sig":"MEUCIAWGPqZ7jsCyjbqjRLwHBSbO4R295kAwvYKkq802jckXAiEA10ANi+HbePLYlfkZHCaMr4ux25kgoLYR/T1HBo400B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkB/CRA9TVsSAnZWagAAzEwQAKUbGPUIJmxWmNQAFQQ7\nWZRkTNpt83q+x6fpXhmg5I99CHIkuIn4VPLfcK4dpdT1ldS9kzcVO356/2ft\nqivM7B2PRSyuXgObPyvkfi4aMXgM1aJGRpej5Jj2sBrKIE68txk+sl6ZDIiY\narmYxidB3c5y8wwfzxLXuD6+tY/3+fwIcLSDbK2M4rCt81s95Yh4cASidj4Q\naznpRpzqHebyfuJIG1pBah9hnHX4E+qFvHYEVytkoNaUrkdaAgbSlMZU2HR+\n/stIeHEhzTCAyn1Lo7NtIyh10iiy4N4ocYCKonK+hnxAojRXOXoEIwrUr8af\nX2IwRxxv4+1iazoTvbZ0PbJ2D6mK4C8pJh6uHbOgee8kGiSGk8Gyl675DYP/\nM6lhyrBeqjvJpW1UyGXMtc1dkGmJhhIIVL+jKjXZIYKoTtaBWAuHJO81AjBX\nRh0Zk0rxdbj/hvpVGJh3jELWfg1LTYgfgeNHtXdoO/Z7u301YtmZijOqq7Mf\nhml3WXp0yuuDDFXpj/eFU4adD54P2s4/iwfvHjBEtNzfsKqF1Pa2Ijw4f0un\nF9fkJ9CPQbPOHonBGju1l8AipGLkn/1cEMeXgXkcNO4sQtSeUuW3Mzyb+1VU\nPZ/ZpveZp01JFe78p0PWliKRdTaVQz0ujF9GiuMqSxHL/0E2uv4BuoOi34i/\nlCU9\r\n=xtSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/list":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/menu-surface":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.7d8f9c8d7.0_1585332351023_0.976827356414532","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/menu","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8d109f0f13400b6ec310867e6e26fc5917d66b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.d6315efe2.0.tgz","fileCount":37,"integrity":"sha512-zwCrYSlKFYFy45YUe7xFcRCX+HTEUCz9qbw8NCXkujBtsoafXxzhHG86xD7Z93jmZiFlMrjYdvvCdwKtE8lTrA==","signatures":[{"sig":"MEQCIDOHlamqnd6BMPLNVMXZmIcT9aPix4xX3CYIZb3UTY1PAiA/Q8IMPe0+Pos64cOpWMHB1kMAZaxp7JFPGO1nWoWH/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqdCRA9TVsSAnZWagAAlf8P/2CCiSXkXVqm2c4FGSg1\nCRp9LkajiPeL2sm5gCNi/rLrffBTGS9u91O+0h52zEJhlTawrIn8hI3h+mZ5\nDuqto+b5db2celvXWImB4u7ske8+N1bMY6yq0j/ltDeep9jX3xDpSQZK4YG9\nKGeuwcbDxhjgeDg9JQ8QGtBbs5+vYAhlG4xNasSeVzixcStsQNcZDZvB6Q6b\nt8+2sSPUiCZCeOcQwAh3T1oeGtToL8ibGH7x+QpGmrevh0vyhAEW5iYbDKxt\nM27xb7lcCBQXLnSdIN99fz4YN68UWlCiGUaTkPHFYxvJXVpEr7/s4Us4mWjp\nn1QbucOGegX7gpePh0tmMohPfQduaZG2QUpd5P2tkuTXiMgECsdBikt4LgiW\nw5MFQyRYUIKVTQ6OOJgMTFXbOjnI8GGAX+iCrrHthv5H+zCtu3k0RUShPphs\nBJDIrZ14BWRTAw/QVDdaDHbx2COus9uvunfrnpvga8pLgnxb472UG1gLwqN6\nCZxwCHptn+3r5mPpqmuoBoc5VVx1zvbtHOa3DaEJvU72a+baKRAPtOA17B8l\nnLcpjQl2Gd6kBM1ERsJXV0X6lJhLrhmVdXuW3rOXydayxB8d+N422GDyTRCE\ntNJvouYp5SAzevoczTDre7k85SecBwOWNR/sFdoBhK6RAKQ80xWrKqXfZ3Gg\niv35\r\n=pT6v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/list":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/menu-surface":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.d6315efe2.0_1585339037035_0.040101606709986415","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/menu","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6a77c3e027305ec12cfd61c2243d09217377e45","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.a3016368d.0.tgz","fileCount":37,"integrity":"sha512-wHD2EeXeztzTkEgaorvKh8BPbgUdrodoRXdfVXtgzmwwAaAvvRGyvXXVLz4bVELabHzdwrq6mDPAo+WaEJadLg==","signatures":[{"sig":"MEUCIDMRpkTc3AsfZ//mYORSLVcFW9hwdNqMA5ouOlvy2KeBAiEAjKqm+hfII+6PXILKVall7FYbuzve1GmvWDHIPLV0B+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4UCRA9TVsSAnZWagAAJbgP/0FWdRwtDwuzzuPSCrhy\nnpKlP8KTYb0u8sXUFEqIq1oj0aRhhFt49ubx1HHRwoTyJ7rnG7zZjciZDp1p\nS7em1PeSCcEzE2wyugyw0BIsViwLlB+6+tnNzm9xmmatpavL9t1yfmLXfYak\n/pmdtMmtrPWQjsWlskHIMwtwYw8Tz4u+t+CRUrGHJ0kBLCipb/Yt9ZFcsTjT\nZfEciTHNyRxxCIXDIPy2SofXG2WGXsY0ylg6AxfXxr+gLtzPa6pMrH1qWuYQ\nOvEqp2uQ2KxvS+VH0EO5KjHFW7PdYkOBGSxAbuQa85C8UbHu+WuLIexBBLt/\nYoyPjZOWHxlH58EYAPN35o3juKr3om44F0jdQBIg4Egfmqj+8/WcJ2VTReWH\nRGGH+tAJcTgOevZXEmrKQU1YhZ+yPUdCGBYQC96zH2dzAhD2vl2YUwvdfgU9\nipySTFIijAfP6LoC11MNOnWll+ytu4w78CP85KnNixX39GswvO4P/V3VfNPz\n9tGGJ7S/z994v2lBG15xPe/nF6wP/FLcKWBI1IRFEgr9JCpR0/O9q0NHmX1l\n5IDYbw+HcuUU/eujIbaqL0UYtLJqOqUYBZgzKAxz33PY2ZsLNJ64ez15x0FV\n1pOltKylK+6gGLonIiKAErTL4sjHmpdXXbv9hrXy0FwComM00dMx/vADFNYJ\n1qBj\r\n=fG32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/list":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/menu-surface":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.a3016368d.0_1585344020365_0.6192692203870906","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/menu","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edf590d7e970da0a0bbb026f535ae67223475b6b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.4b45b6620.0.tgz","fileCount":37,"integrity":"sha512-APEqk6uIuPvGUFUOLID33fzUmjSij5HFZaJ+CvPJL35sSMV/YL1R0OSmWCAq7+eTFtAqdBoOxa9U/6st4W7QWQ==","signatures":[{"sig":"MEUCIE5KG9LoW7kGjxe2fz8dw+8HpZrsMGjREIp7E9r1zMS5AiEAlcKc6s2h59RWKDIo19CCltpmmLSfLxvCEny73LlPwNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hYCRA9TVsSAnZWagAAPxsP/jPcq59BFKJ6OirFasKu\naO079+NsZnNxKzzGTm3yCiqjikEHKWWkmkT8/2UXT/XiXyZGhxfEkPcqFhBZ\nE8V4/Wz7f+DGFaTgK+D8EwehaCUEnM3hEXqpHugLde/sKmK4iv728bnQM2cp\nsoKjXbi77yl7b3e4ir0WVDvBetFEbq12bEYe3tYnNvJg689cSfwqa9CZsBHZ\nEXXg7pPTUhXrs/47zIzPOOqPd9Z5uW3Ec//4xgFG/Wgf76uzaikjBT27mouM\nlMPKkb4raeFvAo6UwOSE0Z6tTb6TIExZ11a7J6UhOwJEsA0fpo3aXHKp0HLJ\n/lnvZZumkdrcy4S+7vqtBBBvOONJ804ioD0FxPqMl10ucK1+gxtx5sekZ6DG\n5HsNs937MFmsqAe9/UYYPP1HzUwDoD9qxmKe/f3bix7MRrWWnT1E4aBPQx3j\nP+PwTufpMM0/BtUPP92NEt3pobhe88YGWSMCW7k2q4lRu/QAgSVol49pPUOW\n2sKt4LvvIjHIu4ODwQKm19+l5oWVNnGvC9Vz6Qwdez4dClSI8X+EjKMW7fLF\nFXVn8/5j3oB9dA3mIE9guL8eFQYelHDZTBs+Uzb3ajCKGKCUH4YKf8jPOPJj\nAmhvEg9NYMV0rwEbI4626ydXNRR1CN6Dj1eRjmFh+wmiG14VLbwM3MRDWkFH\nZUYA\r\n=kdjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/list":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/menu-surface":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.4b45b6620.0_1585670232026_0.5798778263466537","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/menu","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b18ebe10af760b9b5255ea2d309983b4eedea61","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.e84b9c8.0.tgz","fileCount":37,"integrity":"sha512-N//jMtqgce2UcfpkTtkvMVKYHJZ0w/KD4NKgE9L/nTNqdYFWSkCYL+h5nhEz+le0osfzJQkG6TkbZBl+pNkDSA==","signatures":[{"sig":"MEUCIG4GCM9MpT+1IRm5N2Lo9WLRQVUAk9xTRereLARWRaB3AiEAvcLzQg5sUG2XOLCdbJeg7jEo6cV9EvIa3N0Qg9LEStw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfVCRA9TVsSAnZWagAARR4P/06sloXrPGjAHV2D+UrK\nUslkfZO0D9JmKERZgJRkH9Dqu2DUUNzBKOK5OLxhdU75wAf+zrLU1KU4hUYV\ns3Z6tZVwXJwOplC0nBTt7UH2Mb+arJUW4cb1zf2COvyr+jt/EOMfy+29SHOY\niZ446v1xIwvX8EJBhs9T7RsxvVHB+1UU0mf7JFpVxo+FOfAZveCr+oKE5Mhf\n7bIzIHpTXqvHUQbqIOcBntLx2zo+y+RSMvDt2XZpHNkETKatF9XJj/L/gMbq\nukjWkvEQrfrioC+wfERaa5A2Tl4SEJgy6tpFOa+tx5HbJvh6qvVJdJ/4950o\nfd4pBpK64KALg1vU+AJywAYjjGHSXSgdZFJb4abgwrTPIP0KSQAUafZZpSbl\nOS6SDgUvU+NS7xmr62OeLGvB4v+gvmBx2cZ0OzvZlA5b+wl4Ok9qMnWANkFv\no67KnEqz0k3whmKWby7+4Q9Bs7abVyqUasXM0/S0S4rBumzqJBb4wqIs6Ipn\nWWZVQ+a4NRWDV4YEvxqkN7Kw+W6XV68AlxW1qtCYKn2+0GRa1/Big28hzIaE\nFlC3XGVK9bDkarbzEPSYVER/iEU/bnoMOeD1zT4rERN1xp2jqxJD7UUwY9u9\niuuoz+WXHWz3NiTRs8EuniFlc/u5XPZpPB3U6XPxL03IztlwI7AQGno7hxT4\nkYrb\r\n=WXEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/list":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/menu-surface":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.e84b9c8.0_1585760212681_0.8974932903426498","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/menu","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef4412523ee3f98c86358c5f5b89667aebc5021b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.e33c49e.0.tgz","fileCount":37,"integrity":"sha512-dSF9SiD1FsyE26fOPd/o2TAC7xSUz5byJKZRclLNnHVa013SaWgZMiV9J1dgioKIuqLcaOmX8S0wuGXqFgWjdA==","signatures":[{"sig":"MEUCIQCyV3bT++g4Q0TGBjy+6wYsOa6nWBymY6nnxT4SfR5BYQIgcDJQ8aaz6lMUEiWwWxBRcejdIkWg9uls/ngfJQ/KWDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1xCRA9TVsSAnZWagAAUHMP/RuLevPFoTYWHytV3hli\nLGlo8AgghFfntX6hfyvXVVGZdFX6v946pPZUtOdiK9svZQ4yZ9XRrtFfH5rH\nbT7oeJJJYeNV6UmGNoCzqLU7uWTRmPkVyewgsK8saAr1cYJ/+G3P3FyvL+5G\n/CUkVNuu1Av1JT/RgtFW0q2BlfaitZiFwApfWcCseP9b6m2H5b8MmOwUyE18\n4PD/dqazo32hRn7+RuWZac309Rt9LI3twPHzwb89KYX2dF7WvUR+vywbi+AV\nGZ7qJZgibDr5Vk6j29mymj4CC/wdRP9ADMwFO6CxY2JR2VsJMSOnOgJe34jo\n4jQrq0e0Ej1LZZL37iugEZow+LymDt7dMRQtop7FxQH87o/g24RTHBCD7EFD\nn3pH7hHEPnvsxU/wP9iktzBRvvKduAeLQGJZeBczyKFlApMS9irzu2f1sT+i\nilvW2xi7B6beYDlVm160VZFjirRu7rrAJm2C1SO9kKfRDO0yaD3Wg7efXfaD\n8mT5ey/Itb5Q+Je1QVSLm9q1Er9YEFeNlKdkd4iZoKyR1jVk72Vc6CYbbSAO\nH457wTe0Q1ff6whMdmgD7DhLCoEJyEtOyL4bwmDf/97PUCI49LWMyfqzmkkn\nOxiDDaG9VYqrmOZqbzs+HodprxdAVDiJa+VZuPlMAE89fh5Za24D5pW02Hpb\nxz26\r\n=x8MK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/list":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/menu-surface":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.e33c49e.0_1585786225420_0.12718822799804963","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/menu","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f322193af6fd51b3198edff9574e8897af9cef2d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.f1f8e60.0.tgz","fileCount":37,"integrity":"sha512-FN1l1YJ9DVJx1Kxp104M1fL1FrHldE6udNZNMIsB21Xmo3Bx6oZ4DeKZHjbqfo/UOSfgwqIw+prHM7TgIIshRw==","signatures":[{"sig":"MEQCIDr1mwLhPs3q4i6vM4OG9g9Eqfcxq8WkoQHemaPtQDk0AiAbe2Fxdzy/eTvwh9zQBf1aS0aPWZrl4t4B1yNjE/x+vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmvCRA9TVsSAnZWagAAjKcP/3xgBXTwea2zO6BtwbX3\nY/+Fh6sUIh6BtkdwPWviOchQO3m+ZWKGSJYYZzex/fsJDye+2bMf8piVHrH3\niGtEKY7Y5N4XAdfExPjWvj5jVr9Rfv3DOqOOXxSwHHNXHHH3Trn6qqLU26Cy\nIJ/WS4MXkuinQG4ZLqwmUu0k+jvO0685J8IgnKdBKBZ6qmsvZjG6aZ0lrZ3H\nSnMuxrBL51tywlB7k58w5paVN/Z0q26xijlPqZaay0wSV4oTY4rFNfzjUKpL\nn6cupHixAVOpT/eoS8rcr2P5aY6shVtXJriH4UZlOUmI8ACSApuwHAaXgW17\n47xiB0FO2vVBsInjC6f4RDgWGHaGXsV1k3WJYIdkioEq7fibKw2zIBvdupCs\nB0g6fH4s1v/S9amevMpVV5m7iPWN0jxTY2vmBiacT+K66zMfcnBSOIn3AbF0\nRFS2iQWKKO8TCY50uqat07TWiDquHO9kzsJEp2JWEglyu/GlgTZ7Uc0ii4BV\nll+BdfqVKSusxNVpoaBMBWwd5+9oWjix/Q292YiZnwqErAFtVPZsy29y7Ykt\n+g9yS9l0fig7pUGgzv/fuI2SMH44QmavRbYMqESxhL+Wh3SRVDtULq1pcLd8\np1uB9No2jO1ZpwDN5TSLJFmUD5S5fScMcGvV5Ot5+rPRcPBpsM8lNpr3Uk0K\niDjD\r\n=T8o/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/list":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/menu-surface":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.f1f8e60.0_1585854895164_0.7178548651592471","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/menu","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dabfdbdbff4394fac879f37ccc17c282901758d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.1e17c49b3.0.tgz","fileCount":37,"integrity":"sha512-W24YvdTl2HXO1QsIUJrAzyE1Zrii1RwXokUa1dQT/qcnM6365lYa5aUDrXRPmJhZU4gKHCtMi6Bk/Ax0feRIlA==","signatures":[{"sig":"MEUCIDzSPU1cfasg85pEqQ2mjp0VFsr3MwpudQaAT9kU1DkWAiEAwwut5vJTbYgxc8cXLO6rVbER+9p8A4pAgxI5MyH8UYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rLCRA9TVsSAnZWagAAHg0P/3jbqyVH9D1JMlEm5Cl2\nl5Waiix/wl+tK85WE2GJNdxsR9xbx1EtjprtMdOqbJu6SU7Ahws42HLH2wuI\nBfWLcm2YhpoR3c/xi2XUdZnyM4a8GKscSgnYfkl1CZOX7sdzFS/lXMjQzo4t\noR03I+b/SvUirFEJaqKeUZFd4JkDE/83UoEnFErLMXr7DpxvtmbYtir0v0vK\nr+0B5uaP0GRhCqIShEkIbBXoy3lNBU2MMu61r03emb9fySBDB2e4LlfurCb7\nlpK7TWxLcAfZc2KPZvtpaDFFD2CqNYhhvucHRHs43p1pOGW984WtM1JEb1vS\nSvNhFn/yFO2CTrUV/A8v44bQGGaKuqYBtSxtF03jBX+6SYXV1IFs8W3JH/jL\nyVSXxu0bgQSUlwALmQAfVhH+W8DW2dHF0F1QcNBGXFzur+nukco6RwBp0zLh\nP4bpI08eMWslTqGRnZZPPuOwvOL0aLfnkKla+AhfeNam1hK7EQpvwpiqCSnP\nAyu3CIciGVMp0w80qebNj1vXzizCtN/8lVpqnqqxtGZ+mwatNERubw08nIwF\nxYcI0gJCVgugOsVELl+E7j5HOmrzZuGSMlgYr7xyHupHLYQrzqSkj6RE0wTn\n2C4cWb+hNkvqfPaRYrVX+mCgmcsJE0l+GKxA7L4gft0XRSdwc7bL1hLhZPQz\nXoId\r\n=j45c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/list":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/menu-surface":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.1e17c49b3.0_1585937098463_0.8106809744421852","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/menu","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64edf8f61201f84b45e7ecaeb53ab59ecc28ccb7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6a40ef217.0.tgz","fileCount":37,"integrity":"sha512-JtzRWIO97NiC745Jufiqh0d2z0eGQnE1p4Q8KCQqmFtNMKfE1zUmtuFFAg4vZRIkoyQD9TMQXmeM/+R9ltzfjQ==","signatures":[{"sig":"MEUCIQCZswyad38/+95gQE1pfc6klkZnIbMp9Zh9elr8asjFbAIgGvbU6ky3K+x32hx15GHPmf6rEupK18pIvZ4p3zN9MAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42wCRA9TVsSAnZWagAAiP4P/1v1xA6Syph/N4/nBThD\n5C3YOn54W+sx2Zj7hiRgs5A8ZXJwtAK2MBF4u3fUH3CpPpwTahTXG8n9ipnv\nrPZRZN55yjhffDdWNd1bYN/a7wmKRyHXaXhcEQamOw42/vpVQKSnk59NdPnU\nFBw1OW6WAxUGuV45JgVKAXteddhbbpNsJkF4wX4QlVsxg9qW0XyI6wzrD66P\nZvVLJKoIDwUiKfcPjS6D8+lNVgGNSvF2nsrazWe+irYk4j0UQzp+EjqSC5ZH\nQulIkFX/mEgnYxEv+ENK5CFFE3eDK5N2mWnz9AJ/+PcGZyfvSb/e5vOYwepI\nvHPTuNTGMHS5IsXqTjQ9IEHDAkrJZafvLZFBtxgegW5No36q6xpsz+fNTJg+\nvCVcHUkvnYoFQVs/Bdb8fFaNpRBc+uPpKoN/Edkbd975tvW9gJKiQ0priqLK\nTg8Yg151TjefRgZwmhk2oipG3xxR6AogibP5yiqrMs/t2lqUqZPQHy46/3eJ\n36YGs3h0zArIkxGfuDjvnDmK/Eg0yMgCoolL6HzHq8e/q90ndN/LrwIx28RD\n+UKxWiZhL4i43iFNWu3wvyd9uj4w3WxO0i/sJ9JfqFod+AIHyfHFrHRmzcOc\nw1iZdb6tEXjzr1LaMSMJq/BpU00CuChcwSsxxYBQMj+wEcta2IHQ/A4zK4BJ\nCl5u\r\n=F7AK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/list":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/menu-surface":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6a40ef217.0_1585941936028_0.6169101383798217","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/menu","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e0f091f4ee86335528d58778dc4b2046637444a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.5f24faacb.0.tgz","fileCount":37,"integrity":"sha512-nG8rDhL8bXK4/i9EmTiqmQMzsfUpYTIIMcb2VHaj3OVaHZ+xI7cc9Er84QWuT3sMg1WtZbo0UxkCbl8wtSxlkw==","signatures":[{"sig":"MEUCIQCni+Jix9dloI63chusaYS27npKcGS9/an/dVnCNAFyfAIgBc+EvQpGkPK4tHb3ZEuCS0NGs/FU8oPfOXg6L5AmOxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje/MCRA9TVsSAnZWagAA704P/A5humiKqUeDZ2sVtzIx\ntQT7gyzGmJNe4ISsqNtMgD9uszXcnACw4tIfeAGQsJXXxbtLDTa576Y69r01\nzik/Vbp1ECDwqjbZTiYZzsiFWFPck8Sjl3RBP8Zo79WlK8PEgZLEyOcnIYTv\nBtYVVixzlAeBskd7xol3Yq3jDW89mCZrNr/Xa7zSClURcnhn/kIuVPyA0Yeg\nwa4VRE8YwhaFXD17nPi+T3rnIMWzrY/Ps1aeoxkqhwTsqjUNWhVvKR8IU1o0\n35zQXN4HPxMZ+H/gx8HIi/Dr/6Exi67qx4o5Q2PJAGEhDuE8PKZuB2EEBUF9\nA5VrrG56n41vP1jhpA5XxQ+R3thVif+txAO71WZQVcy25qnoUibO0LqU/xXf\neozjTEEAez1QOS9VK6QQRLApDzjjvJiv31qVS8lZv0jywjYQvIMtnPUL643O\nWyqPxkwIffSh6dAz/7YcVNsnS+BSVRzjg6Kjau+ow2tmHlHhY8v6HXCXeKdI\nqphczEKzDYyP0Wiyrh5B1dulj26IClVXPH31OEhFB+/R5lWiEi1tY+NdIuCU\nM5Qzs4Hae7Ja1lrvTk8NzIbzWq2enMKEFsefskQD2HDPmJCvwKkrUwlXK5Am\n8zcnR7AEk0uY6i19M/9uyc84GJFhhya+hXTnApMasj2djZM29tkIAr4vjJ1f\nqso2\r\n=wS34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/list":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/menu-surface":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.5f24faacb.0_1586360267906_0.48544718239224594","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/menu","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a89cdebde82b4e8820adf38fa0134a2eda166d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.82fa986b9.0.tgz","fileCount":37,"integrity":"sha512-uGcjbWvnyYlxOr40GiOKJ+tnAOl3KMrRQdU8p3E03+DegeC4X5lNgmNmtSbQcJ+WDbi5pUo9xjBd1W5/5ujX0g==","signatures":[{"sig":"MEUCIBEYOXWqqk8fX1zNpJRdNDAhp7GTwSpwQRgFZVxJozUiAiEA1YcfB+HWr0iobeJunLtpwWhKwfQGqGSW5RFtR5dajI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDyCRA9TVsSAnZWagAAz2cP/37kqGFeurYajk7hAQJ9\nujBWKzz9CrxwiQyyHel13UOeiSS0Iokp/e34OKl+99zzprDLSmayBDeMvrMU\nJj7hUeaEZA8C0Y185hwjudnam9YVlEI7F87aDNh7d2WxF7xR8I9bFGllwewy\n8fO68ZMSP+kUyUW3RYH0imYS/WpTsfNmMQ7yaR0NU40TX7eqP8niOnyzfOsQ\n+AljLOO0vA3Wf3FEcI0w71mpPXwHyIrLqswEI7kK2scsz6A7YqpYdUT743dp\nxOBQNrZZQCTd0P1dDKVsdbly0h5M+CAqjcgfo/TqVtqpGvH+kAkDWuUoyeB6\nay38prJoCdAvjjOSwMQbC6hnESUO/fc4WvJMaCGtsy8cEPqKZsrOxP5DgeoI\nhCs+zI0rXsgPs7Z5bKDzsul7yKeM9uxYmrNYqn1vlawY3QlnsdujraaVqCaT\nA21I+9OHmq23Y2yx1kSIDG6L/6fHWKLJIdVFAfP5I4YlF9McXFXrqlJEYddH\nKTcPwFX4Y7Yw/MGsnP7brc/9vbRkDZbFixtpR9zrHpL9F41i6syGiwZ2mS+O\nRqg3eE45jQ91cMOaHYgu75RJKKz+oTnQ+Ev5Hmo7oe6SJgnNtSv5cs5AakRx\ngRA9Ou8PfXzQgWY/trPvMNGpgLLiC7EnOP4tGJ30oI5FZIVF5ABBvRiWzMF5\nM4EM\r\n=RRgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/list":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/menu-surface":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.82fa986b9.0_1586360562041_0.8802617748695789","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/menu","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7dff59962ca5b008b557d60df90f1c07c99cb7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.9930d9cc5.0.tgz","fileCount":37,"integrity":"sha512-qG+HyQNntnZGLvlPvTSm7KT1xOgle6pHvT0sdeWLsCY4X4y1UZ4xEgYC1JHvrFwF6rpJBSFiPQYbFT0fjOu8YQ==","signatures":[{"sig":"MEUCIADxDz9SjebyatkN6AFAWIWhSu1lOweAqBz2h9g0y7PdAiEAlQJm4nPLbjApVjaGccqws01p5uUrmMKYVKd2UC0mv2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejicCCRA9TVsSAnZWagAAdFYP/0dcdh82eVQnavdwtcWN\nTtCLv/TRDxqUX9pJE1tadoGD163j3nSUqK0wLHJktznh3aRkoBAZLID+sIVr\ngnlvURKkYlTGJpfVsnGorrDqSMt6M3wD/5Gd1y2BNo1CUId0ZpH6cNZyR9Mo\nfMN9e+VgqqW233Mu6UX0E3m2K1moF6sA1jsGP7/NTLuLb2KMqPveKAsvP899\nwg3RAwZQoAbxO242+ymwBpZHGHQYm60n2C5UiBM5eES2zbRcNxRm1i65EYmI\ntk8F2km5dp10e8MfYXKq54BgyvUAwd5/AKszSZia58prc291e1i9kS+FiMEj\nbjEec3BjfwkJMS6v8+teVsISN6InFE949qKoOiWKgj+ntFc6F60Lnk1BXAWv\nKRkAi1zA1JdJsDKrdP/JG2GO/f65tOjN0xBiOLDSvZ0+KbW4atQ5gkDl01+r\n6zrCHpqH5Rz4FgIS2HQ7QvXAsst2rkjcP8zqPhvCZS+smmY+DJKbEcCKkv31\nZ8djdJXAHiD1E6UImYr3BjSS9xm92X8Cs4vgceh74ltrkfKYCMhMuYeMM8pF\n/kwdzyCrT/XrkvTfZ6VFE48jOCSRomxKGTNnBOMwnh9S3YFdOZj5ZyN/8g9f\nH8a2afomcmpijFfJN28EGmmUre9OROqf/Nbna1FRCL52hdcUvRtIyMtephRS\nf0mB\r\n=u5i1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/list":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/menu-surface":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.9930d9cc5.0_1586374401750_0.7449491175033216","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/menu","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b6b374dbb47f654d2fc842728ce7c73a0fab1b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6601d24af.0.tgz","fileCount":37,"integrity":"sha512-KxbUTsFfRfMiyiXAvamzgtmoWeDdfSqXkD58St8+aT66RZGTZwxU0n1xilkjOyVRHlwrUgD1wWYu85nZEUMWlg==","signatures":[{"sig":"MEUCIQDG3kPwMZFxmdlLX6i8/9f2EqJ0byDyXKF2zTzuUK9ZcgIgcUsY3n3Iu+g//V5OxFsoO2U5iGOfyzexUM0lCZrtbKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmy2CRA9TVsSAnZWagAA6moP/iABeybMe/9OWPCI6KE0\ntEKMJp+Bf1bWCTUL42gEUKRog9uJGLX64tqHXsFiMUNvefJqvAkGQsQmIELh\nyju3l4Pg8I/JuqmWdCL838JLV7aH3OAcJ4aGWpIdTK/ZOrbzhIwnuQpMLrNM\ngQ2sRU/fTVvAbHquO57fORKJHtoPLPz/N/N7GilC45yM5GSrYVzfuKk0DQqZ\nNDA1dXJbhaPt5Rmo9/+AK4rEt5KD8dBOPHjbAO3RSoXBo5gNYJg2/nJp1f0I\n30HY4qlb1rUa16Xz+K3O5peSVgGY8eg17yuIDLahDt0prdWqRzn+YiwXzTCW\nsCfl/nsmqSM36o5UvPqgrzNqLzxGzdwzZIxNodq0r+PXYE6Ha89//tQHxn1G\nuAEtRuFl4CN28irSnKPE9xN/03eBsxj6DiJ5Z/2ZCEgUJSNFf13QfM4Ex8IA\nyRJGwVrwRU5NN3M+AEFT6hHHEPLL+q8ULE9bAF0gReJEjmKSyXdWUrjtFevT\nur5WlBNRWAlQqn/KcvTW3+8b46/TAv/wXa+MxxBPqkTsoELpQiEAse/snc48\nTJ59qe05a8VvJht4kQDCMtKUeFVd69v6bNxo3JJ9zqBhDeLGK3B9YbX4U7eN\nVsJVebRRDdVc12il2Tg3jg0qxTaps4eneQ9rGvLPlCsjcidUA5bsaLdpWH6O\nMc0l\r\n=cZ/P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/list":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/menu-surface":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6601d24af.0_1586392246424_0.5984942942827094","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/menu","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d58c82720277cf83fc8c08a191351001f94d93","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.05f5e1583.0.tgz","fileCount":37,"integrity":"sha512-tF8wxirVCN6yUo+J/uEWR4kEybY+/6RXAnKRq5Mi5nFGniUDqZNAtzIcUcvso1GRzt+ncI/Os0mAPpDQfnPMSg==","signatures":[{"sig":"MEQCIA74n3xjI/UjQHuvWm6r7r83yAgJR/gQm23lTg/3O02UAiA2h6dJ3X9UyxAow6nQ6874DOfNubuzcWXIhU7khcOY6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDKCRA9TVsSAnZWagAAIqUP/R/OKgc2n/qNj+fbXCgx\npkXujFdlvGTQttaLTg32c6dMPhHDP4iB2Q1PH3YSijQ3agyYm3IpVu0QOVGH\nAiZDdTxUu7qPyu/cRBvjLOyRdSLa7Qhu0jOLvEY8w80a8eKCUZw0GUuA+cFX\nXjgl//aLmPjRqi8a30kAI+pXy4nBs+fODRHSEctRa9Z5wyraMr/ajRSBnCHL\naFysOSbQH2rOqYHdewuMCXkz6pGk5GFEWW0Jr/H0X7/Vtj+g0n5tFeEq6lP6\nYH80tdYoyRfdJ218BydSKA5m8Rgd9eZ/dSoEYGQP1Zo3/E1TFJKEbWGNwfF5\nrGHxTltKy4ydovHhdalsHKyAjxTV6xHeZ1gpNpEzj8auoke4CHJreisC2GDW\nPLYs9dROAN9sdxaVIZxgoml30oW7do8Y6cL45Ki+8FiYYfg6AhnWqQSg7EuQ\nSKtJkrylV+pURM3PU0MhLBYO9K3d6fam0+V+vxZpVskNGH0uJompefY5qoL+\nOS8/WrjB4fubjskTEhHvaaRusZirLdKXyY7ozhA+H0xICjR689uRbpknnZN4\nVtwZ3ojB5PJc/aZ1/KDAx19xzLj5xAxe3HhjWBPtKBh7nz5/VeQX+QH3CRbv\nf5Teuaos8B3jNhf1hX0LpPqjQBviUSepOXpBpihEXSiVFh4d8Bv1iG2GFQcz\nfqi5\r\n=KKjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/list":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/menu-surface":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.05f5e1583.0_1586393289877_0.07699663905466436","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/menu","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a477ae182a9d2279b0421d2f1ca727eda69a886","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.bce00e186.0.tgz","fileCount":37,"integrity":"sha512-89cV3lcZ/ezHtc3ejeE3mS9iGf2MoHV7us9LiZyfAXC4o5snd02sDclqWI6DejY2BZCFgkDQgAL4xIqlTa++7A==","signatures":[{"sig":"MEYCIQCW/5X5jsWG6uG0AWnHs4xLMKpo/eZX4E19d5WJxFX3NgIhAO+slaOcHQCWEdDTe6QS8+wxfLDou7LVjFYOSCJlzO+/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4SCRA9TVsSAnZWagAAvJYP/juCGgMIMnvLRXdsA8lj\nRoc8XN1b7RgP9nt4IIEGGGRyNNHURvIJKC6hVlXsbuRL5D6ZXwEDBXlpbytY\nvtBu4FnGh9NQLVe3cguptzJhtpcupijRLTmHUFMwpufEXQNd4QWXwXPzrEAE\n2tE+STSogVfgwu4Ai2wqmIRWXXB2r4imhojfxEnC6ZQYbsm1CB+i4WjKAPrD\nCU0bY67gPwZ+f5g9zxSTDdfIBX6l+uS6JKi4yRVyOQl9uEv1musgB0tRe3tG\n//XtTm1tFMvY179ZtdFuC3tcitRu0gczHE/EkRz5h298bcZQ/m/pwYmK1YBp\nXyV/1I4kOkLXT0FfrO2EzsH5g+/wm/RgMX+dnIxVzpleSosbATjceIPO4/f+\nv/SlyOHyKDOWnaxXj7FJeiKfw31cdHZJykRmizDtydGBdgwMNr+ccU3AEBF6\n0DUF8tH2HOm2a3IunoW+aZMAvAbfJFk8RwApK/4QjDWVg7HdqUscSAwt/ZPC\nUWGU2IDnYs/lmYVRCjh3d8ZdTQ+VEdZXHjsZpaoylh20plkJNRAvX845M27g\nWoWBtRLjHTaZHorCY/xOCzvkCLvKxMSvE2trGLAcYvKelAm9rJcN+hFR2VLO\nYUEcAg9sfK50d7vWE8Ko19n/dU0ta+QGQbh91QQlvc5JbUjf1e4+nrjwom5t\nywTM\r\n=vogT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/list":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/menu-surface":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.bce00e186.0_1586445842297_0.10519525606313707","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/menu","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4081b5e936148c204545bd06785dbbe204c7924a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.927fa902c.0.tgz","fileCount":37,"integrity":"sha512-Q6ZXLriGkHs9WTq59B5Oe6R2QfQjYXXne8z2+p1M6v4YltWTk9bcjgNRnOTlN8OICsDDNpVkng2dHBrFJaeudA==","signatures":[{"sig":"MEUCIQCxejqYLAFG5MZnA4DqLJX2i0iHSVEgW02UwtHS42CVwwIgY5qV9IibbWaYPYroEfBx7NQ0mIapGXEmZvmJI+D3/LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej229CRA9TVsSAnZWagAAkmoP+wV40OqV5v5fzm5IF//f\nkuG8z/8+T4TqpF1/MLF196uw/5YdakmKajcMRls279GidmdW4jX6AWoMGnTV\nNmR0QqwyIv4z3iLnUJdVkDPnGAqepYWUMTU5jw0LPYnV0DsjjUWKRPtTnUFg\nB2kMpoEE5A2eOorUftUnW0KBMGEdazikVL5p/n8UWxuvMs9dAz+P06oW01mz\nxt/Sn3HjWsdglhXEYB9XGSb65cdZ5QoKnMxjBJBb2G7JNKfge62ctHrSMroI\npWPzOjGjmtdGof8C/1H3yi3bJpUUunR1wFrW+3u5ntWuuoKejcZqWVE//6bx\nyG/c6rOA3/ezVPExCMHylAElstnVX0diXeH4cneBZetS21ZARg2o+BiVtdDj\nMpyg/rtmcBNxkgmoDguhG8Sdao9Pwoc+JE9d+fzjLJ3W3AlG0PhXvCmNxWwN\nvOFSa189XnLHNDM5A8EC4ukS/0hTeZe6u86I9kD7wdbNbXUTRojwbnMXezBr\nXq1GaQx3nKvYegFEZ2L4SYcBX81DMDUTWgzzDM5XkCq0hc4jf6b8k+iwcRq0\nxmdhPE9HQo2YFa3himT8NRGVLL9BBX4teXStiTxrNtzxw1EbsJkAJI7YWJzW\nEWyES75s+/1YhX21fZ6GYcvvvIaI7TdpSzQQY3TWfDh9Qyh9cRDUCiosvN/L\ni1B4\r\n=GzjI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/list":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/menu-surface":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.927fa902c.0_1586458044946_0.49426152679240465","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/menu","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d21e7b8007b3f2a97a07b57308d5eee4665920ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":37,"integrity":"sha512-LUPd2EIPP58yWuqryE2jY/2O+cZsZ2mAuUjlPuRNoqcvZf2jqOnxXwdXQArirkYFPmSSIqoTFpCG8rpvTLcvIw==","signatures":[{"sig":"MEUCIQDUEw7+o9UoO2rLCZAla8CNqKavhlFbssPm5aL7aerGuwIgOhgQj10YBGnftzd3bdr3zSgApOniiAHz+fAYWI8FMQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMm1CRA9TVsSAnZWagAAJAoP/imoPluyFhlAxbsouhYO\nkg/HV95GuzOIBytWMAa1PhsduzdK8O0BjaBHUkbsls/hrZAYTSB4dKxBMPBW\nS0vDK99NRX2vMniL3J8iAkhUyb5G6gnntbqoUDdeA0iwvp5pI+1CCxCDnbkB\nMoz6iceW2qC8au0Xs877VgT6eGXcmRd4SsYqF9rVDazNtMtXpjFt/JYGk7Tx\nCViLXG9pyHu3DJ2Er7xdIavDgTK9/W65RZehIIWC+v/O+C/Owwmz+0dISu0L\nkYl3llwdvhIBOi0KMlSWepXf18GxHevrPjn7c64KnZQ4++QKZEYdRaoKrE6Q\n+b6fpmo3lHc9FstEYQ7OImkpDPL2/F46JAMDDo/siH2AymB48UeQwnWFX8n5\njeXgKzKAbtqQUDlPfNv4lvXx0wTU5MG7jZgQyJ/LGIglk4WcMTRmUrRF2vYu\nNROq9VxXm8drL5oh/N8Rdqz+0RGXF+rEC6KNxvx9+ATXkOR9hlXNJU9dIvuE\nBvUh8fVMMujtPA2o+IN6Z579DIPr6D3xfWA8WK6ehZW8lcjdOcgjDLO0+71f\nPzNNkJZ90TIIsVRm7dEmVEr1aeE/1DCNybOB2W6rYJVjgCPLh3pomZlOnrxB\nX+4USRh6DM43Ax/FN82AdUKI0sqjQhG4yZwLXIzDAgJg4duYKkEgMd1aCVBc\n2yoO\r\n=TIaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/list":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/menu-surface":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.eb28b6ecc.0_1586547125267_0.5572104185473048","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/menu","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0055e4ea4c47eac692aae764e3bce5cbe3cdd917","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.816a43b42.0.tgz","fileCount":37,"integrity":"sha512-EO9VB11eYbEWSxRg4nNuEK27qSr2l0ybjcL8fXqrcDwQj+ITUhuQXD3QkolZ/OyWiaPghZ5kBT/XODyMT9p+Fw==","signatures":[{"sig":"MEUCIB07DYsWLuhBjQxOxHG7GUh4O5UFGU7GeDVbs+myo1wyAiEAzGIINljbR3+0XS+ziSZmd7pT5IXHOh7CblELU2022Zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzQCRA9TVsSAnZWagAAY0QP/RlaaSDNSAe/SYJoggnl\nyLsoNbVl2Bo3Q70bCmXdNiQLwqTcpPWsLMudNQ7Ob5KSViBEoUNvEIuWQnDk\ndSWonZTPzKi2WColt5KanUZY8iR+d9Lxx6QOoA0xztrEWPQwC0KN6rZk9O2h\nq08QMJvkyGATOw4jc8ehX3j3ntDgaKcDOTuTgu+Hc1qQZAaxCuKgBSLyVv4d\nbK772Z7EIktMpHqiotDQsNMdu76qhM9ZjLXE0padVUy7MJqQgY6KePXXb3rQ\nKO+Lx3BdQTahiM7j+DMmimjnziCRvCSxroUON9bwRsKn3zXh/u8wesP46aYb\njNlH7/yOTi6WbNa8eGscgDZ8HBe3gQ2Kih0s9z4EW2IuTP2Jz/NnpCfYI89k\n1hQutWyAUU4UaVGleBlIDYooCSPUjergYAW0fDo6yb0+geUVGFGtiGkhOblv\nAnk0HotWwR6kqyZIOY7dXIR63YBYJeEGsocui51POJVffSCnNUVYlvX7oOcb\n8RAOFZHVMed7DVffd8dlPC8DGC5NmiXbVJ6ve0oEzgf5X/z5TCk1Uhx11bU0\nKbtikn6ffGxcVkg5WsyS7+0eKlwh0iMPbZlpDmjwUyHdSCt0kRcY/qXLu92p\nmGJt0CjGbkYygp3JF1TWaJx/RAYJwIndEUJ0jYcGLndz1uY7D4pyKEHKj/zX\nlRkV\r\n=azoi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/list":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/menu-surface":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.816a43b42.0_1586552016340_0.24311869394447538","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/menu","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7ba82c68da053565346c8d01253e16287cbf22","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.008c4d319.0.tgz","fileCount":37,"integrity":"sha512-x/GAw9YejywnMiPNPoO/53PnvrcZtdo3p5H8/+atynXvxOq19rOnSnLAj8FQsLjzS3tscW1oIBZ3J5JaMU4D5w==","signatures":[{"sig":"MEUCIQDDX7UGzaoQu5Z6EPCiw5fv1sRQa9899bKq++/yqBMgNgIgYQjl2th0TFQthMF1O/sR+T80biXxXz947yo3E22tFYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJS2CRA9TVsSAnZWagAAchQP/AkotAPZ+HVqhjx9FNY5\nnEdVsbSCHuMVpvz7ZoJmS30YpJoDlLr47/r9vFB26wq3mxc3U8gBzZm4+/wb\nLi/q86uhD+VCzv28RRh90G/MOOjvpAPdSwLH4nBi0fRRrbL+hfyIIZeb1GUf\ndcz//E6/AEs1UgBfGBcIz0VAaL0lTgrF/TSRx6H1R4EeAL+DVO0Dsb3g8s8d\n+INn1xTwOhAZXr/xYhxV6Vg0iQmTYBMVFm0R9NM3uTxsJHXW8aoHtQGiLK5N\n4IMVGmcTDyMNO7SH4dXdZFBT7Axbf8DJmfUHXqFpDHwfSlZqkQECgTi5cAtI\nHPr5EuQDYyuIPhcx3uDYLXmX8WDE3fakCDLT2YuTBt7pMdBJiprlW3iRYoWb\nzR0FVTw7+hTAAPjTDN9mWPhZZd2STHff3O7Z1Uho43BKyfb4ykEY8U3BG1P1\n0f5JSiTpcUPijX2bRfK4DEiUuWH4jgC3IvQ+SbklG1oxr3eYCAQZbVPny0+T\nDpHeaoUSNQIwk7OkAB8svyKyYTqK117QzFi83BbKKDyAqFSOA3ICjII6wLB/\nBPQcKyG4Wj16My8qIPl/1t3/YVWwDuvaj0JzaFwvqCk+vCW/YLUFfzUAJuAN\n0d65n2ysUVCSmBbePUjGKAk+qr4VpOOjeiu8872hlqWlkpw8EqWor3V+MNGk\nSAKO\r\n=CL9a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/list":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/menu-surface":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.008c4d319.0_1586795702046_0.13524995344753798","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/menu","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad8acfa88c05de542beef8010320f9bd6ca6bb83","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":37,"integrity":"sha512-wHthXsf70RBUfbC0GWERgzsfROYHh4SngKO+GhdzwxME7P4qyw+rIS7QHJfJVJ63dNWvo7jRTmthKrimXktxTg==","signatures":[{"sig":"MEUCIQCl/uiOn97xSnhKpeuhgJymQruGsFHs8BT60+UfStlL/gIgU/HduD2viAsKf8x8K4hy3yOesUjR2E+skTXKK2cwemc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTuCRA9TVsSAnZWagAAb8sP+wU6q50fTImOqGBrThkJ\nVvXh0n3FIKqqOlvTsWyedbsrXkHwvoExHjx1g068AC4Hxtjid1g9TG3EROLJ\n/AAfM9nwattwV+7s3T6+Cw2Ot5ocbQ8Vy+eVSP9HzxIxgKaPJpIW/w41s6mu\n6kiZaiYvr0YIh3J1aduS9lNTx6gW59uG9Vf9nmyh+VehDvtDLEwZcX5oh8Yj\nGog5HvnNERJ7MlMOEox7dk5quGGTs+kJwdvjsKtrpWLV61EnGfjxZ7iuyW21\ncvrXkugAFpawavMQ6y4wSdwIEhsjtSt0/+2Mqi51FFede5kA+vzeM+vbfvAp\nlSxofwu0UGQUXulGgCNMtbcslcdWH8pzFsGA0VOVXQlQn4dVJE4zCbCFw5NU\nH0mFQCATWjMiwHD2SRAiaRsEof7nG1YTRfHs7cyM8+2waDKnzLi/Vd0jttzv\nFcRnARhqxglOmiV418pPUgHM3RY0ZebndWC/BP2m3J2479K1AzqHiPQe13W0\njqDeUiSD0uEQFp4K+Bm1ML5S40bwjjAdW42BNClHh68E9jbpGp/vtZMZVRYb\nY1CRG+FqkntjBsS5U0ulLIrc1GiM23Ih49TwkMCChTzR0ca5tuDmu7z4JeQh\nkj3d7vtkHyFOAKD0RM0rKahUkeSZrq0glC5+4KxHKWcvWJfkUVRdGUn3uWIS\nDARy\r\n=w7LW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/list":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/menu-surface":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.cbb3f28ca.0_1586840814180_0.48680151243928216","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/menu","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a010dffb4af18fc921cb037ec13dafdc34b26a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.f172b0f90.0.tgz","fileCount":37,"integrity":"sha512-B9mns5qtA7QEZlrURnPsayDP/yGQT8AnkRO1Ocf+Fas7EGKU0w//MA6pO8Nq2hD3lkQQE5q97gO8EQHSu7ErFQ==","signatures":[{"sig":"MEQCIADVQLYtz1YrpXz8xEwws5kJr7yNhggENiUyAtFIDbWWAiBL3z9dDfGr1S9LEJahc1CXBdk5q2z/dDAqGQ99tP1wTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMTCRA9TVsSAnZWagAAmE4P+wVbB7gdkGRTECWedRCP\nL3ObU86ZInrSPLWSIQSQCI1QyNBhVsbXmguajJmEJKzQ4qu2GFhmY8o2YCfH\nsw6IXeo09NX+SuaPsCrxa4lFO+1yswHVg0AQQCDWqyMJEvQBVGzQ+QMsJc0L\nlGxHSMYwOcIEWkpNKidOMI14GvdjHKSWXudPfNtpFdScKFtOPBVqDXlj46tg\nzdyCz200qowCeWEEcoAs0m62nnYl1lK4AKqUSJnlzMyL51LvBpRhD1VEYL3t\nM/6DFnY5Co+anlJlw5ZkgMDG1w4MdLvmAzhmyXm1x95Re+6oSiGHShkNhbHS\n7ZByY91VYRr5ogAuGCswbKqUFoDRLWOUp8io1jl7O75AR76WOt0Vc75m+4Yd\nEuzpOT5aiYvoQ0IiX1YvYffImblyanv2DCoTLgvH/R/W3rD4V4zK/C9mSHXx\ndQUv3ZNp55Mhf5BJwA6ofPixB6QgyO2UuCAYUu3hvJvIBQlm7V1HdBScDW35\n4l6M0xXO1bROGMlVMyZ/nqCo+imXbBJgVkwamrrHJYWpyNPsLfh2n/pMJv0Z\ndiZ2tpYn3zL+Jnv/9aFfd9WeI18v9G1HwRSlbU3qoGGVE26Elx6ZX0AWlR2A\nqCGxrJAAD0Bvru56Qg9MzWlOQsScATHce4nn2WEhp6xVY6bPqDa4B7Q1De91\ngnEe\r\n=zwDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/list":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/menu-surface":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.f172b0f90.0_1586905874502_0.8955753061852558","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/menu","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa174fc53ec4f6ff014d32cdc8d7ae632d4cd3d7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.c02642273.0.tgz","fileCount":37,"integrity":"sha512-6bvBuYE3FQpi4sfMf6X9eBI7HsbEGrp1QKkfZ1nAhYc2bJu5m4D2tlugNVtMfNLom9gfN22eMrwXIhP2gkR29g==","signatures":[{"sig":"MEUCIHFHHkNVp7fHCXYbTdEUa3vVsE7snwUsmOGKeUXptIm/AiEA2zIq+Rj0iFyY7Cahpk9+UlQydR9ifAm8aJcl6oIjAN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPQCRA9TVsSAnZWagAAC+IP/i7p92I4lMKygj+Hkop5\nMozlt3F+Cqef6MW7BnvZA0j2YrzEC6LyzG2eFfgukepZRFsVL76w7LI+KND+\n6iCgsIcM4K+qR316rzWreep1ebS8nWNWGyUjyi4U/3/WLv5vbYva9Na37SLA\nDiWAe14h6oLavUeKeBvL9IG7xxBZD08Hxwt9F06yT2/sIofBi+rXxyu8SFti\ndiuc1xjrwip48GQDiZBO7w22BElCKDkfJbAMKMadg0a+2l2PT6+DnIxFFuvB\nfGDtOJMlgNbVZafeUHFXqXNS0/XBpmzIfltnhD9DV2vFIcxHmKgNOfelfCrt\nQF06OP0YZnf4apt29Aoreb2g0hesxO4G5L7yaRsljxhBCYcF99GIc2nJwUGT\n+kqqNAHWEpimOTUcj3MeDHcMEIWnhzJrugfwuolLpvnv1nztixvuS82ruDOc\nX0Ekess4n5s6vzsQgmp4K2vuigLrd3RHX8Um/4cAvTgLaffAVAEFWSlclXRL\n0zyeABGQOyf9p9th9Unzquw2Yq1YNndKB5uXXZ3Q1I8TPbRiGTTb2uIGcSFW\nc9Th911Pa7ZVAtylUPuaPQzA0cCqxTgbcF2oMATUSMmEIxH+8YhHM0tL0lz8\n7lRBpQJGEm+JALZaubQmKEXkx1J2xNTlVkfMAVIc+Q7s/HryKmvDPTG1PDjP\nwYSq\r\n=81Mz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/list":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/menu-surface":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.c02642273.0_1586967504214_0.869712233582588","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/menu","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca068021110e0f8bc56af5643a1ad5eb780365e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.8a299b568.0.tgz","fileCount":37,"integrity":"sha512-bPyObI3KXikyKS8egSfDK/oyWyREGKWNBK8go77t6ySFm+PV3iN4jI/l8m/UQ6vEmVCO5jtlbwHLZXubw0IWQA==","signatures":[{"sig":"MEUCIAvxqXDQTx+Vk4t+jmu+D7uTtxZcvQJyEytTwQJqQlGkAiEA3Zo+01ON5MdBi2rkxvR4P5rHv5OIOdRvZQSnazs4is4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44+CRA9TVsSAnZWagAAJjgP/3Aqw7Lx5X541i3hgfnm\nBaTG9oIWehtxTmE88D1GkONUDhQaR08h2rt21HQs8XCQUpRqFTgqJOCbuAdK\nVnBERnNcbKuSASH2SO0ywWptU+KVmyAyuWvr11MFqk4ZiTdiBPwtBBABdoWj\nY9BHUeXNIOtujj6T9O+Odbqv76eQ5b7r57W6gTWM1AzCtaDf7pj9djc/F1/D\n7t3ztOK0V25CfDCE9/l4r6gOwL3nmbHUNJosniQ2P8aAqUwYyoSn3DIIhr9W\nR2A4IG5laNFYK8ewvM2k0bdPxZG0660rYuKMR65yUKd3Qy2JKgxln4dTbIeO\ne8kkYlEprJa0O9cXrjDvTzZXXkQKG9fz1401ccaOxt8Hu0Hlx0lHSPlkz6MT\nSiiePov8shcIadYyNZ/Bn+ip1qzerArcdNe0ZGhR4W2XE5kQuNzpDQi+Wn7A\n5Z8tfBg0K22o+JQjfSGkZv/raFxJpdZSgPsEzJwWoa5gmpn4bTZHzoK402HR\nNUd85zwSYjtNNljFQVh8ubiGY8P9baNfPniUOcz2HYeGwgITT9IOIYTySgTS\neIPH5wHdaMwAYsi46wOoLw60K4r6dscSrdi/6G7U/PaLvToELhKLVvw8zobA\n6BPSHnzbYfuN13XMVuVgPa44+YZacIu55oDgGuKwqEVZs4LYyBdx1U/gTjCv\nDA0N\r\n=BbKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/list":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/menu-surface":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.8a299b568.0_1586990654345_0.2818709915861142","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/menu","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b36d7559d0b03e7b6b3235c93afdfac01a5a74e5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.490fbdc09.0.tgz","fileCount":37,"integrity":"sha512-rASMHuFigIZdxVIY/Ki7A/W9XXhpe23f21tfKzKxa2rZ92NrHCkk9FaMD63KZvxb/pLQ9SU3+MresRRDB1DfLw==","signatures":[{"sig":"MEQCICks+R183Ia3IMisEcip2shYSsitLLsYa3SLj7Ovn/SlAiAZ2AekQBc1vOi+ddV8FV0CNL3Y1caEM3dApD2vgsg3XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/SFCRA9TVsSAnZWagAAQT4P+wZPxlWBdxsqa3T4hnVU\nYIkMh3bh0bQ6D1/xsnABjJi8rbm1pnuhYmhsMrT8Vpqft51qd0QazEvM4CAW\n9qhuvM7icbEyRDfuECQDkkQkoZV5qofT66W4jU1D8f8QTeer5eXpxQw2UXCd\nH4xiDJIAH+/XjkZW41V/1G1rP2jI8hC51Fk1fbfK/aw3oyTEkHD00jTfq6EV\nVCBnYdFuz6v/+69VIASp48PNTbdh/NO+jrF3wq+seyZQJaon/3qDxhr6SRRm\njIB7AIy03eHutd7Jty9/LN+zYPVOgS4XfHzc5K5AQHccHIb4F5RAOuD3N1qg\n5JqU+dL/MCiTlahKJqCOck8BenYrJN5ATOQYqTBKnw8q5RV8stKNejEzukrR\npqqpYNDYY48ZPv/dTSITN7l8YIgaJ9KSgmpMTS8ur7sP2DHgBMWC6vk8G75E\nX9LRJrnaAdSLT/cKq5PnuZQpcEU1+nYi21IJtXjdpSxe3qUj6uabisqqHhkP\nGgPiIxYtFKk1rLD2l1231yj1AjsLYz1hvcAlXLsAiLQCyo0mLXfaMpt4PCb4\nC9t1JADgZN6EWPJCUuWj5hhtwVZDrw8UfBc032KlkKcHrTSUoa2iDvcuqIhP\nVtnpgwJxtT5cuBOl7snBHUvPK58nyAL66nSBkohgNCww0KqwELdHjagVBgwj\nuHcy\r\n=DgdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/list":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/menu-surface":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.490fbdc09.0_1587016836939_0.35314900754282563","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/menu","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac22fc5711a5067e106fd0db7b3ef0cea4b248a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.f838c6e55.0.tgz","fileCount":37,"integrity":"sha512-ZuNPaQ3QHTv/1GmzeAbcKlmqeGt/ZX87g02S2/cik/vOJQYljYH7U/wUflBX2+NRd3ZjtFxuipHHjqBKpvUTBQ==","signatures":[{"sig":"MEYCIQDnnx7XOQwqtf2NQoB9Bn47238G7pNZuYvCZ/3S2bGtYwIhANqvLtw9IhSOOEITlehBymyoFs7ArMvhhYxodSlpIlbl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtmCRA9TVsSAnZWagAAwWMP/imNyO0W86n5DcLmqPa4\nES7o5LD6mKMnsvDfqdZOBzRht2izi/yzmoFFDKzEQkUgvLrqdLyJYoSPcBQF\nIXNVOyLK6jNHnJelouX3QwSZGc3oANztld5GreXn37for/VtPv1kyDAUsKTb\ni7xk7PCgfPNqapyN8UrGC2I2CMAfnsYHEpHwuNH/PVHwuEFVtHdeorogSGJ7\ntlnfE4j//mmkrp3DfwhGXfm+L0JfpGKj60K8elAwhaBMlkmcbN8/m33+1zAh\nrG037mtsM4gO17Qp9zZoAeNiZw+y+7Yz1Xv+mKrkYMVGW5bM6t/yuVoRQH4r\nnl33RwFpP5yxXbI5KYrM+dPc7l4Fdh2iKmvELtjW3gNVKkV06VUvau3V1d8r\nleM4J3KGEtV8lwy8pC0nqVtg/3r71YzvSTenPEJ8lh/QbZJd1vMiRWPaA2Fd\n2Q78Gd2otVr4xMr6boOee42g8IqNLWpw02dK/U8FBQCsh4SE1FUi+0Jgq0wV\nsXjUD1MY2ju7nUndYkLgITrc1nWNsEKPMAFmP4h8OeKP9na/cDrMFz3SF86r\nGTLnwuuuMHxW/FW0IXNcS2qqVsWcfVp3nkuSYtxyeA/d2yvCBF10OW8jLxw5\n/Bc27rDDP63khaxHjOAzv4pcGXVfVhmdicl2Mo5cw9ngVpU/RDa977T2lDrM\ncj0s\r\n=F+Q3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/list":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/menu-surface":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.f838c6e55.0_1587047269797_0.7629258368653478","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/menu","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d52cd3836e3e95898fa3d41fb42fa22be7053f04","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.ce6cb7024.0.tgz","fileCount":37,"integrity":"sha512-DkypG8KxGwwhDOLB0O/zUnCIx6LFWRFpFNnGXRIXgSdU49kTGgJ68p59fa1yVshsAwqqTSRTVfolEcfS+lqCCg==","signatures":[{"sig":"MEUCIArXC3Yg82jvvSJm03k/tX5FaCjOMAppvVOWwTBHG9FbAiEA/SOwcR57DMqPr95iD989ztQUrlHIAtAthaOFKTUU+Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPICRA9TVsSAnZWagAANiYP/2RiCht//C7z19lx7lpx\nft/kygpjtKbbBCwIIdLLERQten0n4qsHtzUS2SeKelGfoOQzccxr3I8UjNqF\nTVI5WsG7Bq1wNefgLvIDVd/5UVBAFV2aNvNeoDRmxhfodxzYGOLG2XiEzjYE\nOZ/SU/KPHXzPge21G/f9aXniu7sH/1qO6qk0lk8HDHcn6YMYNEHohgjACLnc\n1sIz9sjNuYsac9Y+ZRMhOVcEdPsk7rQtq+LVad0a9MK2EV65j0J97jwe/b6q\nF0Z3b19soPoMfVaHJSl8jxgWFbhJt/BMXUL1u6lxy1EhYvTBbWjYP1Ih9KxV\nu85JLant02J42IkZBceeq1Qfcn9+dVxQDQS0Dn6b35ZP88+2HO1ONFKoQMyU\n4MHn4+uSD35O5Ae19dd6XMbgvzSsmhY3XsS3RrmWgSzilbW8SzHtl4Ovz9mb\nrI8Rkr3SgADpIdxfgc4Yv/TFMArtGtcwWTnIoW7DML20tC+ya/3YjU3uiroc\nwYWwaCL3Rw1AcJYzttB4PujVrCBiK+HEyB4WarCcWkZfXxeNNN3GXyhbWd3D\nrtl/x58Po0stgErHD0q1PHxgOYL3Y1OlE9ZBFEIKmBZY+Z2tq57oAyVbfiLa\nu+uDXnnRte7C3B+fliOnEoHpkeOlJ+Jj0CCU5rwXvYDb/fx2a53t2vn67E/o\ndVBJ\r\n=nsm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/list":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/menu-surface":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.ce6cb7024.0_1587057607260_0.8609158475612664","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/menu","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4901941382a54a6942d49a0aa35cecc48a69438","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.0ab62a65b.0.tgz","fileCount":37,"integrity":"sha512-FIb/du8b0qdyOxEbdaBfAWLN0C4KVkfikZb3lGJaIU1Esb1wPjev3ECfFLHNacs0CIMt4SggTBtY39Nw8Q81kw==","signatures":[{"sig":"MEUCIHAWtxtRqAOsIxJxS3JmPODZgKRs/Mrc9x5aPbE2TTWSAiEAgnyVupszPs4gmDg3KhR0yZdBLGpnA+Ok45ZPV0lyHNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKodCRA9TVsSAnZWagAAnZYP/0Yje5O2RXt2kY6CwCha\noMGirizvlnujs10lu3NFJg6jS0lDRJ7d2Ig+HOONbh4g2mHDmKQnp2uJ6vPe\nNQZInQfBKeT4iMgjhj7d7vQ99+1nswxqEseVMg0Z7up1l9NJK8+84WjazF6e\nCyabuCExEynDnQignPds0awR18o13sO/vROFqc+xQgO5Pl5X2VuUY6nyvh1e\nzvUowaG29z1BF6p6QO4/iKAhgvDhUALemvpqVJRMCovKsCI1wQZ1WHFZix0+\n+zH+oyNSQ8ia+IvzdZfk6R6bT7/9VWh+90hg2Ki9VcJSunC8nwyOaoN9YNWN\nbZ2o6cIwO9SJgDIbe5lUVHBT8w0Cdf/yi6zUPWHueGqMho2sHbwXFUv++7QX\n2lKfwRPbPKQ2E+vROJUbtEs3cLY93l1Cu2SsM7oq1FZFtXJWRgwBaWPFNdei\nOx+sb1SqnNUHBJXbgwzNFLLcf3UAKHFx+CMR55FykVQo+KndnDCPDHrlW4aH\ntVAqKQm7+Et13n04caUFVo7/lsxgKsitfK3sL0+F7oUgomFa0itvAPiEsmvu\nQnJ6ZxLWo89f8C62lJcSX8Ps3/IIw6TQdmlADdGNU0lY+G5ijYJCSCm/xvA5\nkGpBlN5gQIPitMTWliOZd1weGDmWaHJjv0kdSrM3GT1fa7jJ/1Y6pzUgTieP\n4nra\r\n=H88Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/list":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/menu-surface":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.0ab62a65b.0_1587063324937_0.2392956689875123","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/menu","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8ccc049380984da29b2319d799ca3426af0053c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.ca61b656f.0.tgz","fileCount":37,"integrity":"sha512-0gf8k+c0UFBKbiG/bz6EHcfrEzEcn+wcG6wJYOsnyoQUaWOnKEZx1e0J8/aHxvgcpXm5KM3YUNmxqo1OGiqg+Q==","signatures":[{"sig":"MEUCIGv5l17MyIkQGgd0DomZxQbGdt/se5wyOAvIoSHRwe03AiEA4yOBSAO1RvFnFeclT0SkdxhKHykP9cdMfmZ9Ad1w+6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLl/CRA9TVsSAnZWagAA3HEP/1igvZ9D4MPQpS1ykRYh\nJDaFemBATLhEphECT5daaZAcb5DNLeMOgjzD8U+dynNFsz0NHN3kIsKPPLF2\nyCcpc7W1cSQTUbM1UJ8erlGT88BpR5KrFRR21PdpJ/Lj6mxZg+FCQo1szvBQ\nQ1BwMMjtjJKUF89YTqN22M0c0o4V50cPyMUMXIrsTCrJmGZJYmdOm4c7Xgc1\n5ajL7WstCfcmENYiuLy1M+8y6vRQHjYOGZ1yzAE+xTyNmq9XiAWLMoeunF/9\nXymD8ShPQs1W3wkTha3+5V43/glD0wL+6m9bgKJD5jBKdIxRKV3gWNWD1/mf\nrenDjlxrSen+8TNgg9zTML1wKw7U2uYpWfYrQLKWz2j7ByNPwOFLFyGH5+54\nzQrOAqrMJuP0GJgIDJr6wN0u6ktgPPPhKsx2gNjMpJLZKVQ5y9DTMxzBKfyN\noInIHK2C2FgVTvKNHIXU1Z3RNv9cuRLIHT6tM0McZqf8FRzC9vZt9QPXm6x3\nGz8188cpTBVvOlX45l1s8O2tkSINc9vm1S1erUXKav21cn35ewD0PT1TREPx\nBKlkYUrRmpfnOpIJT9rEUdJQNlJdwP0YLspCcdZOzV4J834XarAJQCUtPq5H\n7N7AnvKFpFxQbM3jrH6EszWG2wQoehR0qZ+MkKujcrk1/oD4RC4XtwROeDgd\nMP8g\r\n=eb2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/list":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/menu-surface":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.ca61b656f.0_1587067262244_0.9687241315206614","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/menu","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab74cedd33b4178feb5965e897889fa96b5a36f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.45a6615e3.0.tgz","fileCount":37,"integrity":"sha512-qiWdfMjvtvzl6PU6/82xokDgGIqOhRgObVAOXzF0gFJey/KnvGhhs6Z67qK8soTBadV3/I8TLJaQCadvWcvSUA==","signatures":[{"sig":"MEYCIQDF6/x8xtotd9ci2kSBLfhP0E+hDB3WJRI1f78K27L+9QIhALvLkKmfA9/uxuSzswYHqF3E8v9Mi8379mONJEnTfjeK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEsCRA9TVsSAnZWagAAmKEP/jmRlfe1T6Jo1sFjHtJU\nyPMSpCtOX0wOPgDU9m+lCa2ORIt3VBWB31Wx951pgUC53i78dk7N3PqrgcCX\nspjNgeQupcP3FsGbhR0XEHoXKXRbw05+D+9Gh5N3sTga1xXxF4IBbHmt8H2w\nO2NmD41FM69U61eQLeayVaGEeQR7kwXnlIdDGThrmfQTimQVOqM7Q6NxEjmu\ngrjD9x+eJJVQhDGcL9WlsGSNDsbYlIGsHt3Lsql3l0QiekZt4xRwkzFZVjcr\nO9bME73IM72MwzDK4dDYi/Wg6Fq8Hd0crINhzcJXkCVKCHUR8eREAzG5XlVk\nuQLupjTqWIwtRaQtRlCJYW+oAeELNKP29yjv8g5d2FRMzvnWk33tOmro4aKy\nkKW6KFjmYAgt1cTXEEqKvtVfsKmOiMdCx67O0Giq0Zhc8xnLlihQa3O0aD4k\n6tiadb2+d0e73rMe0vW2HY85wwdp0srAr4o4G/5DEM9eXLYFWwlWFOENxBSw\nbfS6DadYI9EgXO5L//aYBV/nAMDOW0bBnq/63EKbIbdYJYduVOg+sS1c6H9I\nk4kP/aT8uv8PkQ94pXVVxdos8X9odOpuKfR7WdDKGMDUAaJMbXpfXEIG34n9\nReyqnJ3CLixPVqQh8momJAby6tzZojq3HWZlo3AOF/8P5o/sHq/cMsxssazm\nVFBr\r\n=eO8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/list":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/menu-surface":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.45a6615e3.0_1587069228079_0.7793541269244644","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/menu","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36cba78611582c2782426763499926a6dcd21752","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":37,"integrity":"sha512-FB4ggBSupppBoQM5YlRgbdQiGHR2gtnV6/ncLuHmowWAE8gc7KjiDs9lWNL523oTk1mKPf0GsJ2jJAC5Ws/IXA==","signatures":[{"sig":"MEUCIHzDmMfRYpizJ0zYfxOP68Zm9LFhXXArireaPuma7VmCAiEAzhMfkEklZCYmFwScLp6B+OkPsgTov0CAMnSJX1Yywjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemep5CRA9TVsSAnZWagAA+w0P/jPW6Z6o3mN4MXP8JfkP\n9KZ2UuArOCnn42+c1xa8XaDIXSArnkJO0aZwnwrrjljYzPF15KMVF/Ur6utp\ncntHePsfq7NRvo1EBPaOwsAEliyf3FJzh7BoLJtEi+1PxqwxLnwcYsu4AeT0\nY+Ybg/yipnAn9X60VBcg+z3yyZMiOvruc/q8Ehkp8r9yUn5D0gjCnbcBG2YF\nAP/gHF1XF5bBm5l1X2pDpVVo45N7JZMORHvjAlsSrhNSFv1v1pigT5HDNlAF\nNLOjy7cM6mzLOL6QB4MLKC2e/BqqhsBa+Pn7VT8IDbvl8L6q0UbfO13ZrNEh\niIHgKl6qTz6C5z0Pz5KlmZ+CKoHqXK0US/zl51lG2/DHHpeiZelb1ugKx3Xj\n74tySyNKNYk5Ba7RwuDGl4046kbBY34SpQMPKX23OZGhFUdcI4xtl+CF6Rpe\nTI+E3C0ZQFWnf9G7fQljuz0aOMSESdikNEV6ohzEu31rwJs1sv/AGMqwUP7f\nWYPTxnyNVLcWBfDs3OpF3iO2Uw2xcm0213W1WuQlzatzA6h99NM1BEx8XIMd\nMsXX4KZsf0ynVdXZMmDAHYCAQV2ZlZAp4P4h50g7ct6rsha2eZTgGDH5pfuT\nzCNmQKwIhcwpDCfmKiSNMWOkdGo5MTPOYLk2lDNO7CzTYT+oeRPzuTCvS/7W\nqUDV\r\n=G6ST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/list":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/menu-surface":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.4b04cdb0f.0_1587145337109_0.9923998821275122","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/menu","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67b852002a6e3c6e490c6820f44b1e3ea083b5a6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.b273afa93.0.tgz","fileCount":37,"integrity":"sha512-zCrhnjdjoFgyeou5x8qU662YadvjXAFwu6p9ur9LecGaZdyDreG4ajZNCNGeX1tKsz1jlKl9pwssfyPI4Hd3tw==","signatures":[{"sig":"MEUCIHRgI3+w3iZiyVXaqjX7Do+TIoEo+s7Oyx2vI8OMEA49AiEArD2sJUQAF1qxXhuy+BQlWI4R1U8664uCHfI+EG65f8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXVCRA9TVsSAnZWagAA8yUP/R0p+/7v0FufpH10jiAY\nvz8YfI1cMcCz9QQG6o1A/YFMf3Hipc3e2WpwOI/03w3rg049xTOsspJL0DfZ\nj9PXXNQipLcy9iTvZDi8qFOLvZxbrwD4R431OrqhpeeqYJ+YH5x7cEfUjy1V\nSP6OK6jzevi8kEid41XOyQ9HwOkNUnWtdhWxMmlSbX3cDHL9QlxnziyssJ0Q\njG6Cry9EcbNZ+EWVwb9NPR4rRhnDvBWXi1YpdDMm9a9xsv/AQKL/3cv2zorv\ndx+U83+khIrzNy1c568czwkXfhtzczkQoNr2o6RIKp6HDOBupG+RyxGLaqR7\nWZ1nm6YwNankw+zykA5tfcimm2VbJaR20YSWsGHEkqPqaSu4+UHyK3ZKgph9\nTbFTzGzyyQevGQXdBLFE7VU4BRr3x0oxLIUBpgTp/H/HUH1zdS+C9J0Ld31A\njTDy69y4Bht8mT6VWe+a6YLoAeqlLYLpjJrjR3hoiMXm0oXLWL+/pgbya47y\np6f/6rGmG5cfILXkaLh7y8L6gp3ydwWP8nlpdCnft73xW26IRCukSOK4GB6l\nYW9hY30Fxzq41ln/ZHCQu7jOtiptIg8N95idjeZA+zKq1jXCRI+hF4MZcP9s\nyZ6HUr/AbnfB7L7F7HuKO3f7Ywpkg2w9cMyf1ZtkFUCw/aOSNrdoAoxgeXPq\n1jAs\r\n=pkPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/list":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/menu-surface":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.b273afa93.0_1587164629215_0.36148905953548427","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/menu","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a85f19c5f5129133c87886d838205d162e8dde","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.b70bc601e.0.tgz","fileCount":37,"integrity":"sha512-faMQQDWXg0ZKLRYpzyObDld5gpiIJ+m0cc7SqMkAolUl+TIpYjOf/xqeQzMdgA+YGyTxCLGLNeEfUEFrluZh1g==","signatures":[{"sig":"MEUCIQDlxFCinDODsqPmnmet+cfxnCBRY1ygGJ4lvKDesIATkQIgMfC7ET4q6BqCmX0Li1roctHcp5BJfsC2NDuhj2uR4jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjo0CRA9TVsSAnZWagAANBIP/immm4kQ+oz9XykJxzyJ\njLyI7T6U1iE/5HVsZ9GjuCw+O2bw1NCF1YtYVYQ4MptTzbZ2lsKzveVVwVED\nwTnUaDCzdNqCBUnIRzKoLllZcalFOV29tNsnz0e9MWDRmIUMnmGElJ+2yjvp\nM+B+YqM5QLMBinuWJpbsuzV3EIYAz/keD9dj0WuVjoS09jnS3BdXBlNU7gSu\nQ3Pj+3jAYLsBsZM4ZkkaoJo4ZMRjs+nu2RSgpj0BL4o4bPEY8oMJ4t4Pf1H5\nrcsjB2i8wYw/qEqN0NRf7is6T7q0R0PmQ1kT1LUMg6ETnyzkA1jFUUlvmPpw\n8PR5mb34nDSsCr8eUPgKqSpB9XFPpKD+YuIV5GFNeqLm1blZ7QlC9seSWbNF\n/FXHa8H3iPnjvl1FAUiZxsDZhRzbaUf0XdU+OivtH+nwNH34zBBigkUk2Z7n\nIzb/cRkg6PzcF1fisFfGbHJhzqDde2JjZsZqEAZw8OtBmGfVIFD8/9UCJh8C\n5+jncoasNeey6aB4AHCVExy6iabaA4ii/MT9hIrwZ6M6THaMhnbzlz8U+pX8\nScSOPY1AMMtyWFFwVEGnq9L6yGx2YMXnKnDcqedY7uJGea2LnPkwVARzJPiC\nMmr2UkHoDlPm8PHfbVYsSSVTwLiEvrgTMkba0Y2t1/7odqNInR3I6w4+Do1D\nzuez\r\n=K+HU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/list":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/menu-surface":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.b70bc601e.0_1587165747668_0.07095345776345319","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/menu","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95068b9db2eeaacfcbfa3b45bb7dcc76aa82b472","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.c4b4bba96.0.tgz","fileCount":37,"integrity":"sha512-P6No4a2VrO2pNqxYueT0ffjXRbJ8zwnx0pIIxaUPPfKDCsnrbEbWqCEcp85+JpdxuPNcp3sgPpnY+LgJW8F6/g==","signatures":[{"sig":"MEUCIQCYelf3XMmYWyh1Zr83r8896YTsyFSaPYt9PPBLeNL7XgIgQAibLlTOljPXtc7iIzy5FqN6hEOmZ3chzsSQbJV//BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdsCRA9TVsSAnZWagAA8uwP/A+MplilclU4vmw45jDo\nhozRo+MtDCGT1QNfJCgD7TVXpzt4qA0Byt4dfL22UNsxnR39KoyC9zzctU1N\nsYPD8x6hloKafioIzG/Er6Bmcq6uBMa4/Fx7JfxPhCEEbAAPaf3LKP8qHEJQ\ngUZjE8h1I7n7Y+qh9vshsgDRJkkJbPXcrNK17Ezf+KbCfwGGXnaH4KWMXHr6\nrafZ/idGbDBJ2PIvrxf+vVZP6yoHqlpwIrBiICMBExhFTlcmTf0oj0XRMMSo\npzop15lZD+wqRzrzRXKiiAy9ogpbAXjAfOKCPFNJoDMuQaNOplvgKEHq9Tq0\nfFRTs4a93XHpMvzVfAUBTm53LTuUHUlLanDF1aQtq+BvXhpzMUo4df5Vp6mM\nCLy1y9sxAABvC/SHyjUrh90RbvbUMZrLxOXE4ycbeh9bSTl/EQ1nogp0EXu6\nKUZHVLoYIgYLOWYlFUc0/bJIO74KH0F221EvdrCB6lZXzf8pAM680zQtXrwa\n4qGv4bXEd4Buzwjr2qOeoH2eTp/EGRk6tDQQPV759PfXqQ/NOIYsGo42ZBI1\n0xg+YrV8VE9rPMkI+r/pkIV1i+vDxw7N/xhnGRmxbetNg0+cHscKt2SUoqnt\nRm7az5jp7up0OL6OMqTKxbzV1PTzqi3iL0FjvdvhyqRCUcBkBhbkMU2tJcJ1\nvS3V\r\n=xywV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/list":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/menu-surface":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.c4b4bba96.0_1587169132453_0.2168952496966079","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/menu","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9ced38421ca49edd469109c68c455835e08b2a9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.6c1ebc721.0.tgz","fileCount":37,"integrity":"sha512-ybayDjeICVOdR1HI4LrzirdVqe/PuPJh6yUkFtBKIMk/YmpyA+QLcQgdNLAdrd/HRv5Xtle/r1M3Te1MS4WFAA==","signatures":[{"sig":"MEQCIAoODnOGXVAKRmpqw+LUEvTwGUcpjv5uDIzCbs+4dZRYAiBwFg4YFHfjp22u3wpSUTDstLrxOmlqO0QGG5c2Y9ZxbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8ZCRA9TVsSAnZWagAAtmYP/ivFAQgbd36MnL1Y72he\nR/zwpKy6jNglZaNWSTu/ie5nZ81ZRTv/PO4OSBFgiueV/ep+r7eoX79eGfna\nHqiYEdqJB2SyZDzVbFmW1y/TEQ/oQizxWcImhi3X5WSDkaHqh/U1TwKQaGJm\nSDm/aDd2VaoZNUokyrlvnJBVunfNdOP5dqB/oSuhniuQUUSoqCpeG/cKRNXP\n7FHW7vDwDxEv2e4+n1z5D83A09i7fOC0W4Uvj4BqHuu5pOlxzy/OMWjT9H9a\n/4hW0aqwga+uRNdQfHiT4Nmeh9ORkyLNB8gxLGizIOtIdTIfzXCj2oUaricj\nTBLSG1JA7IrIo/hNBcafZPUYWJExv2itgEmuUVMYPGcxccl9qrydXXX70CFv\nX+fdAhpIJLJLgS0xve6cFLHIp7vPHav0fmOgpojmR8JDWxiLPHFTCRb7GsRx\nUcyTCwn4XT+TU7r3m0VrULBmTnXA3+xRTJgID4lX0riqpqxv0O4FFxnVZXIy\nJEvL9dGj8X2eAhlcoVpEAjPr5zw+yZeP1sldq4cXnVTEVdyror1Llo9NiaFo\n0Fng3xIn7Er0L3RKNTZBkoOFu2oD7fIEEtiyc3hEclJTCSbSYrNkrW2WipLT\nrQfQ/kE5JisImIzDg7PtwTHn0CqehMN9a2+UipQQaAzUOemaHnwa4y/lGJfK\nff8G\r\n=ItmM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/list":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/menu-surface":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.6c1ebc721.0_1587412760691_0.07403257979630595","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/menu","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b4e8ec32f04acd7d359cd5fae974f7fdcb4a7e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.9cff4318f.0.tgz","fileCount":37,"integrity":"sha512-RqAPojZKseCJJtjEpLz3COiK6DGTmZjtf5dDfVWj8IdK4mIZSAZhQtse8dPo+qNK3CwwPcC4hDaytcKKz6QjRg==","signatures":[{"sig":"MEUCIHMbYNLjZqJeYWrtitrY3phUEzNaEB39rxNUAaEuGkfCAiEAgpODxQRIIAOyEQLH+ocBrzPUD8fbHt79/xfjZcoIfb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengydCRA9TVsSAnZWagAAI/EP/i+IO7d1RZzVdLB/5pH4\nkAHgUV3HlixXbKxqVql3HSj49fFOQIMpcagN+BqkilUTcaeWLgR6ovsoEQ+B\nqo8jOVp9V2WYgDTNHA+nr3/0vT1SPBZLUp3HbBlyNyI1EQ16uBqu/Io29OdD\nmRcKnLYLoS0wfGA2hFJKKJL0wqrSY2Mm6ebPfSK7pa/vE3IRjH1o0KQvCkWW\ngPm+AYQJo4lpmHaP4tWqufnnKd3aDyQkN4XOa/SMdE2LsC1OU8evb+6fHjM7\n/Z0nYR4zrgPxaEwOKUE+TuUFiyZQBo0ibny0F7jZCklhjyozLTae9XfQHtpB\nom8H46abyza6QlWCF4PjxxiTad/Co5ZrUy0f57Bp5cN75jdYkPXdlRaC2UYl\nOq60OJkYfk//9q0SfXEnsvYhrWFjyxZrSxH+VPffnn/cuTZnPbByYzR3A5Ys\nr/3Z2FFiheaMYtfw+4qw6vDSj+O9alqmIVLDSMV1DakxhAWtdj1mRsyS6ej5\ntrQ68qkaYWrUqO9haEZwlTDRMJbZ94T66DHIgIhyTPP8UNJLVTKMiHfg1VlV\ngaFq5icl+vz9Hu6hLom60hYkir8cciEdKrcaFBtq7H/Z5Zl5nPWTVR0BMupl\nlEvcB0BZ81U+WoacVXOVhRnJysYJWLAxVwoj2QbVScqfIombZb9TI4uiR426\nVI0v\r\n=joFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/list":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/menu-surface":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.9cff4318f.0_1587416220633_0.45458242843987184","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/menu","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fe4a722e0379528880a31216c5cd73a9ca506a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.7b4482402.0.tgz","fileCount":37,"integrity":"sha512-/HNmw+9/lQLZGglvd80DhGtsQsRpcUdOcdpnPgHTY2nBWHs+44xpTU8IDeyOlbgt3tlBUre9gjgvsooIRdRg5g==","signatures":[{"sig":"MEQCIGttiqlmQll1xt1Kc7i+0JrVRio6c3EUDxDGXUYuzUpTAiA1J1S4YUGYWB1nnhShDXheutCQT4prc+QbTtStiNV56w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBdCRA9TVsSAnZWagAAsdQP/0JTA3DU2/LCb9pqRIFl\nljVQgiF0xd8gmL/u9Zm14ESCYrWKv7MNzCN+2QIA+Jf3YNZzN8LoOSzxupve\ntXNGYZzZZav3BxoRwBUWeUhrmcEqAZ8RUPoyzy47vCqfY+5YvYooBcrf6b+I\nWCFYiDomhLTv/gdeUFOCBNIlJVim9zeqUTdpLDI9jGGEcCl2z1ey6N9Y2U7+\nzb1O7cE5/Tp6S99NLkXCVsQMp3o7ZvymGBMd4qtRkIbH3xeXiPgdC2LnztnL\n+jmlwrPVYU2iOjk01K30zmZYoRT2GNNu+pObc4VI2GEjVQWtK7+RjPpU0z5v\nFEdaOkTc+g9JBi+MNESgChdITf1dmt/1Bp3bxguGM0iWH7qwEFYdCx5iEvh+\noJdtgba9RdY15G//Uowpvi8jC5f8vqWZLopTJZNZ3UsjV+MYIaOrlW4L5pnd\nE0lCs1cUCS/+opiztEbckeLXLcf/R1kPeGNlUviB8J3viEqstSpumwnvxuX3\nmeL8xPpcCYxE9OVHQvEYmvY6W/ZU2v2IxlSuIXzF/cGqQFx1nUdqsKCyizfn\n1l84hPR6qHW76hjQNKjOn5E0x3PTEbrqaef1tSvXglOdoQriSniLXK8UPaKS\ni4GGl5+RJw23/cMTlB0+6Xlu1TYCyOw8VtVKJWGiNLL26TfDpwA/do981bhH\nKh4u\r\n=i9p2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/list":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/menu-surface":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.7b4482402.0_1587421276828_0.6646112101741868","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/menu","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d2c3f6da036918c1362cf9844aee66499ffbfe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.deda86d8c.0.tgz","fileCount":37,"integrity":"sha512-Hs7nQdaglVA2E37BBuCwDqA+8+fm2bRuHDjroHKrlJ32pJ1xXUHOxyTQ/7HIye6JkGy76uwg5h7i81sO+tYauQ==","signatures":[{"sig":"MEYCIQDUCTJ3T1BEGRAFVRD2arQteoKfAG3myXoEIeX9fFI3FgIhAOJGrVJXeOoveR0IisiVo9d/+zzpVNv3u7p1fytv1J7N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklNCRA9TVsSAnZWagAA394P/iAcVZjqIJaiGiAa6qkz\nxab2V3ECj9oynk5tTU9Y96GnYKsYFYNqT/eOJfk+fY1phFsUz4XL3tgurt8p\nCzZNIPTJ//jL0ntgptcQwhKkYNlPq88TkQIGgGWZzc2m302SckGkDCl0FtBu\nClnjv/59bhvA/0OSQqLhMZd4R//8EkYUBTpnj96GkUQYGmSSi/VJTyMJ4eQK\nTGq9bGAow0CevskRjXyce2oZT8Hxtur3cDih9hMt3WtIzkgWEF8JKa6LWdIA\nrxFJhr8dGj56xZFXF/JhLN3Sa7XMWDxH/ivtSnt3KvMrRMqOhmdtE54ZknxF\nXvJDz+ixrMqFp/J5hyPSUtJGb3oG0hqrGbwv3xcFlRJbPe/nvhBkKejnPM9Q\nlF6WRHst3MacPfGBrRlDOv/3EH/HGgruMMBXFZS2pPQTAgMtnU/vshYkIXVs\nkHq7WdbPYJ4Q1Sagm3NDhDBsUOHgMEMGOtY2HoP3TOgMrTh9W1QPxpzioW+s\nYNqjKdMIgoLxVmheqD0DesKt4oFkwXy7rT1NPI58b4vgfN58+CwhkrJrM1Cx\nZmY2daJnSZMNvxRCGhSa5NHoL2ImH1MwfVydMmo4+CMuRXp1E4Hj/gOnoguv\najeEzeC9JUe92eJedoYaINZWwVbJWIARJSRBpzpKvrdicdvz7n1fafyzdRGa\nZaBd\r\n=b5L7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/list":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/menu-surface":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.deda86d8c.0_1587431757256_0.181178443703488","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/menu","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd17df05907f195628b109038394b7f4f4afe2ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.d10412cb2.0.tgz","fileCount":37,"integrity":"sha512-dvTgo8vJc9CD8zM3aYVBEOGvX4Hipv/tlpza8KM8CFBl94/adhOeEvWmQ9Q8dCNoal1A6BQH82H2KRN8i3LuWQ==","signatures":[{"sig":"MEYCIQDpNrgWAwuDDsJgO2bQSzaoUd0vrZkBWYBguRr4nmbXsQIhAIUiYbrDCyVRRhCO4YRZlG5WCG3l9zudDzUgDE6oGq9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkyCRA9TVsSAnZWagAA4/gQAIWzALAquFszQyDS0985\nGXxpjeT6hmc5OOLSBWMNWtPuGbmToHdRiOMUGuFuf2RSs1mVt7X/lC96/ylM\nA6LYS5EzT/iBZXpFvIrR4u605dVSfY7SwRSjQ3EbIk0UXMtlNc8M2YP4+KKL\nuudT+rsKA8sSBzMGO0AgD2AAgRdituK+fxY3bm8jdtv5QiKJpP7nUVPoCWld\nJVO/F1+WTjGeYmXYnbcoprvuhEjRsTveQQ2GwYdKZBjLAD3cCNqqfOva3AS0\nA3s1JVYPV76+78qn4qXp9Bl+8V4ACJAKCBbXUkBaYziWY0JgxOifdiFvUB7l\n14oXD4zXK+HjgTJrUWx1tq1pifx+A0rtGkK3vqdRhpA07bH1h+rNwAnVA344\nstnPf/Ki7aP28gYaYhXJYIni13JyoAZyhbDXoLQmRTwlCJp19b43+c5AvYRY\no4Td/Yhw/m6KJZjGEo+KOH0+D2DkXMl9e/hAS8MRmsd8CDRhk1FUT3tv2RJW\n9pUHGT8WTQyontOiJFfCV0T2SM2cAiRELNObfZl5s73RlaAw6yWyptWKKZQ8\nf6r3gllhwq3+BgwdB9oqHiN4/TUMuRzzffnSpDibb/Pvrv6cs23aAo/GpZTx\ntrnAFxPAwTjnN75rCbG2oeO1BMfeucccCEPmdgZft6nmjpMNbEYUl7rR1DYs\nUs1P\r\n=ro3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/list":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/menu-surface":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.d10412cb2.0_1587493170475_0.6317781165754828","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/menu","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22bca3c4e07f66a713343ea33372293d72c704e0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.c141801d5.0.tgz","fileCount":37,"integrity":"sha512-K3VlscjVxwO435PHT5Jfxp46/LfpIQ0MHA30osiMMxolNLzw087QhpsfmA0VVwm/ZJcQ6DwKKSVjFJaRcGAAmw==","signatures":[{"sig":"MEYCIQDGw6Abqmh3rdxRqIOlMIA7B6BupcKfhR/VMOdAvR50ewIhALCMwyzFa/MTYNcshQo8P4bI2Wx+wtsuh7Zy/e1VB1hr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zSCRA9TVsSAnZWagAAseUP/2AgMlfxRwTIm78Zb5+P\ncBBx0ljdvQeUFB79gIV41lWHo7/NjrpwslayJHixXpPdnEMzBM48omRCxDup\n0ZonmivSI+rXLl2wye4SDOqN4Kd9G8ZE3hNebs3xmd7YrXfRHBXnmqGHzhdr\nPC34hpt6IFc0Csbxi8fotB2ORa7sKkbWrEqboDAc8HeAUhYCWfBYEPJs41OK\nVbT7qZ3UeqcglyIohr2QwRFgpxUAMaoYU0SwiLcRuulM4zIZqlJjwELzjnbg\nqHLjuSXKUx0dRr4mHAS+Wb6claaiYs6fMget0ujQN4JcT83JKjYSTyWTIPr2\njwQwBcWY5gS4yCuyE/nGrlOrve9r+PMniAmtN3HAXIN6gM5cPG7Xrhdbpt3R\nDSvhIgCaqkgHOLtIXrHLFE8L0yuJEYV1uRI1X4mZ9Yf1UtCR2MHagHjS3FGE\n81C3JyvkZzmavqofxYy2xU+fsXqxSwzmslwWnu0zeIi88t/G8FrZP/smvAQ/\nNSNq2wOVTReHv89suL4QdQiB7WWHPNG07y8FHa1olrdSHiYNFHs5GMwGQvah\nS0J15eKCovMgEqJGBYw9YkOAMCNzjEciy6Qk9FBn0QW4AVXhEBPRaZ3ORpZb\nAIl8iPj9qgOVcxdcF8SiQ7b8rav/W+6XztFiloU8Y8hXeboevqEZvFPha97f\na/BS\r\n=8Q39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/list":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/menu-surface":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.c141801d5.0_1587498193523_0.717166719389436","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/menu","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00c5ce041b9585f88f7a500fd0304c36bd8e5e55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0-canary.28d10a96e.0.tgz","fileCount":37,"integrity":"sha512-3qfxWJKdOyLyydV4Vvci7LRQWSKv5589z73WibOUYQ4H5qtxUYoYDDFB2qOcLp+gY5+hJDAek1UxTjyymfVE2A==","signatures":[{"sig":"MEQCIGk90J/xaJEAET2GKsm25oxN8Qm/2ZsfD1M/dOFvfwmqAiAjh6Y+2uYOJZ0HQnWQJ4X0y1anTvgRw9Y4giCnZ1mt2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBSCRA9TVsSAnZWagAAzu4P/RUwopqePZJBxr1i+wHR\nqyYwouRY185X8O3CQWAilfGJE0nUGfKSq2EvRwWiLRBclaot0Shlzttk3vH6\npgS/xvv7iJeFHC71x30mc5zrE8mvMMF4Yu4nI89c7mFwHVfwIx51ltYmvHOe\nrBvyqvu+LwWfka7SVnHW23L4aph+F4PPaUo0O1QYcdkDaJbzUuuq1YvuBFl1\ncKFHcu3gF3YOx0gBjvgLke39O4RSDWba2cevVxxvTS5FQxl0ckwhbUpQXvQG\nPoPkMlCDp4LOjmZUrCqgdpPWHA1Q51MCZGopiQTfWTw837h95DCr9dT/6P27\n4VApPyNy+1aOoJEl8NuS/F3yj4P0xRsRdPwcsSdAXlqzAkd8FYfBgNtxyh2o\nXQlSSTtUqet7Z84GHkc+P/dodVwr57u99W7qIJQqWssr2tLCaH/lbodB53Mk\n6fZC/Yj3sNB5+SXmKEXCZA78GarM1UlRVdOqUZg0eUuF4oblE5Th3x+yKRGu\nVi8e0HghG+2sy8giAKcN/LZfSyX9+2atmVk/RWI81f9cc7HtfuThpi6isa5F\nz3bxXuopv6Yxk8kf2IgVy+wS2K9udLPsSGL8Augt3TD2HnRQWTKG+ZBKKvIK\nOXQ9S6z/oaDC7ePhSUo2o6KDW2za/2HRHg1Lv0inz0g6EUrmJsk4e6LD6cxD\nhrnG\r\n=dAba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/list":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/menu-surface":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0-canary.28d10a96e.0_1587593297541_0.7910991433806722","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/menu","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"530e5f1241df8c53e624df524da935f19f666466","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8540808be.0.tgz","fileCount":37,"integrity":"sha512-6NFM8ug8or2OUSpiRmE/rPoM8Ujx4xt/zSwJGCs5z6KPZpxb6fh0vx3qm7rzUvd6wIvzq6nUHUSx/EDVCp9xng==","signatures":[{"sig":"MEYCIQDkNxxuiG7c85qDn0n6xhBZ9NhqsWZqovbljPFNtzKCEgIhAKKdyqi43CEWbR9O4sDFEr9GteVa5C8HkqMSnLeEv7n4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/tCRA9TVsSAnZWagAAhWAP/0NIbovHYC76PtmlH+ZQ\nUkxLDrxjPwERY46UI5VOyfe8wl6h7ayGFnHRoCKUNnIFjzIadNqyes7/UPYe\nJ/47KjsKsRr8NDmu7sIxmKgErfR7jL136GTh+O8HSYGjcydHXpw8dLWpeTHq\n2hX1NQMcW3qsTfSfROnOcpW1iEEzXQcStyyDJnVlurQD5rnpvvj+55FNnQx4\n+Fzay7wWRWZLko1m1BbjuLxEAEIkSjmxvgbfa7wd0J47I4UZSBv0mZWAsywc\nryj2DPDOASBJ3f0Y4aYfr87dEx9CZj+R1LQ5XcP2LCxGyDJasDfpYkOa8ufG\nfk+jPGzirTRPY7Nv5LFjBGaLq32gu2VOabnaTWV0ZGcRTRCQeElNatfdgKc+\n9/jfI1ry54PezRN9F3pFoo6LZ3JXytddWRwwXTpSGCrZwnajwphs/Lq2wdgH\ntQFs/cjS3vyLf7I1qDCIKd5hjrWdBwjYdn9xszcgEU/aCMTEYwRyKRPhvVCE\ngspXmGZ+iGAkFu7ZDqHBo8go4YXFjMLJDyA4Qwrpf90mt1CPyPLjSjilORl9\nllvrErgajqnrF+5BJs5KfuBj1MkBTB5sdra8jh3G8vFZiRqWL/4wEH4vnCAq\nTwu0yxjdpOwcEJbfCi5aNRyb3lLsyLf+v/L0PrErRuQzhuCzMjol8VBLMsgP\nhebI\r\n=PUn4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/list":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/menu-surface":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8540808be.0_1587662829302_0.631300602979435","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/menu","version":"6.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7ac575103563bea98b41c5883ae132ff14c2f3b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-6.0.0.tgz","fileCount":36,"integrity":"sha512-er0s15pVr2VD0F7PZtZEGL5zjAIhXZwFSYZPWwJTsSLzjTw+dk2erDVzd3tPDMHub86wmX/x9DR89wPjjPTQhw==","signatures":[{"sig":"MEUCICm2s0yxRCcPVHDufyry1pMaGSMI0/B9mjXEDUzbZzlpAiEArxPfwDEjtkVQn1otWVGQi9pBBwynoKltkvJPbyW9yG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodARCRA9TVsSAnZWagAAcP8P/3DxzCQMjsAOt/EysxjR\nhrT9poa4oYR4gttOZWjjileb2HiGWczRf2giEZZCkUyijDEXkQGvEAgucFxS\nacpIK74tWKOOhnm4mXjJ0PLY4kS7kNEKlwDJj7hu+irk9O2xWyk33HwGqvmE\n2Uon4gSmN0cO8vli27GKydUck4ZWbG4ip3duxoY6ZidjceKfWOKaYeOKm76i\nMK8tHJullwoUTQL1u5cByfEGqi4FE1ZCEVL1jdcvoydFVpYNUuIgoib+HdC+\nAhRTCPDk7tRQwjgl/WlS2AMWWgKQOGfF6f3g6R0ZTH+tztwzs7rerq7ibRnF\nP4b29bDlXjUqgJ8BxEiLNh3h/D9ibEhvcoaG36zDXrwx+9+/kz4pkoXTVLt8\n2PxCXYuReFHmxMSwYotO1uiJzOmonDHV47vomtjCag7kp846r+E2vjy3Fnbc\nhFQ7Iumxb4WuCABmTCOZ6r0T/tgHz+q2oeIGvVlc8SLeMaGwiabKPOwXd3Bz\nzt95P90mm2Vc6pYc0eoKuAxQ/Q3C4kZq9aa6L5E1cDak7m6frzTpBG9iM9BI\nLd5uJsLvLNKEyHRQG0FhiCrFxcWas4ER59mfCwV47cM27K+0d4qhIRALpazM\nc+htG5b72enL96zItdh1wDR6Wo6hUR7xB8WSpjCgj5wUDIioWo1XF9ARTyqU\nk9Ui\r\n=fLW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/list":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/elevation":"^6.0.0","@material/menu-surface":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_6.0.0_1587662865164_0.678192367715327","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/menu","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec051a949a43f53c20e5658682e241123b53a0c5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2673adb74.0.tgz","fileCount":37,"integrity":"sha512-VnlL8sey5MOZVW5ratgYG8mrKnBjUQrsdfbcsU4xFdkflLw1tB6T6iG9WQbfPdrqovv7JVC0hble62ElW4bVzw==","signatures":[{"sig":"MEYCIQCHDId26SewdC4Y0ZV9iDSct3z0u28MniOcqO4NSgV6NgIhAP92cpcPrkT+2X7D41GKV3jNwhxspgOBnX2wu6OR8CvV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrSCRA9TVsSAnZWagAADIcP/0PGRruPPt5kD4JEYtrS\nvLEBJYqAmnpj0ZAlYB/JstjrHLzsRX/PnlobPePc6QRFSm9lnN4yhO6dbbuf\nqT2tRp+l560KHj6+QGi/NUmvRFEZ2JxzcYLGhrKj7vxLJ3yEEc6U1k88h858\na+jokU6YTfPzTyI+Szsl5yC0wbus4qeebVtEqa9QghXEx0ddwka8ewqnniKD\n4iMqPR+USKL6/4AsZAVIi77RERTQfAXejRk67MNVaQsE7nDwJRnwUGZKPIiy\nStcbCaqCegJ/BQbmLiQRK+mbCMdMlHJ+jd22jklWtLoYfnVY4+NZU19GOb4Z\nYsp3NZlR0iT9WZKBVSR354PAZFVu/1GPKToGeVpf/MkBvSkS5yvrjbnP+gTH\n3XZDipDEPYVeJO1anhJvQJkrInqEyZoZsUVCvR4f2sfgZl/6JDaSRzIhZhxL\n7v088YTa1rJGAiCPFIxF3fIRXo69F3ZTW7q5fTcvRf87UA/YJRB4/pUdcuwu\nePoLuOthY8ZpxfnF7zNrHNaKFNh5d8k0G3o24f/SffKJUpW+73+9eUs2qfpv\nLLb9Gb1g+j9TqI5mdVUp5t0Zxf2SgzmnpK0+LUya4+ePrJITQtWfusGA9j7e\nfhbdJsKiV/w9qbKGcR+KFHFPLBtzdyQ6W7eHvVMLkFDvifFV1g8KpqrQGQ8z\n4fGY\r\n=shGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/list":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/menu-surface":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2673adb74.0_1587682001546_0.04314199857375378","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/menu","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c87b529f73b87864ad6ba15dde4261cf4a67b59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":37,"integrity":"sha512-7teo4vVo9xHJ5agVsjb/e+nSkt/Va+lKKMq2eejkDXdOAqFXcsgd/TKfdw1Nbp2kB35awbJbazhoS8GoigrpFg==","signatures":[{"sig":"MEUCIQCRACJfGRPJMod6EZD70CiOo6tU2SYkEiO+Et9nQYjC1gIgXbx3lPVSvXJ6gu87glW5tJf34U2I4maalcgxhlFCfD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojE0CRA9TVsSAnZWagAAddIP/1Lxr4FUHY1Tt6OwRZyg\noRR51PptHk6BxrRKH1SuSZBYDc3eWYplQ3Irv0ptC7hBu6YCIZlNR8Uz3fsL\nXwUMMvM17G5bhDYfg5gd42BrQmi57DPq5VMIfkB9Vso6ugdqxLcIqN7OR3x7\nnVNfHZGIc1aGwbE+Rm6OAqao6ieSqEo2Z8QOtaTI8sSWTarjWcmxn4KTqKbG\nQq5bIyWtWhGsZUlaSQa6pcP9tIWRhVFgAUd2i4gegBzBoviVnqFAwgVU05jq\nn6KIzZla18LxunMK8lG2Sw9uwGPv14BKPyyGwtNgVxBhnZ/62GtLpmYyWqfw\npbm2Getx689rK6knq9+pOVPa/Z0FzCfFlosU1L4P2v9CnRkFpafsaxZJ9e1r\nIa5OJ9N41nLQ9apwXfEOvB/ful5ucUrpJva8Nbyjnki+MgsFsIP5/sZLvWVG\nlJOgRwc/F3QgzXt9SbgOcIQ1vKaNO2I9kbfnIbJWd4zqaGuP+BB6RlO9cvFn\nYqJPfkhfUR3XEoZWciXuRmpbeX0A3GZiB5A010mCqkqCoI875GcbJ+q1CdHa\nBo53/eYsFq6ZxRq/GxSyLyJVBzklGqAlWXtIUkCPL9730KSz1yped/+wAySx\no1bmyp2ZVOkwhCkm66nWti+02LeSRZMl0+p38lBE5cRE1rKepVECbVaIQYWi\nITkb\r\n=72uU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/list":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/menu-surface":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b10d0d7f1.0_1587687731868_0.7635118612798213","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/menu","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2fcbf888915521a21f11178dc0f3efd7a292813","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":37,"integrity":"sha512-EOEe6LzKho2452RZ1O/7QvaVrb30L8e6DKU/QeLEXOC/Y3Jej0r1IYzBs0b9UuM3N7lLpGyN5qxd2wFUF74OLw==","signatures":[{"sig":"MEUCIBBtwMRFVOgLrrhPXiEU0+0AqmI3z9Sd1k10i3qvXXiKAiEAiUMYBkcijdXXBZwuJTHYCwtp6xKPsIRHykg+Paw6C8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1T1CRA9TVsSAnZWagAAXcoP/RSSHJdm9SxlJsjisIbi\nZEz4jDpRAeKU+9EDfPJmQ14ON8Dg8ppgYqaTAbT91svuGlp9GoTe29BAYWWI\n8bUpH0rso5xbMe+cF7dNo5F49jx6YV6lMkzmigxdo/VNJ8rfurX9uPu/zQU3\nmUrKYC6m83GLjBUIWuuLjlxCR/QHfa90zLPyw/B5F5kOVJLxg2sEN+/DcF1H\nnKc+rLkrmqS2l94XsuLZgyXOdqYJ4sl67Pr03w7dZOEm+Eu7ii51OxbntElL\nd/HP7idfT6Etbh6K58BvErT4V/WtZr4PE9PVTgOVW6iPIVr1RrFpgmTfm6ot\n+K9NyWPCU3+aOg8x8Uo/5HauWuhjc55sahUU8/j0ZoT9nR6WX9u0kC1wIxbf\n+Xq38yVzLdaZteEZ0ROnFC4d47t13a/Ofx1paSbPEnnMOXwXOngAwWnlkac6\nBrFtKX3cjcmiUBWrbGPsyozypHcz9CL1jOkhWZmQK66vqKK3GS3ebQmoWvHx\nyBcvCe9S8wRiA2rxeSpItp7eXgqKUgC9xjlmUzLRRkRXlNhLltdHkA8RZKIX\nChJZZ0mFD9JcSPVVis3cYox4zpEEVdxHyGpwO/iKzoAleFtxybDR1tgpVAnQ\naMx06XR9MXmFWI4tN90mbLd7/nmN4zMD6hnznchDJgIjhU8o65ddb0KQgZd9\n7cFs\r\n=mDVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/list":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/menu-surface":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.3bd8c1bac.0_1587762420189_0.8099664017484263","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/menu","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e7605f2c959978f14a10ab21b599de20dd3d53","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b83c8dc22.0.tgz","fileCount":37,"integrity":"sha512-MyXNlSBPJ8TDNN9YvOHS79e4hjTyZ35U1aChJvObHlEzbtZ6a44y5kBJuCkJLExfTkrcxPZ9RwbW+B5oN8oqlg==","signatures":[{"sig":"MEUCIQDoSE9MqMwufEy5bA4fZPc+CKDD3b7IqGkmNqvSmORPCgIgbmvtJWi66WEA3IrswxgizemuKO/AlwQBsv2nddzpOSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fyCRA9TVsSAnZWagAA06IP+wYW8Gjd0BetiZUgbxMF\nxwKTlsvCMeP5BmKCxSn1qg2YTDriFAMcG044hNFc7XQqqeF3suGwqEDhSUeL\nIfzDhoIX+q59zYJR5VzeRbdtwffeJcdjKBNzkdwKzQp0hEW1ZIkRjRKAQ+iO\nc10viDXteoyA0c/6qtth2BoeXhxAX8/MBWjU/9Z9XXO61K6WvyOKOteCKkmF\nqJLBXQ/wKSmisD+d0l+fNsl6gv2wVNd6F8ebJBIuzg83tBI6ZYJYHYp7evFH\n+/YVOj1uUWiDK0+q0hw1nMpYjvBXS97oCaLlGxpUYfpFvbdPOmtvwK1UIZF6\n9Op9E6FRlb2rUragA66dtEyW5cSPOMfaPTrfxzBpmqrRZuyZTyD8i2OS0Yvk\nN20CxZgi5dQs2oFmZBVwur1nsZwz+8GgbKPh0ItjwGmd0TfZKVKWSBrX0/MB\n7+MZE9q8MEbP4YcAOsJjz7ISiw4SBagnzjE4pk4fuD+kvz9uLoddso8ngQSQ\n1EQSd1k38dQdiLzlbmi44gBY5AHaEr2PIlHKRNBUbJ0UIpKKa0FkFYpoRkY/\nzFuwOCBlUBx3hmwgz+AFlfhvSnma6MHNeE5bU8li+KmpuWDM+7mYFrxQHel7\n6w2uIfvoBrG47IkKKQiqAzDc8UPL9dKyMSJhCW6rYY2AACQlVnHeldgko9Y+\nUYAG\r\n=huCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/list":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/menu-surface":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b83c8dc22.0_1587763185838_0.35845903122441847","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/menu","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8485cdd54fc6e9882687f3b701b28e7168d08b3c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.1b3dd846d.0.tgz","fileCount":37,"integrity":"sha512-3qY+Rcn+6/juLCxTp0Zqp4szuCxqF4S4AOP3hHlNz/upHDyx5JGGB5YVlhg2tR93l6Lz6laULGkc/uh8wTjW5g==","signatures":[{"sig":"MEUCIFgP7q/zxo5lVOXqC+qUxCvPam9OxqJGtk4BHvarpaP7AiEAg3E3kl5q9x6U1S4+ZVO6/Gmp0RE8z0+nw2h10nvzjG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4gBCRA9TVsSAnZWagAAIFgP/2h8SXgjQww0nfMbSjJl\nFISEFwZ+GbUQ239r3ZkzZJT/Cj8J/XYv+i1nL0UdE0v5ue7J+notfjIoGABq\n4zODZV9/Am4YSsrUS6ZDzUuDdJjhh2q9d6sogc+1z+5OvP8w0uyrnmOY9grq\n7UuQEnF/9z8UpkGswlw8G9MPzEpwW+UmaVjHaHHVX4i8T+KRlGsFVOMRIbLe\niK/mbUmmi/oVgqt87LDpTqgj+5T2X/ECLjVVloSoBg/N8xZrzvU4JQvpuLnJ\n6w2QreMBGU2yc0zeoBDp30ef96xJbkRkuuV9E4qHNzMFynoEe/lE1NBvmXFl\ntw6HRxZOj85dRJNzE3OV9RPSll0g59/bqeF1PWzEJqSEfQk3NZ40/T3Cg2ln\nvCX7JxssQuoRXelECEYdrSm73tB4CY1XIb3GMc5E9NE6QOIg320Ufq/wrjcD\nuDmw8IgDx7VACpvgVensLaHwdfRJ21qs8I4Hf4B6tt2bF/96MckAeonSVIw4\n5iZu18QukMw6abUsPSVWsqbCP7OzfJLj7dYAUCtnlLKjuqqEMSDD0IWLozxy\nZv2LdWIXKJbeLP9EvnyjxfUsD4eGJyRE5vfZWeuYWV6/AwXpM8iA1RuERM5R\n2K6nAeGVqwcmdEvaX04P+ZPwCwYTeAGN/JwVcIje9NTPbz3GbxOQhcTxQ3lv\nSqNz\r\n=YI4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/list":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/menu-surface":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.1b3dd846d.0_1587775489123_0.30367376865718376","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/menu","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2b322e6ddccaeb07a3f016712fb4cf8ccfb7a9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.29debfea7.0.tgz","fileCount":37,"integrity":"sha512-4A4pbQuy2Z26OFTZX0otbLbQbwK5JcHGq4H1bp58pI5SrbPmtoBOz0KDMJCt0bPZn4WG7BBwspNmUZmFuq1gZA==","signatures":[{"sig":"MEUCIQD1n79V/E898/Qf6OzSqU3lwUV9fHW+PqvJNFyyVqxQHwIgF3rbf0eWcB3W0A0a+jKXkNRSYlfUGRpLcrCgfo5zxSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptEPCRA9TVsSAnZWagAAXi4P/ji4CIkxbKTwP3eWBGFD\nDk6R7Bt5NHhd9rV56q/C+MRB6w+pFvvxe68RQAoV0XQMLb6PfYcPJRtpnEnW\nVULR+eWc/0s6If/fBcNv79wqhzPEJMrI8yJEgh7facP5m3rLz2D1mOWa2KmA\nJxnFQzkmIboFRkJ+AJ8z+snyxXNnrlpl0UB1w8qfvyjILQv+xb/+di0DQl2S\nBb4gbOc504D1QFYXLM28fyhzb3pLo+yVOCcGZyaB+16h4P6w6L8PNQnAiUgT\nGN/1lgARVoiJSRdJLXRnh6vn3lmB0WxQWHLn/NkiE2A+YmXyT/4MyvhvW7Xz\nr5nORETu7Df0gIBYAII3p/eQ44sGVgwqgBie3YpjoLZQvSc99qlSW6Ttac+7\naRfuhxZ24yAR1h6oAu6FizMYyF78v6qGB76qAM4UPfODvnLK3g3bakxY+tVD\nKzA8I7c5yBGbAgvmsXsXD/UKRpicLbg+r/fJhul+Z7dX5aVswiX3bjQ83d4O\nVcQv+gYB/ua292VoVhaxS5rVAlA3EngsoSI3Zw/xwJWTqy4ShFrgVRn9lu6m\n6XMSSxPTN+fWI1q1pUraEtHR9fYlAMw7w2JF61JaE4PwQ1Q185nWJ10kBoZe\nyGCFI0m+d0yxr5zMGk4p+3jd1FXQ2an2H3OJg+yNqpsV20QUbxNHsGxuVyQ9\nALHU\r\n=84Wq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/list":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/menu-surface":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.29debfea7.0_1587990799435_0.05948085448717766","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/menu","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67465d0c24b8841f6ef027ebbe7183d432ce7c3a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.28d32f8e0.0.tgz","fileCount":37,"integrity":"sha512-juFMQUCtNvQpsa3/DZNSS9R+KVt6eqtssKyTZ+CFdc/jsb3D1C8hRxHdmNBKrepWMZWyDDhNRCfSBATv/ApdfQ==","signatures":[{"sig":"MEYCIQCLWAaPvldiRAjGAvC0BcF6JmtXeR0n7ltiN87WDJwP3AIhAJNSuUc6Pxsvi4KD5b7xARl8uXNBBs+VZqrxiYFmCehD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudUCRA9TVsSAnZWagAAF3oP/jmpsNqQXPZNISPW5zbb\nFuvJOsooxSCZgV6X0S59DBz+0IrT/dwykMnm4hQIDMuI42GdohWEMFDISytk\nGYHLoYKBxWHabYKIy2ML3i9m+sgSuqmVYYC0hNG3ukThkd42zzXo/Q8p8Z72\n6tB57pQ4eu7Lnem4T/67+l3ycIf0+AFH5AVciXEzqBGV2CdCymDXvZeW31hy\n6UvqH+/0snTFU1btkWkkdLerCmk0xtrPzldB+WInrRC+BdspTTBrYLuT5G5w\ngRfdvccdjZLCC/KNqhOE5+h9W8nraTXu/7FIEl7HZF1sb1YgKKfxdcb6zfu3\nFsGxtpokJAWISEl/qnbQnmqnKSFW7TacfpXA4hv63TOugXTlQbYP17NYCAJo\nGNaanvMwpO2aDVNRs+WfezqwZI/hhxkqyOqH71dSx5tFbj5PWDTU2JCMjMcd\neOFuqHp7966xOCP2Dc8F+pHVbzrh+44KFbhp13Bal3jDF9mKPOSeNiAX4jjt\n4y6KqK/yIQdjWFphB7ITptSbRdA1mhnXioESBDGlqOkWtwgYwePG6VSESHgl\nnrtc3/96irIwprlTjqHdSuxbJPDzvoeBd/ZHWR9O/eUvJrxp7uxY41YHjUUA\npS7wULSyEEAhI8gw2kOfbtyUc/hEvL/zgBWPx2zaj2ZK4Oecykdle48hq1Lc\nEEuu\r\n=n9ab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/list":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/menu-surface":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.28d32f8e0.0_1587996499802_0.03876454399823959","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/menu","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39609f9ccf610aaacac094f97b3e21736ddddfc2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.af71cfdd6.0.tgz","fileCount":37,"integrity":"sha512-cM8Oab6245zMy/AEJfn9CP/4cBM4VLcmEIGuGetTRHDsYf8E7lL268zEhelykA/kird9LB6NnPsuQeRdlcZs2A==","signatures":[{"sig":"MEUCICGN4nGPvce/P9yq1rLJeqz31hrGiJAN9PtynBIVD7wZAiEAlqjaBeIyHDwuatd8D4s01760irc6tmnf1zR+Jd5or8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLm9CRA9TVsSAnZWagAAcXMQAJhmz/JSWDA63VO7HqmU\nf2TBDTN2LDD49A36CtInwrDZ0rFLE4AFKKjSlPiON+l/PzOKTCytt8hW+Z7R\nt7Qt0f1pqVyHpCkWU0NR3FwP6bPdWLf4jhfano1M8mY9fxfSmmy1UlpIWLCk\nn7JaNlLLQjOo6iUdWWBIFf6B9X/qrYufXUHUahaKR19is5Ms4aX6ag+OI57z\n5iDs1Db6JSh+YYjRK4KUz53EwbJmoJrj57CYxAgtZRXfozNNZfZhXHWGkg1M\noS1frBOA4ygG+qCCKaY/lonOS+/VF6VL0ZxPHO6lBLaoMPnM595DKSd//HWf\nr6ZRau/8OZmjpcpLVGBnV9xXeb9E1+vU3BIwoIu/IJy2JL87RuW3zRzZdswd\nUtrhS/wwl9O3pIuFJMohPto8vsMv2ueclIyrmwlxlG/bnzt3AJjiuv6nIdbZ\nydQ6/pAvVC5DrD2MJ6Bd8T4dyw9lLQhhLhdfQkZxVIRNphsjXCYTVJNIOaGT\nCw1beXhDP7dEB2rxOXJPRD5FSwkBTpPZXclNzWt3THcM03JzZ0HO/jlWIkh+\nx735OFA+MeJrbLzAj91JPCvag7jCFNVk9Cz+9/Qw9AF3qmxkNn0AMYqKkoOA\n1CzCOrQdUZMGssMhHNhJBuJbGmS1/gM4s+yberGn5NoI8mh53SAqkw/NLeGu\n0j85\r\n=/5Yn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/list":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/menu-surface":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.af71cfdd6.0_1588115900621_0.959023946294637","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/menu","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1989243cbc36e74b957a50988a91a41463d6280","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.99d2fc961.0.tgz","fileCount":37,"integrity":"sha512-iXjLhqAD/Z7mYG/NZWpEaoYxu7Eo0QsEcE9iyxx8gW5Sx/Lql+YnbKXc7ldIOPi5YwfV/WoIkxvFXX1tTKYTCg==","signatures":[{"sig":"MEQCIG5vOc9weE4AMYnXhthmTjjB28vgM8KfIbZCawYVQdPiAiBhAa5FJSZsuDY3hTebBT5nuCZiteBRGuPX88LvkvPYSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqwCRA9TVsSAnZWagAAvy8QAJX1mRRu53lik9IcrBs8\nD9BuzxXLDRc4dEZlCKJcXY8vZvI2HpDjF5T+f72HgAjGwOcND2B5zXjsgVmz\nLtzdEaWf+dStICukG50dK3ZnBrGfX3mygizsgrLhWKmRqIa2cyWcguJllAxi\nmUVN9knTY1t0igJm6Mbl0ltbX+fsN7C7g9z6DhOUYLJhLTOS9R0KhsDCvNMC\n3LaRRMPjWpu48Az727y6pMvVjAf608SLlW9OCFMjSpmauYjk/wcQ+QBkCFzN\nS80l9ahgcuhHl2E3VaGenJp/Qfeq+D6lMnB8QFMS8AR1VcMeS1ynfuGM4hRS\nC7A21Dr5+rxAm3WdQ0RYJWb+GDRPJwMbDP/1pSkeAC7q9BxwY61wYWfL+tp3\nL4cVhB9OM5qkbvwCy8fqd7czYOyMx1hdnX38gYUz24dXnrcldzLLAQThXtI6\n1mtMNYedDetgbE2WwXzjZkOkfm/p5VPsLPK47DpsU3I4vmfkssIE0zBN0X5j\nY0/rtJiBgk+ZfNL9OueIOY6UWqOtY+7Cj0bGf6stRGnBN/9eSctjSu1Sr+YD\nKCWJEMTyF/IUCminMDx0of/fA/nX1v1ZwVq/Is12Xl9vVsH55vrVV3xVmja8\nxiDPDpSzPeNbbJi+jgpuCOArNB72INiaCov5S2sr7dwnB77xB/YW6k9JXjHm\nzi1p\r\n=h8Rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/list":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/menu-surface":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.99d2fc961.0_1588157104410_0.1608464479270848","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/menu","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d414bc8d5cde08f7e6e72a0df5d0bdaf0f481ea3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.0e052b24f.0.tgz","fileCount":37,"integrity":"sha512-qBUFme4wBdIPS9PQ9n3n001bTMxxh9aQELVh8vNDxQoq8heNHCW2Lr/0XJSa2JMtpBCuC++xvUVKLnbvMISUZg==","signatures":[{"sig":"MEQCIE2ffOJKIODZusT6HLc8MWnUwxLUq01T/c4AfQZJoP/zAiAPgYqmfUVHSNNlfyEkM91gcfGpYXRHUsdwHb8PiCQsOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqio+CRA9TVsSAnZWagAAXbIP/AvwYLioeL4iyTniFof4\nZpixhzoN2C6fhry4XloidyeUdNfiHABrEkk/+yE6LwF4QUzZmy2UodctDFOc\nEXoJWbjY2wTuJu5BVTzJZshQtMDmue4So5djDQAtk/8U4kmTuS3l18eDvwcb\nbqlL4MVO2+NhIjov+AkXG5u087Lwd8QnyCVN+u7kG3R/r2Af5KSjnsQei9KJ\nRnTTZXMRWM3/3/al9JkexsektjKYMoLuUAOu0eS7wANxU9AAbElx3l6NxCjz\n0SqkkdgWLqHiXvft2hw8xtMOlXF7Y53PP/qeE+0jhxuhH9P5K3aKsZ9bZlD9\n+/bbuUQrGZVLDzFpGJUUCkb8XL36/8sdXCQ3/BFkmlcgZ2XYFpWfHHWzYXDU\nMiKkjUhB5HJAHEhjjYtwSggu/SYgPFt4Txb3U3jLKuUUudKqNfzh8FjeHnUZ\n688aIvOIdNxIz+KYLw8mogwr2MtdVdJW8vRGeKhrhSFKSKGTdpQ0Te9yoHIR\nRmS2B3dWGjiDSnD304BuAEbEWPoNSay5HRcehaWHnDt8Z0Ylvrz393FE48xm\npxOrJBrVXmSSKFYh5rdTTv+LeDAHp7Wk9WVvsgiSdi6oH0raSHL0pUJeXd/F\nKx5U8ZOc69O8VtYJNTFgttuHQ6sq8OUZVPrkNtoHgX0r45Rz8tpwYQz2NgDi\nBTQG\r\n=YK0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/list":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/menu-surface":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.0e052b24f.0_1588210238195_0.805298010695686","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/menu","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff87ecc7e75394a67436134d1aa63e177f3e3d23","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ff4bc632a.0.tgz","fileCount":37,"integrity":"sha512-awnM09PzM5NqitxxZXbB+r3FWC8CUkApcpaDaJGRMwD638wEFzv85qQ9X0FNUvy7RNQe+XlYSPXiLgQOElIC3Q==","signatures":[{"sig":"MEYCIQCj7n5CvNAZY718+AXIiKq1djW7RU7j+7w20LwkWeOyuAIhAPESKu5rNQgbTAf9E/aOCDbuLejlBaTRyj3XFWTq0FF4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqoxFCRA9TVsSAnZWagAAVmUP/RX4c0cwwTcOMjtxh2TQ\nHlfbAA3pjPoTZdTjgAx1Ogv67EMYrc+zBNheuEJSMw0VwvAU648H0KfmTA7i\nFsYpJ+S1dd8b9QncOBDqRiQWvpVAmixpYm+B6n3jP4Nu012Z8zE+k8klKkvV\nHnrsWP37sVzLJJM7Ncke3WtysXerRc/58LX/+lLqtg7ueYbiQJyDvWSKoS5N\n5biV+3XzANxtDRlIcw8D1+L0r+fslhLq7QB63uTRqGGStOYmFMwGAD0Ly+Vf\n/pt2KdEjjbQgkQDYZzz/HiTVq3S6ItthZanR+1ua6Tny+mjEIzHBasgb6Y2i\nF9G0I/qqIdS/OGMALWSRCNY6WcOXqtU6tOrRSOuHi/zeAjhyOBQRr+WYAD5o\ntFyTMku/fH19l/hd+WVBHHiywnClheP/Cm7P1S35hEeMny8xwGM4kRwnPrf5\nUW1KKbyGBTsfa0BjOLhQLn0HbYYATtfDUMCGgqgK8J3NFFE0OdaD1SMGnMF/\nB3KSpvEfVs34QGQEQ/UtBVlAZP9JOcw1NeNSobykUp8N7QgLbd/zzZvqcde4\nqXjTxKSm/9SIAPvMIC7vfnnzxsuns5LkNXQVQwNH7BC2kYSAA+pOScEiSeJA\nh1ow1C5xNBQm4KwaBqxPhdiwoO5T/hzwPnAhLM8xcpWecBVRi8DsTgyvZsFA\nxolt\r\n=zryO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/list":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/menu-surface":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ff4bc632a.0_1588235332865_0.5112537883998118","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/menu","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4451347318606a077e336571379698ed4552ed9d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":37,"integrity":"sha512-r+dnHJX3AReWB6Zb0/9rKkIzsd5nBlxYFGajmy0mNdq+hKDKbqekWVg8Hmp1U9LsWtZ5JwEulW8yjpBUjOca9w==","signatures":[{"sig":"MEUCIQCdk1fvp0CqksahueqXsuejpYW3v0SVuVv1wxP63Px1rQIgLcejGoSq8GDHCuLEnwJaCdGY2WJ6iJ9Km1ZgXjYPY9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHZCRA9TVsSAnZWagAAPp8P/jqMr9psols66moSD4zD\n9mwIE6L4dA53I6tWmURJYHzYa09qE68iQQMr5uHtoc7fLcbEiYl+KBh5hNiB\nckdILgjtfltyv0t8l8EEcU1PnOhB5Hf+1HXbPSMcg/y1pLWWQP6kawRUeoMS\nFZ1zSkq1O4XXbRh8zM2WFjRPtbMfz3eBZvjO94TkaB8sNwiz9pk3ELYv/KXA\nkCSB8Je7NTC//EVh2n3JhnPqCvwNQmdbjVV2pMsf4uU5GTmf197dbJyVLFE1\n5cqxL43aIvYwcrRx6l5mLcx9Nj9ABE62+LICaMlWYjjVuZBD0w+EFT2mv+Js\nvnfAeMJrSEMmXuCuHU8Zmd47tldp7sI8oIjSiaP23KpwNSPs5Y1qG0FT+w29\nYg50QyVPQRa/fLflpNtdJ6+dglaNnK9/BKM0doRYPDm3WYxoVZfff1cvaTa0\n/rxKDI37Y+QhU1vTravrXKUOnStzdJg34ZsR8/n3WG89727ZMNOe2n9aRiUG\n6PDM8Z139kcC9e/oN4I+ccsmAe2D26l57SeMbC7y6uDj4I2paP5j8S0BfYkZ\nbCCUtS9KoVz0+xDc8hUoOBTbSb+DGILb0Pr7F+vcRu7t9A8kbCDcgOgpQZqm\nC8h3FxckBEmnKY3VNlovJ0eUrCQ/QqK1ZhvhqUx5JCOIHxJ9LJsCQVmAwXB+\nxlCb\r\n=4M5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/list":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/menu-surface":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b0f83d2fd.0_1588257240698_0.8953510321491416","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/menu","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d2154c49daeaf46ba236dc5147052597d49dbf2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.e59906a57.0.tgz","fileCount":37,"integrity":"sha512-lEF2YgdiTyoVZTD42pDjEanQ9W63BTKcHgqbLmRyd5nij27ESHbcWievlnfoO/Yih5+LYqmYh/4CyHiePBABsw==","signatures":[{"sig":"MEYCIQC3kW/36HTEnsjFs1mt2mRmXV00RETEOhEVwQ+5+MhA5gIhANLafqybApIFqY78+Di6wyX1yN1RYZrPiwNSbL1uBKLS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOcCRA9TVsSAnZWagAAEXwP/A0IDjE5YO5PYsfmFoQw\nm78lXN15sSvo3yZX9TLsnxJfr6nhFVJ3IpZSdqpFQSetsYTbU8HLjNsyxBJK\nwlifKZHQlMqeiBQ7JFaTrn5fIHpPvzSqQTcynElrezP1AKs73qDr/kuem0Mw\nb1MunaIRNNXlu4hqcZGOGvbRGhztblnsCppuMTFBLXdds5+gJmdGVdkViwkQ\nQFDa1txAJmuhyD/P8HXaPssYDWXezx7IxuLBbghWnwdRimIlYHfzB4U/oDa0\nZdhRhFfnOZcXPZ0gcHrj4LvcQyiYfbhSnZRw+CuyuD7m7SV64XnY8juKt5Mb\nCU1Fsqyd5tvyMPqi98vXL1WnPIKIiUHWdyUHfyoYvurv8l2ecel/TxGRzzsr\nyHnSeksgGXpBUCnXoCAIqINBqZ+S13P7/tpad739HghOj7HU6NPwXUWf7wJa\nlks0Oou9yOJLamn9R2kEChPYx/dzWajWL/qTKHSi/QxEkO386eUhpFWN8ym9\n9jw4nTBZPbcQ88JDGXLGdPZThPH/Lhr9jolCiq6Y26PtI2tDKXm1954ObJcV\nJLSQwXMx0XRLRfzZAvRiwxivF2tYu/spQ8Efgn5dzwvDIndjDBpXm2dBECxb\nTUJ/27jvxb/xuXqUMhafOmib2IT1cWRWh6ocWEkqX4ehjAlEqqCF0/M8aoNp\nJiuA\r\n=eecz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/list":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/menu-surface":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.e59906a57.0_1588347804232_0.23408679330103999","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/menu","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"087e742ad00003181737f850ffbda90354ae79bf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.c02712b59.0.tgz","fileCount":37,"integrity":"sha512-BhRJJENeYumCVdnjpj6OB9paiAC7kCjVy0s2IT++OVcH4ZaWxD1+rzSeSEzgGu+yx0LkhrDGzY082yFnyBbMAQ==","signatures":[{"sig":"MEQCIBk0v4Y7u8nVNaK8zXNTHt+mfuxegYbo6LiN1l+90uTWAiA/yD2QL5f93f7Q7pfQFL5xldMmzrhhdi8PbhSBJ08j8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGntCRA9TVsSAnZWagAAedAP/1SLQd6awraktWOvbpMh\n6RX1QJi5pNkqWqPPz1ANN9OxqaVcMM93BrICxqQh1HMSN0zEjHtwS/GMbHjn\n6AsQjnKwiDOlWxC1+rKIS7/xOE/Alh6XXnVk5yjeKWFHUrrhqhZpqcXv1Wf+\ncPcC3+9Q6e8ZUbND7nMc7pukI6xooFv+NDlh0AufVavduglgUbTHwUHLwaLj\n6i9cOx2Qa7Jz0W+6OI6k6/nA+Pij52bKB8LSu87oNKGuv9z5FWURbZCjPVbn\n05EbXBw6SA8ZFwa5HYZhQMAK0fkU3pVkJFoNUHVDlLytXS3Nwb++ZZnjO232\nF85ZsfhmeDM2Nwu62lwsBa8RiEMvwPeKzXf/nHnKN09TLNlrVawkn2+sZoIA\nj3ms+cuHPvmKA4QY+kO4hd11H4qn7mq3L/4X2ckwBnFQKB2pzq1C31Htookk\nEzxa0a7l/4TYNDKqoqCPiakFDAQ0PstPdkNpFSxZl+UixXlXuh3UCKhs7ydP\n893auJ6OHuMg2AGOmJ8sHtG+gKY79ZjzEhjWKjBaTY+RYulrArRMv9wMv3oO\nGs8wKWwvQZ97WsN+Z/wD5m5Ukt2hkve4f4uyyOu6SgGGPyM/eJSn8AK01/r2\nvBWceW1BDeWAMmJVo3psFd8rK1RzAlsikEu7r55LGa8KwxQJVmCJRQwFLOc3\nL5Nk\r\n=G0Lw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/list":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/menu-surface":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.c02712b59.0_1588357612810_0.49757765413481914","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/menu","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e574ddb384c58aa5402e6c0535b91041ed7375","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.15d65448e.0.tgz","fileCount":37,"integrity":"sha512-zk0XMgVSloRpNGNUOGo+s/6iif1t5RjSDVCMGHFj/JaWvyixN4ilVc75IyyIJM42eBbXp3V5Z6LNyv91rvKSXQ==","signatures":[{"sig":"MEQCIDK8IsZHgqTeZ/5pZy+ES7ps/jMD0tdqXAlS8L/yXl0TAiBOw+tfm6N2OSlU8o4oBtwtN3e4tXqPgaXH1/pUkJnp2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHc/CRA9TVsSAnZWagAA3ggP/RbKxUDPmQZSWuiL211g\n8+yEyDkhk1V46sn8+Tb4dwfs8c1ulMjNEqZSPuY5Wpw/0L3I2NrUCRKyz6zZ\nmugvpjsJn0wo0UBmQ/1yW6EdtUzIYJDurEUhubhwJAzax/HWrVztArNyL2Ew\nmfFipHS6RZMZLjWf1BjpBAQ4TD0fimK15cNDusYxMts8l8MG4sHRu2YwAlIR\nnt1kJFR1/w7D6F8Pt/jI06/jIGpnlZV/u4wUtRFvXYCbI7yamMQ7FZ/uhktO\nCZI2QfVKZpf6/yEuiQqt6ToJjX7wRpZIcgiNYE9QCJca37UBxvsp3ri/EWvu\nNOU0MUNY+nf1Gmd+/OhNJbQjHQxVCmOcj90BN+dVvUsiIyylJiA+D/oDWM8R\nd3k6w5C389YIDH7kW+ect9D/NnhfqmSeVyCWHMgovZOsi2N5GnEdGUpYCab+\nAscq2EM+68IyZXYDrrJUmZEQqYdej1GFxaal2VFww8redCiWO8ylXpLbSVJt\nGXCgPrjVhmCxGsabawcp1xdIo9B0k75BuISTN4O1Iii3m2HOcZgDxdCeelQg\n5YYV0Lm5zqJKfoza3IgihZY+AnJaKvSuE0TCFdcMQ64PbyUrFEKrbXRRGPGk\n+ycjZ487M+o2DaBH69opKd2Gre27A+O+FXfDCDxvdXQg7VeIzt0mjDtSfcxd\nD4hP\r\n=yyxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/list":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/menu-surface":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.15d65448e.0_1588361022567_0.5485037187987034","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/menu","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b27e499d4b22de8cdc51c8782dd214b567d05cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.142b1549e.0.tgz","fileCount":37,"integrity":"sha512-nDNHxQrNEOh5XsBRK7QvyJZ/DXdAB9J1iy1VOCcx0m5ixoUGWgSyM6gRscYRxfAdwbLVVe++33BrWbKf958brw==","signatures":[{"sig":"MEQCID3kcbAn7s3rjXVmYLo1S9CfO3Gkjbboclasg5rJebPYAiBZ4lgzLo3r4swediuR0DKM6k123g+TY7Wh7ImLvp0Iew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKR+CRA9TVsSAnZWagAAAlEP+wQQ3NRmmj8N7Q7UyCyZ\nvSE4DjIAiPBDzYvbUql2GEtnqUPnbdEhFQKZiz7hPO1VxkAhHxSXQMAxHPB6\nF47qpWgmFNscfPyLuXYY5M3f9w4KFMh+JyvGCWK5eD5V7YNJCLNTDWe7Pwdf\neIuQG0bb3AUu2YYOCMZDSQIfrwfiHi2GbCzmKoOh6Q9MX3P+TEoXQ8+XF3Fa\nIyGADTRWY40RoclSp5iXmoUQ3NaQ7YF0g1jHV0I9F/yLBObhmV45QdBQdE47\n8lnQtcHO2o0UirpsADTmmK8z4XAMdiM+6AVJaFSqEU7FCvmmP83EYAAeVPTO\ns0vv0RNPhReMAtSkwM8ENBmzDVH8KD0zn8f3l/j58ZntOhLP8hosLjKt4CbU\n5DAcXCb/DTMXcaQ7BfhN0p9sMQHZ4Mi2Ai7XGR/pqSApP7mNictre043U7at\nNxcyNlKoiHRMXNIhyFJrLNl8454bNB0NWWIeCLUx5vrgal71ZOHOSIdNKu4U\noQvwof3Cv36qpdF2dgC2poD8agTsW4EhWQ0PrtTk+Qtuj39VzGuCQOO1Z9hn\nSLVQ9RY0Zy+z341qO64jRgr2+AxFwD0/gXxuCvxqveaaUCMe1Vo5tynU3NIT\nJKDXiqiZtDfxwFbMvHkJF+l9akswT9HnaC4PaL2i4Jdyjd+yRr/6MKaR8/xx\nQgSz\r\n=5nqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/list":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/menu-surface":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.142b1549e.0_1588372605545_0.06472717074532186","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/menu","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad2c2bfa5e563c66c20ab3c3dd97c0f33b99531c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.524b7b812.0.tgz","fileCount":37,"integrity":"sha512-m6nW0XaeIHNxIhu4DhCizbGoMg17rjt+VKw5n2Cr6dPI55FeFRYCB5wz74gt0MdIhSYv0ma6UwSo0EeiU6xJSQ==","signatures":[{"sig":"MEQCIA9bI9U+YwtnI1uyrRK+4MPx8KbIxRI2bpNJCRm6bs9eAiB9iSLrWY2vSwLMw0swoudOtbz6oQLOFKncikjqqk1tFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4dCRA9TVsSAnZWagAAkk8QAIu3BloY1AVbzL1tDxuK\nkIYqX7bWVcFM2JrAVr+KgZ8AUNY22sqKJoZ9dPbPeCNye13ixCzx8xPjsCWZ\nOfQwi9dvI8KIwYg+J4bHWiZ+mDyMtcsOfTEFOlNByBWUgwoeymaB7k/1cNg4\n8Ul9Pj9ZgLKsY1hchIVVJM3R6KJo4yTLcKzdPOAV/sNA6blDFKhvHoWQMN0T\nDPndgama9hwPCGbTaAWg+eHxSNE9VRc9bInMji7rEI4Pkz6BYFm6BVvitr2N\nHAUO/u3YqEMNVtYllDckpAsHHamcaUJ/E6iwngnOMe/UAi8PpTh15nnr+uUF\n7l4TNIt8oxKs8IrvWn3++L0TWzrUiJu5hsbE6DQEH7iTLolRwIWaAl70o5Ng\n+dOBgDFs9fCCUKf2MBCJscMZ8ZZ12MGAJTEI9G8BxiEAi+y2+EdHZa96hqkE\nv6D83Ol+bac/QhK0Fvxf3ZekF/cVug38T/5ULBJ8sl8gfST8+jQ5dww8g9Ll\n9X1igMCzAJgL8rraJkQwCKqwAdFxb0xjQFv9hkx/dsTfrxYrIZOQHwTK0poY\ni5EbGM2hgYbRncUJLkpl9M9OXMMbv+Dh/72lqP8yRjAfUbsc2xElwjgkmAYW\ncJZVvNm/N97uMtt4ZCaSimxCQPfTMdcZdgyxnM8vYRg/Py7CTgIs+4GOSVQt\nqvSD\r\n=+BZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/list":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/menu-surface":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.524b7b812.0_1588538908568_0.41983374742463475","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/menu","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64be35082f75765e6fcf6080ade4ddfbe1bb751e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.bd8ca9678.0.tgz","fileCount":37,"integrity":"sha512-5ReKy+5DVTk/YZT77CO8prr70Snhp0dcVU4IcaMLhW93rhO2g/5jb4TQMszwf9yeiJ1AYrP2HCP06LZKRBt5+Q==","signatures":[{"sig":"MEQCIHRKyyd0xsc58IzS6Yyj6u6v6N8pYCWUWBGdWFsTNw+nAiBb64YYZMZcL78ziVEOhhCLOk98NyDwFY3c11uJNFzx1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE7FCRA9TVsSAnZWagAAFHgP/1xuj3INMrT4x00JSaIJ\njWnGk35mt6xAcjTmDmyE/jlYLppQSfcAd+8O+p5SmCK82v/d+shkZ6JZ+R4h\n4XGy/eDPjryABl8JFWZtuTHnCvYPh+vgHnv0B5kjDymGYLAhX7REQxmdLRd6\nOeIG8uiWqKRUkoeJDAg/wwq4OEYHJbKH5a6t1imkaNjoZCnimPeBsQsCQGlL\nLFmDaa+rjMRF5t24WkXJr/4zGykhv1SuWOXhloRvURZ8tNsXMxEGwZBiPQs2\nedgDJavIz2KOsuyFMlc0VIvKEWfjS6NbXF+HKnR2r0aLbTv7c99KavmPVloE\ngmXvPXVT5E5L2DXqlKEWHbs5wddWfEDxFsg3+NBazPT8SMrRdUJzH4VD3pJp\np544wfY7YfGg3lAMlTOkDQKIPUV1O6+YzLRpKTSTSHFDogMMn3NMgxmmpp8D\nVppq63cb+aukEO7WYq0uLE4MLPNX2AQf4c0M7Xa8YA71lYPtvAWcSkE/nlob\n3usJRzz4q6mcZpacAuGw0uYEdtY7JHcp+PGmiBYTS2rRs9EicvJBzXdYRgzP\nw0vuW/zCNgXc5j3BPhO95Rx3gTmpiURbpPrsbX13nPjzfZNCRDeamZN1cxhD\n8g7rOQYYqknmRbyeu9z08lGh8HBwDPLp2I21mliNhjVMNYyZlnFjptR+xlEU\n8tph\r\n=SPvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/list":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/menu-surface":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.bd8ca9678.0_1588612804913_0.8529236309224417","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/menu","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0641b5e7db0f2d75673b6777a4e11d04ed28fd5e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2553e86fe.0.tgz","fileCount":37,"integrity":"sha512-E2hYOJ6kmlLoinyTCqMBBBBXeBaGy4LO20tfU2BvEOhWxoBNFSUI1XRTaZMOJkom7CV4vkbVvmUwEfvKeY6Ovw==","signatures":[{"sig":"MEUCIQDcAC1eMtoWceoDz8cRIKxhMhyrLXnAcnaZqkYMnLV/gQIgOVbKTuKl43laDkTFkoQ5rvSdZD4D34Q+WpFTh3gikUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGfCRA9TVsSAnZWagAAdOwQAJLt92+P8A6slFLKpaGA\nnQ+AwCB8Y0wlaYtMjSTrC0/DS1DA4B3Mo5Blv79NkzrdxS0s0ZYEYGwy3eQ0\no/dAeY9Aw03HXoj01KRtRyWoJ6gqsPD7KIMzjbGctRKe3bTBEqnY4Jnes6rK\ncDd3HPnuWy1fbNM5hS6jVZu/wNjE9XYFcjFsvFyzV2a0vcsOUNXdto1Wt+i7\n8w2sPf6/UfIshLPFU0uRMvFVuW3oZKc6kcj4LkBJdN6k5JzB6D4DJ9Ny6SJ9\nmaD/06tymvD+pA9QeYUCWNZvgf5sGwp9PyanS1yX4e/9iJguSa70LV4YMCbg\nywk6Qw91wUBo4DuDzfVLAKjEsJq370cHvniVU52PY836Mde30qB5Ns2JZ1b4\n31UzznVXmaefJ56xtkYCcJFabF6lxr8FVqlxjogY210dNqf1j+NJEnHK0Fwa\nmCSYdyQAScPcxQBmvl8cZwoviRW243omrt5MbNT3nBPU+qtIOey23SFpqpg/\n6hfcyEuX5D6U2nMIdPDNZ1s2n2WuAHoNV6uzKO6gAUdpag5xC4Gw4UU8YN75\nj2TpyLHjstQKylJgjK11OiejaQbjS6CgUq2/YJCbr77BiFh0bu2ZhgnUS6cj\nTmxxrP3+9NefyrIA0JQzkiZN/ALabiQf4/b8nFeDRfO2qDbAHZkuMJu1zxLP\nqBZy\r\n=bBAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/list":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/menu-surface":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2553e86fe.0_1588613534834_0.028995880483661196","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/menu","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38574087be733a66237b383e52d36264fbc0d3de","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.03dec929e.0.tgz","fileCount":37,"integrity":"sha512-no2N+DKO40i+xF1kRelJkMBERsVzt7U3PPS9jsIPGasDK4fF65osp8SWsjf71znPwRUfk64QHiWJ8QqQm31Axw==","signatures":[{"sig":"MEYCIQCeQ9cprAFi0CiaDr1//7lpRxTSqviaAUQVYDeFKCqMKAIhAMDY87D75wTc1+jVZa6l3CtQruIpt6uNNX6S6N9u0Wsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKaoCRA9TVsSAnZWagAANQIP/38WYvrpB4IzsbrpXhyw\nVayGNIKlFTL3IEHHG6TcBgn9910nKi31J6DXnDOzE0+LKQ2sxxcUgLb/USdZ\nwP9A8kh1FtwcaRvOYKArhvVT8Qs2Sr/N422i3+kCdL8bGv/eC7ZNcB4apvYc\nGzGAWwc4zdCNtwCgO2az0JOXhFJejWf8hV6wyHftAsk/2/BObJS/O38BRnZP\nWVv/MIhMeRWxL+ToPtwJc86/fb3/dmIhF2HlhqpKbspbTV9n17LYbJ3QWaqM\nO22qRuayUNGgTlqL7Ky69sabL7TrBkug0hiA6PhCjA+D8Mah4sl4q3gkwP/4\nbFFRcI6oaorKVA3yDu2QfAfNqD56hFm8UgdH6AC2V7bp8kIgaZP++D1NFA/G\nYsEeUqHdNv/xnsj5R6o0niXGQrZOjJTNsJRYn5WAWBJdYZu/Jg+ofUOyAYff\nbQZShn6oJwGz19ltx7DRX3iBrxXy65LWvpbplSXMULAGabWtAIAbx3mJ3AGu\nCMFBsY5VUQfc6XVmcX2+2jSX68Ll6F7KfWbd48FsLlVyR+rot3ZxF2rot1lN\ntkvTs4tlUwHhDVumuFeu+hCKTZyInEoop0XAv3C/JcUCkpH9czplgDh/tT0E\nbXlRg25hD7BxvqvxS1U5fptaPiZhv3VGtHANUz43ukGPb8jsMTttZy9Y8TnY\n6i9v\r\n=qQpN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/list":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/menu-surface":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.03dec929e.0_1588635303892_0.7198431979016904","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/menu","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"496ca4b078bc0072308d89905bd3c8788a4af8b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d92d8c93e.0.tgz","fileCount":37,"integrity":"sha512-//ZbJmt4qepOu+i8VmgLevYAm4TtGTs4Q6k7NsZTbcaLKPM61upszM5oZ/YnlNELWZ3CUFweY2tdQIn6AnFkjw==","signatures":[{"sig":"MEYCIQCwhSsEKgwh7iZ14ohmts4+PX31LjkY2Y/Wo62c2SWnXwIhAIcaNlU0byb6b9AQCcGCEtxxQ1PfTH0A9Ix8GG+OfDbq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZuiCRA9TVsSAnZWagAAoD8P/R+NsowmQ7+cdfilZ255\nJdCFPXx0VWrxIDS3l+G+axmGbSnWZ661bdr7bdnYikmtES7D+AVuiAcHkjVB\njcr0rO/X6Y+wNjDh36zLQJB3QI2nz2IGSkJGBaSMQ+EZqM5gWG0E36QFihd7\nouiYH0rCGn00XYGUzpUgLhnqAPQIlXX2DoiPFodej6pDG+WNFT/2e+wpODr0\nlgbTbvvGYsczuslDHYPUMBZoVrBNY7Elwyh4C8vU2Rn4pz7fL9PnUwRsNXs/\nJ/EgUhPM4T50ngJxQhGvd79xvZ32Yuh5FKqN1ZXfcuOhYEm+WNVaNcOklhk8\neWjh6S1BqJCd/QC6UbH0fjmAlR0E2oAVTSOZUqOpBpY20VWMvyemEB1HLRMl\nb5Qk7/2uwBo/Z68Mp+2EDHAhaKfW8Iq+vUL5IVzrHSO3mXaiyBXjoKTJiD4g\noiPx5k+LaRBf16Fqc+YfA/M3MgxDdM3tCs43b46mWmiiU1Zu8y9u83zqSSgk\n0eB0bZ6wh13pxPVqHB0PdpUnzyRmWKMpb7SMlQqOub/ywoL4nKj6cAh24Vph\nRmkwLWhvnNyeseTmkJvIRqslNCLH6qzTF4z3jrL31BIB5cWNC2x5DTkgMLBg\nGPhjn4mh219YqbxGufJaNZXGXID/NXqo8OCo0I+o+MtQw/ffpWZltWegJhra\nh/dp\r\n=FcYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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> 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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/list":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/menu-surface":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d92d8c93e.0_1588698017937_0.6535992403798894","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/menu","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5230d8ab71aed6fafca74a52d16e45581fd77e7a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.09f591967.0.tgz","fileCount":37,"integrity":"sha512-NlJDHo1L41AtoroTGwbxpTSNSJ+0dAq09Jp92lxoM7YWaCu4yAOXwGLyvZ6VG9mcJ8RSMsQk3E4zbX1sedgdYw==","signatures":[{"sig":"MEYCIQDWcmLovzJv36K/w7a9T+Aj+OGTW2c80kiQOdcwEFpCjgIhAOAkThton2vi10Z63g2Hxja/AxaIwRTc06uZzZBKnznX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUYCRA9TVsSAnZWagAAP0IQAIwAKKm07qExqOTEVB2d\nNr2wkZjyDXERauojAQYwJC3Ax15+Ra1vhf7N99tnq0OJN+TVOJxCIMcsxCDz\n/TnVY4eMv40kj3G8XExqrus/Nl7alNblLa/G7OY71if/VcMJdW1JknZGIUIv\njo9dT/rGKKhSuWMWk5AtwALNnJT66T3XiB+HqKMjy5W0EWS+zk65Pi5Q0EOj\nHRvkOZ6zOv7tQa8Mtov86dx0RItBA4imScqgUys1dpuW1rsy5wPW32hWPlDr\nrISoFYOz65dKaftt9KK1pnPq5Pd+OPTYISFAcerEOSo7ZMF06J3lL83o3+/m\n2gahm7KaUI1Zv73Wxs9iegsKYPrmFFtE/3eX6M2sNH8eK2UkVyZI6KVYLV7J\n+ncdG+D/6fPUB7HubdbtSLzQPwEegHD9zUdF+1SrlEBTcNFdEedUpALJS5Au\nvVruAswkWvstsF9Cj+Wa+OTNA4E4Cda9h2nO3M6y5h8k7Xd3cVdu6kputnh9\nlj+imBy+8HmRmHfPjLtfhhPKcFEST/bSEkIFkMa+OmyCjT9jCdYvzAuQotlJ\na6q3AaJ/fQJ6YXgdd+hiQWka+npDPWZhv4HRjAp9yVf1O07iukCutRl9VUaM\nsSP15EvwIOYEwbQdZNFilzqCvae72o6IrqsYBvqN9+0HE+erLGtttzeD55eU\nEeDY\r\n=JR7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/list":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/menu-surface":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.09f591967.0_1588712728220_0.7070429808448144","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/menu","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee93dbc3b0b28467a7fc01467dbe498c40ecb421","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.3846ce311.0.tgz","fileCount":37,"integrity":"sha512-LgpdgEjhzQcDi1bC+8yMClQOxOPy5v/H2DCLCZksE4RsGfTL58D8PF7VMu8Piq81sZv0ruYlGnGFjLDeLimVgg==","signatures":[{"sig":"MEUCIQCQ2ZQM9tal0PAsQCGvxaC3KqW1QKTsemn+C+Vx42TT2QIgZRr0kGcHWTumtxAtH7LbJk7e/PkIWqTzHc1kOHLI5pU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVcCRA9TVsSAnZWagAAfBMP/jP4fUX7qzOqaqCIK9lI\neM/1zxHzdSbIsr8KFLKqsjdcsrme2b4vL1EdnrUXA7LWtDaw0wtwjr1GU4js\necE8nYv+/WxyiA4zEcZGCYXMQjSZ7tzuowghquYKZ3A1FEg/p75Pd1jxv84n\ncylzU0oWo4Y74S1Hwnm6wy0pJlDoR3W7U8X+e1m0wUKgwWyUHgCb02yap2j0\nABmRwkNWf2tS+G5+vK1y9i1VNFP9RNBZTuwRY+MIj15VZjAzFXb5ngs6TR2L\nIfk8u3PMeOSjEyJZE23Y6JttcoDc7WJMtmk2lNBbJ6TfMR5qpWS/W+cwbW5t\n/LG1hpjJRh6px85T/v5Emuo5uoia/+/oRU2sQVQDHCk8F+mLcRTc91Mt6Ess\nhHcZhUH/u4+pRRYjexcdCJ/732RgsR9BiDg9mUOwwvyYBaf6dsG7PVLjpGsc\ng5oYJuOeux6roXmn20Tpop3Henl62Yv+sAow5hsnBu1jvuE+xBwzOJwuG1VZ\nU8zuYXh9SJek3w2k4lO8WbxXX6QTGN8J/Bwwn0trvInbwOL+hi8Fi6P2Hltb\nIGhZq8MZo8EW11527Ktax2V+7KZCz4+5wlOpGWYMLIa4Wv97Wrv1ULw2Sip1\nRqIMm12beqk1lZegj+AetaJkKrvnUblR8AjP1NCZvLmmuifPdnsGmOfblOTC\nCPgM\r\n=EvXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/list":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/menu-surface":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.3846ce311.0_1588774235442_0.2633264025088675","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/menu","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968ebabfb9f2d0af2c92b6ca63428f0a9489bedc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ed7f32463.0.tgz","fileCount":37,"integrity":"sha512-51Pg3Amzo2sEhoIRKw3SMGycuuaJIiCrbjXv/dXBpaIQdSwOh9MCmP9vNdj2uQJzhBeiusfN9KumTOW1aj36PA==","signatures":[{"sig":"MEYCIQDa+KwfMI2VG1yXTKf4EpA1GlsTDjGR9UViACdAvzxjSQIhAJGCxCZVt/ONYio2sfZCcMFZytvSWUfY2zhZn1EgAZK5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuETCRA9TVsSAnZWagAAgjQQAJmZHCw976QtxJ8Bwhaa\nNSsCNYPy01qN4pLhBecXKSAoJhnu96/GJyR2+d4vYqyXkGdLgKIFvS0dhrxs\neu5UDAvbbD1rKb8EFartLLPTvde5VqIR9pVe/bGlzNc60XSK8XTYsUROd+ek\nn5gzqNjLYmwvQFn8AvDrV9ReVadDglQ+5kIvwPOizfny1rGESD4Z8NKnRRki\nUNINOeg3HLFRWSZyRs6AHfxF8mlH6ck2YaAUONmHfpVktjCN+YIMOu53FBiG\nXFUakYrgKqydPO9hrrfaM2Hmw/xdepk5MrgoUiydiLCdIhk+2rc09U9oyy0+\nACsvmdMNQ0Afv3y9NxWFFzh++IGPgyq5oJcYMQQ2DmZznhrSIwlKhmVk5Gkw\nptbWE1Yzhd/wp1hqn/dFX7tpsVcDOA/RJxjVp9zhy/FnaCGTLABO5z1s8Srm\nK/mvDdzgQ5XkAhnNQQi+7ukKTL66GGOA/cqpqVGEBWb/bAhvHSO6D8ZCMo9u\nxkfXvEjljgjfLgBAuZG3ugqGzJlH1GFi5FF4FUDiwEMjdqgnDIB1Q/Aj4rYJ\nvLa8gV/gHyKPjW7O1cwZXxCBU2VaodsJvt7oy3jDzdm7O6m126+xSvxAimJP\nmKY2T8aTLfH7hdtaakQJxm9pCbWkXUYE+71RK7C4B6jT9mbQ2qiFtw0JCHPs\nM83g\r\n=+KX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/list":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/menu-surface":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ed7f32463.0_1588781331141_0.3685631822472979","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/menu","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04db46c93e6c5fd5d2b68df833c5113d29c4a791","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8135cc085.0.tgz","fileCount":37,"integrity":"sha512-4f8g6+N7V5h+KwTMSuVxJNV+1Nr5bimlivcsuf8PF4Q3byhsKSB5vgi4Dcl//CjCd81eeVlymEOOQAk8mFa08Q==","signatures":[{"sig":"MEYCIQDv9SZadNywNM3kEd7+erZQ1a1UgQOQs5JuTqX5wG9CdwIhAIgl2gqJszCsAAGBsfml1boxm/O+iRiDq4IW0JqjTptg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZWCRA9TVsSAnZWagAA00EQAJlAXzgIYCV2VDM7MD3A\n0Cj0+YAtp3huSScOdEIkIXZlt8To5/iQHVauhtjFEZnEmzBPSiEchsne0Qrd\nRguDg+yRp+GwUw6lqgvV8g9JdgmYgpApcYY6zrN4bC5vw2WkN/y1xp20z01z\nIi5WvhG0je7+PhjYeJUmmus7i8owUyUZTT6oH+DzILRIRIotRFa10jflOCND\nEbbdftEjGevZBBch4qD53ggrrgUNFYGHJyXSCaNWcpNClMmfWVEP85UKe9DZ\npo8Pq7YYLwVciEyxDgDAp1sKoyKNFv3aBQd3AEjoVXSP7zsZu8uAIlrvy3zm\nppBT6bL9YWH3yKDn8sedbyfDEwTmkIf0DFoZwFCGO1e+ZHplLoyglTpk/B0z\nqYx60SWdE3SmE+vDU001hzbXoIq8VAFFLagPAwSppxD757m9Cu+va8HCd+g+\n4Gx8b3hQkfzsGnHV96gc/4Mo6oviyRKUwRLhJHUTybDiuZQd2Ahcntq/nMyS\nY2EIkAv53xzqe1oIBaGGnRG/ZI8Gpj3JzhrNhFTDz3xgv6tRHWiNit/tnfL2\nXwcWyakJEmjX2q3CRzAAIhLE+arKgdxBopp2TnUCs67xcCgxIcgN77mQG7GX\n4rE80sIw1sxukm2IWtkLEkfb7U5uST6XdkEb5nf8krDKeT07U7IC85ZruJcB\nSPC1\r\n=no2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/list":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/menu-surface":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8135cc085.0_1588794965769_0.8840349344438485","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/menu","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a5bd30605f18e35455d60408f77815b8491bc7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.deb212de4.0.tgz","fileCount":37,"integrity":"sha512-4zhbso5vDZ8n0BjSiC8YUl2V6SKQVojXIb1NHLNMC6UhUbpnwUYEo8qJNH2LnZI5pJRRpT4VpgqibFg7MxPytA==","signatures":[{"sig":"MEYCIQDNeeO0iWXA92SqhVLnZnuw1f05ultjv9aWaS+V0D76ggIhAJYXqUtBaHXPJYZ/SXdx3SDCvUprc77bHwRmUjg3KGzv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszf9CRA9TVsSAnZWagAAstYP/1oQ94863GPf59JpEnP1\nqledY919HssRgp3xH9aDqOeiO2/RgC9nSNI8UiaW1uG5cpzdVYuCERfpp1XF\nUvL530kussKYkebxeKX/bUuXKvwkP4hUDZlLSiHfD02MTOzdkNOwHsS0wd8S\nBlwaSbiclWzWU24paKfrdeChbnrqdHwyBgzJi2WRtsCpla3+FbnvVxbiIhIf\n0dHblmXr+B9PiJOLS9QgrInZxhgcVLwlFNoOMRWiJuR+hDRQRmg4V+SvGBxj\nnS6e7U8xpwuq/Trm6UKwmexYJ0vGNYfpplVO2tXeS1tIOD32nt97yAD6c3jd\nMFPA39HLk84ohNZup03a9lRml1NvJwGfBSKzJqk9/62gT2oHEPbxabVvGvGl\nq/P3/apHzcDqJ1ZQHGFbSKVLXAJwwbLNm6NIcbS00ASVUdSqhz0aSfMTADB1\nnuyJnL53ge+o8j9czjjZK6EvN1zjhGFfpoxTFWQMmcJazovBKJxohrgXY7lK\n0DK5TEPa/0HLp4b7a3yegK1bkAiK6lPEiOfYhXHGgXryRZHAxPDIiyZUtu+x\nB04cOj60t/I41g8tk2R9ziDFdBqmzgWvj3Sh7mYSkYp73hxMMPFa/yzCTich\nJ7SxKrcAJE20XncbyjOe7DHYP3KEZ4OVQ05kOmhAI3ldtZJT5SOwwqaaVQms\nNFrR\r\n=OPXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/list":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/menu-surface":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.deb212de4.0_1588803580819_0.45154760039205133","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/menu","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dfeee112703053b74cd3d1d83d8c84062f309f1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.f83e00898.0.tgz","fileCount":37,"integrity":"sha512-siZc+u1RXFvX7KDsamhPmV9AebPxwiJftBeqH0wEdyhRa9XT7K/C7taBTNHCUASnE5GAjPjPqnVqvzhHRe7BmA==","signatures":[{"sig":"MEUCICl27z6wEAIGNLFnVMLbaqfYuTLMZaSNJ6Rq6P7uasblAiEAtbOFQmbl2dtuWI9MhQ7vFNayWxHUPRJ9aLmSdFJGr8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxPCRA9TVsSAnZWagAAgKQP/Au2Wxd36biPdQ5y2iOr\nLq1HCzDGf09AyuyNOtslCQYuEKWtKZDrBrsqKfntrnhqaJk4XCF5qAjmJ5TS\nI3TDBievXyGuX43NKLTC1iB6AZrbAVFKoksCyev7YSnmM7yZUnE1/PBXaEH0\nGpbyCFkoyotEPbLtYE2+OEV7ZEK0QlLmnDD0sjQxTSU0o5eNOk0NZAG5S/RR\nwbzqkMYNMOWAGuZv+WHxEG/SoG8OLZwfZSZe4qdN4c22lMOdiqwUN7U6wuA9\nswS5sk/oZ0tJYEwr0QFJHfHTKGonKdDJIl0G3LnJTYV3WSZp3A4W+28ZeB/i\nI94QlfwKf6YW1QZ/ql4Bp04hQ7wVe/rmRFIXQ/hcMIAWEmiVshr2tt9zMmx4\ncJQRvOd+CvAuXYZ1XbG3YkOgh7okLFRtcDlV7RxI8FUO4o9pm/DIELlwc0Io\n8GedshzZDHIod8NOlnU1PWPB8ewhpP/MsUE+YPEjV/k4BiItExGngYc30htF\ndx0dRwruBduVeVCR9mq9MaAmeMKM2jPUT9DdEEYHAnlkaTnGddxnXmT/Ut5S\nHxvO18KC9XrF5PArHZ36+0vHMVTmZKXnfWce3Vf7pGW327DMJlP3qwwjIgcK\njhO0WaaflVWslfpZczu6pS1vSTaECn884AXPKaMTnG7/3yagiUDwoNmRpC7b\n5SmV\r\n=EHhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/list":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/menu-surface":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.f83e00898.0_1588870223507_0.48528164489314407","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/menu","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9fdd5c0eac9cf72f5e8dc44154ad82be4a03bf8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.047e6b337.0.tgz","fileCount":37,"integrity":"sha512-5m1JXj4FirMeGbpqnHgjv5/QzCF4n5lx/eXIDrePOBYs0FO6LtKXcUYQ7t3iVQkzwoBKd2c3avNJK9QZzboc9A==","signatures":[{"sig":"MEUCID8dVuYp3r8J3NHCQSPbd/7cfsT2H0ut4ElEAlyluwY2AiEAw2S1Bz8gGvQnwWLU9lA3OkA7CdA1DWnMAsRaeoij5wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadcCRA9TVsSAnZWagAAFDUP/iaKLPiLjrPIUnnTsnjf\nR9CVCDIlPhocrz+GQYIRmQhLDoZQnadwbuNh8BLhx/t6SvBObmgA2uJ0HtdK\nMbuiioidFy2k8kO6PtnHdbM0T1DlA8dpWQoirjg4Q+ujx7tQvP992sohyjNN\nNM0RHPisrZU+AjjYqH6NYaxdxDkOZwnjv+2+RSpCpJFLhzqIpJUbN440aQNn\ny06rP29xySsEZPM7Wh86r5luCzoMffHcxZo1+m7eB92ztEpVQZ4HmQ/RAwyT\nYobGETu0j3ztZHvl0Pp3l5s++JKw88/wIoDiBuLR/aFAqwntZ0PIBSlaYfxx\nVp4vPPrVjypULjVQA+Qqnk6vVvmXnjWP3vCweqG2WoOGnL+eMHJqI+TPpx/V\nqR4yVKMe5CHULWSUDiGiiv3/A348Y4kMN1b01Fvtq87vPOIKSPdargJcmqY4\nKd8ejWiPzFJvGUMOg5G/2iXWCgSWTAGl8Y6g0WCQqEU6NBsni0AcWmkZuY3r\nzHZsGY+zhnq/GYLNYM0hrIbSQ26R1sFMJEmpeIZ1HKqidUaipuW0oZ4A/G1o\nHYO0xuMQOdRWY7PADEbTYPthSt8e+ySpc2d33D4fOnZVqTDAG7xsvLmxGhfc\n4uVO3pUDKBliQlgY8zkgcIHRJWITpL7yrJqBWlgSeiHH2O+W03RlU64nXNU5\nt/A2\r\n=3dV0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/list":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/menu-surface":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.047e6b337.0_1588963163619_0.3618438583559045","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/menu","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"727d47a069749c56a4a2ad474ce5f047427b667c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.119e21426.0.tgz","fileCount":37,"integrity":"sha512-9fCO7v4hrQ+I1hrqlUa5mHMwctESqDs3e1zNtV+OR2jkLmoyuGuQcXLZoE/qRIbB97S9t8k9k0/HBKoBK81flQ==","signatures":[{"sig":"MEQCIEcfKlqXgLPh3kYmIq2ilMiIRQ5xkftmGEpeGaRBpqDVAiBmDKN4d9yY9bmoGPvuuGn0cZK7KIx9V6obx7lLQRA+kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb/CCRA9TVsSAnZWagAAFG4QAIB832rl12s0pSW+mSJ8\nPj767ayg1cgR8MlKLnUco/cth/AYOO4ij5YS4/dpLqFZQcK8OBfiFtzukokU\nZwMBzyiVRe0uOE2bUxY+ORhG33lz6R3YmlVi/z9fQWjVYyai8CjVFhhjUtuC\n/L0Fere0BI7LGx0KyZfreD8ylvTQtXadQe4kAh5v4hoEbZLx6t9NrK5aLdO+\nMYo9bO6D3ZWxLYW32f6brnS4XuRfvIdLGUO5Oor6RwTe2hL23ZumBrFwSHlo\nqHvrhFbfHt+8PwNGbB8L+BFVU9UwxD3IR0s9qSSLxm/84Lys4vAzXthBK8/7\no8V7tCVeZl9wX+wk+WqL0wKaIF2pB94QNGpcWCBmkU5t4c7Dzm/nK8UY7BRY\nl+ZsTa/WgJS/LUr++qwK9TP1krh5UbuIYJ+D9UX2k0z5jkxnZlIMrtCMTa3W\n1CNV0dZMylvNSRs4BUdSV1Lp1sp8Yoc1IdCR8zoKQvb+ibfJyvqPSiWuxAK2\nmwI/GGmhPDqZ1DClwNAYUk9P8fxOU2b7xTt0qR4VLSCT3lzbHLvhwatFLU9d\nghDPpdifoADAWhtfQ4iEE+0GxWnq3IdfFXqi1ph6ZCTligaGx0J9R7apHLBt\neJqqXTmOs0iICpe7l29SmABMWu8zfpfAOBaFAo5fnB/KDo70OGdCOPqXoB1l\nNieM\r\n=ucVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/list":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/menu-surface":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.119e21426.0_1588969410138_0.9361109507360397","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/menu","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"376bc979e06bef7db19b31a66eb77e2f4b5f8729","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2f052d824.0.tgz","fileCount":37,"integrity":"sha512-Iym/YzzMHZdxKaSJ8Mt0EKfkv75Q3Ovt+sw8cHkF6C3dQVhfoHlz42q/6tfvku2caCYY9vol51cr7AsSNPGlFw==","signatures":[{"sig":"MEUCIFodpwhyk7y1Iza7ucD7VZCbBQ8wThmNjycyOlSiB292AiEAhWdhtOZz/CWFWQcHpvFvbOlnWa03BMhlGlN88piO6L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpMCRA9TVsSAnZWagAAHSAP/jkcYJtLYx+PxakJoupc\n0coKAcGwSLetrnBTW1CNna1ay8Dj9ZIZL43Orz5LIgkRAqJwUxDTI5mT9i46\n7tiO/bVbzYn5kMPBtll0aJoltusHnP0AaCZN8gtKeaURByPRuF6wjmc9Db1C\n3Fls8/Rv4p5WIb/UtfyQGeZ486deFRQrUOpKRlUr+HiedUcg4nt+j8ezwe5K\nUD1rk6rb1MRr6v9WStB43sKJno2krIAE+FtzJcqHsOoNzh7d3Wlb3SkDyFIR\nRkx0MqGb4EwZGJ2Jj3jixaa21RlgEADeigKunJzQOlMHwhAnH9cz174wfAOD\n7Nb8XUJNADAivqr/+EHSma5/QdepdHTDfRCZZtEr0AltaBm29FD7Lp1VfoNR\neNq1KwhDEqnS/xIjZUQmNsm2QeYZHNEaF/AoGIehl6c1kb/6nevuIEAAyXXO\nML9h10skDq87eSDE6V9wRzRYWjpqtkw5U7GYAnldpWeuiO/DpL1VDUn2/VqL\nMIvd9Rs+1/bkOIN3SzDxvBP1kPtrIKq5m6zzNIcxaQ7tARAlJajs4W1k+die\nB49Cb9nPip9P/v6uJr3y4Dbsl0ig+Rp+kCPd65jVB8swR14IDEj7a7Vg1C2m\n+wHHbnn1Fis5Otrj6mjJTGvIfyjOP+5soIAmQ1qffPA8j4n0hdNcgtMANvfs\nIqyC\r\n=NmtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/list":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/menu-surface":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2f052d824.0_1588972108158_0.8552512115347815","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/menu","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92a65aa33cf668472647e9f0e1087b9c864a7892","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.e84444387.0.tgz","fileCount":37,"integrity":"sha512-mkYieWUdgHRSXmzVVvxqegwkizJHOdZHBjEryJPbw4zHO1kZMpCfD/7jesMcsW9gmK0TkkGgA2qekdCXolwjww==","signatures":[{"sig":"MEYCIQCY2O2/cx7ZnnQ05ezl7DoqLm8uce3QKl1kwz9SORmq/AIhAL0YCT4Gu1dJanx/H/vKqB/uG7W7P86KYhJ6IxetEel6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/yCRA9TVsSAnZWagAAj7IP+wcDHuI9p24wQfbDVgjJ\n6L/nUbRI0CNJXAcg7K455NBHmnaFWGbvVzWSLt+40lwbrHFhiVLnAVOozAkL\npJnplu9Q8N/1p2xd8zGLf43SWZgf4UWBtGr5VwBI+A3nK7L2UXlUlM5myXKN\nUalQMd1Ud+fxuJlYi2jdNYIKsqqp801/83FJko6YBoDZ1hghUOXOMf9rAcbY\n3hmIymA2M9QOOvmg792SMrEusnKoZ4KOxNwVEaCFttavtTT5/17o1ND8oeUz\nJZLQedIAzlI+w3ieMD4CleGpVeTmb21xLl4x7w6B1P+nrRI9Ilo5MSKts9Fk\nLDID7OFAPEa/IB+KnRWL0Fg3Pv6svWSl4O79ZlsjR6vSuike3VEaj0+oKvVu\nPdQDMqUqdWXaFRs1/AMWJZbTtx99kz9HQTRb5aMrsp1gebdMClCM2re0EqgS\nVuEMMqNbo3/sUStfC0zWpQ6T4USP2CUgJOMktV3KJUNsIkcqunQ+koDAhme8\naq8jztBqJ/YiO/MEjYkxmT+MPDcr2dNLKRs1hL7xYi3VAeraBbpRr1vZ1/2i\nmttdoKiYdcxNvwdf05ZgZotJRm909BlmYuCrgpNkN9fjXiT8txtWhJJDLqsL\nKKjAi7W9y+srat7eQdErKhCBYmqfl2/77wxyDarZdzpK2Dui2uxeykwRfRFa\ngbf8\r\n=Bjuh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/list":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/menu-surface":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.e84444387.0_1588973553684_0.636553125602545","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/menu","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e1ce5efddcd76bff16a83c1809a01e9811c912b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.893eb1876.0.tgz","fileCount":37,"integrity":"sha512-3QTrt/Zd6ygcQy7v2IVVRc+wa+sLiGNh7WKjvYEKmPk0zAZc9xxmxuys5hAvTP2xCOX809AW21dP4BINfxeuvA==","signatures":[{"sig":"MEQCIAYFZhUsQ3xC9zOM6hsbV+mT7lJDr86zoIOvjPPJ6z6BAiBRTadDoiMf6MtYvcqqhfS3alC/v4+BEFS6i1WUayVRXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV21CRA9TVsSAnZWagAADzYP/jBqQ6wCSaWIAYjOxz1h\nq5GdMpih/584syWQ/otkPE3fWA1orFKZtZLZAfcpCnRwcrfox5W6vK9vWVZH\nIuA5oacg5l86wZ0FM/D2+s2k5MuGgz8eMvaQJifNOL+obSMsqZ2jrb8iLucF\n/m+xfz7/9+FkPqdffcVoJBxT1i/NDeYqlAC3HLzA11afKmFCBR87EpNqj62c\n81ogJCDWDJAr6KUFEwFw/8lIfp8cHcRBesdj/FCLuI9kaTvgu18CJvIu+sVC\nOX1iWmY9/nS3HFG5mz5i450YB0a4av8kz33/ekdJCXEXOIiL/O2npjjs83V9\n6+m5HEM6EP2bK1TFk397yK8FFFsbUFW2G8Tt0x6jiXYzUYvZZWfWsUUrRC6J\nTXpcxYiTljWHvdzjYiflKLRhLgu4ex8sy9SRpBh1W0If9cv87ui4RMM3tlZ9\nJgIIQCMBzpKDvN5CvJNpcxEoy4cHahlrz57IQAdesRGclJxywS2OmjIYNEB7\n10YXbx6Jav03Z2qHVujKiXaIP5E89l8slrEA0ZerUta5q0IE40i13+N10ktb\n5jR2rv4JwQ0QQKmkjKf2mVigXzfR4ULG9hsHIEsuc7NDXccu1ReTP4mzGm1n\nu1ztjq7fY6yCcDRByQe6EhZRfRrlNovyTgzycuomkCgWssoAhHhOwJMmRlxV\nLCgj\r\n=+Sho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/list":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/menu-surface":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.893eb1876.0_1589206452659_0.8710249905594467","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/menu","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2fabb70956bf9787854feadeedbc0356fead2f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a5aeb3001.0.tgz","fileCount":37,"integrity":"sha512-oAmEKu5MPRKhCq1GuR3e88vb0RUP+DyKeC3B5z9HQfVWPHm9iTFqDfVRsFs3RtCBk1etDgW0NLdNF7bQP8f5xw==","signatures":[{"sig":"MEQCIA4H41vLeCgQ3PZxBPvsZXP2RMPrO5Yn/wn1IQNbJp86AiBkdRdyUd6EB+Oi7N+OFnXjsxYlJvcdYB1onEKVIwkgYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWGBCRA9TVsSAnZWagAAi6MQAIAD/62OrsJtxsslk71S\nUI59F/aKCQE7l5r3pFFTRp4B1HNVyXk8qcuq35uzrY3td4OSd/zcHT95NIM/\nSfXOHFEuuj107YiGbAN0Id6LtcDgj6v97KrkhQtxmxUL/JODvXh8EIEIBFeh\nkNhJK5KvMMAh8Im1MxOu0d5xVfxsT6wXGIvF63v+O2AERvmTsMPk+csta/lM\nLlaFaM1IAmUpZQIdlDyzeY7p8ad2w4DNbXgrH19yKsPRo/aVRq61ivBfhIBM\nIQOACNqx2yRGnsMGoz+hLapZWvOYIelumHrjih26Z3OXFeU6oeQ8RGNGvYdr\no9ncxRHHr+KO9cRHzwgRy0H6eMwUm0/VY4Xr0hk9sBR1P/3Lq76nTL//Bpdr\nxXoK3YypN0wbLX9m0d+ELFVTvMpMDK7vuIbSieg6RmmlufTDDWhooOM/Yh2E\n7cLjcMn490oMoIV8+zvUX3LSeBJ6kcqZYG3YQHRmJ44fj9k7jQ9rOQuc8gtc\nr1ZxgqHsz2mEkwuRaQH6M3vxeBMjI8FY1F/WY7Umlmnj35NLq4EHAdf9f9KY\nx9TeIpVvl3UfCrnl0MSfg37To5m1FGP0QkzGphcn3P8WopWWXo94/2ww2y/x\ncJR7qcxYiMBmtzDhydHMha7FIePZyYQb/OFC2noP7o5KrImfgXPHCxqnTHfc\n3gmO\r\n=paiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/list":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/menu-surface":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a5aeb3001.0_1589207424576_0.24484498664362087","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/menu","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa2bbc5fc9c6f4a2aeaa70a997cb26c5e71e1e2e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.610c68d97.0.tgz","fileCount":37,"integrity":"sha512-hbW6HYGWa9IpOGjlQbasAVqhAjV5wLL9Brme/4j5SHR52A+C3hUYoO3dZts3uuWaTeIXvIdN36D5/xz4pySAjA==","signatures":[{"sig":"MEUCIF4U5OtWR+IfzB9Vkyi60N3yFnsM2g2KGr6NTv/a7sJ3AiEAzR+x6ws4yUNOrY1WxfJeuBCO3Yg1pjyWFoS1fDCQEkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaiWCRA9TVsSAnZWagAAOGMQAKNJ886h1ILNPUMi5w8X\n9Xr+3VOC7Hhzw/N5TOA6RSKRHUGafUNf/T7G7IHCA+ShIQxVNYAYk+320rrT\nru1F/I+AdDCuQIczQ6oyumRvuYzesk7/QrAQGzeGme1L9tNpwaUlzqNcntfW\n8eHFVWFx1+UteaAeDS+fzergDpdBm+PWTAVLyjhD+cDfcZsvhTILJv2PxEfE\nRz2gQ1mwFNyptqSR3ZGozONZnGVOyPtZLcxwmUg9Ost8MyjUypKcnZ7+JpLQ\np/eawS9czJjgfhpqYNR3DVGwJkeIrH18XH6sHLfu3ptzRaru+7/3DmPRixSs\nWMrIg2eitBNmiVaoEKUq8THqxN0WasvjMo4P8xlzxz9itMZ6ppVhvCMtGg7t\nl8HB5RGYZQ9veA6k88mm/i5briBhbfxrncuyol2DNka2o5XEOcRtjBudYFFz\nEf3nfEDWt36MWuS2kHlAaFxOjKdobUqxVk41RszInAAS+4fz8hcS61bcSX7c\ncxkeJxPcS35tT0Dga+HWLEUNR37hcOqAE7S+eurAwoCJkGCc2igwBfvU+oIM\nceXraKzgHpQmJqDjtO8ehINijftjKZ8Xuy1M6W27ddU1LY91hsg3HUxP9Kqc\nUZvt9irLIEPioaaXCQbPLzHIwmc9QII7Ixs0p959m/ikgsfmI1vqaWkF34KH\nuR79\r\n=CO8s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/list":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/menu-surface":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.610c68d97.0_1589225622087_0.8778492610394195","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/menu","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a327ed223d276d7b6bb9b522fb7506ef75e87af6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ed52af767.0.tgz","fileCount":37,"integrity":"sha512-Q42v/VKmsLcRpBhfptlQva9/T1lsbQw2OILKFoIe3hh+WVvbSBpUuBLK7t5Z16GOyMRLRnwtE7j/ej1hngfqmw==","signatures":[{"sig":"MEQCIBjWkdEtkYnsV8zefS1R2rPSComOQIx7rAS9E536tUoEAiBgTwdF4/WZEJf1dOSq7GstW7pBuIhX5Y0Z1j36o2bR3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVeCRA9TVsSAnZWagAARUYP/2VkgZhxS/1LI8Kww9ON\nz5tpWwVTlYlNCz/ewe93LAakz+XgJBEYi4gZYhJyoQdfO05E8vCjjF1D1+6I\nkevA9TvbQjBLnDyxw/QEmYWlvHmvD1jVSNXDAJdH2h9duVrtvr6dvW2T/KUq\nQz8iPXjXcooKdBieWyUZ67IIkj6j7muPbiuqnVQSswB/x5TiKCofdl2wxb/H\nA4gEFYWrgyAKbsNg1lhWRop3oxjmRsqOzWhUnW1j1Efo0rnSOmI0Vjd65DRS\nPPGvhdfWIOAa7Mj3dLkR+x2Fm1oSrHuR1f0JxL6LjReoTd7qSHk8YktGqmbE\n125DjCbRzvVYRcI7BV2xQbSnKDO1+ghQpJXlIuG647kkyAwKjHFCdL+UYoN9\nvwcPteUW4fXqqjEJ5seJlOOwSbsJ4aQP8zoUFTynd0P5AeA++4EdIvUeZNeV\n7CNwidx4JlhiYLTBGPiA4iubFO6lgaxJCu/S5LcobbRkUWkHG10g0ChMWljL\nHxpi17mps72W/IrP1o0lBSrv6Gnv9rZTKbgV2jg/MbYdVWzkQM69yOKdaXi3\n8DsdY8QsvQqhuk4u0cJuSZnH7OQJZ/mMl986ar5RyYL1aEV2MKFjCyRhY9EX\nxqjbIgookXIg75ucm1MKoIwAIwoq4kotfde3ZR8bwtqjdcOgPoPveVVFHeYi\nETIA\r\n=4PP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/list":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/menu-surface":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ed52af767.0_1589228894523_0.7601122171311405","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/menu","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2967f74a7c53015b6baae5f64af8aa7b7570644","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.058cfd23c.0.tgz","fileCount":37,"integrity":"sha512-K15L2gMfleG2U+XwRgI8CfXIVj5xeb73/E8+3K0gejVCQOaMSjOKTfG9oIRmrIVY11xyZKnEqyC69zrY08Wb1A==","signatures":[{"sig":"MEUCIQDFMmkjPLQgULsOcO5I60XwNmU//esWIU/PO6tlTrLnXwIgYswkMGLxQifLgdyvd5nHb5L3/q0ACTvGlb8fUHKmNuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLtCRA9TVsSAnZWagAAJxUP/iLPB3k/n4lZqWqckIoL\nCtpd39f7XBpykgiwmBsbu9C4EulzlgxIYxDCN0a7ggJR43NcPU9RhwVaAX7X\nLRhj9yBHIpbmT5Oaih9EJZs02SVH1e66LfzeFuwIWms1iRzGqIGzMDiE6zwK\ntC3gxsySAh/sWXeZVM+KeF3/AK9+IIMTNs6fd2UzYM707N7TB6cuPrweaKAr\nHxF5ezHdSPbWqdA/J/LB75aCf2WKjiehgMTertqQYUSHA77aj6hxLSRBhd5F\nuCx69aZIpy6wGf+8S4boCw+X8fKOkXAQLiCSwc3J4idUwHibwGGfErsgejnd\n0i9wlhz4+tSyFUx+87iATiWF1U7tXn+9mbO/4RV5KMmxEGx8FMCexA/jLKLP\nPTQkDfTp3MvHUdYpQBvSpYIJgY5LixCDvpb78ASADdAS6MrqqzmFUddr69EI\nQLdBzKyAM5kAk3gPTMjYju89dGpXBKaUCwTxpvl4bkpbTLWv7qLISJVojirh\nBsDzeTE+XIkWuWErW0HRBVkeG15g8fs2+XHugdUZZnVhrP9oXWlkIilxUvju\nVvjOhygBm4dgjKtWmHDklR10t4rzJ1FTSKryfhbhIOixl4MbpwJ0fMLN9O7I\nj56AyexlTsx25IOrOcHceLKeZ6iZRn5znKrMEngibRGoi7UA+fHw0s6jKZgR\nlOj5\r\n=tvvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/list":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/menu-surface":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.058cfd23c.0_1589232365362_0.5520830675971544","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/menu","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f571853f18c43e4bfa2152a057fd84c26b4431","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.0a371b4fe.0.tgz","fileCount":37,"integrity":"sha512-A0+/wsF0CvhH07OVnQqaqS3l05uvPX7ZhXoGm6y7hsEk0UYez7IkeM3mK4j2t0SZu3qYE8DIZ4Xj/rUTqAjjhw==","signatures":[{"sig":"MEQCIF/dOasUhEaGf2T47hy3HBVPh+ayYyzln7MyOvAWJ45jAiAopuYeh9bkU64X0Ur3BOJgnPpp0Kwen8oHo5K3Qo6fLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy75CRA9TVsSAnZWagAA8doP/0peDvXVFLWKVp15w5TC\nVH+ITMC0R37NGg4loHgGRjM+mbjLdWdJN2WYXORm6XQW047eetn+pQ6fu4f9\n2lDduYCtRXm4JQTMUR7/skw3a6/sJ7P623eF3noTgnDzbLXxIo1lEiX3T9kC\nFqTi55jzFilmVq3Wkruo2V4gNCeTSF9LLBr0CshMkUDrww5KNzT8CObHqmCF\nM1y2fbQ+Ps0SeAeSySwrmiEdAr3g8vWayZQGcsNCVlohn8M9caugjTurcxO/\nIGs67UTq/Z/6YLATsi7NYTXNejjxlhFMxgqKEvOIPCS1onlsLzQphO8L84iK\nN4h+OGbHnlCnQJGyZLp6K9DRX3GsUT3IPEaoGFjQ+ePrr0ew2GX1xE+WP50L\ny3jE3mCXX+g5ZNyNvAsJoft/35zJOHIIfImsTT20IWrpeoT5bxOpQgjGGpcM\noSJS5l7uzS2fxxQoPGjM+S3ISlL0I+WEMkJJBG7SBvuRRiwMBLPMd744txKR\nbIEFWae45UkAEhNmBe2W5+lV2d3aZ2hyXHpRqwQmKMCEZP3ZbpNNtaqxmSuS\nRwF6OvTjDoGRFPhY4o2HDHjiq17aQTtPUbZ6C0ZdCgOk1o/vvK/XeWhF0aXh\nZOKgCVthQDsu9IOc1rsGy/uG5J3rP9jLiIjaDY7JGbLtMjp9ETb19J4fIQ3y\nD325\r\n=fvX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/list":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/menu-surface":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.0a371b4fe.0_1589325561000_0.03223876294714412","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/menu","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff697fb9b30136ae806db45689453345a338975","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2139200b3.0.tgz","fileCount":37,"integrity":"sha512-uoEAiKvaEiOqZb3fLA4smXJMLesKSzbdfmJzhQzHGWnxiUP9c2J28tbjVNRqTyvXXbg2XH1JdbkJ+rmLRktSmA==","signatures":[{"sig":"MEUCIFl1rbte4OkBfxtL18pQ8pILL8g53F1Haxy9vBX34wrhAiEAjCuUkugJ9vbLvM6oR5wSeNSx11m1rN87Xcf9HXTPQaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAi3CRA9TVsSAnZWagAAKXIP/ie9Q5os4viByO7+mC6z\noP+Tb9AFgzuQwrdNmDZrysOyuodZOsa4dDC/G48wkwrVQmvQTW5EgKcXkB3x\npDpM1/Rk/Fwk+w/cgNbZuKJXZQNJ+e/6piM3blAkgtvK3so4DdIqw+aHGk6B\nc/KPlFxupKouGVTwODU/EKwc8GTbMSfhF4s02TUASUxo+3gh/mCWgsr+eJ/S\n4GlFRXrS8HNixzISwkZvTeASdGD3jhY1VPaE96MwSE5ziB12syBjLJfirmbt\nHx+dIud9o3BkRovGU3nrMM5Op3dEpO0wa8VRXbEUs1+l5EXPE8qDLtsSOPmC\nR4qSp9vJtUlPAWACm3SBgFq2t3sF2+JvUCFwmTYHALXMp2fB9qE16X5eOTHI\n/y8QvGHhCSROrR8rhVfeJ+onjksjTaxx2389fnRmjlsoz7YI9GpeeBH3ioSJ\n8NFTlNnFK1gqd3Xt+9QGQ9Y0nMMbZsQQO11LvDLdIyLNBT04Dk8ryh9Ft0aq\n2YMqAmKYVyYzqsOQZjt+LKjrMKsIndVFLG3c4v3oaWEp2rnOWDJOgiCZ+qY7\noyO0XzWQ4CtgHX29hymYHvBBW/MmHDfNyoCi4QyBjtDcV5/ggZEjskZICKur\nvPjSKld9QfzNl1NLgKE95PxUWIp8NeVVfjAb1G1C27nfsyNtpDDe5nK+kd69\nvVnC\r\n=9kCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/list":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/menu-surface":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2139200b3.0_1589381303134_0.7382470759870841","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/menu","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b8e575ad3ec5cdd3d91afcd628e461db03ad43","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.744d751a0.0.tgz","fileCount":37,"integrity":"sha512-VHL9RsFYrd2R0ZuOFt2TwbeJzRN/fMvQfrn8o+ZLux7zlRjeYlraUexUebdjbsltdZa0jcnksxp03f4dL9gOLg==","signatures":[{"sig":"MEQCIHPXq9UeL58bxkDbLfqcf6AtEp4PmDOrH9pLNZ6ZqPBbAiBv/u8/Zbv3/487wYBqjOs6pFkWur3Tx3uAEUa3p0W6eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMyDCRA9TVsSAnZWagAAILwP/3GmwAtCUDUS7hHeQWny\nOBtkZYuHEcNgrwgCYwiqkSge2HjsnSO1oocAdSYncCKBjZxiwfCls3QH0F7w\nGjEQJbLInmNBtet1FNC9tpK25hF1DuQaIBxTaNgd9F8Dfaec1i8ZriTJIY3Z\nFN5QgeS99SHkRd+yXEczefQEdCbiGiccFqEruC4sgqOerhlrv72b3XC/RU+S\n6aaT2BxklFYzrbkHm2iYUr+fpXF+l63/ulfR43+z7PmCokPNhFiWWFLdrtEV\nsHjKNDzzNyVlcQZpeDbMa7Qqe3OIne10hz58P9F6O3futLvecfHKxf2JlXF+\nXvtRClY2odx1KmsdmoPBBq8iiWxQVsKXW3JNQLE30WwFuigvtsIU0fHtWYoN\nezenRm9a8pp/Vlf3jDjC/7qewawr7daQDyK9C0amOZOI+EZLFMxAamLNg10+\nY56AByUZMzHAAwqFdObHsW3Psavd2w2nYj6Vs+pHUeiWxpwOcM6FKGPtPRrg\nP6OpHqg3ghb2I4+wODEoe4cq6ADdS2xzhCNxXwrl2g+gfZ9NPhs/HlY0XMc4\n/B4XStINhU0NlyTzlRG99TVDanBT8ouCpHa+HeZdnS83nl3U+qP3/L9spVO7\nKUese2HaRtOddx2+vWRUHj+U0h9p7ZNDLnEaUHsEMtjED+d8DSN0XfFSvZoh\nOunJ\r\n=DnUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/list":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/menu-surface":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.744d751a0.0_1589431427181_0.08431022408794675","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/menu","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c595f76531ea3000fb7324c2b3d91549d1cdb47","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ad0c0c103.0.tgz","fileCount":37,"integrity":"sha512-Mi8YpQ09nU6LUlVEToxnRmiXHUHQCb1aGKMwm2zAtADSRCPILViUjApT4+8VHND3PcPpje1MlBgApygYLKqPjw==","signatures":[{"sig":"MEYCIQC365UAyib2QwaToOJ7LCY8iq+B9BxN9bcGor26ZP02AgIhAI3P0BVb45134/pfUew91Rh4j6cOZjHToU8ymRSZLirw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVs9CRA9TVsSAnZWagAAFQkP/2Mg/tBiDOguhqgOa/G1\nVxDZ5apeCkUnZo55rF5v5UNT1/oH2QWKiCLHsubOyhe8XfD1KShlcRxvWNMS\nmK+dDPcxmtEY0WRXa+4cWz+RBiwSkxemN6fz0nLoZalygEtUqPgGbpNsu5dg\n0+UgxMveIsRIBbEYEHoaVBEkOjy5lVipj+yonrUFn0+u6jYtMnwItf2sZxRi\nhXEeUOfHjhd/89cgfAbbuNOx33p1U1CaWyAYvVSCgXPmM9fSGPfG5d4uaBvg\neNYwLeCXVSK7ZGGiI+29prT4SdZiJzT8zN6w1yRZucqrp2f+EIxxj9zQF5Ga\nSPfWBNgyIx2PS6p3YaZLHqqG3oIXzMzei2TpsGXnozJgjpDeYdqVRMyeA9oK\n+uye2s0LgtPb7xB0w+1AQxLtZrKuYPvvyidYkbnarisAZyJYqQF7VqFUxNUf\nc60jkajekhi9jVeIHFud9GtyIR4VTXIsPLdMxwKrezLF2Uv9xK8AOntXx9Sk\nf+As5BlN8jUfX0fBns+N1lLIO50DyN749fGFxx3vR9MTgx63DzQ3BrOt1e7/\nH5aCWNGtNyc/V1ccoMnF8MOR33k2ZopuaNW/kIpAuU1C79t+n4FpXVQNeb2l\nPqcVpptrNGfYxOYOXuy5C09c/+/n8aC1iakiKSHRuUb88KHKubpgVSJeaBXT\nHdmW\r\n=Lk2g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/list":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/menu-surface":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ad0c0c103.0_1589467964939_0.7937836587865861","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/menu","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46040d9092da062297f9702dc2d4ca71ffddaa28","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":37,"integrity":"sha512-qNlPZI74XsUHNT23Da4vRbcm//rLiqjCtSGGF0ZNMR+C87iM/C4FMppSxJumh0+/Z7fuPB1Aa8l4z16YmZZ2hA==","signatures":[{"sig":"MEUCIQCIO8nXGk7nkdcfAMMRUd9PTtZfMLu6p0moSbM75aNjDwIgOBzBiQ8FnllGtcvAiNWD0uA4jy7lHoMieQCbEBiu4YM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvfCRA9TVsSAnZWagAANccP+gJBfxWQnVUNpiarnFvU\ng3eI5NMTK5AJgA76gahThDV3CN8FaCECvD1B/WJy6itjCH/AYxhjKhLEf6wK\nnAzeY6Ya438dKuiQ1yOnHiH3OvNeNH7jnxFhtNNF+T6Z9pIonCQfhYYIyBLB\nMdV/xbh45GBZpV0JV+gsmA0TvRqS/xbvNjwZ4XKLNABLQbY+MNwLV+fLNVLJ\n2Bx2a/iGJJZUrhLxWAN8tRhmDP0TqPH8FGtNKStfZFy5qTvJrbmm3QjP1T7y\n5kS7nWU48+Zf24qFCJzWa+LqCWr5oPhvv9UhTFKMSrFfZqmYbZiYEeqgD6cu\n1Ute/oLXZ0bszbp/jOsOvEMRfW9s7y+MBAJd1pyin5BV3K1k5cJdaZwMVIDE\np14h7CuzjtnZYL3CcaAJT2e0R8AXKm2KbDsO8z10kyamsxvUcR3vjmVqz+YY\nCrkvw+62gEDrNXV6d4S5VAZJMQ7veXndRjS86lPZjt0sAEG77VaopcaRTaNX\neeOa8m2Wfo+rygwPTR2hHu+ga03mQs+c6mYRSjtDXOcEGvET1cszxVmcbosb\n51dslYQivmmEHPrTbgsl77NhkhqCTSphWTcbEHtCjPjxz6IlNoN74gyD+mv6\nmG6BYUqj/ocPsHuNBp0impAQuwngTtBiYRN4eS6rWrVInRZ8OmrjTUwQ5jQh\ng1Wr\r\n=nZVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/list":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/menu-surface":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.fd8f8f2b7.0_1589824479148_0.7049775386198036","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/menu","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ffecfe17eaa89dfddd06bcaaa6fcd9f08689b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.730920fbb.0.tgz","fileCount":37,"integrity":"sha512-HKsRq7IHFjOIiYsj2XE6euXEHbqIa79xFsakgOdYq6++ybOO4665BDjmfOCNtGqftrJ/vlkbkB4eKGLXEriNxA==","signatures":[{"sig":"MEUCIQCmA9gJShss0teuQ60oIOBBwrC0UmChliU8vkToRR/TAAIgbM2/1SzQ7Ytxhzd8jXBUiFixKGSnPkEfJRhalMGi3Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuXTCRA9TVsSAnZWagAAuREQAKCrfQHYwIpgPXKSAUIZ\n+qX4DAQK+RJF7FJuoKsEggB9/qSPFN7243yaNcUm43tGWWQh3WlAWQ2tI/hT\nwDZ0SLG8T/nTn1/dgWnZwgfGHRWEiJO6lCqlzLaVL6j2XupeyrbT+50hFBeb\nspcWnbfLknUzbVTLA42tV3nQ2HlPH/ieYFDRodnfYzd7IeufGSQwulDAaMJu\nX8+Hd/vz9YZDVGKORqY/EgIe3LJ7FrMYjffLABiKlnhTPdPm3PHQwEJ1PyVH\n0Av+pXpGgTT/3RYJegcEINudVflQ3g7zrcQI69S3tfAN4NehrVAFIs5xBCL+\n609CCjs4OQRjbVaqwMZGHGW7iAMp31nuTLzfx8dyXxYkzgaTr+d1/SoFeWCk\nrtdD8Xk/MhHH/azU7lHVZMBEdGk+CAtVn/jiwpG8vtUzDNUFfPlv+NlsZGd5\nVig8U5v3xRcVB+d5t/7rFOiqhHFFwD3YgmKOV7kAoHM7MwucvhyB3BaDUDkS\nf14gEVAUt7pVLRhLqrdoG4Q4R+3I0noVOkzokjIZGFUWBPThLZZcSwD6AvKZ\naaDVwx2GasL6lmO8yP7iqBk7E4g2SoQbSmh0EGamE59+DySsLQCHZUgfzXir\n8nOpTn4Qekl1VpRUTbWV8R96jDy+HoOnATwRZfOVe4DbQGgUSH2gwy1Crr4t\naDl/\r\n=F6kx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/list":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/menu-surface":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.730920fbb.0_1589831122969_0.05912185404254533","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/menu","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de5358aeda005b118dbe4f69d6ad4576b306df73","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.bcdad99bb.0.tgz","fileCount":37,"integrity":"sha512-QbmLwxGhpW9TdT6a0bVGanZK32Hsrie83d6FJBAYc9o4UnbWk8lYvgp1ypD+8Sr6AZVU5wg6lHbbLLIkYhbPbQ==","signatures":[{"sig":"MEYCIQC8gNtRMD5MDRACVyNdza07c8HwaBC+4NNeYsAWejxCaQIhAJA9ejfSsW41n7dMHJeizBfEQW/+Zk3BgezAYen6iDt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AmCRA9TVsSAnZWagAAxp4QAI+opLfX3F64N9BNEB9S\nqJSJoOh/BINtUhock+yEnuINJD2hZLBYuFJtlphi/EVSQQC+j3pzk3Kw3uMV\nmRnuPC+YnCBCWrMamDOLZQ88JnvkD1fCT36PYdMWCydsHYhYOSELYPsD53+g\nuFZcDFxpZu20bU+XlrD6lCAfC+r6Ad0Xw8Ojadyl4gdf/sJKgxctdm2E2hsm\njbimWxSGsfoJnhLod3e/6oYQ5j2aw7jNwT/75RrVTLqYF3wcRrCdj5bmUKdL\nTBFwa27Pb8KFYUFa179bkkv2ys5v4G64r7DeDz+DEcAUWlG5JssTXvD3Ggam\nFMCqdODANqDLFCMqub9FRzg5vlnAlCQt82ImSQVxzRKSRVQr8z3ETt/gxOQS\nco70tm9NOweciTxj3Kv3nluvdDAosPzeIb4iED9hmx5qWdsDjzlKLzt/iKbN\nGkLEOoh2mPBRa0ZeO7S7BrHhS3vCh+YsHD3Mq8VpzKqlNX2uMGaIMztwguFz\nru5K6NPUn3qVUEWWTDjX4DtdE181m89vu+F7gcMOxrUxK/bLFwhWC8xqbAt/\nvWBXYW6djjjMxB1F3BxCmyPhOvfnTgbKcp5nbzfkS+vFaUC0VziBBcCY7I5t\nH+VCB2rXgIyITubF0tCVT5VJz8YWa8l+dnToDkkxqMNH8RABC+7QGjIXGXIv\n0CsR\r\n=fPDF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/list":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/menu-surface":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.bcdad99bb.0_1589858342030_0.9754145718809972","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/menu","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1682c378c9387fce62623f2e1f4752ec1677cb17","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4497b86ed.0.tgz","fileCount":37,"integrity":"sha512-D8CfiQVGDKVfdUAEubhJjAPPPrVfIou20xzj0MmWt5Mw8XBBlRzyC1g53V/b2pyFgJzLXeZSc62Y+HK6BEk97w==","signatures":[{"sig":"MEUCIQDuCMaNNMOpn1VngR+yLX4xiUm1J+FCqVlbUSkL88lVJwIgfclmHCYHttvxmyn+mKnzTfu0L/mWoE1T9HdiEvyZAO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fQCRA9TVsSAnZWagAAgcMP/AwSVAx6heVd4kpKYrd5\nRhkzkIf55v4IiVZHLyZIcOj2cWLiSpqMSRCCG+wSfPooIusPbuBcrPLSmved\nasQ8gDsEJdiyYMRtJnEVVI07hSivR5SFNqcprt1dWDxmj8WFTPSPit1R1JnI\nVLNEAol9CecJc35LTkTGGAbbOZsE5OZcOnxeOrAoaULb/H1osmpbmu8xkxN2\nGkC8IVt+h0gkw8O3AEvfFoFCdtr7+V2ig4RceZe/dRORHcgUuKBIKuGN7e/T\nQZXfOTG6Qetw50+FFY2MJpsmcJ8P9/c0dpOwlvn3Ty3H7mPDfjVl+WnHtYlF\nFagoj3xzsPTlPpyvKdssHabKFauPWKmuk18P/gd8l/YMdsrCghdFDBgi+iMW\n6WrANIYz2jfXtHj+0OnPJ3IpEbUwIrR+SHnift73U0n/1BP5FQcf1TcT8M9g\nRx84vH7odhY6m8G/FX1V8FsuSpdm0yU8Jh66jTg4SmFPOTBeVT62DwAdktqG\n8f2P7Q/OJiz/ZUVvtZiJPmcMBt7zQWjuEZS5O1iu53kLnVr9xteRJREPlNBq\neYO963+Sb9/Jdb5ftalaxj3bo2dAgfEhWS7HEQX/ilMhodOPdS+KDnBbZCOk\nxqgThfkiKEtjVOoNbdkunOZBZE8WrVqrJWCX4cSlbfyTJZqP6ZqMRyk/gljr\nUvNN\r\n=DbQ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/list":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/menu-surface":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4497b86ed.0_1589860303636_0.5415601632503566","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/menu","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d32846a2bac2c9b53a43597ba328f63c0a84922","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2e60575da.0.tgz","fileCount":37,"integrity":"sha512-yRKTemq4NRrlGy/bpZeipamf0IX1WxkECGMsbMZ+PIY8bzw/bCzUL6tHML4b2S5chpR1B/yUrcFDALL1QKt2Xg==","signatures":[{"sig":"MEYCIQDW3Ykm3VVL6tgCAI89taGrU3M5MxvhqoxwXNjBDUVqSQIhAM+wMiMnLImR3tQVJFetBAICZ3P+3XwWL3gXoiTsIjlH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATvCRA9TVsSAnZWagAA7P0QAI3CX8tJEDwO/k/c7mlp\nOyT9tQqwMYi5wThr96TlTYRBf2T+JZdwbs44cVA1pDWOIwqPwhSvL5n/Fb72\nVYegWuadDlabcQ+ZNs8Kg0OASeSORIj0kAs77xoIdHJSeI68fEqpBthwWj87\nSJXa0uj9u5tMnx3Ur9muKbnUb8XMxvpvUm8OVbx7h/BiipjSMPsNDq/++u+n\nAjMkBU5UNTZxwTgfLEgWzp/tDBP/AhPCOaTkO9OZxArMFLGn3VTSX9WR4rW+\nsT7X18n0Fsy3XsDEp0e7gPYWN7yQhnInJPAHRVQ85mra6kv+Eqhxw8OqeNFl\nynamHbXiqzt2t4mltl/nTfYF+Pm8e/2LsAXPd4C8iWthiu7W3545Qv6c9PDb\n6iMTuWNKHkfYMUtSOIqmLfUtK+u48YdAWQBxuvOpqSGc2wxSJQ4hgyLdlHLD\n7a49nGl58UQ4jb1YmnsIyYtc+5brg+szDIGxSnWca001/9FuQ4E9VfAHFkII\nyDBcSP1wq85jV10ZgoFvHBHNytmDOu6Bn/6wNFLU5RgqdfqhZNII/cOZPU0f\n5fJvMbDMHuDMfeZMeqJsy9VSuIRD0Q7f7oK/U7UjZtstAs4NEsz4Iy/ksQ92\ndaqug4qB4IX7gQ500pobDm9I1KAzK9Y1FYl50LUX6VzPy1Im8Z0n8xFUAClS\nMV4l\r\n=Xd9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/list":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/menu-surface":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2e60575da.0_1589904623225_0.7443310684041218","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/menu","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcfbd944e998674ef3974b1e24006c178fda8450","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.e3eacefcc.0.tgz","fileCount":37,"integrity":"sha512-Y5lrPsovCVzehE98LwDK7h2I4J1yKWw+e50Dua1xQnVqmrJa71v/gPwDYi5i4Oskz3jazLjGJu9uLaeY8ryiVw==","signatures":[{"sig":"MEUCIDoGTw3e1Doke6vhbVw4wNdjoZkje18kPUaXq0zhfyRTAiEA1vcuzR+2nzVZUwMHTRIVKaTdvSnNWCBgfRoRnhOeqkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBnDCRA9TVsSAnZWagAA/Q0P/2qklqv5b3Cu3/ptnKXV\n3HLlo6be3BfGFLyncYVd1K9hSQMld8n+9zyqnWayNuxkRpF/xjuTbTyiYLrv\nukRQDcxSkFo7y9fYEwIdAku1RFbHvM4Zxs4ZmN70bNvmSP20G9qYh+k4ANSN\nkgIXpuNH33Lptc89acbrZiuIWCio+P3X1s/XCbtNks/V7BiOpwYmW4JlOsxp\nJEdWr0U5XweQc2JKR8DclNhHBTDJyW0FlqPJxY07oVaU0fHJXrUDB77ynQer\nOaZHpnAytqTWagxIU50uHSDdS4BXgfmcLUUnnxAq2fnxJuFHUWYJECOgZENi\n+sd/IEr04VFSURGgetCw2n0er54eM7tczTlWsEhPpM/mF0jxFLy9U0VoydFP\nCRduIrU9V6q47T963CPHUcoCi/2lD7jY90VIiSCQwb0KXRb3yTOTa4Lf01X9\n7jGHFZVd1rIG8Xv8gMHci5sUZ4hrhI9vXhz1IDRSzLlbM1zJXdhze3h03i7H\n/Ek1CynG9zvkFyumns92BAN4IOFOqgFTbEykL4HBfcJ+aWsMNnjLtlAmdXDg\nwg57SfNdWPgZ+eecOtkJok7kamIk/YdhX7tT8YYeSTa2adX+MN3cQFRpl3eM\nBqDA7wIc9x7YbGYUmKdR/OQC03SXywUQHQeWBMH2Yp1eb4e0WfwEEW038+iW\nddbQ\r\n=YF0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/list":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/menu-surface":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.e3eacefcc.0_1589909954869_0.480209097582758","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/menu","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae467b2aba6cf0de039554422b5291cb125a8bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b065a4d2b.0.tgz","fileCount":37,"integrity":"sha512-BUCm0B6uaoQIoPjy8dX5NCU/a6dfoJOnuLNGOjkoOgsrqZpZgkD/yPmpOhGydgwrrVQ3XLHfUzGu3buh7Yz8VA==","signatures":[{"sig":"MEYCIQCBHaUy7LaIqsEGMWV//QGaiahyo/Lien8Nd/PRK6Zu+wIhANOHpWJ72IghfP9jq+ozMsyCR4n2D/yDajV8RbnduzNJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUDZCRA9TVsSAnZWagAAA7MP/2nHieM0THzBj+koz2F/\nxdTlD49z1ihAEWquBDOlu5pAr3fyl0TZXRf8vOQ1zGgEX3RlLJShGgisuSV7\nWTzfvV6Ph5uk7JmNkHb0wkxXamlDKEmOYmSePpWI6MH0202FCaDm/uw0WAUt\nY1nJJ8775vzjQ3kx3Z1VKBAPg0XnbN2dU8pbXkzvkZQpkio78ZnLtB1g6elo\nUMRdhVkZC8t2DVrklCqGGG7KgM4ZtLPjw6Rvo8EpKc3yijTiErR5aZLdvNpV\niAK3MsQmE44kP3E+LS3wiDwZFYaY90JNB9+8jNR67/Ye3NDQUX3HbK0nBBCI\nTn5s8KAnLwe//gdnMOpdE8xuNd3/4ktHO8FOYB0gQ1gneKZXWli7ekhBbY5l\nwzLnT6ldjahD0Jyeg+8chy2+oSZM0nur0gKr1G13KoJ/5EA17qhUOwNl/EVN\nPOh32F3+LIJ46qXaXEWtZzAF4SuGmojFpgpm8YKOyGWcOdHH9ja9ooP/PMjR\nuUW+z/0gOXXLtNVapB93gWfTxA20kPw4p/3SWCFgDaRxBq12n5QTlyhBWVWX\nVH3RB4oxINCE/hDbRHCpHpggYUiU6WvFAhl0Xrb3yfbfLdrTO/xIfD48vPza\nY7Y/kCwQth6thaUtQ2Qo2EmAUbnL+x/uHKDEbVXjsLJ2Q3Ryz/eiKRhWBHJq\nRfhN\r\n=QaQX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/list":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/menu-surface":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b065a4d2b.0_1589985496509_0.9241431321462301","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/menu","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d43e24beea92ab99c10edeea6e65c4d91366f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4ebce8d78.0.tgz","fileCount":37,"integrity":"sha512-7cF+E3wELp73B221mHe/iTOt7QWrLOAc+N48zJRADsgD2BYGDzJxVH1sK+oZSgXrDnm0FTkv3BM3XoZNVrZHxw==","signatures":[{"sig":"MEYCIQDZ/fg5D3SjhAqzm01mUOy/S0G7+NcDJimihdtf5oxxuQIhAMs9vyDxvFXWj9bXpSPjfE6FNB/+dJasuAo73ARpwxuW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":520978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhWCRA9TVsSAnZWagAA310P+wf+nZu+1tFGFnIYYk7M\nKfh7MG0REB7zdBJGHm9eaowi6Pz4hWb7odsZNsp4iSURfJyA5mj8Eb1nV0TE\nTHV5uhoPvShkW0u6IDG9UQNzaBUp/Lui/E580hXai/aoB4pVviwWXtmqXjT2\nkzogIt3koa91mKF1yQKTGkoqpOUslcO1/Zml3akehR63sSMrdwEBbPIDFQHp\nmV4QlIygMhTYaJEex2qHFbTBNnzpcOzpe7NjHztDZ6sMDvocqGXalF+O7yD4\nTOG+zJEK+XwJKi6CrmlGTeRroxJYQAESRRb/tiX56aBoUqRsHBXVXLRWq0ov\n56DGKJm/A6/0WrEiD835aGzEa9LGQEKjx6HgbbvfX6/fjKMTjn2oUMrKOWOV\nFedPAN4kD5yQbi2j0oBLsmXQPm2dXAWWo9e85CKHUZMRQug8piQ0KiUVzrfw\nrV6i6DmJgsnbBu+t/pjBgME8MLTyEMGFG/K9i2F1Lqs5C0P0wykHGJV3pIAV\nvHwoNiS9U75icil5lDeEoIMbqEedmEfqgpj9hsfQ3icdhUxtCjRev9LVseZv\nl39rGiLe1+mdH0fpApiuaTW17bnEcsQEXTGmUEZlTYg+cUzMJlYZ04f1pUBl\nPj+nR5cP5z+4xbJNHKuQUshcYiUB/rXkjedXTCM1JAN7rR+xXRDPwv3rP+Mf\nJIv9\r\n=kxe1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/list":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/menu-surface":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4ebce8d78.0_1590007894115_0.6584573487002514","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/menu","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe695d2729a5a6fa65cb1d6bb7c03f49dc3fe38","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b0fdca492.0.tgz","fileCount":37,"integrity":"sha512-OjTJuFwg0n7c3dLtOHAAaHI47+zWKjRWedDDage86cT0OEBJxSjKcIxXKoeBGCf3nzE+fdxQOyxd5H6B8IdHSQ==","signatures":[{"sig":"MEUCIQCGgDeCppPOCeSQjfap1ypjdfH+j9oUaXgZv5jwk6vmPgIgODVI1D0l031ck2ZDtImgZNom9Lq1aO5U5q5CYbg7VUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdOCRA9TVsSAnZWagAA8qoP/i+YZPdYjlVjZHsFLiX+\nPx1adG7U44kqxIHm3XTuHVcPFCoSQTlmeivYtm+GHUpHQxIiR8B5WThP7ZaM\noelPbr0AIViV7ZF+LWfG4XC7+h2FEZMy5+qLFfFu+TlPlT/cEQ13d+/InAwd\nHlrn1pK/hAHWaGvAoLJBeCa8XPEmeGbXdj0v4YvxrIqBjWup5sw+Inm0GRNZ\nD9s7nmWECcrtiswMRlkXMLS+SJ7OGS3TfcE0g7SVA4aWhH6SB3AG8+d+4gcw\n24ZRUP1cj/RmtDip1NXY83inI9paNQJii8eIH0PKXKOvN2UwVGubuNn7/JJI\npsROQG8DgScSdgjYKIqaI7nF6vJHGMW9CG6ZXMpEDV5RW507tp3UXRgZ+vmZ\nPWIXrkCVr/kogw9dtD9/OdgAs5qhOjvcRqj5c7LYMt2ydNe3rO0P9TUsexTf\ndaDc9L0WSiowcd31wzfJcItqtzc17+Yx+Jt3DgNCn9c9KeTddYmFYB5cs3w7\no3qcjwfb68zyfhQtpWDE/ISEzQCEj9qcvIXrdJljAsvr1FZXaAqannQbnt/O\n1zZwOIV8NGSEtEi+onj9CmGNFtVUw95xw1lQIEEVzD/2FiRgNrt7IGvzT0JL\nHv5YBPlf+MICIKvaDp73IF+xmEZMGjPjzsCTeNgj0bk0pXr/J2t34HVRErkE\nCsd2\r\n=2Q9S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/list":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/menu-surface":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b0fdca492.0_1590015821988_0.6064452392215787","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/menu","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c078d6b4ee10517a6fedfdae25ede7b4813234e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.c67667e8e.0.tgz","fileCount":37,"integrity":"sha512-1UyOIgt8YkhzvptV93aEL9vAQLHoFKtgc4pPGyvn3kHCbTBn1fyFdkS6Z+xj8VuEyAE886oMptcr+vflP1wDrw==","signatures":[{"sig":"MEUCIQCyrh8SYUl1Wq3+2KkTSCEqb4xiSuC5RrBOM6BNZ99pMAIgXHeDfruk57szyLFDATR0FeUpOtJEog+ZxtDtrp86j98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyaCRA9TVsSAnZWagAAJOQQAIqAI9Z7L+hShzYhuTLB\nBa+hKVdedvIqN+wPSGa9J5RtIlUy9nBRhZ3ZqzSlzq0h8oZRgB3LnmUTjNyS\n8eypx+dTag6cFhbcRWnsBROZA+En2PgoadZzry0oXQ0mRnOl3oHs1tTncTgc\n4XuGnyuGifEIaZ4MTncjjWgYRU9pm2LChfYUfkzPMxIb9q7dJzLtD/doDSFU\njBDfpqOxhkIe0u7G//PgBTftAnQqUclUKnE9Cz2PslNquHEof9OYqVkdvwSm\nbM2sokgKt6QdEBYUmVL5JAPR8f4P9KOyFvGSq3QUPsb9OpoZZPEPJUHnM/2a\n9n9mo/UyV7ND0Km6pCdOhLsS33tVP/RfAWGrhAFlBRjQq4XZDmAAsOKKWTte\nR2hL0dCnBWLQJOL3zAm0MTCOETZWkL8ZECIc4rTaPptqqMI5AZgW6ViCRsjU\nvpLLWviQdJNIBkRgEWql7RShh7FNVrCM0gj6umC5ubE1J5x2VlCYORLeD+rk\nGuF/L1K+kcxWbenKSYdNPnB3893HmwHt+7TyH21jqxHSDR5OIlrXcfdlVoV7\nAgpeCbu2ShywUiB0FfGqf8i0NMHcCZnTH/xE50cXRIWXGAL/5wBe8FNrT6y/\nPk5GlPGZsNeiDpiZ3EaUUGslft/N7ttuKzYOz5oABUr6qV9lVkcnuTCYn7Ff\ngLiF\r\n=AEDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/list":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/menu-surface":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.c67667e8e.0_1590070426548_0.3585616309585691","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/menu","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684dd84c01ccca077899e7bc1ffd343e09d21592","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.62b5f37db.0.tgz","fileCount":37,"integrity":"sha512-v6ChX4R5nfC6L3ES0/mSk+evw2T+7x9lzvn7L8bjD0nJXXdiQYgwOY8pEd1a4aiU3oxu+Pwu6LKM9hBWT7O0+w==","signatures":[{"sig":"MEUCIQCZMwGGoZ+kkOtKb6HcimQLcXEeDl6kfnELqs/5hoyyugIgLVI8Xc3DFUpIgu3VY53JOymKulBe8hDGZvnbvrnrUs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9sCRA9TVsSAnZWagAAHOoQAJeo84N2gHVTdynQ9Ubj\nTEqiEHJD+6Hk1Ez7irGW4hcx+0di8ZZFlvgncqkL4QY9x/d0VtgfafT5G769\nL2lT3NIzbJkPOvxwUHqpR+4EXVZiI3iWAGxfMQmtuU/gu37hICRPTDr4TNfx\nnz3w6L6g4RSabB22IWfOJY1RG0oG+WxcuAG7aqtzF7DLhO6d2P/vj9lRl89Q\nuxEtMrMcyZtABARO3kSrkBt54MWX3L9zqG0RzGnZsBBDRZpWXubiibuvsuFx\ny3ZSKQGx/8NuTo09k3JJ5vV70uRuoXb9/tTcL3Lx/BUBTkUrI0D4Lsp2Fmye\neEMszYi6r6icd7kqPRcT2F/RQ82mq7mjXOqxcdH7RVTRfonce9gnH5I4GkjZ\nsDt/6zpL46uLGxZdGjVwZmXcnaXwuNkmOl1r7le/AndvB8YqPBACfNZlMgeu\naLu53EotkGTh4XmaNY+1XQsoYhPtvIEvnL9p6luNkG7e8phf0SwpPYFM+qa4\nmFsXM5YEM6NOOkIgGL0iQvTAqur8yrn+BOWp9D05FylWSUdDK2ZDA6XI0roO\nVTD3j2dxhlN6JDgB8k2LlpM6nPSTl5O+IwQH9hsV2uKFzgLxOilIhLKR9s5s\n3aKksplYBQpyz+zhOU3VVqZ1OXNHCoWzEhmjUQ6ROmroRdyExGxk3/PNr4ml\nrXh7\r\n=owcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/list":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/menu-surface":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.62b5f37db.0_1590079339630_0.8009259526263803","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/menu","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1494e77442f6dcaac0ad88e98fe867cdd6c55486","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2e218dbf8.0.tgz","fileCount":37,"integrity":"sha512-u6JcsUBjzYnON/3Oo8mpcnFCEp0GjhDQefnbdcidITCgbYFDMcHEfsVmotSpY0K/PYv2nOscgTFWhiwbdSARdw==","signatures":[{"sig":"MEQCIEHuiVKswmR8srEbRjUtFCmfYyPAr50x+FULHwanmJugAiA4VRpdNmlV8ulcQ4KXCeIKk5Qyosb7TUrFYYTO1faFtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrRICRA9TVsSAnZWagAA3VoP/ixScTqIgzyLAfjdk4iy\n5gpssxATyQc3KTH2GIHGTjASmktZObjtvgT9gtfLGgCmn6YoYftJpzkshPRD\nbCrcXimZeALrWVhVjBjGSqnnBMWkCKJL+3bz7ydjPq9LZ+pOT1S/hymk43RA\nX+7+alFuSxXrGGarxNrswDTnsuzll/j38OyBrlGuTkCjWZDfcVfiI1syNE7C\nFkJ2S4eVwehL8NfjyN/YWWVHhUihaWmHI8WTnDONLyhciaXbesba0VM/iRTr\nRpXOeGTIeVJkwJOrn6AecAP6D4FnzsfICu4uLgJ8bWAtCW1CBfSwN/hX/wIN\nOV9E55irmvFhmMexf8YK7dtCJmadj7mMUyQxbRlw8erKi5TStI0erVcQy4js\nmaZiX+wlrN7XzA62aVAyoof5Af/oONsapaGJmv3wI8glUAB/X3PgYm4REulm\nNwW0XP5fp608rHKXp6sOhLxrwIRdK6JUauzmMbElIAUVFFKNGG5M5opM7Ob8\nlaZSzRKaUGkOTgVvl36atXx8X51Ip8FYkpliJnfUOzf3CReOhDgAJ1K1AbJQ\ncwV6rJObaOtEwYkyQIXXdibHLCYenXfDUSJB9G9D8YCd/Oz74hhiRCs68TAv\nWCe+GgtRnNNC4+yOjZBBWAjFkKjg5gkZgVmQiY0NClPzOnGlH8bhOpet+puj\njn5A\r\n=2s5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/list":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/menu-surface":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2e218dbf8.0_1590080583729_0.27287931689755673","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/menu","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"437a58e3540ba79ea69500bb22f975c2a8b436c6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.7fd792bb9.0.tgz","fileCount":37,"integrity":"sha512-IebV920UGZ0eUyMbcFk6TRBvlcwxHofYvumy3agfHLLvalHlCoBH1onkj8oUGg+Dq985GoMKs1uyEiRZonByXg==","signatures":[{"sig":"MEUCIFeEOGMxiT5HNi4e7/c6OE5dmuHEP2jV/JzK33TrjSMpAiEAvFNQ5N6IGVhzC+a3Yd5DhU3FsNiGkYCcQAHirvlVf/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrdHCRA9TVsSAnZWagAAxX4P/if+9VCneo389nY2dh90\nP8V6415T6LLgjPv/wTCZ16xF70evJTHtuYrXfe8uPon7RStQlpeDbovtTm1n\n2nJ2gHt7Cup774PRr3F1InLybDnjoNeIqLk2CRnlgV9fwxrNIFNvzlyslqf5\n3FwD0L/llTiw+MgH8wzedJyDWb4JynS/Vwa5InlqWrcW6K3T7h+BhLwqSwE9\nq0O+AVnHYF8cvPEh289mbw7QPmofbB4auc5LZWA/lD9vXpAj3aL1ghaJNGwR\nRn6bp8h2cxyI2+/Q+6YQ+UdXXIxPPSzYsJPqY89DENZtorRxB6wm8jnLqUKP\n+9bp4PT/YEG6Ak8z9nUWhO1xgFJPF9YILXB/lL8hliJjaHeYY05fF+LfMihT\n4Mwqh4hNarE2zCw8uSHt1BGsBPMBVp5hxrQUQNMjLyRCt9zYBYnY9upb4yc4\nQTiEl/JnZbpaTXNZTXAwIXZ3JpLdLqN9NslBI9u+QSOzBXcAs/DYnXBc2Ojs\nJcvJAybBOBnkpWGZ05jBwDRkw7hxfr1WWmw5ekENaqpPo0zxlthPEbRbwIYg\nmWb7PS8fbbqpUKJAam3eNaBBG67Unja4mBgVUIYCfijhClNs3Eu0p+bpGYza\nLEqw9y9jGJ1QznIZQzohazG1fiTnWEXhBzkwsD4LkD5vIJ4D1SUlvq65jfQ2\nb9uV\r\n=VmXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/list":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/menu-surface":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.7fd792bb9.0_1590081351322_0.38908215749987063","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/menu","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f8559986d90d25fdce7f3195a3a89ec1544d1b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a66493cd8.0.tgz","fileCount":37,"integrity":"sha512-i1PFlgJh9nk14UYVP9T0SzajTNjja7CAsDzBctUYbsxo1nUgrxxG+YOdZJTGUt+5553LrcPUJrsaKcSGuWbAlA==","signatures":[{"sig":"MEUCIQCpGYjG2EGWVC7xHMkD3PhpKJp0LOzQTKxy+yjqrTZbXQIgQwarJcwx4uqc/CmueJLLwforRA1v1eceVROrhywTrNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgOCRA9TVsSAnZWagAAAo4P/Rh3RuIl9C0B3aX1DpuA\n/8fCtzPQBXUfZbzAF1TggmDIepU5+bChY/IVaKhxl1501PP1ZjOnHkKdqfSU\nMrs20zF2BQSyRC+6ivT0oA32v6XHRH8betdLM+E9D03GC3TC8Bl7B98XtD96\ncnuS8rPTZuY3lQYLk4dGjNV35sdgNconlerpkMt87xD3El9unoeieyt6oykR\nvL7jqnNzoX5mibf3bOQ080J4ZeYkuiavkeeakpyU5WEoYX7B2FRUzJR2n5sM\nPchq+IxI/du0WesF+VyMRjrDYE1zPlPA1mbo/7SfijXp5+LEeJbsK/7piH/D\nITO44cgCZyiuQwCMZd89bTuORQA0yUnBzBFzf3E/IiRtFzwTSDlCqFc+/2Um\ncQJgX80M++VwExNhQrATHVGCy6+dJV20gIkxxgkJROqssN+EPzHnB56fdmQC\nHe5ydIrfHRm8uJNMy/BCnYBgM0fbh6ZBaJqmQQLquRxDTLYi3sb6yzFgOg0Y\nKEgr8bN0LcpWC0B9cQcK1HrT0cxcLV8cwh22Wp7at4NO4zO+s4Y4KxY58Lcv\nvWoi1s/GTs+QBcIOmTZ+39irVbGGNgkFFkyW8SPb4D4S1OSfOmZLehIgadWd\nkHmDj75uMREOiYPPOMCJOcS3b7bzghiHqozTwN6Q8tdQCNYJqxZQZ7CD1uG8\nnnZ1\r\n=mGYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/list":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/menu-surface":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a66493cd8.0_1590081550272_0.20602814126890112","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/menu","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d3435933cdfbaf74b697441b2b6336c70ef293","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.da05f66e1.0.tgz","fileCount":37,"integrity":"sha512-IAgELdfepXm6cr6PRW50IwuHmytZBr85Ftr6UYSDSVPsasYpq/j5Dm7LJL84XJ4CISJUionPyoZT/ArVgOCuMA==","signatures":[{"sig":"MEQCICUeVa0snuti4tOAjWmVVAfuIfnLpErSQGTaVdZ7xIUiAiAFJY7coaVTJnRGVVEWc20hZtNYLf0wI7Ngotdnu4e43w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrh7CRA9TVsSAnZWagAAXuUP/Rh4UYpFq056vx+XAcpT\n7cszRiyv9K4lgIWTHtGq2FkaimfpTsQ8KQfZ94txQ+whRazamxHysziV92p7\n/5W46f7vUiBqTiJaZDKmT1NkeNRMz/dbv1tKGzFZfWbMkvErt/hJxLMvYKE0\nG6MDw6DOQ4U6tv6JEwrtXkOP6PboxUkbZT/hvrIulZFIX3WD/20ARtxn6VPY\nFux4p0vmFKSurBN7zpWtDXm7GZA20lASLy5awMVtACITUR50gEqSqIq3TcEC\nHjefLDsYm5OIxDfYrj9yMXLjh/t7FlVDeChEo4HfNEB/uZvbPkJUw38473vv\n5l8DrzpNtefZXfnYP7sPGxCj+D9Nkrz7sYE2e6HWWBBi9fVuAp9dyxEt5U3s\nVOBz42rdi3o4a423Mq2J9Y3W5V+7VJlkpoy7wN7/JYXrHa3XBrIv+CWy7Kdr\nYEdZXwH0EWEqotluVXz/HnNVGvxnjx51LwXAxkJiwEMygskMqNQUSAxTuP2n\nHggIm5xlFfdmjMEixDsEwggiAALfZqhlUQICCvrfvftzISc5Acpm95UelJAu\nbmLdzUxDepNfqxMLYNw2kRGfrf7buCJJ8v6UXVjBJZKbkcHB19RjTcNNjJjq\n7czNnO10AM1k8/bOwf3mGiD0UMKe2Y03cONhiFNaU15pwo4faBfTmHKJuvJT\nRy6b\r\n=Crqq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/list":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/menu-surface":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.da05f66e1.0_1590081659447_0.7509971041063734","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/menu","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c26d60fffb381baee1ec39f5070cdcffcfc7f8a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.740860e78.0.tgz","fileCount":37,"integrity":"sha512-0f3ynsaWIzsPSkH/TDH1Si91TH4x3XjYgFfc3Aj6HF+EcZbYhsz3coM8rxNeeyXbbVH0smUJl0QFVG+0bYSNUw==","signatures":[{"sig":"MEUCIGE8tSyPoXAQ9+prmqPud5pNHqRBTXBEEI0C0FcG2F2MAiEA0VEpi7EJAGAr5bUkv+T8T6tv2bpgG00SP8QJ+XbQtdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexroLCRA9TVsSAnZWagAAuEAP/RAHqD8vTcbK51WQfYlP\nt5XKwzmotkHC5D2WoWjyraQZzuGq75ll5AZPQnUSbDdsbJF9uXRUe4WcoeQI\nFuEvtDZKmJG07MQpftW0HXy9n2YWAn3tQCT2Q6rgIXrKpQ3LfzMhS9MMnAqP\nT8E7Yiz8IWFTUqtlbbIKasUFaqyTordq3v7DMXN8KWB1g3WDMKUr1pYnwXH9\nypzAgltNGiVV+jm+T3SUJDxiPaxWOOdiq8crpWe8iwXrvcr6wohY22FQaB4Y\nG7KQh7UWiPrpPhHZFaS+HHZ2Bz4XYrgPpJYqJkunGTqclVntT4w1YWqBrV3f\npF4CktwSqMaxrrLDYAeEhVL79I5ph/8+yBhvJnjz9EviLW441WKzplWGihro\n7xkKHAcbz5xMtXQe0IEXOtHiU4CSH3j1ujQrElYlIQrvSepYZqBZ6tIvNj1y\nPSg67m3zEqTOQHyMJ4efxdZtSD7DFUU4tvQYN+sryK1a8GKB/S5XhaafgPwb\nuDXdL7CDk7etAFIDChAryZktBEgJkDlURjwGh0n6zQUm0ymc49GLXvgq14CE\nwQS+pM+wfJL1jjPCjZUUfRW5gDD14vnfqpx1Pj3SpCkF0opyxvhkBEkilLjy\nw/zDTcVweTBsrucYVDYg8H3V4G3UyhEitoqKPrYDiaDcE3+IUV219J/ee3+3\nsD1y\r\n=M4Nw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/list":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/menu-surface":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.740860e78.0_1590082058559_0.08078569181252071","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/menu","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab2674a25c2cdc6a56bcbbde03907ebce4c9741e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.5cea2610f.0.tgz","fileCount":37,"integrity":"sha512-LBgi085h40RGlW+dD/r0hAAn/WahDE/AHSuYBBSF5weyyY98ZFAtY+eiiK7KlGY8f1qLdjlV5UpHuBHEShi9hA==","signatures":[{"sig":"MEUCIQDPNDs7AB0Ge+g7XlphBMro3HwWPfmKTGPHswjPYWmHnwIgIf0d7NwCKwl5vCto+aeVDQsC/wLVwSdJN8yvp0/8ikw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqLCRA9TVsSAnZWagAAGbsP/1uZYt4BvevtJBCzpYWC\nIHOBc4wBV2rDnxENvkSqLHxocF/el6NZry4brqEUuv9PXYUVX3buQnm+n2WH\nPwEf6MmnOm7VbavLxRKZxAbOeEzREZTYzLOA4rs2GEZJvKYBC8VJiBvktnj8\ndaVeRuyO0R1AAojaFKmSqkiJ5maC8tYjUB8QA9BYidwN5tQZydZTw3ZcLY2F\nAwmhN6LAELnGpVcBrEWMelpSA9aa90twgtuE3NgvTrsWjUEDv7d+EY86h98n\nYldrH84SHj5h7w+chAo7Jis0eUsAF2aDAyYXgBBvwXGazwWXdCDgpArtLyV8\nPe74vl8TfLt0cA33TahRZqMWoY2cTpRtBEc4Ql2OPeaURfm+szWdHlgdjLHv\nuQvonBy377Zv03onn1IGYA+lJKgzj+c+YmQIMSWu/ASpflKWxLok6n4hGhC/\nJgeHBZreHIPStVlRPq3pVaV0lgRPac/oHhF7KDlw6Er6s5+9oltzybv5pbjf\n26Q1w72nE+87hO5pSDa8uRHZ51fGaix5JVuuSd24rLKK48CGQ0brLaRzV5xK\naKNIxyf7jgXG67S6LCWqTHN24aD9YFawPcHx+p4elteuthUMQ+OMYtlMGBSy\nsQa7t1TdYTjCtr4Uk/SwQ0/uMv3gwEI5/FfgIA+I+eATxqi8IoVjVOYPRsuC\nvQHI\r\n=ThVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/list":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/menu-surface":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.5cea2610f.0_1590082187080_0.5804152483697382","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/menu","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cdf6c64863a4ca1ba65c3d78047916e8401340b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.cf7747ef7.0.tgz","fileCount":37,"integrity":"sha512-if2Pbq+MSI75ge7d/+hNmPkszqhZJINf+d5lOYtM+nTWEfeeDhplumWm5yXDWcqBODCljvxPBlV8zBpsCrgF0A==","signatures":[{"sig":"MEQCIHNf0A7FWMfTcMag27+cp39H2CzBGto4zZ9Ax41PcWxyAiAKgJBSaMgwwQdoUO8ZF1xkQSPOL1ppxbEAdY7N7eo/Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqmCRA9TVsSAnZWagAA/ZEP/jBS/RBeCzt/W+KM9oUa\nkM+v95f6LHveG8ayFd9YHFwtlmaxQbbOiwEnYbrgsocsCZtzyV/jQXc0R+hB\nXQ96yv6k7LGJ1E2KZowARMcBeEkTa+7mOrk4NH0XmVtXWaBTY6zE3UE41kiZ\nU7myF5vzqDwKLr3zKZQSOf+j5Evb5EuBfQ5UxhBSs494AGpuXvbEBxkdhoBj\nY3Lpna9KC+aZcqC5HubpII45zw8pvLtZe3X5+O6wcIJptP9fuRSxTsH/uPMl\naN0oWznL3WkUeSnNxzO5dK7+QIxuOwyI4f92O0VuKecYpHznkZ3zbiq/n6jy\nZgvXZNCx6Yhn7bZIiS9YqbWQYts0Ii27DOflWFhcFLdCw/o8LlyMnSqfJnuT\n2qzWzbrsKeZzj3eUGs0s+8NV3J7BQGK+2xaZlikL+PLWMn4JnA3+1eELAziw\nZRfbrtvRgFhS/FShLXN4TnSBgxlgvCF7QvM13bQsPAyFZD5gpi00sNxbvm+j\nG8ZYT6uH/iMteXjW7MfI0V5TT0ZomYdyFTk+PjQ7zEEFvSB/IAQTAth7aVih\nHHIP9F3ZeZAbJPMZaZw4FM4lGaG8p7fSPN44jdT7a8dIPv/LVUutKiogyAQ5\ng/WmxwtRsZ1q289bqiF/Oh73hVll8VAOZ5lzi9P4nUHDS5wdIPRGTlAEM5tO\nenP5\r\n=TiRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/list":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/menu-surface":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.cf7747ef7.0_1590082213357_0.25701689005016815","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/menu","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc22b508187950a335d474bab1e8a86b8483276c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.862d0d7bc.0.tgz","fileCount":37,"integrity":"sha512-9MPYAIufJUJLdfDQ+Yh3lrx4SC6tbrIzN713MQGa/8M+/NIbciOve7reBLJdWRa3GZ+qzpO1utWJykTT0l6WFA==","signatures":[{"sig":"MEYCIQCas2jIqJhWU1QiQWBNhaeHNjioXsY7CwZIjP1mbNyzawIhAOBAIctvu8ShhUIc1MWAra/+1+jdqMN3yvGFQDn8casv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrs9CRA9TVsSAnZWagAAYHwP/1TlAXBrzLyxo2CWctVP\nDNaPD7aUt8iBDyBsWnD1FBmmqXW7XSVTyC1gNSCVfbGC10oZEeFSe3UWshcK\nXyADc86BvbcZ3J/Dw1LBj6pLVAB8sVO8hxO4o89pIFg3y0DoIzCqceUkG8Oi\nwWK+nZMcSfzk5QLHGsegRcPeEod3/P4ltTpu6OGVWdOLIMIip0giiU4v/sKz\noRv7zXBK7X/aEos4UeZWlcQduSFJMyYj03XB1c61OhWHqmjo7vsOKLphGgFY\nTEr8Bk0WJ44hEPeE9vAaUnRB3zBPvFV6DejhFF7vOKOukiyE04oo+Qmc5jpG\ntre47hVVHje+jLskVBpZ+uHtsn7qu0YzOOqqrXken4QAtt40n8WD9FYaxqmr\nzGsP6AA8aMvs9zQUPsBrdiONqswTl1+oYDyARS2y5yuj6HlcEMutVMDH/beC\nHpoqhizJMGa8Oie+wXc10aJH0pMQJNugR07psHZgvgofNsEAA1q38FwF8FKS\nCmWQsFmE27NgYsCxmSokODLsEZgSVUN52QbWsjENvWoJ3fLcEM3/+gXgjJ8O\nZTXgZpBPnz7wkeMvFAJ+7FMdlK5E+6wkydeFH5BzIUZZWTJl5MO/V/wUNRTV\ndQRU2A3uDifIKikd7g+WkPiDYCmZ13e0Afp7xOLzRAzt2DVoGDJJiXyG9C/g\nlirz\r\n=RJcR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/list":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/menu-surface":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.862d0d7bc.0_1590082364842_0.6621502118350786","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/menu","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99aa758404cf1a024951cac9aba8dc2d4ec734f1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.0008c8a91.0.tgz","fileCount":37,"integrity":"sha512-soLtlK0qw5x2Y2W9PZzKKAzpFzelP6s4ZnyxpRHJpFO0FHDe95Nq75Qc4D6numoiHHvZwHt2Hw/0vqmuSAi/MQ==","signatures":[{"sig":"MEUCIQD9kzFxIdhR14NcgbQC6RsDfp/K0ospHYU6GsKeZ9WZtQIgFSPwXO2Hu+W2qDRU2CLIOmgZl9Wnowa9AodwmxUbv7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexterCRA9TVsSAnZWagAAZAAP/jCwQXG7eVT/GceufzDp\nCVNze8RvPE2sDUEsmK/v7N40Qw82iz1SUn15VJHbHoowby/lIzdfcZ//FEnA\nh/+AYI7J9hE6EPYuiE49yEaCYGjt0j4kd4OYu8LVxFHHtiAD6UDK9+9xlihZ\nU3Juu8A8xxvxYF9P23cg9VUSt8t6cEVtu71KKvAkIT9UjJhB9TyuNlbHjy9e\nT84ydu0zvEbOn7baH1/yRnl4kUiqBrMcLZ3k8x0E/yn8mQfFQJ6XVBh/ckea\n7rql7mOU8MQoWQ4oq09MvTGNldk3CMQqzUYoU2rCEckRU+4qFWuC1TUT/oVO\n4yyp/1h6d00iIvZZwmOVwlZoOmlG9XORK51VON+OpYm4rn+fT4DanFMovOCA\nShBWCFUGU5+zi4hMY2wnHy7EYIj5QmxuVSGPMPsONtETtGolQ2/j6U7xdIUN\nuHnxLvOGOJFao+flVU844hzd00ZnGnpP59GoN+lNpYJBZYY0NRG4dafroOVS\nqmrOliwb4gY4e86ZKaEaM6uim0xUTcivl8ocRPRmKfoaAa2/vRKH77s9OYdo\nT3057eRgDNF65/vTf/BLHuxhOSSb8eHuP0xsV9KSwdKYFd/01+CyOptdF+/g\n9tQPu2AV1zs0jgaVUGsIG0t290KOaIyKPqcb/t0u7o5PBZm4RkKwhjJ72+9F\nr7K3\r\n=0SgV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/list":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/menu-surface":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.0008c8a91.0_1590089642812_0.8436231289065452","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/menu","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"085f1853866f1967888df6600e500bf7642601b4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.541638fa2.0.tgz","fileCount":37,"integrity":"sha512-RuZqUWrAR80PROzNS7rGaq0UUczZQzEYCnOMq21MpoTE/afbMjmzL5SUjCR7p43L+oUFYe5rPTxFFUsuShRM4Q==","signatures":[{"sig":"MEUCIQCV/YQID2kM9BCg5+Dn2Dq8jJGXFG64rjtQYy5XE8/3HwIgAYnyZh1qKGe47GvNwnPPtnW0jwqGOeX+N9q5kvdGeXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsyCRA9TVsSAnZWagAADyIP/1E9skjAIbxHyMV0z7Yz\nRilAdQzMFSbdT1Lf6xBTkWq0MZY9nfHidPXMCdSlYXlHWxWFEL7WJMcBWnoq\njml/a1NJEB8OuUqF/MEuok46T68MKNi8AwzIfX0iHcSjCfiZJjppYyNg0h9c\nm+A5WMbVD7s09sO0LCrlEIDEKXQ+Fm8gxvLXEeqiQRVRu++OhdqMzEDKk2yt\nALBoPU5igKjCYuSw3BtLkfl2QqiYexQ9T+yo/iKkorTNXOUcj5OEsFGCPRom\nE8QC167LlK2RRopwlI2KtpuNUeacm6Ig3FCt9cndwyHnLGvo1bW9UF1HoK16\nFgCdcdrjhvZQ7UnSs94fHJRikPewKFBJaGFh5OevXjxRg8QZQWF9msWeZSNv\nYU4wfhwgVu17DKv/KP1+T9uXxra5ERtSrMxn0jUaP9zI2Z52Cw7Gs30rzYRq\nD/O5w0OWW95SNubvgMzibBYUKQA1lVlJe7wPJcp5wzln2bZtbdndWRa98n4F\n7nTiPqmoBEgivc94bBY6y+5gS4BmfAp0jXHab4SObTscV5USyvkJjGzphP5z\nG9Jk8b7jm8LrryNo+PqfnTnlAEGtVGuiP4XcXVd/oVvT2h8cVOQPuaQ93N/P\nlcHffDkBrgoMLPxyrhr6TpVfHhJ4PFgRnaVdBdfcyQEpTC7iUZQZAAYW+3cc\nTZJ6\r\n=OBA9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/list":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/menu-surface":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.541638fa2.0_1590090546512_0.339413279545298","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/menu","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9fa0f52f0c4a5648860f494d56e8d25dc293412","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.6167cd075.0.tgz","fileCount":37,"integrity":"sha512-asD/nK3urf5jYRxTR+vqAezvw503mJ1BjziebkcIyor60V4AvnrZyE+8qBbrkowRH5lGGvoiQasF9Bl4QgxTQQ==","signatures":[{"sig":"MEUCIGRQ3XWZJT8WNjnWUZqPgbdAahU/q5liSg2X3ybD9K+pAiEA/vQNsgB64yVOHaH4+ljs3sQNQR2/HFZPZJK237VUZKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLwCRA9TVsSAnZWagAA8rYQAIIgpS/xV3TRYd3agapc\nd2fQckJBv47sgDLTFxAHY37VOfnfnwNe8Xk6wZF5v7A5ImVD7aWec6tfc9aI\nLGNWStpe2vlWNjZH9udmz8Zc5gzGbcpYIoxMZ6Xt06r2IvwgLJKAfo/qqzNe\n4xGpf9nHwNp/zXJBr09narmYkPPJKu5u68eex9xDej/mM8P8Kjk9rgC7kqfg\nms2O67xbnL4bDNh3v4LFm56V0E46IZCQXZfGSzBmwp0sh2ZU3Zpw2i+/xi+X\niDkX6bor+J8mDc7mPq2w/QOPXy5oNYzhpoDMoZ7tnHZ9BWlJ0LABIgebdiSw\nMJDciCz/w8DQaJVVcfioE74TIwaKfC7dlUHKbdwq/LQQN4OXmhy0guVdemLO\nuRBU13eZSVra71VXnoRvhogGr2w7xSH+p6G6pyVW1IHaMwak1aXZLJ524nIE\nws65Q6Mi5VEApobYpc15xee9OtHMpmPoxOtY/MEDREl9kk4xwLNSOR2xi9Oy\nUn7Rl67Dq8cRIYlUCxZkdOztJFd2fa3039F6bEjGRH//YzdOWOUF1zLyOjsx\nLhsUs0VAsy7iYIK8ZBB3uhw/UJM8/kjDC30fuI+YGYu2lbQtvfej5Rl4CAMp\n6KzWIHT9dwDF5xS2ULq3vY/QxbcpZ+WunrEYkMyLrQdbtww17J6l1Cz6+MF3\nuh11\r\n=dpHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/list":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/menu-surface":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.6167cd075.0_1590092528159_0.1952660946964233","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/menu","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca619dea12000f58ecba11ccd860b77d6550c8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.863ac1b0f.0.tgz","fileCount":37,"integrity":"sha512-ty8PuB/j14N6o3K9tCpK/DuTZw3JzFFCryjU1cnLIkIfDqXhBuK3Ms2LpScgBIJXuNGnyIenrqN515zJpP7Qpg==","signatures":[{"sig":"MEYCIQCBXcqgS05h/DJKMbgGKHP9XDCBFKWq9YFz1TnJ37TJzgIhAJ+QuYUt2AoCfVTMmqDU9cY9BHJYzRif0C2YTsijNz9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuwICRA9TVsSAnZWagAAzIMP/0L3NWAO7/O8Xkv8bknH\n/LU5zt3k1yJSAO092B0DTCw93bMA+LfY9i4P4/3HPLxOTMYB1I8xh6T9SPHf\nO7hqGraJuM/x9T85wOK015FYDs4bHJ+mIGNGVWt8dZLHSv7cFMP4zc/zIIR+\n5qrTolErMFEbRxLW28TAliq3pxXzVKyNpfIMLscpmBxBBGSsLjcGbTPH/Nbv\nKOrmXq3U+RUQQqNV65zNCfT82y7sdL0MSSkHQNa/3VkEb+yh62AV82ujzazb\nX+Is3hgF1BAr9NbxC/qJvdY2jfroLFyyGO9pw7dITVtRi63OorN7I7IprufK\nHZiXlP/eqbt9/YLKWZ+hPIIcRONkKZc7y8aJK/xKc71DB/oLwa7lHJnW46s4\n3lyNtC9Z+k+p1+dHXNfUMiGwoVNgVpgrrZbZvYsGfcYLNapwUnoBt5FMDfdE\ney2BCYWtvYUDrU1XA2o7dUtjtYhLfGGlrO84QNWoBuGHIreGZ+Ku0qvCCxsP\nr9IGtoAMA8v1Y+kWvE9UwlqtqjoNb4JFY1gUfbNjI47uBJ8nHAsBPE8nZiKu\nYMcogdBLE1LeedHNRQbtSneDeNnj1RFJUyerU42LitGIljON3xYtlurJF+Uf\nPSovOqZbLui8D2ubBf21ksboZq309RkXMDF5la3ff5xMIe/Tf+tIJijEaiYJ\nCWIO\r\n=wOnf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/list":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/menu-surface":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.863ac1b0f.0_1590094856108_0.8005739027846108","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/menu","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aadd7e4fa304255e0f227299cb8852a6a2777c6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d30a214ac.0.tgz","fileCount":37,"integrity":"sha512-wjGOuK6luRdYb7LJzF5uMkUYmHBN3bJ+/GnSInoTAeozphVV4mM7dRgO/V7zshi2VDouU7/Hp5TfxgmRRb6VzA==","signatures":[{"sig":"MEYCIQD2KrdwjAviH7GbhjX51/n5zMd3Ul/38QE4vpcCnlcY3QIhAOL6W0gzJKKrtrCG8FgEDhfBO7kXkfxXdG7TD1KOHQit","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuz5CRA9TVsSAnZWagAANZ8QAJpeRA9Bt9Qs4cQd2x0k\n0qkJHG0DkFzbkI/r6fipyk3JQhSbFQoJ3qTLoGl5G+DBk89sAqw/PBTPeDdW\nts5O/S0z2CwleVUzxswKKBm2JG5E5LXFSJtkzj/SWY/UhtSZwQ1RcMFYFNs+\nUynL34Dg+EtFeVzmyUlI5ezGFlvQVi/onWrDedm6ksvBBTyyt9TnWFzu7UNe\n5lu629D3svwhhyn/B/Z0VVD0qiL5PSioHATySnDBVo6wwuAp+pRumwDKDBC9\nthp4ZxbuGdlPnUmSsxXYpYlGT9gpF35B+Q0OJR2FZliNGBU0un7mpBgktXS/\nGyVRY5VFjdy00iUtKUVChS8T6/Hfv62OUZa2bBoNK3V0yjCkPsHYo2IICd/5\nVBciH29EUh2qFUewfOR3PACJaosTPOwnPD384cD6ARR5EDJB2CzTxusWWcz4\nE8nEw36Yhy38OOGAbdCMZ0foor6qyrfgMJMH2TPgKU/tw+/6pWTX0A6CPI63\nysH8GGb8o9y6Bz/WCokuLyc3rrSOcAISVljl6XY401GZdyUrAS9VIUnIRMrY\nFFDkGoYevO90qaKJ7QMQJqCLrAjtOKFcqNN3K/6G7rQ3OcnAEA2CYIl0kJW2\nbLshuN8LdAQdDiM6MYwoz0n7rIOpMT7v5kNxn7Rxy2wfzDp6Zh6brLh7BPYD\nOsXE\r\n=kRnR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/list":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/menu-surface":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d30a214ac.0_1590095096973_0.18975412802151936","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/menu","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2d3c065878d410ff5ed89f84ae2def3a467ab43","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.62abbc8d7.0.tgz","fileCount":37,"integrity":"sha512-npz99SNJx8zozakwrYDWPc4vbA9tbABthTFtDdGQ3MBu+MAJFBc2JqxkASN8nOyOB2SG3Uz3jMhZvguzbOu7xg==","signatures":[{"sig":"MEYCIQDK0ILlCbAI4l86y9655HHyIPqG9919osnLO7NboA+9HQIhAPNNF6NAdjjjo5uHwxVQlT6ThySYyZmww6wk3KPNJqZ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvLDCRA9TVsSAnZWagAAcswP/3VbJ+A8XD6wmXyecUpu\niBNP2TA1+wv3VMAiq3ZQrNhbcn3Cw30N0zZsdbFQqT2233tnmAprhppANcte\nn1z2gSlcRWZgvilLZx6mdrD8jw7+YR8/oU6KDfRJMFpQe8LZvI9V8WH6JCp3\nnRuZpF3KcZXP2f87NHSnAoxMSDJMpFoVJfmHpt+Y3K0yhf9sKubD/ctkrh/i\nWquEbXBzJs3ae2JH8W6i1Y/PU7ZcTmZV3Ssb1QOxTdkKWw9H+X61ZeoOyGl3\nzc2aek83NylD0tquk9GvG9IRGJQyC9LTwyEa7o/sCoADBhW8HU9IqG9Hg1CH\nvdbcPPJeO9WyBmDLGCbUPkt0vQiSJVauK3FL53ivE5gntsNfpS61VciDNu9y\n+SzBA2B3DJ5T7NWrAepCLqfwMI374gVF2+xeqEW5ZjfUF//wkmeet5NjggAp\nojuLsu38ln6iycC1kMcbJyYnrjjLmVI3Cxu1ISAjzlrn0IjJPzMeCE7go2+V\nCqBPNCxUUvgojPYDl9oZNT91yDHek0E5WAWdfW60B5eMy5x8Qgd49Bx/teh4\nZDrcTOJ8TI5pc8r9bNeIwErH2E6/wHPJ3ej/HwQ5sYOKcHRPL4nbVCGg9OCh\nv6NvXW0YSN1K9erQcmdwY56XDReHsdj/M3b08W1329asZJZPDcuxI24wFd8x\ncLDM\r\n=f76+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/list":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/menu-surface":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.62abbc8d7.0_1590096578929_0.514391749700621","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/menu","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9ea359431dd98bc0c6226c874a39d95d7f4a59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.49bf31d5c.0.tgz","fileCount":37,"integrity":"sha512-tmX03SSt+YJXqx6PuLjKjrWyzAkuxRr23qMiI2r93XEtOp9WoUiHlTqFB5C7WLZRoAahntjAsbTJoRWvbuFhkw==","signatures":[{"sig":"MEUCICnN4P0uELtDtqv9I9z2v07/o1cv35QWB76lBkLDfdPVAiEAmo4qCWNUeXRv9Xp+9/3zDRJGWUCpDMviPqStX2/nBJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOVCRA9TVsSAnZWagAAxzMP/1LeRfsx+xx35W3e1eCX\n9iCRv09Of1+ttLgCy7Y8v0dWMQLB+KLDjHP7VvNcbeWG+PCpFwufZenc1dfz\n/bJfR7ARZ7O16mrHd+UfM26uLwmGM0bCNtdR61jtUGjlUSMAPMtm32y6GlqD\npbTesl8yVoF2pLCp1EB3Rf15atWWDKGpg0Sg/JO4VNF/upHPGQLkgF7o/N07\nLdxFntGwoWoEqBp3IVW8cDLn8s0VNyZo1C6vkDpuA778lQMG56QIk9Fno1bW\nz6RiGjYPCziOh1/s1oOqKDaOL5+dtX5YQQ5iX5ctxNTthGTWfRoP9ynCdW+2\neZKtu04mXkUyE/l6gZIDgCczEzIRVF5/mCJcsXU6XlzVEAcDVGZo2Ua/ZhWI\nGXruB5JsaQZpzqjSGh8jw4fmE2YODvdHHQs1KlWTx1xAiu/DvQk5kkF5bv+w\nv/CSs2O+L/eYNRJ2HTBhWbk+3gBux+/2AfVbKupdh/MGVDld+YrjQJPl/SCt\nEgAg83QHivfmI7zyrUkmUJYPWXYYbeM4PnhF/jNd1BrQomBdv3x7AUQ0z9cy\nAtvZ3EbLdA4T/X0trSixyDm6QRudYygWzgCqLpvujTEmPULlzD4hYN3jMWZr\n6S3thCNYxTpOGU76AFEr634miciAH4nEtJkESgwc5ieZtkKbULjz4jB5OpES\ntZNw\r\n=m4Q4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/list":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/menu-surface":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.49bf31d5c.0_1590096788879_0.8039436196419099","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/menu","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9975b7d233ad395756845b67329fdb9db098d2cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8e17857d0.0.tgz","fileCount":37,"integrity":"sha512-UeHdSA/g3e8iHvFqUk8vdKycvq9KAExjLGpOlMXamRc/XsD1Ppvd5DarWdOWUT7LboKgpXkgBObimrjnGwCsRw==","signatures":[{"sig":"MEQCIDACenPgxul2mLiyw4I//v1Toda+S+daHOU6J9UjSbdNAiAMf5CF4Qkgm2tHAoZrrnW65e44+Q7boVhXqh0lRlr/eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvPDCRA9TVsSAnZWagAAyXoP/1761up7rOBnA8F5B299\nwvRzmxAuhRgvprkc6ufW23jQBt8geTEYn6eg/7hoJTMl7x3E6PBvQOIKdfVN\nGFMHuacNq9PEx87RusVhvNpSdnl1Er4EOJBO2BZYHChsr2hWeNoxsr57wUZd\n7KRxNeNccCcm0OpPvSdcdFRuCETZvgQuGUmoWyk7n28o1SvpjSj0F/ZAsN3S\n9Q/bpaOO+52tk/5VLST+XIFaEcvUwya4FR3r8kGJExrcCNke7G6rR1aOSUFl\nbbKUtTGGm3Q0MNxSiU3AqHksAJwiqnZw4wq3y2o5d3s2ihVIa5iz8Wg4tBSt\nJAdGTQi04ckd1Oj5hlBSmBpzN6lO9Q65hrarEozWo8avFaXd3qa5dbptpcnJ\nnzKF8vxpKfnPXLq2aOSBnGMO8bVB1PlxcAabmX47XJhS4+8YteQoAoFOI1Rq\nnjAAgeSKSZTa/awVn3MpnHSArctAWIqccvHz8jpZTkpa20m2qA6e/xfTOaU2\n8TstccIIFWk4TVCaexIcZ0on7WQB6//mt2gDXdqpxY2Q8bc/Aj2jijt8T1H/\n05FF2RR0gJtiXu7g9qxtgVh0zFiS+uzjedof15G+URS0Xnckn/kZuTAzdmyC\n/TijFxBJJg+V39RbGJw2h5bCRCz1IOrRwnLjJ9DIOXdKXi+uooLLyQBZFLYT\nTjfc\r\n=Fsa8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/list":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/menu-surface":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8e17857d0.0_1590096834918_0.46205290627228157","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/menu","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86750247886e00856c9e57fdab49fee560e2eeaa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.c113fc942.0.tgz","fileCount":37,"integrity":"sha512-j6M3eltEREim31Q44h1o/8WmcG8y9Y+4bSWvsZ6ReMkPcTYwY9lMBjK13rurBU4rQ28H8T81KrLn4wBSOluk1A==","signatures":[{"sig":"MEUCIQDM4BbtDF+ihrCjXwrcRe94kyk4VtXwrM3TMpP9BLH75AIgb636dG+cgVSMzMzIb/BFsY/3Cb3/trDBZ+FaDo5k7RA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwUGCRA9TVsSAnZWagAAU90P/1lLO9J4kZlqMDIhTgAc\nvpylpT3Z4GQt1145FMDxpjeTwUyEt1qhmdk+vRkQnnJXoS4E25vsmYvafSWY\nyCTDVFz9R4g9fTHEq7QnDzw9/ayUXB1VjgvZ9sGXLdk0JZ6ifQ9kbjLYLW2y\nk47dvf0JaU+TFBELRQwlnwUUIoAVNut3YxlmwjZMOJ4nBMr7Ku/2N6aQPkSK\nA4twqaSWCLVDbxhvPKtroYThK+y2kwhCRiNKu49de4Nze0wwAPA+YfGnG6HI\nihrzclpAi0du1DeBBdkfrnO+hUK46He1gnfKsEOeUx8EhcNfiZk/PX+4wdML\nk/XfBMUgMqllqwsLqhk02VmrSzJc5VKYivMYh+woywF/pHY6F0cDHYfHxorJ\n25nYDQyGedO4/5CmJUOLolKXjmCratD+axCwDxQdc2T6KqdVe38w0KgjuCCX\niopjs4XztAEXBhTzFftlIvWK2nvE3/GA6FZBA9/KPw8lbs1/Eb4g01RFEfPB\nHLKLuQ0wa+9gDcrRqlw+uKcaNPpgf/C4oiVs7hz4gdOcngqljSaknWySarC6\nafRzyR15a2eWunDTqGGj09fck1+fOjmfpGdYHx/Vv8XSMdmaRlW9EGwJggEX\n95R8zhF6Rr9YY2/2hzYQKhZASgvlFMCQ7aFF8soyWuohccBmMoAwfDItI8GY\ney9f\r\n=vHrs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/list":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/menu-surface":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.c113fc942.0_1590101253470_0.0950059660300111","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/menu","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"009d0b0c274e67468f92838eeae0f91e7aa77687","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.912d9021d.0.tgz","fileCount":37,"integrity":"sha512-rwXuctYa5kXo73JbkFjW9CrxfKlYXRqejlv+PJIyCRa+sXQ/JRJ6NMScA3dHmCZQJJpLyqyvi+Wj0+OHL1zguA==","signatures":[{"sig":"MEQCIEsZiIrDsW2l0mjuLEQeVYUYMwbj9IoWCb6o+AwGcOsNAiBKzBfkgy2cE3w16MOdUSSUObZ6InSVcwnlH/4sfXNqfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWQGCRA9TVsSAnZWagAAii8P/0qegnL3Fqop8SC9YWe/\nmVn/PZdvQNUD8v/n4btM/YNCVpUWwuRsauoD206dMXTJ0ctWioXzIBvFWVnD\nP5b+MooXcpkggiQXr/W6mzP/i9cWjI6Jq8FhU9ODRKQnwv2rBM5v6uILZGQK\ni4uMR2yuNFTooFygrMQ8y8tIcjII/E7xUlgS1WzJ9IuC+PxH+5OTGxqmEkBw\nL44N54rAwxgn+zvNw7IAtaQVCobpyc55598SClQj4hhVep2cNX2feemsT6mh\nLAuCFSqXEoxqDp5wwKcInUzNF+B0/xOiAiXXaqyd/6IYnHUKfKNSy2wAn1Vs\n5FTW/Fdek/RjIVRFNvX74bNHA/p2xQO3qWq/qiB/TNNGFaEt61KUQ/hzTIGP\nchuVhg7cFc7Ai4la+jzsggYvcayZlWR+UMv9xPfoYDkYuE3xYKjeaUQSCTVp\n4kxpJfOY8KDumH17CDJ/VMbDg0esYm1Xzb6NiPjYyneMJKw9frEt4UoXUlxN\nlxJJmT9kprAU/v/fANl+j65itQOmmMAvLLIr7CObgnqteuCLs5EjJrytYKbS\n+vJGRjZPDBqubvJg12XsPioysDS2dYNDtvO3v3vUqkjmwlrkVPvQE4dwcek/\nCp3DtG7C1yelzLCzAJlfb7AKwbUOqT5PYCSUwbLk6rmvtBurNop2Ljjz6eHx\nJ0gk\r\n=PDQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/list":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/menu-surface":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.912d9021d.0_1590518789567_0.5561866458871285","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/menu","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e00a5ffeaed809485c60e50c3262586b289eff9f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.68a2af131.0.tgz","fileCount":37,"integrity":"sha512-ZpTAnsgB4TLJTuAyoogBrGbuojjNyM/xpbUecDvSQeV9cjfi6QZtYigPTCSzBUsnhfOMOXZ7PK45Ti1mx46Y/A==","signatures":[{"sig":"MEQCIH+ybAAsq4Rzsr0mJGDfhfzO9VliCf+C2Ld+0KCm4drRAiA1rSymZL6r5mU65riiPkZfTwvNguWhTBVK9kbdOCYNOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkzCRA9TVsSAnZWagAA6WMP/0M0j41+C4Hjgf5K34GM\nuWLffd7yZvr0hvguQsrh/CObznQK192yiQ7dQzYB7ZUYyj0H2OiiwfNYlN1n\nBRZQvgeidGSRX75ZFdmrmB9W+fZ3NVQbN4mAJHZy5bg1LBFFGr6d/a284N5s\nWkaecv+XcXSDK93v5DWo/6TthsJiK4Fggg7ckPiFndlAcX9xlTk89MljJbHl\nqGPKh7i1y6LxA97OEDdZXnjDttUD6pZ1DDF9jisQRkw51itaX8EfD0dtMyeQ\n5gQ4G4WaE7bCjHeSKIAnEYMUXBslb5btS3382+69BcRYiAf/id2sfhqsW56Y\nkeWRzb5GH8h06tejiw0SFN13bmXqeiqXwYVI5u6vqlRIka5RCtFMPC+1+Ij4\nwhGN0YNDcy+pHN8zMtxk3CBLWtTrR/1+d8YWrMmj1PAnWT4LJ2qK036OQt/t\nfTg3GcJGeEHJWrGJuEQXLGWkH4dGVr1YU2yldk4MkORJguVGKNGwUrh57jZ+\nn9mJuJk7/F+Ym7vwr+q1l/Shm65RMlITRoYzwWqI8ieFXs6mmPZ7QxHC8HOp\n5Smj99krutcuiKNhfpRaorkwjkIkhkVbflRH6sE4HqZtksrkdaHvcmV/5E5j\nQ+JhkcU9ra33jcPLi8wMn7jQqaxS4ON+nXDsXjWf4hrmmAaydSoGX44dWRja\ngAQd\r\n=2a1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/list":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/menu-surface":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.68a2af131.0_1590520114682_0.6575917504006277","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/menu","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113cee76dcbcba20c80f5d27883e3a00d64bbc58","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.01de07011.0.tgz","fileCount":37,"integrity":"sha512-woOotD5fW8qJCKqkhMMI6NUPle5tAJq1D1cWmHiWXUd5iTeUN2tZ+L2wMpyrlqSFu1/tI1yRdYGjd8M+NmY8+A==","signatures":[{"sig":"MEQCID/vV4I3uFFZXjdwz3bypbHYBzawZzYYnPdAIlRwKrB/AiBQH89crqo0a95lFLn6Cef6LKM/Kgz1pZuBVr122kilwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXO7CRA9TVsSAnZWagAA904P/3tuEuHipk9WXFwVa1CC\nTl0g7uxruC8qcIUcopHvfJM4hOpiF/AXysgBXUkOc408T4FRusjePlTrqOIY\nm05hfE4Dt2DFz/xObbajaNQWgjTb9x3SxPes6WF49mZQ5xY/bPUxWcVkLMF1\nmmRIgAOl8y6akmGErK6JEEZ0K805+/4XMBCndx8U0dWaOf/1U++8nUrmte2S\nTM6G8DPfmRpi/cUADm28853jwoeYk8rf+zaQnxWm6BU4ywecuiNO603MNk+n\njGN/22ql4PZZ0ph9ROJ5qkSyegKFT6eihaHX7zXeo95DCu7g9I7FmwYNiRA3\n9pl4+Z9pnQjJTVUx8MrmEF2Tb2UMRw0F/i4avItEsm8g0d66jXqLfHOI+9fE\nSmic4INpkvRdLHQiuiaafm81ASLLq5aCSOtpf582c+5r8GGGZUMemxr/T1Om\n3oGns0zvqqdO2qrMANR1M/LNFZAVDoq66NZM9Xl+DTHhuu8xdMg9S347CopT\nru2mD8gIM+mAxk4sDxUwHUTWUuY7z41TJqNAnxOc3QdJ9QlUBJr8S3YM1yaW\nyGzV5pBHp193JEnB+EOfuOFOHLEUA7tUzgsTqIfVE7NqYi13/yYKYRG+cblS\nqMvIYc12EJf0AX2vm0ProGBPkl+0kQHTHGNl+Jc5Wpec4jX7/+8lKZtS/g7m\nAYKu\r\n=cYuJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/list":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/menu-surface":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.01de07011.0_1590522810992_0.04728941017590316","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/menu","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"782444429aab6b1706bc8a5d3b3fb2f2e6b0aaa9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.51d4535fe.0.tgz","fileCount":37,"integrity":"sha512-KIW19ul6sXMqhsKc9Raivc0R2kHYKDLwOqt8WO+SygE7MLbeSJcYg0YXe3TagCmXx7l/Gu01mGsLUGnsGhvEIw==","signatures":[{"sig":"MEUCIQCJswhSSJUrcx0fLcYXWWrYLkda0NmmfVWebP7NUWyG7gIgbSItObnJHC8OhtZqB4oG35C+/GvlIqkHAXMZothfXRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvcCRA9TVsSAnZWagAANv8P/izize/VPNmsguvt65Qz\nC2CmX9cOaCTGgGFUBfXmkuhkhTd5al0jn08C7kNLcnwKwpk602bw51DWNCdK\nRrhPMcqxI/Ll+FRcFyuXqrONrSZThb56+/7hH78JENOHMx/3GrrVaMJq5+F8\nPMimG39bAtXB5a2AYbePujC14FZFAuinQpjY1bDKpZsRd4O9SBWGTz3EjBon\nllEcqT6tSJtTGUm5o9AGp3MNbcP457BV3uL1x5Rf3DAvZS7myjBTQjqZPfwd\nzdu++ascKw3C8JUz4Eq62uBfoQBFOvOepSj5b4DPuKhJUTw7g1s0mJ0qfnxu\niw7zIcoo808IMu7NbdOSbVttZQ2pswJmNlRAY9z5VICsauk/r7oR7+7bqPyj\nxWMe44HmzaOQfPvSq+n81SML9OExtkjRQDngUYjKrR5Y0ykGEDKRjsyOd+AL\nCXWJ1xGjCvYmTzlcVH6dmLc4vpjNfLdipx4m8TZ/ZY0jgzomcqIHemDNOps7\nlNOUkqVj9547jjjeunYx/9y/eHHuBOYrRicm9tZO+5MzyvKiwnoxNZ21lpqk\nZxH5dop6WoJ5q3lJ9XmONYql8B9Fgba5IfWtUGSY0eM0A/yRWfoHSMeOQM1r\nQfTvq+a4TjLUOSpFaUGXe2NnMurdWGE8ysRWpdoPuA2mLYbGNKDyGXABiXp5\nUQhz\r\n=h2p6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/list":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/menu-surface":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.51d4535fe.0_1590528987580_0.4620996313301935","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/menu","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"373b983ab1b10ff77d33c491c11255a6371519ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b86d826b7.0.tgz","fileCount":37,"integrity":"sha512-bifoCJvHOBArOkYQjpxtFnLhwiOzNvhzwwRSLBnGafr8MgU/A/h9t5RrupfxT0Qkp8/iNJzci3MJmEFtOo/vog==","signatures":[{"sig":"MEUCIQDKIyTtle+OEs8U4TCXIBm5+w6YUigpD1QPQAA1N9p6QAIgIQBwtrJN84mP/03xMebi9EndBhRuOCB8mzQhXw7nQH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTRCRA9TVsSAnZWagAA/xQP/A7EckiDP+T9JPFQMjCj\nJrRkORthzhv62jN7HwJz1ONWAU4hqVoYPaau2D89bGDi3KI6/sYSOmOk1IL2\n7hv6FxAuri78XOqO0TAYVynFXrcmLOaBpoakHPTNNeupshdxmOTWo6yA2scI\ni8eHFn6lxiVtnXXp8Z6wf6SU5UntRulW7G2XOhAenpUV/dJUFW4j08+HAL4X\nhnLOcbGhMr7D52ij3HQJrVTNmC5UJkXAu45VgU5gKefhCG3JArgcicEP5NQE\nAOyNw1CHpAVhxwrkDNo1ZjAwqhmy5fGiDF9x1x8Jxrh6uji6jr97ef8bCaON\noI6I9Y2T3mdF1tuopreIqzQT9k/68nSyGviOKbgM+9hxHopCXRe4/YAwFgaE\nYB2O3oRjwioZN1tw9oWbyyz+RvpzTsL4cqbF7zg39APvtGJcHtszP3742XFN\nMTvr5ZAbXYa34kQ8+ERVU82DqZw3lHr8LD8lFuWOPw+PJWX9hqof1Da1IxFK\nuUQYljUh2X745QfLTo91PPGZnXLBSiZfM1S9s0f7A4uKswEly3PvSfwUV9zw\nWgqDAE3JlVakV+RGQ3xEfXokY3bnlB+eNElTYYH/TBhqLL+nIdGpkrOpyyHE\n/CMd8ysYpLVf1w00fOY1udXn2iSy/nkvMjTCWcXbnrDX4gumhbWvof0zDL/g\nYGtj\r\n=ZKtD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/list":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/menu-surface":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b86d826b7.0_1590531280977_0.5876930420421183","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/menu","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3d4f26b9fb14fe5ad9a42c2e88282e145cd28ab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d91794c7e.0.tgz","fileCount":37,"integrity":"sha512-aBEE0SztEo3ombaPKhDF0nvTThxR+PUCaXZzdyg7pQTT2zSu2YDkE+HiLpZ6SN4IgoEzfazMlMJYU6OUfuHjJw==","signatures":[{"sig":"MEYCIQC7cL9OWbstJn1X8kAD8a/qRdbmxObO/nvnzUGwdM4/3AIhAI6aQXYzy73F1Kgr2oSt2RNRKog9wMbNKnt1ZnsZSzde","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezayCCRA9TVsSAnZWagAA1GUQAJdzmHMt7CH8FYNrGus/\n9D3emNYjXDfia4iwNfG4md74i63YsFOnssWfgcJqDM8LMcQBPgd/uTu4Xa0z\n6ym+qQomsf1DK2u88GHPq7EPg58kpvSjCXvjn6PPqIrlaHNpoWElhM1dD1jk\nLLTWDIlVgSwFAjvIGlo+5yQDba1BcZTXR0JmgwzWFHhsU8KlBb7urc4ObdH3\nZw0keoArXf0i/YuuIFyQEIect3KF7zEsBKSRmvu6qt6IxxPyAV/o0HSce21R\ncG7HHejQKcM+88SYfE3/kCz9uVGAcfgKHEtYKk1z/vj/TjqaBqQ8/g1hcjhX\nAVfpOBHGgKg4qrfDh0WW9ZDwSwQZO7s9+I4Qxwxozu6ZQnrsww5z6P9EXrpx\n3f5XLMk/z1YqFsQTbHgAJzZpvWef16e5dXZw5xmrUnlvbBASdLM0kVO6+xxM\na6MqN9NpUMmgil3jovEL0NeCSiWVtcoRARdatmu6Tawll6DXRHhf4+nPSRWg\nLuGY061Dss60MOFnlZwlGW//jO2PSSg/ECkemcnlteCxw1dGBuqlCcJg3CQs\nlSI/Z9sb823tc4j0f0ZWR9XN+LlV7snBz2kLgGTAK3vKpDc4betRuHldiPps\nDLJuLL6zLN7CRz8jESLCuSnwxjahZn2atbRmtDIOE+zzgkUYggYdYUo0I5X2\nBdPh\r\n=Xjgj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/list":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/menu-surface":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d91794c7e.0_1590537346584_0.6964288344425837","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/menu","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f03b4f5ed72085b5dd3ad9f131c5421733440317","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8c6d7e076.0.tgz","fileCount":37,"integrity":"sha512-A9MJAeKrGlL//zqEB94RVXwMdbhgt2bA4ZjAzbPWTzLmX9J5JpraZWzKOsIp/ihF1tW5/zlD3NGxtonr8AKXQQ==","signatures":[{"sig":"MEYCIQC98RUVu+mY4SgE5B75Jl+rq6sWXkBnA0Yz004iZFSopAIhAJxLZT8geMPMvrkFcbxRbnNkeB8TRTTURS3ajYBWWujS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjgCRA9TVsSAnZWagAA2IwP/1pSXDE9AVl9ZPhV7vyq\n6alA/eAs/qTbNu+yoaDQD86CV4nkEBekwBWau3zKy7fPjuJbSU0wN9VZzZ2M\nm5qttJVJmxzaQQugkqlBvcVfKPDzZTkrNW69k7SoTccgjMb51uyBEjjQYPp+\nGxljnjpNT0TVp/338wlNNJQ04oTILmOYbVTtk68ymvRygyRHYWMXYCC0UQ6C\nZe4ApE1mVmle30JsrlCQXbIiZTNDt91MOjIHT16CrVkMZ3JGOXpEszcdTPNX\na7glifvLyhNCs2xMhuCsOMppCLn/4UePOi3WvTYVGYEsc39XJk2OKual5/Ea\nwrHSO5iRzEz5Y5zmauItkGzsUeauwDfd0X+bnzO8OXFhWPKJBieNvsk0jMm0\nQO4b0z26gFAzCioX/jfx1RBFJwd9k+LWZtHrSrYpVoDVy2Bmavz+Dvy7YKyn\nNufQSJaeW7p0Zu8HRKXYrOqJkhaG/AN5v86z9dcTg8jZO6P5mV1xXejLBxaG\nTeqGnbErDV9f/u4vFWMFktSRvjw/nhpUKUEyGXD+q2U+vPpX8BjdMr2p2+Qf\n7pfsU85ayBETtwcj5rYLTT9dTGbGRgtXi45qO9eMH+uDdOCmJbWWNUA9q3u+\nAt/qglAtJOy42lNBCZieZaCePXZHWEaN9ggf1s1mnRg6D7WqqDdoRenn6oSV\nSODc\r\n=dvr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/list":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/menu-surface":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8c6d7e076.0_1590606047411_0.7902099882577298","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/menu","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083fbcff83776df1294b9938ab4cbd7f225c4cc5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.5b5f62f93.0.tgz","fileCount":37,"integrity":"sha512-d6sGLLptLMVY3/xLLgaX3XuEPn79TXItZh1D3pGd3u+FLjrvJXp7pEvG+YF95SBl2Qh1v+YCd6SfeEM99Mj3DQ==","signatures":[{"sig":"MEYCIQCFPIIVO9684uqOUNte09hUaeYpxHzCX2N8OhgszG2P0wIhAJphoqPbmonWCoHDoHqyDsVa++weZ8p1VAMBFks/t+tS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzOCRA9TVsSAnZWagAA3PgP/AgJAWix1byRmx8oNafp\nt1annfg2gsb8t09HuOHYMFy+KH3SMwTRj/xLkuUdX7nbqzxBlSTdsTm6JH8l\n79MDPebcJ7PTWpeNmeBjvpcifJiRSKt0dGSCJjSI9/SkL8cwvhQelfN39+nh\nafhfRaSq0uPaqJZbF6r9xJmDenv0oLNdhG9UxFssdDVKMCbS6Zfc3ycEEcEb\nDhe10EBTshX4nczW0TFD/T826NWGrMexBnU2vVfmlLc2aORv4b0uEoYGD40M\nt6DHHqdkIdAXvms0KIE9bVYt0kw47j9fiqy+71iqFKRfDBlLDF7/NwtOnSdd\nMfYwdXLKWFFD11G47v/jMt8FkiAy7GOdfMtzEhJxR2CU2WW82zWR7isuYzMa\ndJppDl2VwWMS1wmi8xMLLO7lGeYI2QPhto1aPtcvv0e3g7GNI2CaZKdi3APa\nHU0Rqc8m+FcQHLq269+98NLFTiZo+gp+cRjGrnTWXe/BSZxKHkhaKZiou6tU\n12AxGjMGppWZGdw0TC5jioYcYfs4SApi6M46/LSsAH1JF6uRJKXckYCWrIAg\nqabHj/zNC8mHvm2/UiZd/+dUHnFZMpL3cOqNkMsUqXpXD1wa3+Bm/e3Vm6kU\nZ4Yc6DjoB3jOsffO9cAu5lSMR4QPnhg+Ju+ZbD2u3w5a2qfkS8nYnBNrRTYy\nEI6z\r\n=d8Fd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/list":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/menu-surface":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.5b5f62f93.0_1590607054210_0.30093366866320825","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/menu","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a72af5023b376808478f5e87090a9cbad723d3ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d9972abb1.0.tgz","fileCount":37,"integrity":"sha512-b0caZvNXrjtxBQ2gAUCDM05lU8DVTV50vBDVdurnMuQsF9F5DDNjHju93/wjPjhoQuWL2xM/bLaDaDll8KwSOw==","signatures":[{"sig":"MEQCIEw47vOHClQQH2KpBfotOAaHD6n2kTOIFCgsKpW311loAiBlaF3AKxamtQUZ6V+JSGcrqzAUZgd+RWoQlHTSm7mmLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvcCRA9TVsSAnZWagAAancP/2L2K6/r0ZMni1rOe/js\n2Fe0NAJqxDY9P6w/Evz12HmFSwJoVWeZe+dUJZNuy6LT7jzOEdAxRLCXviD0\nHmwYDX25OSUGfEk+4pLNIDo8+CTOTw86OweabdDn9SXLCrfq7l4EbjAEi90H\n9tECgJoUbxpnsAnZNIzR07LuzDUidOvIwTOS6xvaP/qOyWcB/noDogXbgaEh\npiiWhJUIMLusZ5c9RjdxLR19K8Y8hBEypMy0QiquqXLe9hJWJdb8Y+C26TcC\nHt4isfDqwBEfXo4E6+P/H1qbZQNXMS+XQj7eJw0QtftmkG2xXB9XD1nj/TKt\nhNEJqxopYDoVA7/kn5OrnUzFFXfBjXXhisg8boO5CVkynDUYieaYlMW+JCqo\nd266u4UW3N+79vCNCEW11iI3ga53JYlOL+PhjpCvKpG1eivV/a4c7ewYKtg6\n0qAYC01kc8uayf75WyjCFEqxHpX2kbV0CXxYyloxcDbxmLXJ4rtiRgglEjIF\ns+54YXprHhgtXW9dtU5VnUJQEAiQ/geR7MozlSu6f+uAYpFotgQxLLvIgx1U\nOgtZCvLLnohfbF/UTRw6sgWTBR3DuZztgS8MU9j0wE7Cd4Y9LDwtDfE8AyhD\nLbgwTh4MXInwTGRJ/GP3RDWKIit1UYd5e4LQcjTx33rzc0h9MOB4Ealk810v\ntyM4\r\n=UVhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/list":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/menu-surface":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d9972abb1.0_1590610907975_0.03464334862766294","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/menu","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0ec99df6102f633fde681f66267a19827ef846f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.6556eda2b.0.tgz","fileCount":37,"integrity":"sha512-Y9wvwUobegAAxBeXGRRgDpgipX/hucwn1edu55LS2toBCzH6hB5jcyb4UpkEYlrF+5+JBQ8OkHm4giS3/cwNbA==","signatures":[{"sig":"MEUCIQClDKSlb6QXmNUWxqzkVtzw/27FvAcqWuC3AA3kUqCD5QIgYPfCI6k3hHNHairs6CQ4Zky+3biCyDSAGqPaR0OjVLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs4KCRA9TVsSAnZWagAAJPUP/3dSxQ77gZrKTAtE8tMj\n2wkMHFFlHLQcy1egjO5peu5q/tZnFluxF2TjlQFthi5mI1mSEgbHUFXos9y6\nPbQG33PlYlJT6mx8FKqlF8CyGmR4y+Qt9SOUnYzx+EadeE36fCgUNwoJpYDp\nr6lPxNbSWgKyJkBKdiIXQXFNOaTXMLHzcPm3vxDfnBNKciOPOPTcidQAGAb0\nGbC6+uCOTRUJyrR4wiOhNldbazWluB3B+APK+HvphPg2TnDcU1XWEpru+QHu\nOXmXlAih6BaF1Aj2yv6lRNTSQv4xgg0cvHs0JdPNzC6eRFjDYakg9phEpAN/\nRrksJZZMDoK5y7G5xYeCiUc1y+jJTkJbF7vTnrsxizFo81Q85Gvr5BZVy666\n0Nv5XtBJMu/o+ML4to8WruLw4+8+oXSMXaSpGkECMEEDOlmCNHYVz4l41oUu\nAzIZiVgnW66A3w0PVowETk4lHfOfI/H6aWvFfz11JzWC5AEZ8HbPDYi+B2ma\nERcH2b1YtkuSw7N4fSr34VcUjJI3lo0fih7sMI59TfOG/oRJZZWTfANmVMEj\nM8soXTq3d8OCpwR/lzh5Rz/LX6ty5LsbAfpJs7ZmF54pmt0R7rMK9KB4hrT+\nUfveIwqbcRcxh3KulzmMViF1VzK47pOq71QBm14SOeOYtpanSkfmrpL6z3TX\nZFuI\r\n=26QI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/list":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/menu-surface":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.6556eda2b.0_1590611466051_0.5527507326388938","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/menu","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e3316317058aa2f720b3c69dbfb94f769e6a9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.32aa23641.0.tgz","fileCount":37,"integrity":"sha512-ZV9JI73L9RPXBtH3HWX7Wi1PSkzct1TM83Yo1ZsI2EBJ178nWq0QGUXTNjEMj8e9DESLFqYKeh13w26tlrgW5Q==","signatures":[{"sig":"MEUCIC5/K/4nyZMtU+1ZZds4anJgAvzaZdxktRBWAdpRMUbSAiEA05PB14U5vIckjffSwoN+9af1iWTfRqRLQOf7+XCtlVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt4GCRA9TVsSAnZWagAA4LQQAJV0ozACTC6gIX4N/4Bl\nRpkslgYDp9ssanHa5dZkNZZWc+ipveMdFQpjNnez023g0ZFPufLMxY+droj+\nWHba6VjtR0cpwXLl+mxj0dFlc9/OW75l9U9NFDRb+mbAyjqTbvzBty9YaTSH\n3OKRgZ/pLl3F8xrgwbDzptc5xctwgZvvuG0uNmRcBqTkApZXdxexwZnmAj2g\nE6dMsQ69C7MEXS1zaXNakKG8b4Fb1Q+HsnL5k4A02wHeNNJMlE0v2uvqPaXr\nQJWI9is5Le8Ub3Cx2o3MP/cx8DmgPzqtXBmlE8gSopsmmNY+Ap43NdMmXAeu\nk2LooV01idEu3BPMLg3C0ymX2ELjp9wmXMPZHNQqHurxDS4DSJY+JyIvMa2g\n2L4AT0VYj3uGTdr947VrdiDkG1xGNqTMGdCClPyFnlPpCx3IiEv5AKfl8X+C\nEdAZjdNXAU+RcvofkBeHqoMciYlk4m8K7/RxT6bODwENyNHAiXkkb7x9vrHG\nHX7T72Rpe0vZe5IUcVEk4Aeznv4OSyhwbnCQYdQdCrbiaWgJdN/LOcjnyVXK\nrjniBr6NKjKsMuNyXx69e/dWFTKUnqAeFzVWYd+voVkVE+4pZW1SFeco+M5k\nxwOJ4/fOE/7+Fl7PQbXJ6wSr1ci+Vh2MdWojxgG3RabXoeeHa2EWThNUyt+7\nlR8X\r\n=Dj+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/list":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/menu-surface":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.32aa23641.0_1590615558386_0.7762154765450917","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/menu","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ef940a7cbf5c7a3384fbd794074bac9c7a8ef5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.654934dfa.0.tgz","fileCount":37,"integrity":"sha512-Yk6KcDZTnVUDrjlmzVIe9j8+xiAFBcVIp/VMxrM8pZO927n0xLNCjycA3ahkPCDkdc213kRUD0qHRuck+a3/tg==","signatures":[{"sig":"MEUCIQDB9mjtHD10jADVdQrtwTt47Pkebn0oAFHjebIvCPacUAIgEpUFFxQDUEIiZUMgN9AwVYLnxqyNv82cxOnYuqINGZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfrCRA9TVsSAnZWagAAtq4P/j64med5z40wNIePVZca\nbgaO733OPBIXw+2/8BMfcLy8qINVe8Zz9tFQk/+6XYToZeTvxhEISVUQA39q\nAK6OZ8QAM1T0fFdGyrEm5DLIUPWGktSHQyF4gf/4Bh8ML8y4itVRJ/ftgi11\nIsVdG9/wqV9G6zSlmMIemrLae7j5MU3BGtberMrRn+T5trOaY4YeLizE8fGQ\neLaccWInndGkVYJRuKPAwZkTwbXs/wPo8f7wksZzUckT2I5Rs7P3xd9JfOsk\naiiF7MtFSZ6K29Oav0atBrQ/S1R5uUbFJZxH61l/gHIbl0Z13ClLpKzEzAbM\ndPtrW+R74yKfXHdb9QpvbPJ5jWXQv23/CCWcZwvir/OWdvZzwFjNeduyGfA0\nN4vR/yhzdOTZwt6WjiQk9jRFwzni9TZKM5vL5yQM6fQEIHjBSv4IZt8MJrGR\nToOXj7gO0G8xd+zEYWFx+/CHY2FmYySJEE5bAB3uAa91Hn4Uf89/DYAw4zMk\n2rGXkesBVR3zeYUKlTLttw0wktFr3tn0jYtdDcq6BXbhtaHN4Uyp8hzNyOU2\ntA4TCOcjP+CkZNPqAVUcHxb1xiIgWmOhmfdEX8pnW8D3qjD0jE3DDQW0PD/m\ncPJIb+7KLymThU7EPWT8e+gIvU9YNz4pZ7b6u/Btzk214D9P8/Jf7DHUdvMT\nSA3+\r\n=VH8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/list":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/menu-surface":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.654934dfa.0_1590626283123_0.04159314621318466","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/menu","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f77f1075c2e96830c2f6d46eaddfebfe57dd3038","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.41910b8b8.0.tgz","fileCount":37,"integrity":"sha512-h+dhX5lpgrlboph279vy3AEGBMTflH0cRF8/1CS62KqYJNHEXrpY9Dz+2TSEAxYq76LA4FjX5J97pXf0CKb2yw==","signatures":[{"sig":"MEUCIGWQ7sbkQ7Vd9S42SkPL6Ui3Hc/WiQCpGrlNk5LnI4xCAiEA5rbqK+J6zh8KuCK3Afe8o2IwdGnARXN9DeusU0ax0FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezws7CRA9TVsSAnZWagAA2XUP/R6a8lkP81PH5BcoGOBT\nLlziw5wkBh3XJvuZeIQ1ukXtAqASjUB49BjcS86mjlUyznYC3xPv0FR8FGtw\n46+gCWmaTaoCW1emRF08y1DhNcyes9E0CSsTOxfKfVyKrO06H++QhKY5VBmn\nLbYqMcZEfdszAw+ztKeaBFjxlHNVNxpwsN2qWr9T0x+jijbo5PIotCuH2wF8\nRoZuUywAAnMwy2+ZOb1M/oxCJdgUqKx/drm/s1npnEqh/a0dATXeaEkReeaP\nQ5WVDP4qaJ9VGgZjohJRoQ0te5At7qqUdd1BmZVtUDLSPJa6K1VpTZLirbmc\nSpNSrqbSeUOKamEa3JBAVM+4IntIedghF8JzoTELMA7LGTC11Vo2GXasfOb9\n6JmzWbozc8Emi1omkrVKkMvEEEaZ+3dxxSkt0kv5VEQAlDtOxfpABz5ioMTT\nMwtHnRFggttwdMCQ2NVdY0z76qExFGel41Vaf8gA61D1XuSJRZYuhYLvjLX7\ny2kATvhWtvPTJNjPEYEOiT1EkxFgLVzSayAih0rMvXTikqyNlEOYkKkAPCJW\nmH5wEyqwmNsQM6yYbKn/54KXbE8l0hzA1xpReWoU/9U53xyuZUe+1CKTaT9W\n8nuvBkhCOqFKWE+32LkJXy3IbcyRASy5MvMQAa7l3sWNNiErMlu0PvRuQCNj\nWbSm\r\n=4A6+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/list":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/menu-surface":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.41910b8b8.0_1590627130818_0.28352683429017045","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/menu","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e963692cf089fb22d4c3b0679e67fabba90e69dd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d66d22bf9.0.tgz","fileCount":37,"integrity":"sha512-D7HBD7/j3bYymNaumCHWXqWkvLJykoSyPf7e0oBRDNmS6T0HvDpqOKKxrZQh8pp7bengA6IhTDfVXN4VYzw4Tg==","signatures":[{"sig":"MEQCIAi/Uh7sfv24wK9lgT6t3x36gmTUa6bukWmvZ82DmimwAiBeEM9/L4DAkzwIxjVutN+ZcWQMlQr1/VNr/gBwQupgkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdlCRA9TVsSAnZWagAA434QAJt5QnTOJOFKCzZ6CiTd\nZSQ1LrnN2nZXSJM//f6uRUo69vAKY6R/3p2xqVeHghmpYB+Dyf+iKW7vxDvw\nhIA9d/VoVtaJpPuT6vZrxnRcMexC2ocX4feacfMSSo2pm1d5acn5P0zcs/xN\nByNhgPpS9JbfMf0//pOqQLDPCeUbbqZ6Zl6fAwW5ID9yyLn7fgDrI85T5BA8\nhs8+TZpLEQt7SDCRjZkhcJ/WPelQDE0hrEWaiujcLJfAZRyaVDZEcedRZRf0\nqQHNPyBMyIBc6NqN2Jj5Qvyi6Qt9tJpumIbcjKqG9dQZN15wLtq0A82UtJye\ncaZysLiyAasgPstXDkUPD6begbvRecJ+e6LhUABOsS17PQHqBvHmmMveEDZ0\nSqorZI2yiPlWJuC0Tb603b2cAUhgz/UpXIouJL11Ix6DkV1Oa2flmncqkLrq\nppZ1aooi+YAx2N9r34g2Qk394KgG3/TfxplJKv/sSt1bXzDPTgoS3wzoprPL\nYlsssJtWa0EJR+OPOfvPEX2nABWn+NSFwCTNX1Rf5ExC0XeNNFz++oG0uecO\ntP3lIcUtlTINyyJpDvmmt1AtZ4rRasQ0wxVNfPYN9zH0AFSTJl7Hdd+mnG/s\nUxvajPkztx0cHpwStZB1iNDiI4G1q39ZdqcLHUTUzh4cZE5g7MLrQ00J9MfE\nlAh6\r\n=yOdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/list":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/menu-surface":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d66d22bf9.0_1590695781273_0.4876081146887785","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/menu","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"980a6fd8eee608bfe00e8a13c46861ebaf38987c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8904f3cbe.0.tgz","fileCount":37,"integrity":"sha512-JQgcO3wiurRN4vxgVFthsE54U2tUWnWrwjzl5Ar5gIKLnwHEMX0FcF/YbqUZbEhOWP+eVKHr2SrcYv7MBZcZ/g==","signatures":[{"sig":"MEUCIQD2TiRtyqb28Mp7u/pE1sf74G6AFlNrXltYoObPTvAifgIge+xb03L9ygLTUBdh1eMEh/I7nTxv+BQkS77mhOULbhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T2FCRA9TVsSAnZWagAAmesQAJzy8XFD/MLmE43XxVom\nC9KfcjgYifiGgNss1E6o04K3aIU9/gTZJv8oU6u7wKrAPulspkAsuRpYTefc\nlJ3jPyrfmc7fDB5o9qYUTHXYMRXpKmY3UdHTo/IRWvDI/06Vl5VANbNshIRk\nMMjRPVwzWYAm8Rp14pcC3ZJkADOMrkwViPHeNv4jTfadlUXm7Ht6pBqvUfLs\nih5ri0+rL2KFlA4CKZd1taI6NsYHRmF7s1V/R+S6rnOtLgT8See9dK/WRo/O\newYBxhEAq+poFk/zrsBnb4jQOeMJgjpFJE8xaRABsNw3USiSbOrQW+0GA8TX\n0KiWmMiIVLw6ZS05CvHcBRRLbmnHAtOt/UrAFhnnCJdcblqpbzLXMtmbxhTs\nptJnd2tqB4p3Wg0QPD1kEzOFjBAQUx0BegO4yeQVI+b7wDoKJ6+qNN+Fyk1Q\nWbRyuG2u+A7+nlQDoKr9Q/z+ha8kK7aR5fu72RuiY1PdCnCQKckP2XNuYodX\nKBJqjthCxbrbqCfobTSJuzZp3lgOQOFxM4Z2IGG3qCGm43rQZoXI17I4xSMM\nscnj+FNL/8HsDyLZdBlXixL4ttwl/eqvveL10/OGBM5qcfrK3HItfv2NPKpY\nZO+8MLYV0kXhC4VsHk53/fmIH/TSlnNLMav0TEmfKH5s+ECdJoixH+gGCxok\nvMlE\r\n=i6Rk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/list":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/menu-surface":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8904f3cbe.0_1590771077336_0.9561613763910441","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/menu","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ffeab638026e747c464e5be1074a6be20a6b7d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.51512a4ac.0.tgz","fileCount":37,"integrity":"sha512-rnzeNeTQp+kSBbha0FJiAr4Fb/pIA8qDnjiba0Bl/78MJlQjyWgm0Pwg9vA9Qu+WzvlNfLlMSv1rtWVan51rng==","signatures":[{"sig":"MEYCIQCuPrRH3wECLVjjlXG9e5WZY+ZqMIUomBdG9Pm6Ff/FvAIhAM5CYbiwxNT45eWl65KQY0ACE8FreJW4qfbDBiJW2Q2X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V95CRA9TVsSAnZWagAAEm8P/i/J9Hq4WkWTU8D0BGXz\nK2CepQuosVceYvxM25R/dQyEi1IlRhiuR0DCetKXGyXSz4okjR9GJ357/vAt\nVwvpq8U/bv+2rtv3TyN4C2FJQsBmIsExF0yLbyJhVdMP/0ZKmD90UzFTryHq\nQkh0kXlnTbGZGczOrSR9nVlo/nl3T+XX/FGiTTm/xQ/qxuWeCNZWajDxDvN3\nsTjtBqS5AWfc7CU+ie1v2vzfdRkKWM8+4RAasNgMXbO+wJ9BqNPBjrml+/73\nW9pQjyv9cNDsuTWZnRegGRA8rw+JoFhCh6k/35c8oFrmC6PWOt2TFuwqPHSe\nOim1zh9apmdmu5yLqPk3HQoOaHaLiJFBVge8Zg7dM373vyIEKOY8K5TJ0qvW\nINNdJrLvaaduOyq8ghYYgKQ9S31dwQd87A7KY8/o352qm22whAI7CMEEXfgU\niBgzbpmNhkZK77MqRnicTvFaz8leI3vPVYtNVCP5dT1lTIpFOXf2xbvq0V8b\nPtzX7/1jDg7mnOTMaDObs56ZKn3+/JJIUzmbxy/z+Gv/AJYgEYdt1vtuo2hr\nvdOu016A9GjZU4vdVyJhMQAbOV5HT0V4WAZXvMu0yZsD5hSopYVIfHkqBgc5\neufJe9FU+cs6tIQYuozts3LNfJ+hfRCygtnMAUY5aYHPplGySNQpqXdyJ1BT\nahNs\r\n=RQ3x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/list":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/menu-surface":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.51512a4ac.0_1590779769414_0.3860870068874589","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/menu","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e6928cd8398a02810c621ee83acdbe913ca456","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.0743288fb.0.tgz","fileCount":37,"integrity":"sha512-9LVNG2k5aAYZoxn+R+1M9ZjIvVrgeAOeUh7csmw5QS0/6JCyQJmVWOWOMHRd4Q7Zp1ZVEnmr18ykdd8dMOpsnw==","signatures":[{"sig":"MEQCIGxkaOj6GDhqi/PIr6qvtA3TL2j8i3Hy2qFmCxS4eMJ7AiADDfr1Wb9AD+FpcgmIn905K+7rxey8vWSERITvuosX3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsrCRA9TVsSAnZWagAAj+sP/jR19D1wh38OY5VqJxym\n2BjUiqMkCmYj8vbANj+vlr1aIRs3wAwA7wWKnLwJvwuxqZH35QHZg7ETNsU1\nVAbAtOGrbxipB2Fs01VOHwsUP4qiyHADSIdImZ0wD0ZcneOE6113duFkZH/P\nCCtl9r0MxdXsJNcVGfG3gnm35o5ooOahn66OfNvbH+hE/abLb6aFxde+TbNz\nyoTW4wPRdCOd4ltSRPl45YBWS/isPkUfIh/JPTVVJIv5biNVBv1cNOIV7w3c\nS0ZBwPRCHNVuKVQ0ox0nXdEVFExA90QN4Hz7E2hcuRLi9iOh95SYfBUYbzh0\nlMee1CDaU/O8GDlkQaKVDtQk1c7rbq9JXnoIKO+MAifuvghbTpXi4iyu8gGk\nnVscLQG0D2iIC/h/sbSTkx4WtOJIgAzdEPXlYC0SJF6rTjwGJam2iYHkRQ/A\nQAsSzNNTiN2gE32JkjbwxMCTTRGOrtgIxu0r/RJbY8uscbSYHASA7ZcZ37vO\ntj1URH0tPAdSKZDF2mEK+Kc5WeiNCuqzHyoOLTv9P1/2M9b7qgr82DgMi3BU\n/1N/GOMoXVVIyEnPxE8Hgzmvv9L7bWyQFHrfkXAt3bL7kQQ/9ZExw4K6nROj\npMUm6e05cxKUhD1XpJEk7sPD1Z6gw0T6Qt0SjGr2tObFiikEsU0+fIzfw++P\n491E\r\n=vlCb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/list":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/menu-surface":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.0743288fb.0_1590782762525_0.7657927806630109","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/menu","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a113f3deb7c030045b12ee7721252ab10b67ca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.06ef147b5.0.tgz","fileCount":37,"integrity":"sha512-6RfzHo7HWdRXhazGy3zMYtsmcELGrHRT0zbvj30/l94kH0KfQ4U+lICrPEdWYiX9N4JFJtPspsTewTe0pDFFVg==","signatures":[{"sig":"MEQCIFXO1V3smVBWgK2jCofG4oz6+z15C7U42eBGWHdtOwL4AiAMjv4J6D4fTf2QTbqmFZM6Rz7FFHy+1PFWtlJMTpvLaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XODCRA9TVsSAnZWagAA9YoQAJhtP69IFGkP2Uq57H1U\n/D7Oz6ojqBUbfRm+D2AKNk/7V/vcUt5i2SgTVCyOMfyPYk/c88jU3rgYYkaT\nBB53Q/yvRIZHXfJHzMhd6o1BQ2bOciU1AU6KAljKaHYiG2OTfIMAq+kKINn+\nZVptKyfIINnskeCAdFXxT0lA74fpEP6dz/9n4zviRu4YfAA5FxyEC/v1Yv0R\n5CuKeg2AqPIKO+ZmEWnfsEaiw+w5tRbji7v1Q104DIJw7WcoCZYNPuFxmHQB\nNH7X7OtHwaxpW2Zv96C8DSXA+213NHEg1cDYiMpJ1C03LfSvfLGbkaR840Le\nAWM7qo2ZNyDaVRfWLhtuhQlovdbmvOhK7smId6UFHm4aElLaWmM/5KUvgc+g\nB2wM7T1GwjQ9oBzA5FfYJbGxbm0TEIgKMTY0VsEsk27B34QiiNLsfN7fWIiB\nS9JMXkb8gTIKiLoMIWGVvMqoMDeR35aZToXy34L6NZf9djExHmc3igXuzRBF\nS5IH1jd759NstPMlqQ8yMtQjuDGIdCIPJvABFiaCUTVO35EJgrlLJLyktchg\nlJtlp8lG6FgguZ9xGh1DXCCQGte/Ecw4Q82tiAxpWnYn5DkklqpOoYniGClm\n/Dcgzv6wba1F/5swKPUos4T68BjEC2ZzVS9Z48D0FbSjrIbdBJfvU2idK6Fj\ngEUx\r\n=hXN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/list":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/menu-surface":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.06ef147b5.0_1590784898979_0.8122859491892407","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/menu","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a968aa5567eefa3943abbff645e5fd45c26f574c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8073a20a9.0.tgz","fileCount":37,"integrity":"sha512-adE5ljMz47kjQYZxRUsJ6r91U7/eIe+tehuf1dBDDVoPFSFwr/OG08reD/LWAHaiButYRAEYEWZadsBpvZXByQ==","signatures":[{"sig":"MEUCIBkIHqZNn9leqWqtfpHyI9JTP63i45kjxIZ0MpCOiZtmAiEAn29xIO5FyX/5sWj67DmBqkgGv1P8YfLONuFi40SLaMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZosCRA9TVsSAnZWagAAyLgP/2JkAjLify+DP+2zT2/+\n2s1ePKalKGn/strOwaaEEjTu0Z1KoLkgjiwx2BIgArarUXjORtc4oKkaanu3\nlhtlMloIzDlCH+RyN/TXW6qhIdGLTGTIrgADgXmOvuh+Y1k42KSO9Uu1YGEg\nAe0SJ2T7f1AXkJyM5DaiKyKxITIlKVp6x8emQEouMvGh15qrEHqWgDjMpi/X\nCtJPtCmMav9MgaJ7rIsseHAuhOwcmH5KwZVCtCvJwuoqaHgw02AZqsOEiaZw\n+z6UYq1BrRylyoMOvp66PEcdCln1D2QmqRp8n1Qfg837QOMK/sdVARlz36lW\ng2Na1A1ouIUU/3D0Kb/fN9tW7d9reogM9A04aiiF4yNK1OmNttAFBZMMtNuI\n/tOdLDZEBXf3cJxJGLHcNrxgrKlv6xexrsizOzmqoN90hDirLV74FzplPddm\n22EaSnwTwAuPLngnYnIHwZjfg5mW7AOZUBAPt1RG78270P9chSWssdnT69oP\nrqVGXv1YwdOmoQrIxAkebD47bgB25yNH+iOOBGs84e4dXPvVTNnOv3URel8X\nYux9coHCrqMuW0RnxG7ltI8zeOk9AZa1OIzuccrZP8Bq02Sg9vSp9k13VJWT\nRwQSyuNxVuS2kzAVDVDTh/MKbVbXbyxf1OCrN2opm9WrQFVpHTJ//Fy4u0Zv\nTw0Y\r\n=ZpSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/list":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/menu-surface":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8073a20a9.0_1590794795601_0.26502523726558924","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/menu","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdc13367305703ebf383c73f25128f82f3d3d13","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.72ff42330.0.tgz","fileCount":37,"integrity":"sha512-9GZsbR5wl6eqOniACHr+dWwG1Ex7jGdO3Y1VWx8WvZcFsgZXeeDfhy9RPE3ldgXCwxDMtfVAe9Av9A2Fo/Po+A==","signatures":[{"sig":"MEUCIQD1R74C7tfNhdpPfwnrEMvYOVKj/009/9204qtVYARjywIgCjeVhPeqNuELE5V8I8lk6JYImDpPRTudEZxDb1KwESA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TChCRA9TVsSAnZWagAA3oAP/jofRoieUlgt+UD0CeA4\nrExxBLqagSonwmHhvBXYV5ysOoMU3rl3WYJVADqn4yO9iEkzV2T7FRm8ekfz\nYOeeWkbZlFn7qIbG8W8sS8kdUip9JBOIFvhPZJYpPiIT5+JWCeb8spndcV/V\nV0MiyITE4CK+1mB3kieWh+IKI8f6PWPuSE590xDGCBC4/8hbOpxJTD6ZFDkb\nk41YyxcSfiRjaHwaWMP5hIwBYvnFGMaMrggSPm4Jq8lmm3XhPFuwlgdKYoT5\nGeIOWtVbcdD+7mKHm9x43LGXYbtaJCWNs0gFa1Ia/EhScbquTgYxXIXpe9IM\ngDa0Su1gE4K0lp7eyxDRLMhPbVBwkQpbIAM4+2RCaaqX+SEI8wyBXR4B7t1v\nwecNY3oDUkO9t1WHFITsfACKmwmg3I8fg7SSFTYp5rLeVzKXEc9B1EORhBY7\nd6B5+Sf5jkK4CHMAFPfzr7XzNkcDWBqewEK4zKtNBjKnQr7VmM+NSnX0NJ60\njdXhR+/OC5gNM8b5fpw2lJujVU98cOYHD4NDYomVbI3oLnwU9TkcExIlS2Kx\n5mhYEIupxHTCLqJLInsKbgqCHlppDdou0sqDuploHm1CIG13MoC6u7oKkOqm\nfwtsaqugmraeoZMAsecl97G2SZYvKjWEtFDZJp8YyzYLw9Jphln7oABwme55\ns04a\r\n=ke/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/list":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/menu-surface":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.72ff42330.0_1591029921319_0.13369652997433001","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/menu","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83fd5a862823b98c13f7a1c235372f41700f6bca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.9ea52070f.0.tgz","fileCount":37,"integrity":"sha512-EjFT92cqJ1aZChT1jJ7paFfVvONy+jUVcufphj1GXFgkfRsUZ+tfNI6oi7NV20cmNX6r/KbgPEgdNF0pBcHXcA==","signatures":[{"sig":"MEQCIGL5k9TDlk0mCsoAjuU/+MYh6ZKWR2q56OtSimyMJZfQAiBy9hbxkkyjWilxGX5f4of26oHAxijD2LLcGyo7DDSSwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TG+CRA9TVsSAnZWagAABhAP+QGU3IF5/XbMmG6NoQMj\nKJG+CgEyI2ilU9kOfX1ZSynD+hy9hrDaNbzPv/3GlajWogVKuycGNGdJ9Z1D\nwewkapdfWIcLh5IJQzY8DwzSarlHVeEMyPlesEg6yO1pMCCy9aFgrMK+Ebth\n1xG1PimjJ/lvemrHKHKFhKcCsWKmo+mk+aN2508PFGmw6SJZItqLYwPy6cTt\nD+vqs+7flBB4EDRTNi50BB6XBpgZRKnf4FM9xETGanbmAzNUb/sXwmn38vU+\nQK/n/ViGsmZ++j3aeBpy8D6/y/iZcrtp9kAPXHeeQugtqowLBcx3BAm0xqiC\nwcl1M2Jdak3bP8OgYZRW5Zxo374TuiX76c+FZ41bwSOcgOJFJtLynd6nwZE5\n1XtG9t9fJMIG2+n9jlMB8p0KqEwaL7Tzv4wwDxlgZJpbYOdlA5eRB/MZphgq\nqcHWVre4ZNflq6O5ahE3blsdnilh6Vb+5Y4mPgBPEe6l5N4BcBVns7edjR8B\nvGybUMVKf1O5g2SajySd+2h+ni2mLCCFO0EwhhE5XsA2Ok6tymR81ureCVrY\nu3wjtypNV8GPe02h+VaR8pVw1xTY+39jJmF3n6YfDe0N0UpisvQyZUbiBLe3\nUJPA+tkIGPLGk5Yj/lSzRPeFVS6kSg1QJBx4TpycYFOeVS/hbU2ZcKPi4KRg\n/8AP\r\n=d/Wi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/list":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/menu-surface":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.9ea52070f.0_1591030206157_0.6190609021760203","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/menu","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ab78ca1d3f89fe765db6f436cf55fede3a0439","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d86ad3b60.0.tgz","fileCount":37,"integrity":"sha512-EHuooJy2JpcROVDWfGm1urKJE+mREwsipnT9Vdmdogova3Em8Exe1MYTH72OjC930SM0xQ4jrcdPt4u7FH8LtQ==","signatures":[{"sig":"MEUCIHwLZhTBWEehwNE6mh2JKsrpLZHRvniwrbV2VUeB8X9vAiEAgqyYDjR3meFRuwzMOhsyDMmw1X7cDErruTvXBgm9XQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+6CRA9TVsSAnZWagAABAUP/R5yJyG3n4KZIWN4zAps\n5Og9kCPP492HfbhkfrDHYLlFZCVZFdt9+rfNswPfBWONnyOgqYhNoIWSmpFG\najVaGha0bLXAA3SpdI4FHi78OoSKYyZZO7ohjTmR1T0vGHmXSLg6gwf0c6Ew\n2/EE0YbIUPVKjs+VlGF6nnlTHZWjwLwul5ZrmKTKnw9LlCDYDl6x/a657P5d\noFSFkBCjPVN6tXJp64bqpPR1MG1JOdKf0LbMQfLoHfkKfyjMxVOfW58vxmSf\nCk41ydQoG0YMIFKIkVRSPXqA7n5gaItu3okbln4MJtI/9NqXZPptgxNkEBrZ\nu2AZER5gk2zQI8MmWFMyPsze3ZlZ6a5v+yf4qzILEz4lkGLxCpc0aluvezuj\ng+eQZt7SffvEGSeGR9i3k4v0lmek8R9vYYDOIKGskrZTHWDeWEq+IpccE+N4\nsagkGQDGXNu5ZQ69jKQY0HM6bfiwcd6tE6777ppbnCRdNLUCce3L3k1wlL1w\npwIgAK0Movgr8bmRdCtxBhvutsfvZ1LUe7DbnxOOEhG9gNowqCRNdot1s+t8\n02hVYom+zsrYObOgB/Yr3NK6yy4I0UnIUFtae043Wt7r8zCI1bLYrzCiyqdL\nejJjUAJBUHuw8hHEv3hxVkxftoyTDFuLvHckUC/PS1fh9B1Pd7eAsqkS+tuk\nRbI8\r\n=dABs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/list":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/menu-surface":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d86ad3b60.0_1591033785711_0.485128860080702","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/menu","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26dec39c3973e7eddd85ef0ffc0bcc017c5988c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b9776b1d0.0.tgz","fileCount":37,"integrity":"sha512-eVr0ummuDJ4vt9bNw+IMyW6J5FzdE/2OXM7VcdDueRwcJIsFk6MNUV4je24MU4M/I60mT6poP06J6YcSRIIxyQ==","signatures":[{"sig":"MEUCICQFeEtpmX/7FYcowr6xLhAhMh61UbKBylwGVFniqyQXAiEAldliBiyLGJrvJhSy93AHVIn8vdblu/0k7wnPnCQJPp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Uh7CRA9TVsSAnZWagAAvq4P/Runp6hhZRtj9xl5sSGW\na/ecMinAlIpsCx7tC0y+roGPuhOoIzZQx31agfrm7aimsB14M9y1LQwgIfZG\nosQouUZ4yDz/81NbmdIJCn5JlcMCCs7tym21CoF64eZC6IAIEMiewq0sg+TM\nxR9F76Fd3sZIev0nu+lTrLIf/2hxcDMDwt9Hx9ErIqv9ij3mwqRp9AvZdfaz\ntety5lKOgwDy09a1xoPfHFFgXjdLfhuuUocuU/xk/bo6/FDlTGdaEPS3MQBV\n5Rh+OYpEHXan/NrUFycB5rbhSwc8atz0xh94xT0+Wxh7lLiE8q8ytl7WX3/3\ntXyjZ5FaSe0LOWApC9ytwiU2gZ3S2TgngIcJZhuwW3IdiHXPT90DdkDG255V\nPRh1ZnrMmEwVsv6+B6Vm7oMHxgZUN3RCVHeEne4gbYr3S+Labnnq70o0uPrR\nny0H4bIzqXUjVaRji1rwaT+ePvfS/9V7CP0QQs/YvJ6CL4uOJgORftVpZkAQ\nGC7Re096rpgGRZ9EOaKMVGwLh9i327oJGwZuppjGzTBQW+DEMYNPb8xHEYbQ\nvQX2Av9+WLdwD/PTZU0eut23ix4c6uJBcviQlduiFu0q3BvOSjGDc3KC52WY\ncubdXNb/sH7crNmKFU9NS0CrLEQN1LvhN+7WKyB+4WvwsnXoIyP8lstnyWKf\n4yxe\r\n=sBPk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/list":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/menu-surface":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b9776b1d0.0_1591036027517_0.9331449858398511","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/menu","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069417d35ce1f97ff5a9ddc2a8a967857d42255f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ba6f7c294.0.tgz","fileCount":37,"integrity":"sha512-9CynyUIMLoZ7o7hTuoawDFQBCZBwHX8YqD5bUAQFq/STSFacHdwLeB+/yHByVfP/Zo+k9Ch6Dxookw+t/ersOQ==","signatures":[{"sig":"MEQCIDqlc3giOxusZCYzeV9hdNhTgetZfFa03hrYq3pHZnu9AiAtKAQZLAF0sphhFAlX1Cz24CDUJo9qDif41ONFIz/2WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZvCRA9TVsSAnZWagAA16UQAJ0TT3CMC1l3pFkr/+QA\nWvR5pbDhkNE3kPt5Py3O+ej4cR8hcsVMuUQUGbfcaUmDyrLIjIveXGMw+fl2\nSlH3KJzcW2/dU6UsHupY7xBIWIj7VSCfx6r/w9zDAiv+h+QlfSYCQRKkM4RK\nHofLFwt5pGQr3aRYZEWd1CmBcp0voWeMArEboXwq9tZvTjerMYJUWK9x6NXj\nM+9aC4VzXG0Pu5TX+AwfnvqA8d0PY9d44pdLq9VfFm2FmJBD/taX6pFZa14U\nNo9fDovw78RFClMFeK2hsGYTgeokQjL9QVGtihPSVlH8VRVkCyNmz0z7VUgj\nQB+fV8ltixo9T10PA1+FhwmN9GTDvExQ+129SsRTxRUiQQbzUIF9G6dexVcC\nJf4mLXrRWfrz7iGvdkWfAfnOzfECHaxAjlsN4b0P4vDA6Sfn1K7clSCwns7e\nQ/94QjiwbAr5E0nrHCIqVS4BuEpkjmM7uMD8nh9GoJA/Gzxhj8ftSpUr5A7L\nFTooRxR2nBLGOpur3xBiupytWwEyOZOtsnruqpWDcG3MO8GR4VJgqUw7JcAQ\n4+xaSW+XAPLSplMed8DW/x72zSujJnpqXkxnsCHyuYVD8KJ2VYgSZ5cofoKJ\nLfQtWSTo/RY/90AIsJq/vt0KXtwXq141AXs1Or5JVYFbUKvIPI0ZRhpF8l3v\nRPIJ\r\n=zUjr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/list":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/menu-surface":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ba6f7c294.0_1591117422848_0.00506603489079116","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/menu","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a891eb173562723c3c5fad070c3b12f4af6a67a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.cf3b664ab.0.tgz","fileCount":37,"integrity":"sha512-5UNANmbKecFWFJky8jHPLjkulftEjcKWJWTj4S/ZpqRakfltrkmhVX4gRE1tmmUj1QYLsUIgZmcS82vhn19FYw==","signatures":[{"sig":"MEUCICKSVgdOhR6dTsJVw4k4Ltt1Zpxu6GQnsuIXigG7vDiuAiEA8NJEKcIsvSiF/a7aw+e/QGY277onBAIx6zw4ESVI9n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pleCRA9TVsSAnZWagAAC3QP/AyfW87/l1mlvVP7ZQWb\nKlCHp81oRQ+r/i7eCqi45tfiyn1VcjlK6Kp6TG1fbihKow3M3/yyqQefzb7R\nRz5EjSw2+ipqBWsY9BQO1TA16aU9BaYpB8yrgsrAoEDsl3ugk1MgixJdRz/P\nus8lsO7XcsWgy1+tlU6jgpFovNyPlnGbr+QdEAUX7X7wNz7ytHa8/A2n2lfk\nuLwYbdLzQchFrRWQlYFkM5EUQoJNFWgdJ9rG985vkWO/CCltqOSAwJlAOYy1\nXtbDyUUNnYf2A3N3XUFj9kioYB7yZf2Fz7iaxtsvw0OtnyUbfMDMHsUk0UQO\nATDCE/7zs7AW80kSkar0UxuMNZQbQMN+Thzs+yYFCMyKcScEBQidQ1uNiNu1\nlU/JJPRYT96VA03pwCxGeD/3c7X2laHXpHZD9h3x5ZXItBTUS04lIU+vIsEC\niSDBBTBnW1qBNETJhnYAGvY/upfjZMpHX4VxZtu2MGibGD1h4J2TlHRBToEf\n6OJ+mt0P3qZJLtfftGPuSKKh36LiVc77u3R9t66gszuaypxznVKhHcaO/ath\ncrLkLm2CgVW5HpqGAJvYiV00hmSeOS9Um0gSVwlmDVzShwCbWLIG5mbn+vTE\n6YeS6RCTrFh7piAiofMUuBCzAe04SMjn8TZKN6XEAF78PejFHY5zh44DgYcx\nmBT+\r\n=x8Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/list":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/menu-surface":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.cf3b664ab.0_1591122270518_0.10803451650954643","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/menu","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b28f166af8ca9d9d2eb633422f130dd14c8586e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":37,"integrity":"sha512-R8EryLbgPEZMrxIeEriAsAy0Z0iYHizd5LnwamFrGlLC1pFzqvp0bPbD/bf4qAtaXKHOcbUT3KcvJcCRPHuzGw==","signatures":[{"sig":"MEQCIFLmx+yNg07xKTFmnPV8GzmbPQnNKM28/OYpl1ZBv9FWAiBDL2E+PdN0yrhq5vHK/cZG8OOEyX6q9M31MNggCbabZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZ5CRA9TVsSAnZWagAAPiUP/3tiVGArnrKm/wuw6854\nfqN37RFOU/+gcLD0h7bFUewLxmCthu5zfDZ9iWyhPMHn+6rRDK2X1Xp2dn5w\nWOiaDnUhnozzL3wHmwHL5tauaFBu0kX/NQCrEni5moA75SKVFFbBNl5j5457\nCp85ddBeKs82Qhx6OOr38sjZJ59bCGDXxk8CI5gxRYAW7HnKEndVHu9ulNq0\nkaG/1iE0Oz6pUrkpnbCSxKrBlEYTtMJM0w/j4T5yPYn6+O/JjTa5ofCO6Jj2\nhqjaacGXgCuWmWdUKFGs07gBA71z7CSuP7whjsEecOVcUkYiYEdBW+QG6MsQ\n98l3P3gENjJq1gzuVQ9kQ3nO7oxv4mxYCwUrEX0hPITyN7OOLE5qdv4lYxaM\n+v/y7hSbHOQJ3tFMcKuW4SNhH5rp8j9g2otZUxB6q4xBNrm+MoN3v/g19TMa\nCdITj+6JbJWQiY8176F0yowvkH/xmFJ8qJfVuhdUhQRzfhG7kNeLCyuITctw\nWiUC3eKU7VIJP/0+PiczRXsUX01q1aDehmzQVmzVKC4r5mIt7f6OWg3e5pId\nsHcsllIZ2He9l83bzdSaJktcUwZH3GIxV/Y23SZvdD4kKh4K24ESdJFBoaD+\nsxFWUwFws7UPmPqltNFyc8hpwNzjYGXX8jiyreM7nr8AiMJ4FPVTPKLoX8Bq\n2hhE\r\n=ZCI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/list":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/menu-surface":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4ba3c9a31.0_1591142008415_0.003252581936351806","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/menu","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df5ae51940c097e9f679136088322e4997bb9d6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.388b042c7.0.tgz","fileCount":37,"integrity":"sha512-KeJECNU6TA9dY10By2b0LP42L6+UcyIbUvummELupBoxLZjUI+1BO6qIC1OrtX0Xbyr3c7wBsKk1LdzxSB96ew==","signatures":[{"sig":"MEYCIQCEzkncrEbo2CKPmihfVwnLqsFA2KkhYqHPEIcIIMHSbwIhANmjaXmhd5pWXljMt7+2r9WmV7uOHRBAWa0GYIeEOiy4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16oECRA9TVsSAnZWagAA8VcQAIO47zk+SlTotaszqCqW\nbEbNERPQBpid61G/Rl/q5gTqh99dixiegyrpTm4HGxUF/4xM30lyiSSALPj8\n0jwfHvkq42PZ3yEw82ExbL+BT5p98s8UdaM2E6peTZO2q0pBpaujr/jld6fk\n3uzOPn5Fanv3qW1eRxLzBSn+lCEMdJwdBZc9CjXg/z6A6L5znupz9MGblufs\nTjSTB/jn+K8yRo3bBhdZEwpzBUteB30lP5l0sZZYIKx6rauErGNiEfTlz0Z5\niboAlYvxPegMmKSVciLcfxwLP2+DPIxm4ctht1hc1cjVcFgEgEqYbwP/G8dd\nHwLdicZZ5wgU43BlT91L4zMyYcR/e7IJq/4dKV8sb1jIpaLrNVfQ0zK1a7hr\nCdoBoNnoPlJZX3pE51OR964i9Tlu3gWwx57f0nshXWAGsuTKnE/kxUIg7nd2\n9tSrlobWKszVscV9tOQIjHH8e3teu7v6WCY26U6RKPoNJrPOZg8O6mj4zFPn\n0wCxUhXNjyQs8XXKcki6Z85utwYQwtFDI546ts+pBcEeii9x8qbfB+yJCjwO\nZploZxsT/AJdhGn3bADbsT3ocEMqzPgQAzKa/8n+ikVT0FIifwNT0Hnt5oZ1\n5L+1FjIwxGa0j9rYYkpftKsU9GU4jVc2hMVMlur8vn7vOjpeWjzuYw0aE9AJ\nhdjy\r\n=NajG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/list":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/menu-surface":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.388b042c7.0_1591192068067_0.12880588675369053","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/menu","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f4b69929c252a7b0982e68f006830ccd4babf55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.cca1ca84d.0.tgz","fileCount":37,"integrity":"sha512-avtCjKwwNPatORFk6Sym9Q9tl+ZZcPRUgyVQMZ0l8HgzL9cEBfKDvtLIcMmOauhpdmzQ0RL5nuuSsC1F13sTbw==","signatures":[{"sig":"MEUCIDp2f9fgqFz+TeASyHBCAgT0ngv9wDQ7uwozJjSHYmnCAiEA8cpYcmWBf5oycoqUbDbpQmhubk06967QKedA+cunRJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":581772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18oFCRA9TVsSAnZWagAAYk0QAIMlzGGc2VX/im3kpEc8\n3JSgzidIUl7ne2Gcn65oenTOTrgiSka2ypUh7PctLvSDtxDkM19NosMX7ycf\na5HZ3X1+Ve/3yH3PY5qBGDKcimtMqO8ZCnU6Id9XbfaUxNpcdXorpGaeG2Wz\nxp8+33t12xduze3xRiuOr3eTrcNWpZQlkebp0j/BNkmsVwqIzvrMludfEe/m\ni/gZRKq+zDRe6iozBIzjMhsEvELW/qzuvdTfYS96g02FgWv9fJLRd/Aue/1p\nNpZCtFI7pdb1pM19sgLxrZekW9myLKgGNSIW583L/FX42b2Pb7zOGATfwuqF\nWGMPK1SqgD7W97iC521L6Ac0WzsAApt4ILUZx36M65zyHlFb+YtnxdiSKzPP\nw0302UxLAoOaMyXPNBuQzZpztJEvL03qCGmB+/vk9vfVtv9MwmA5Jd91Ujt2\nw1jb8lcLKOD4B6o7U8/25+Fdzj/aCfsR0o+Pg/KDdDSi+WsymeWihq2Qvc4x\nojmzXhdZ9Dt9adFURb6X3Xtg7cKLO99tu5nEIzUWU4mT6P5niWZUFZ6F6i9C\nAebPI3I/P1RrpNNdNy0pp4OPZGS6nhinaRJU0lQm3bFN1/PtV5PLFK+5iMch\nvphC0SHUnN1legavE6w5cBCzs/MgBOtevD8YDzunHzuiGfdfw/QViljSuTvc\nhV6x\r\n=0CRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/list":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/menu-surface":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.cca1ca84d.0_1591200260746_0.6440821579073275","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/menu","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f9b1604df6bde7110b59a23714347c8cdb3509a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":37,"integrity":"sha512-N8+emEc3fdeH/hVEhT1Ip5PDK77cpJ+fEBMvmxM8BX23jajJsqws2pVJOgX2mXxJzV84ZlczkZZrGf28sXaYhg==","signatures":[{"sig":"MEYCIQDQjIrVIh6/uQhXNFcBb+y+/PLJYLc0xxULVEOU3IkZ9AIhAKsZROYcREBtR0W1JvbCmD4N/ZfWj4DwFMBREVIXwMD7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":581772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/L4CRA9TVsSAnZWagAAw4kQAKEToyj3WhdTFPbXyVzh\n78sCbwuFwLKlf6RtwdL6Ull+p1jZZXSx3NuoHXI9qP2biRKaaP7DbC+tHX6Z\ngm/KdisirfyztLO5Je0jrHpRE0bv4tfch6K0i/CLasYlk116VDDUquWITGot\nwFTZYjxunldkv4wdY3AZLQ5Y4+gkZhbQ853Hi0YUFj4wT1Af+g2QuLjIfF+V\nMU8NWmyPQTupAreKO1lCYhfeC5TEbEjBiWW10Zm97pVGm89Utmcprlxj2KKK\n6lb1bTELjrwqQ3nBiO+L7VAGg0miPIf0AVjTdqA+iXvL8vGU6bkSMTGciM4B\nOgBzgIp4oDPwiexlbyNXIQPgGUGd+WC0oTue+2Lmhm/DLVdbNw4qv5n1mTfG\nc7KFZ1wAeKjZhfzuf2WdshjmZTr7cIQfRk1K818Enbu7qztML5FxnVfp0zwL\nEWw3d3uULrA5j+74IKLCD5rAGxAKHTLh+XHQCjga3yK1O7iMtDh+PBiQZx6G\nWe+Db2wfiqWS7LpWJAd4AY/KeVyfl0jt4xNsJaalXSxWWSXKJ0bClGzxwnPN\nHneRRjp9Rn8aklFHc75WPA9/KabCyJexf35BNGnUY8SSgX9eCUbI4WBcT3SH\nqTfLK7tW3ch5jc2iVNOTN4zlWJn/EKHr7BRreXNZESPi9goOD5tQ1QS6qz6i\nE0z/\r\n=aIFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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`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\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":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/list":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/menu-surface":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.9b0b5f2e0.0_1591210743714_0.9298409493762909","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/menu","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32b2028a0f914e7b76275b25740a8113beeb59b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.0a7895f4d.0.tgz","fileCount":37,"integrity":"sha512-T+7wZgRyXpgxbk77FO52C5YiznkQdF2r+tIy2ol4zeze4JpFmihg9K4WGqTKoALGLaG+MghNOY8rqSbE3FUuGg==","signatures":[{"sig":"MEYCIQCsSAdq/gYL3/UyzQB2n3Cl1zCQHe+PqeP7fqxyg1zn4AIhALle/J4Rncdf0kRtNcSA3PASyN8cnub+NUwavVcrRVBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGyCRA9TVsSAnZWagAAmG4QAIE9R1MSdDrdWne5EJNX\nPqt6A1uyGd/NxqX+bYxpN7/CZHJ4N8NkFSL7mxl68xqBcLehT9N79q2VJHDG\n3clnXxQk9R5lzdhHyX8hvJgv7IwoTYPKZIHCjRpuHq0I1igoQaIKa5CqdWEz\nJywGWgcCrlLWZGFyLcF6WNhyqzowkosSTh1o7aBmRw4sHVa1SNJWbTVQ6XAd\nZ4nxreh8R1DcGbsgREwfzODgXtAQK2axPS66LBvV8OFKOHe0sbDurl4wJc6C\n0hiwZTZ8wd+hia5L86IYURodhj5T4ZTZNCD4dU0+zHXYVDkt5KGwwYnO5R7q\nUF0NXioZiQupUkbzhNpmNnpzb4Hm7rl+kCsjdM1mdHiGPbSSb3plG5scjtgy\nh7pdqw3aJyTv9t9XE7xRbGPIgQFCkz3jd7No4yqWJoHt5cR3ODyzplcTGd7A\nF9238nq74xnvnO3nK3ug8hWqEIT5sCzQvJz5mID/0f6a33ka1UWQS8ToM639\nT5qaBdcyDpQCB3yp+n6o/7qRridAxMVnzkUav1rUXpqenwwFxFP2mOjyIaE4\nVupwMjYX14HwDDkhREpSmSeCu7P4MmpXjARvW0DDDgetghTvXH3F/mwin7mB\nzE0RAGGlPjyuDKd1nyaNC5ak3EQrZlJsI5WpcsP9P++GEei9V+Ls/d5E8+jm\nJala\r\n=ZKZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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\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":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/list":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/menu-surface":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.0a7895f4d.0_1591218609692_0.17353083621204357","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/menu","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"137c93cff21c937ae0e10ddb5d50fc1f7dc29fee","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.7461aad68.0.tgz","fileCount":37,"integrity":"sha512-vZ7Tg9goFRwwRtRmuhVSM3Rht9hw5m9e7EBImx/BAfX0BH5HXSQrDADjPZO1Mf2c1iOdzGjdVI2EslPCOKvWoA==","signatures":[{"sig":"MEUCIFySbOL4GLCoxwEhvjG7C6+6fdEY/xXX2Qy8FvPM5bL/AiEA6Qq0e7/GTGeMYNZyQ2WN4jrwNbxFwwo6lhi+rReZFcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCdCRA9TVsSAnZWagAA8TAP/RXHNPSWxIErcv+iZO4g\nqja4htVOm3yaAc3gvG89WWgGJ6ZDLU+T+Pi/8yDo15cKnVlN29Sde1cjMrJq\n5JcfIp51v7j2pF86STEELBBZars2BnJmYdq6FqFg8Acpv57+0q7J4jGUu8EA\n/5XSR+dY3GRp8/Ku/zk1NwJsGTwuvMv0qyyN1o4dl8TPHcXhlvnYBJxRFTVU\nk/AS4rvLjIPAAu9p7iaFW7PGYrmbg/CVqGOU1apDcF+1QQMoVhB+vzdtBL/m\nMixa3vfnDXszI5Ophfky//oGCaVnu629S+wY/rbhdv1TZVtk42YoLjZCUX0m\nth0jG9+UcyIRg3XOsu83VyxmxonipGfBu72FyVusGl2AFzzc7yc6EjwXXMzh\n3QuYPQQgZfVDfFAxJ3PiYyAWmGBOeqUXUNPtyUloMuNuhrzhHiFJ0olrme1l\n4whvulkLpLadmBzK1GmQuaJ4TeWH+XGYkuKydfAs7142QHNCvDhx8NTrq2CP\nMG0Hv72ejNUMEaJVLY0rwySuIIsf5cyFESpicR0yBEdoO490MATvuSUNNY7D\nRoD31nRl76abpZ/9+uKgLHRGmw8ToWFkTfHKK6kkSUNgdM2jrAU59Jmzpvgg\n7nfhr4nEXWRakfJ2GrM6PWXENejpaqQ5IH4UVRMpOdP41AsLfUCtwV2QfTA7\nli1a\r\n=rR3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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\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":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/list":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/menu-surface":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.7461aad68.0_1591222426702_0.026132654735888883","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/menu","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c258b16c2da101818a672c05294bd6ea401d4fe1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":37,"integrity":"sha512-8F/H0ljbZM7X9UEZScdtOwzJh3sMUCyWbZ2bRpUjHwOK5fFzRxgP4ft/hRibGiRHZ7gyQnY+aLShcCOyUbhyxA==","signatures":[{"sig":"MEQCIGq09zjKSJMaZySAAeTcyrp0Jy28khIYxV9w8BjvOBkfAiArXcsh3406Scroz27XGOZ8Nr7hd1PsElK42VJurquTXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WR3CRA9TVsSAnZWagAAI+cP/0HkatCyCOjgYbNGZ+/h\nuQiBRi8IZ4r7VMTiwjoMvI5mmRZeyc1Zz/MgOTBQ9xijlD62bYHS7bqK2oxz\n45aZAK6u5sdGgBDcowadROr1ov3XLiAFVJd+XWTBZXlB9N9XzS1dkZlucK/C\n/BSrdRaop+wepMj8yYs+NzDeD4XxiZNDJ2SYRXZrp7QtFinT9UXh+ZXtVfk8\njOWxqnRKupNGG6NEth7AVJGMf4K21AC7JhCbQd6YumPpcHLTw1xjVLV20hdv\n1Q3LDRL2QXyM9Sop+qiA+aZljJadExyzDKnfZOXgOgyCfmWGeIx+f5JpsqxZ\nMNU7wD9yy/loap6sUzdeaZq6R28r8DSwyW3LLJkgK4kiTRZFa7uGc4q/XI1h\noawpF/HJyM0aVVYK9Onrf2VM8HqpuGXkOGsWmqLqy5jttSzNRN+f8g6wrl66\nPwAO9s7zjTG4OqnXD+HZKC0wXDIwlKCHW3gHIlLaAgX6cftHPgsKIiYylJht\niZItSkvPasEOSRgw3DeC2b5tvTmgV1kwY06D+aRKk+7jsyy+do7ObCXdSkYv\nM9FnK48ElvF42t99xIcV+Yu5gVQ4SCPlNOoSFOYdm2F6rQa1GipQ8SbSPlgc\nhH5bfngNPr14kzNdPDeVQTvI7WmdMcpGh0KqQeeYJohLpaHyohmMpiZx5ihh\nLm+A\r\n=N9Sj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/list":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/menu-surface":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a0dc2b5c4.0_1591305332098_0.9421978410834881","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/menu","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f602e0f42787f38264e25034df0c5f5ed909c42","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.2b420c5b3.0.tgz","fileCount":37,"integrity":"sha512-OafCY00d0uARQFswGOsw629XlW5XiAejwgwNgFt1NqnP8QLNKNBA4hlEj0mlYCiM5aTjm1zpM1P1yrKys5KAow==","signatures":[{"sig":"MEUCIGDWfak8FxeY2rzwpi2Nnv8+oigoN6nm4S4JSWH0obezAiEA+m+UCVRmq+qRnQdI0MTsVOi+ji3friUw2xvVodv1Unc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQmCRA9TVsSAnZWagAABGUP/jdE+f6z7Xbs5IQ+08vh\n5q5yncrtafRfHZ3H/xIYcwsr0F7/oWQvTxkuIix6apnKx/JnBKEUZjxxozxB\nT3ioZ+DFgMpBB+h+KHRKhZJU9utDTVJ6xZS7B6iZpDlCpTf+TQ1z5pSQF4+u\ngZfkIekDfpEqTN+9RmM5NtwqzcrGoLquJCG5KaQNP/a/VvRWInpn36Qzmm/1\nwe4uIYfEkg9JoFgW2amy+lqIZ7W/1UJxJtuH7f0R0Gd3gtyIOl3SIH38Bxxt\n9HtteLuD5EsIncdVQwMnZfmrJJCIuC8SLZVeP0bjKyusSW+lmr0dXOnzM6fM\nk4SzcEF0q6xNRpGtmHNmmkm7SUZ0IMH2mpe3UbPMG+thavIpQH/dSJIokpsC\nVtiHhVoYK0K4dsDM6o7MVNuK/SrHYEe+LCvdyoKZjblc6E75DTTnF7uaqJ0B\nGECBO4LopdQKbn3nyUvT1Uo/9bsPR8/mrO6tFeq66F89kD+5BUJQKLLFpJWQ\n30NwxAt2fw1FdK3Sp20uKtzkSb8nJnRNDwqHazhCMadOKIAGio8QuH+SzUVs\n5VtpwYKzGENENliTbVjDYMFnRODVD9HulJ4VgXeYMFws9OZZ9PQSqNEHaK73\nl5+METBSZzmTpap1QjFtuwD8SVyvUrNCAfW7Z4ZNV0olLDsCyb19+pGXxTL9\nUngF\r\n=WtVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/list":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/menu-surface":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.2b420c5b3.0_1591632933631_0.9165606726186977","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/menu","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6dd4cd28c4f3d8865bb0d219de5c63d784247e9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8fa22aacc.0.tgz","fileCount":37,"integrity":"sha512-AKhT/JSGSv1tcNAdUp7wzOQ5szI1ZvU6rOAH2zJO4CtNpeNDVA3J7bsYatm6UaOrv++swxVEclIBEdLjjz+XaA==","signatures":[{"sig":"MEUCIF45F4s3Ll2vM8eFGtsRaARbrq2+d8Ow7Wra4M2THrv5AiEA0RLnubgYkFWhJWEwZVxVDcOtIcnTblJQJA+f+Xo/9Zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n31CRA9TVsSAnZWagAA5SUP/3LLYAkvHyK6w/7AhBcZ\nWZVSMJcoOk3HltQQXDQOMIbQOrm57KRCKBmUtp4SWv+mwVexLXZmY5+NDJZ2\nn87Ca+vWW4grWG0tYF662yAgYklhX++r1YD9YtpJ+89Fv0o9WFsEB/OHhFp6\nj9eoWAt1ASssIkb73JiH7lzHtzgJ1lXk8C9fhqATy34k6xqHSZV2DEfT04fh\nDw2FAZdbf9M18nyUy2FEdWGfs0UwLTjCc2CAoxkVAw/6FaiNyF11JXl49iV6\nLl9xO5wZ4guC+TzCO3nLIerUBWiryoZNAmr+PBZLoPHhNlBcnrADWxLmzJdB\nIFwCa6hPBOunyLDeSFji0TtSFwRJlkWanXF7fPtXpCjzBvAYqdWk2lqH3qpT\nxl25wMvpnqfRUVmJUXYp7lgEc9xoMg5O3jCzeF6rX99tZwsw3M/k0ryJH4JW\n+kce3Lazd1tclJpsk6hsxAP9l950W5plmxTPbUJIJtovXA+X2NP9BbrOqwPr\nxh6AL5VTWsjNqMWvV1lkdX7XKiirMk7mDB2l2cndBzt37lI4oePVO78nzY8T\n+W/GTxQBR7tVGx5yuOTHufdAmpwZ02zogB74vFphEr4C9tl/HHia/U8by4B/\nZMw3v10H70xZxmWys92YWa40g4ILsWk3vHRux0H0eJ7I5+Qs0hc/yLNf0E3G\nYqkW\r\n=6BJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/list":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/menu-surface":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8fa22aacc.0_1591639540680_0.4876790191014213","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/menu","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59d9e8599405b79664952dc57c7cd567ab9f5420","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":37,"integrity":"sha512-HhbD/Q6h0mEhD44kmg1+YVKiWKzPEhPVAJ/021FT0bWrLiclPoy5Z/uQYy8oioMu7uRc6sbxurFr82iLBnXPAQ==","signatures":[{"sig":"MEYCIQCe+TJiRWHWHMg1lrK+FtbL0TO09STObdE1AgmwT++5vAIhALy7HxXNi0O8Gt93Uv0jJwLizRmUvgOQdrfm+XkAHYyk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3odECRA9TVsSAnZWagAAXiUQAJ/rjdzN2jTrGxvkhZYh\nawNTlNiP2oT2f4vk8niggxfOihLsbS4iMJ1Q5Y5NvW18GF4E6s1TjBfZSXdH\n+NQ6J0vvrP25SvBRhYjhM8JLgoTh5UQcU6KZ+uOWoA7TP4suCvkX8ymsBKmE\n9jfXDqylxzk4aUjbZ4gibVrceFifz1dRcxztQsNKyzOJZyPpeFVpBLUAbrw+\nqi6GHtiJ3VkLlv3bNlE0YWE65pCiqd0HEcUVgzE3ws0AHplApMWXZWIacC8t\nVv0UXwNdlRw6kMIbB1Y+NCDiCrwjWjdssOsTjOeFw3s4uFCs3gfP675mMN7O\n5HT9RNNeHyS7X4/2XgDWIX9uwv8wC0XI3uyJ5cHDU+/d8Y2ZQahhA/ljXqbW\n0fLHlYBlq5Ugc+enJuyeVRZkSBiXSj8Dxqf6NiGx9gL6z7Enl8nLgqoaYhtc\nmh3Bk0NRfXEFuhWZT8ypbY6FW76J+LdYkczswuok+Rp3tdYYrffKCIL9DtEf\nx5OYh1raZ1gGXGHdlLQ2FRVhbfCLB78wPiPrXEg0s1gbbU/lIoNIsZrak7nM\nrRJFpv4gRZIkeRjS7WYyLeZvEEDAR0nKj4EvgT5yAw9TJ73tkvkgsjRQvfTq\nI5mwCezyf3aI6/WQcvTTyfMECYkd3HF5XELXp93MceMu3YHzdNJttIsEa+LD\nnex0\r\n=Esdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/list":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/menu-surface":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.21c4e4ed8.0_1591641924086_0.7158635294128906","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/menu","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35a3b47d337f1500c59526544bdd740e63f2e439","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.dfde46516.0.tgz","fileCount":37,"integrity":"sha512-tIq2ZZlMBafDfZSMOPqFu1qT2BrexisSVSqyqGfeNVvlloPvmq1KTay3PhOCh/QgvZNCp5GVOeVASKAgBdq6Pw==","signatures":[{"sig":"MEYCIQCQxSdv/cVKs1BEq/28FqgKNc49j3VF87bBXWLu29OJNQIhALpkKcq/qHXRrYDXvUFuczHZlZCi4B6/HgrPDMLC9EN7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTJCRA9TVsSAnZWagAAM+cP/i9rzE78Q3TxIkMWdvV3\niIaJ010N6gS1HfJaPfGSy4o7Kb7wnblIxnRz9aBjRK9a27xhDvz1sTEMv7vY\njfNGxmHs278CtF//ynZaOCyaETO2C+N8OiGb9rSeXozYUDuAofeuPu9uo/5D\nEb/rbC42iLq2Y9yeFATDiJf2rRqs3Rd2kUrUqGP66LRjVe5TgrXVNuQHk2Vd\n+mGH9rDP10AebuTtWJma3MbHa1Jo5NjerOJMyEMU4r2ZC9cjkseurt2/QIKQ\nOsqZicxuZq4m5v6eLy5bPNn5cxbAIwlsTm4v3Cp4154RmORYQwUL6SaIiNDz\nH0Y3SDPYILhvV+ESAq9W7UQsw4iqpRfn8/elZja4SshvXHrO8x+FwGjVS2Ik\nvduEX1Q7uGLQZneF32zJ7pXg+v9LgxMjsZ5M10tXhLV8IqrBC2H1cBfuKyGS\nrhVtJTeHTl8Jb5ouRh3o7PyqnW2LfdWag1zxzjA4jgKeakZiVXa5neDX6JhR\nbL7byMkdCH0nsA3dYmuss2/gy8f74lEun0BuE7GmjYlBtnfuUoozVaE+R1PP\nr+iDnBW/M/yLPCURDTPWSKiSokAVZsuWWeD8KwovQWoFbi5wg40LfNGjH7Cn\n/PKoLojc5qOl4Bj+fZdqvWcaxMjz+7Uo0vug3p4H9ZdcL+fgid3TW00XVwET\njYeZ\r\n=lrmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/list":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/menu-surface":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.dfde46516.0_1591645384858_0.4308280731285947","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/menu","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d6d755cabe107f4e8e33a0c8077ebfa1c24a705","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.05cc5c206.0.tgz","fileCount":37,"integrity":"sha512-bQXdLdvaVDCNM1OIocK9Rfo+4vKNZqW6M1r9d5WhmB0mvfBFeQD1ylw2EKh8zDa7BgY9ZhPFzJ4mLZ+xWUPgeA==","signatures":[{"sig":"MEQCIC/AT4w6nzqNzZ9fC3hiqzLB6cIQri3aLoH+UX0YjlMiAiBFG9YRxDfBY3GEyIUHkHSPXu5BJDtW1c3dsYN8hTxC8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qZ7CRA9TVsSAnZWagAAwq0P/3Je5NEDVugldWz8/ZUk\ntJVhnZSdsbyDShqOki83zVb1XXxHjkFWhYI2wdil5eMDFKTn9//KbFxW8CKo\nwpTj2WG3LJ4nJfARtRs5+TgQpawOym09GZ+YHZUMI5U/HQkylffY/GfLyPOP\nwOQUnbuUhwO698TmPjdrpfJ5A2AC5nHgj2ytj+6TbTZACIRDs8TX7q8L5pbN\n/5/jYJLwl6scPE1IrR+4u2IOTXeBtKdzVwgRXZabPvp0cUv4keLxLgD+DmgX\nLLMtqMovlMfsaZPTKVqzO8MQTus3bAjr4wFFicVAJdjeqfuC94BLLGtTuqVW\ntCipoUAiwhXSK5tyYD34hFpWr4ogBAWfF1J5YUsuMlVjSYXNPYym++sTD8df\ntminYajIkb0l38c/XTOZiOITmhDC9rb+k81mOZGGCTV6t5DD/RMZhP56Rs1U\nYquyRVofK4HjWRz0VVzKY7iQmOgMagK9Eh6779mtxN7/G3vDtg+BQgzceapi\nR1w6q8G543fLbVFZ9Zw/GSz3iyVZIrpiefRlw1xWcs/nHjTc0q919S9wQLeD\n7lAxJlvmyyhl3Ipe+TS/kosD/Xc7g7gAwztpks3ZoLVgU9nt7Waq5lBYMaRa\nkwHESFO4TyKFBpXlgqxlEd8kEucHafyPT9+sBvKdBLMRGFlvfiBQcqxDDPnB\nMFwB\r\n=sxjt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/list":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/menu-surface":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.05cc5c206.0_1591649915374_0.481126042549177","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/menu","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73622b2fa02bfd8a617ac71bee4a5e5db1dc3884","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.3ee488f1c.0.tgz","fileCount":37,"integrity":"sha512-ouFZiAjGdYFmuK8kakotzSpPhBx9Wix/rCbgK3cEfCIAd7TFUUI22/tYUDBwjxj5ixwze8XmiCf5SDlhQkqUmQ==","signatures":[{"sig":"MEUCIQCuqy4sGt6Z730F+AuR+Kc3jSFoXYRlkpb/cTVbwHPPnAIgLE+qxZTy5tRhjQsmMr7sbRUbiLEK6Ox/SXKZlx3QNAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36LHCRA9TVsSAnZWagAA1swP/ArNHlpiRqaEoK6ahBWz\nRWoH5p/A65MIG0OfTPKlhrQ8lY3tq/vuBhpBzw0e3+OryA2Je6RJms2jRvVt\nGKnQPNDXe1JJt5mOAuInfvWOmEfAhaHVrARtVx/p5I45zn31AZBVi/RKp9tS\n/XCgmh1s/v8HJiSWASSsxfgIHhtK60aHTTDy0iS410AZECpWZ3pFTKALRoDx\n7b5kgAeQjvIkuEjyDDTgqFg5SajpnX94ZcGsusLQcMZspjIUq5kemIM7kZ8Q\njS/mpGViWG5Rlj78z28SRuqReS8qbIdrvUdk0EoOu2qM/A6dGC7kfHpy/9c8\nlcIfS5URXyNvtjmvZ2HNYucl07t8NaamiLQwZjfob7/RM/uQYgfl43OLWlyF\nOmJlOI4z4+8sK7zynGR4BeVT0gaNWV9RPkCtZHAalqvbRIbzWhIcPf1GNpY2\nt9NH099MXvt/dDCgBue+b7HpKJ3UH4o1B+qvywtuqFqnKS0e5tKTJYH3bMhU\nimkfPdhVDgNUD7yAyNIJiHlprMC6/TVGeRhG77aGzpNMPGlekOtsfvt4oE0W\ndGhwOXPJE83++upk9fLtgmLZ7wkJsk/zqPE3FRX1PTGdf5zCdZQibFq92ycD\nNAt0zPq9ESEmo6qDeNuWhmhICoMoN3Jsx87/+zSVSxLXnxiu3fnVFZ5DrDAs\nat6p\r\n=Fokj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/list":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/menu-surface":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.3ee488f1c.0_1591714502945_0.9644752897186537","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/menu","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"292c282f5318e533a7e4ea792fd468e9110c4d8e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.b83d720ee.0.tgz","fileCount":37,"integrity":"sha512-tgGgUSXKYHPmYDy6fJ3x4QO1w6OlcfQzG8J92qjq9vG50uscXG/sF0BQsByah4uKr/uWizUUHNq4nw5X40lhfg==","signatures":[{"sig":"MEQCIF/JvnLJHWuz3rpGtBZNRD+z2Nk9ktVbajrpPUBtndn8AiAoaI5u3H6bjZhXkmArnw0USZ0hxgJgs721uCS0uNlzTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":595285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZzCRA9TVsSAnZWagAAwDUQAItrrjFLe+AN1prnfexV\nTFmEQ4y6MV5UHX+CQZcypJ703bOaWbLBkLq4skkG7IpAN+UBNNzoe1G1rqff\nsAmYrLVz627hylEIKpVfhyXCwlnIR8VtEX7ZqAEliSVYrATVmktkeXD3v9Mj\n5bTrkr5Xtfw79RQynoxEj/YYcOOKv/jZlDsFQSAbBxeG9JjjiG4paT0b31zr\nwlCglGAixco/Bm/i+x3IPmvzEH4wAdWX+caFrCHNJRpl2YftLnU35xXLaJi9\nb0osIwyU5UDEsprIwK6CzRcYm0PncB4qUFZBpUdcaQs4WWjKgemnuo+xreYW\nBVfyBQ1Hnr5WN7ftu6oEsFLrNY2usUZPfUs6x51rctwxVxPJKF5L4tjvVCFh\naw/lYomW5cAaEpkBsvRnAtVam/8JwAgxhIfjtX5N2WbwJmSexdKc6SQ1xlib\naYqZP7KHKV/qrXuO0la26AGZc1Ds7O4OBAL2z60Iu/LCMXsRC9MpiOdf9saS\nIc0rnsYqjwMC0NSKiLjj03vKMPOV+M2WKSD7X9ItYhQ8Hm5VIbkOb2s+Uaw6\nbK6yTepu4ShzGsWQ3KI7b9TJ7vK0kfavD6JqPYGx3FSDjJX2XdDj7iw13DcK\nlv5MptDqEQNg8W4JK7IYQ7D1U1Z+fHby1AGAS/Nd8qJrxj1wOfQRZFHdCNP1\nCOdo\r\n=aqSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/list":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/menu-surface":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.b83d720ee.0_1591723635473_0.01725126581022285","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/menu","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d42a8642cc74b79deea7c02777a937d0ef798417","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.afb1c11a9.0.tgz","fileCount":37,"integrity":"sha512-RRHRfdX1ADMKujCywqdYomRlPH6jj/TqAoYZQpQge6u6XjuLZCieqik7doKg1pQ0nOotwRHpPdmuDs8S1Jxdew==","signatures":[{"sig":"MEUCIQCc69lPAWPr1L1SQadUJdj3DmF+xVkxF3bFnX92apQcZgIgOefg9dzaWA5srTtDrvcVfblpCKH+/ipA4Czgzeimg/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5dCRA9TVsSAnZWagAAoScP/0Ysi5Nzwz6d3pIP1zvr\nGtu6V/fjZc6I5fmFCeWUDrb4MehHg8w5irX3Wn1srd2dtoEFF7eIjNY1gOhA\nL9Upor5w0oLxTDveNZ3qw0GxKp1zhy8R216n2/leQZCfXhRfFNNBcEcFv8L6\nBWqPEWjonqkYJ7yl0CwtwMr6SP1EupVUFNf1EAGaOhQlcF2AU/bbbuuaCGvP\niuKkZFusYYFHATIwSwCtOthhlZQh2UQqCNWEa7Ha70blx9AAHOlczppnitfb\n0NginrqAfckIQ8jiKV8NXxpTZk+R2JDiCv3VSkA0TPr0GgAAG0D3dd6gq6+z\noPOeBANi3xxGRysx+Up3KPUzqaw1Jn/DXk7Qb/7DtQF8EA+JXojsCmA4VLWg\nsEd5W7skzVohyTPyNcOGAb4H9avxE1tkwgCOb/tYGrOq/gJ3YPfOX/1uDoXH\nfHCGgNFYPRLt6leVtl6KnF91um2Hmup3LI2f7rYVJ9tGaxWaZRM9ZKRw1rhk\nrR3Re/Pmbz3kj/Jj58x4q6j6aIsAJjxymxnYj01VX7/HwtYrCe41ezwnU/A/\n8ddWQ9ScOOVNB4MZqeLO/AiGfAJOr3wrlma4FZlebW3aQ58TY2Cp8BxfJN7Z\ngvf3eylozl8us6tl9y5B9gFYbQefTXKe9ykhTYoN3oDf5hQnSLMPUF6IgEBn\nMYwC\r\n=6WlA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/list":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/menu-surface":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.afb1c11a9.0_1591733853216_0.3867867462489374","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/menu","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8988d6d4db6f4685b537c4d37cbd45a36e680d8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.39e6f71e2.0.tgz","fileCount":37,"integrity":"sha512-vAMmb2dAhjf99VXXdWlgZW7DR076SAMKr4kCuChYjgCoWFo4EpQb+9gSLuxTwlbMoSfMcGW93gDDL6AWqYW8iQ==","signatures":[{"sig":"MEUCIG9ky0UBNkN7aSZNu5Du6Y02pvnsbzKmk66+XfaKnQ6IAiEAxlrILVfnPuURW101T8FXkupxtGhu/PdLDbPed6NQliI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B36CRA9TVsSAnZWagAAyEAP/0xhcfd+Ba0E8qGdymDN\nf+WnmqORo4TvXgq8wzyjVqhpS80FI9WxP+PZvFDTIt8vc3xl4ryO0z0vPi/Y\nGvearNVCKwpXRs1YTu1xNQDqk9/UJxravy0O33pqI5hjt/tRmrA8qgO66ias\nOykIfg6l0JmA1o1ruAGhlamtn/mwBUudYiXbOF7f7qChwpWW4mnv5YkBT3um\nlBpe52m7DU/x02uAwDOkIKiqKktD1870228u+qfeSPRf8BeYTvfzvADUeLbf\nYh3Lo/8YmoiZ/dKH/k7ApDuAXoD0LX1sxCn49nuWC9zvUDTtg2vv+5wSEKZ4\n6SjENr6lvsuFP1HMfKPz6wV5cH4kjLe+tRFVpLI19xhTeyvFKUZDN+L/I6hT\nsw0v/oGAPZLSLRRTot5Zun2/j0uaNVIToT+kEUNPKeKAq/XG+CdF0r5YFDXP\nnNsH3vbeDC65tKEZYQWCjbHszoPQrkTnRvYoJgt+dzqMil2lgL7XDDPwbR+9\ncMAMW/60E6zVEubjLHRy0/HvWkD670itQoRtAA9p1uxyPsfL9p1aVNwn2HXB\n7wAYiQMbUv7LuNk/2BOfjSs7iBnSGLML0c8WfVfNmNNcjeI9UGfQ8aS/OAwL\ndZeScCQXxV11IrdIUwW03luzUUC8iHB5X8rqSvo8/h3dq1n/7MmJvH0w65Ei\n3XrV\r\n=haB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/list":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/menu-surface":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.39e6f71e2.0_1591746042148_0.4602672307992368","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/menu","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25012bf1564e02c6dace13f6b23c31b90b22069a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":37,"integrity":"sha512-eCheXWQBQ3g4PGnqYEBVrf0uBLslzipf4YX5TN+gKx5POYFJMRablPf3uZKJykldyob4rDURdiac4RNB/rBLAw==","signatures":[{"sig":"MEYCIQCxnkE3X7KcPICT6sEghK5OAU8asSQ1PPBjNCLD/WI0cAIhAIuTRBzM0dYFRqWsW3ldhBCIEiCtoFk05T9sQKG9rus7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m49CRA9TVsSAnZWagAALqIP/1uLAb8aaPYluxUgqs6/\nLITfWL6uikMnjs7rtqUeXw9EvRJETkDkhoPRK4EFHruatUm0xqwgcHD+7OYt\nTnxpce7M/kKQ4bB+Yx0FCOHAzsXW/GnP8CHptWe8CH5ESXUxRGKCwx3D1rZp\n1UNPAXH52lzeFiZO1rdGBfT6c41zLRFQrjMr+9E8//D344Q5sg+eZLfwULNL\n/zeIt1gD8Bm4fGX42i68r7RoxyW8K7K4Tx7INlNQWYaRxA10NF63+HYo6Wof\n7m94d6zJgIuZ9ekFuQOpG6Q+qPjHsFku/6Si/mOYPXOAUZyScRCBoZZZFNwr\n0IgOdrlEcSNrX6Hch2iI0MDjjMs3fHLTvVby9mKcgHMa3wrQw7VfIOb/MxLY\ne/1AX4IT7XP5v1LGKLn0hKpNRYPBtLUu7VNVWiyUnfZ5ulDelHlTgxPRkf6Q\nmmlk76Cwd+yuQSTwdimBCyNoT6eBHFdcBmoWjBzv2evKDE+Bhd1RqKYDTEu2\nxNRTG8tSAUMTiyc7JZdUEN9eNVZSTOAc04hK+QMTLCWcgvu4D+5e0n3D4Zo2\nSoTRr1crHiOjgZfAkW/aSkt3u6rp9Y29mXJNj31fDi17Xe2PIJnDXfAjqTPr\njF1o6BB0nvHGZg/MvMJEmhp+CSWB0jUz9Mczo+id6MOMzi7htJzOxvufVkNr\nv8Ky\r\n=5aoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/list":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/menu-surface":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d4c66dc7d.0_1591897661477_0.5493258512887438","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/menu","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1276279f2244f08b7d72dda0e1974c8953b64dbf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.be4a19f9f.0.tgz","fileCount":37,"integrity":"sha512-o3YoZN45+hCJVOzi+bsQg6IuIoj6D1Oy84p95Bbc9mZxyQqOp8ajAbmOkaj5o3IL8Y7cRMhXbrdBATSN3fXeBQ==","signatures":[{"sig":"MEUCIQCIM98tRjdgJSTYk29Z3Ydy0MT1pFYomkrRGUu0ySw0vgIgJzhiFT+27ivh7FXv+OS2o8TGYaZkn2FHlSNH5eYIYVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwYCRA9TVsSAnZWagAABrkP/172kpNSkJDhjCJ18lHm\nxVvUFgb735AuejD1DZtfaaQ27AskWwmFWiJ28sS3b7KaSzW6++cfVhNUKh09\nzzKX2r9RGYk81a7DpJxwexuJ7nUFRNpAFM6OlHNVYop4HnNHIxTx51KofKHl\nkmF95NY/p+IDUg7x4+2NRidOYXQD1M7+V+u65hoRSh6f+zCWztlrwiZak0d4\nPqZn1RSyDtazCIJm0MOZ1NZnOnabdX/CxxbsRBugnjqO+SUaMy+1MfwsWzcd\nBCIexW9GrXwCrT6MJfXpQP90SQAxoP0TlEc1Ye+ktYOhQieBxGHTmFa3+HV/\nR5rBZLehKc5Q6EEOsPEj4YXZioSXRzOR7nmfpDIFRyBwRdMpPooIOtuaXaJ1\nTlH9fgfYViiOxGb1FuljyuETiEz3zlRfB/xDhvPFUBATMrtDVZgaRRVvks7n\naAaxStrgoipG2fJh3lPZs7VIgPbsVZUvEAFjuQCScIPbR5Zy9Cv5w93OLDXD\nkVHaaS++2cjtv51b5QmBCATNk6OvKbQ+uMVD2aZeKkFkTBWe6rjUUvIspHJE\nfMnPLxfmunaGmRWDTxMd4T2p7Tv41da9PfmARbvrKckF7dXtFFay53fUh5Dy\n3Kat94zuX3Q9yQbjtR8zNbvoruUm2F3XLj3ct7N+6JjrY0GVyo+uP+EFR9lr\nHbVf\r\n=+bLl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/list":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/menu-surface":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.be4a19f9f.0_1591942167804_0.5796935964794176","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/menu","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bad64f924f9bda3019b2bb7c2bd05ee267fcc35e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a6ac8f629.0.tgz","fileCount":37,"integrity":"sha512-XBgxGyBKS1kHubH068+zpLYutgc8aO1WzHaVEsjEIz0PK6O3wwKojoACaJAwt2U3l1bBKfjfSBcewk6JOmlojw==","signatures":[{"sig":"MEQCIDPcY97zomSMg+u3WHM1dzoWBwFk5xwJtOEfwy51OQ32AiAFSdewr2ekOpHGRx9OGlNT84KFSS2v/msVq+vce4B71A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+jCCRA9TVsSAnZWagAA224P/2iJzMHhZtavMJ43GkOF\nWoFrd4mNYYNvsgAdWV1CrTfojwKcJwVlZEKgU1PG/rKkxUqfcWvO0NjrFuwD\nDW2VmIulF/CpAY2eoC18torV6c809DfMJsMtwOLB0N3wW2g4S2S582BadT3X\ngdiC5PSlM7g+EEp99O7j4ejrzocUI+Ph80fFa+8qPQYatBwGOhibnJ0a6lVV\nsVGVj6TAgGIMwoZ/rwV0Z9kqhJTIjZGFSO6DTBDOANGKadgKJE1EkLzu0XuY\nzpuyWTqRSJXMh4MbLwJpXuBIjXGdGq4CHcOY30COqxFUkvfNTlT270V0M/Jl\n7KmyfZojTaEEew+rTPA3Os5+1c+eekrFbPtT9oWFCzVV0HZnm/P9j3WbVp1W\nYGUQxZM/ICUcHcLBgI7938Oho+R195ONquHVQw2tP5CYqifi/4Nquan2kWE5\nrbh/PwJfWLz8FgEvCRnM2rYZo0uuoOGKfKNoofBO8k56wxJCKmYpa7ZxE5RB\nZR9sROY6KJbkW8HOg2SpTAwBXHDWGorQ8U8DeK1aDo/07JdmlJWf//F1cU01\ngDSwYDox0oE1ViRwsp4suh8KFop4hJLPDpCLWbcjyYSh+vMxOLSaImFHds8M\n/hzvNacq7PJS1+my/PCh1PjqYRcSmo9UhsfUbz1eQbX9RG+f1OG5o66bpn7f\njwDi\r\n=nnoA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/list":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/menu-surface":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a6ac8f629.0_1592256705683_0.7037713227446409","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/menu","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0434f895e6995413b7f44ece586f350509daa84c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.9833dc287.0.tgz","fileCount":37,"integrity":"sha512-Qt/np75zQFzgtOTaEm+iIjwmoI00FU7+A+a7HLPpy9lE5Vegjs3x84zQujisu1832pCuFUWT5+J753Qozro58w==","signatures":[{"sig":"MEQCIFp/FIetNzpM7LaxEmP4wh3s2F0+CO7/jle1AYLKPQK6AiBMjNORpiUGvhcR5VqbueLHvfpkLuM2+7UVp/IqfC/Q7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJ7CRA9TVsSAnZWagAAgcwP/im3csXJ8hQYuG/XIeH3\n2w9eoCm+iCrML0T3ef5zyO8krwUatfH8AlH0UaoD3k9QppdZ7tzOmwyEX1j2\nmvBrDA4oNNUKihU4WBrWw6BFBRDFKYQjJUkwelRskt6K0HqaLby1lKNiIn/d\ndYe/ASZUVlPUR1VqynZqRaSIQIz1gM8uoJcdAWF48Y7SMrXpBWCpltPuZiXf\nWgJWfJlVVoqXyWcghG3bFnVqv00AwI/Cee5GVGvJoOml/H/xY1AYU8nEPxsi\nJL2gFZiiN33OoMuNd4WJbltKLsjcg90Mj2IwlIOh5tupx3tXq3gVaiavnkLt\nyH3ky+UkFmepB15iIP0pHcNx5c6E34SkcYtXxAH0cM3r1wKFhPt/N2WBR4IL\nUmI9RVfIBLnz3CmVyZpIven9yDaZmDsAIsWiLWS83xLSl3u0l1kXE4MMggXp\nUpAuF0EaYYlQa+9mpYKYD5AWjaN4ICWEXBvNJeBJncAmXt+6vfE9e8ob4BEx\n/vQxKZFKMEnk46GS8XkBkfRpAPyox6FJYDae3/d+L2UJtH0GBMB0Ou9iIp4o\n5MleAe+hlHcJjzUc70Dxys8vzTPBTTdLmZlA14l07oZwea9LmFvGQXmD1aTD\neDpKNY3d8DI2qYYV3/VJNCe8t1robCVknLmp0Ww9LiyPh57t/tx0bYuL3USV\nIh63\r\n=SvBF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/list":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/menu-surface":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.9833dc287.0_1592337019336_0.9617364748993356","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/menu","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d8e9f1595f80e4baa07610f2ffcac56e64502a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.3aa33998e.0.tgz","fileCount":37,"integrity":"sha512-lmjxZEuLc7SiAdITeq8f5QWEbw323YAsWVyoNQOYvX81GNBMLGg3J4se3Sl8GwHHg+vQV45ZV9h2+07A4KAXsA==","signatures":[{"sig":"MEUCIFUbG7AWwxsxPNrsSTa+yY7T75dUjpLXs/Y4m9r7av0DAiEAuOhuDsHv+Pqjw4LloXHoe7hzgQRRA5JyU27oeGERoq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":599816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SoBCRA9TVsSAnZWagAAQykQAJOQFYab2mMAvlR8l8ei\nga1xzlbqQtzPvzUCGsxnAB8gHG/+zWWlY5QuewKbtxlXBi65jpGcwGHqIW9A\n7tzbHe7vQGwFOqPi3/t+B1tqOXcF6T4akI5dPMB8Hnu7djIGba+VzHOpaTkF\nEjBNpbyN4xlR0zFB9daQYUSdlo767gRG1S+RvMPkLSNrnXXlrzpxtnKaiLQu\n4agWAjt8m8gtk+0KmrzLKmemAd1fdWv3nDQBuqm9zY9Z+KoYhSgPYslzcJIA\n3JhNmDs5HAjpuJHK9Du9juV1MMy1sdbID1cU4tZ3VRZHKFrjs0rnjepZe/CU\nSXtHmzufLFf2ZObLtXCvwhjku9U8eRWLmB1VSqWRr62W9hBOH5bJ4lUgzhIj\n+wrsAjxNB98W50XQbjJMna7AOq1U6We6PIyqUi5f3kdhw8xLq54sCQoZhXRh\nwLeX03cA8sJfkb/eeZQV8oEehmtu2QSoKCB96/oLqfad6gyJjGRRTe2dExrM\nCAu0rp3BOuAiGwrKKDZSoyZNe1BVsjH3c28YVG2vM6Yc2jJ5MN1wABUGZFKt\nLRtN21XWsl7SJ3N5iIpA3LxjZvuKcCweqNWzEY+Cnsi6/CXLHPLSsG3YThc8\nItdBsLv1axM6zsEs/1H2+kaCjMil+L5J5NcjjC0Jd17Tk7g4omhXQW2DMUHJ\nLeQX\r\n=KMR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element> | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/list":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/menu-surface":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.3aa33998e.0_1592338944596_0.986897933453365","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/menu","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"386ac071afbde715263ba566797794f403eaab99","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.d2b54d183.0.tgz","fileCount":37,"integrity":"sha512-CFC8eFw/7nALVqA2phlKMZf4m4EJ0BIVVsGY+Gos25zoMhiOp2VbZKpzd4ilaSmow9Lwzrwb4sUEH6S5QKrbrw==","signatures":[{"sig":"MEQCIGLaZOpsvhoeW04qG8cPbLDdrn8E6dk708BHujQhhrZrAiA1Cz2bcOW4t2eG4DYpwIyK0xpMNMbIYljQMLSWixEpnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sB5CRA9TVsSAnZWagAAPzMP/RDGpi31/AL2/O6+eMBG\nHZndCq6n03AyU1arF3TdUi6wbx89lAu1u7vxMyuhlDNuSKHAT3YHNiPg9Vci\nmRg+ZtTSdebx8YjNNMtS0X+YCaxOfJyRNzg8uyQhTA8o9uBOq03Pt4FUTdMk\nxeS5u9Iq2NHZQDA9QxQ2Kl08+lcZ/C6YJSn7LH/4dY/dovrYRgbv6pMuv7tQ\neyD8Gtp9jwjp8Zr8XxcQCAe59vXzQVzb6+YkMyOavqk9bdhrWYsl9kD7n1sv\ncUEi1IiazLM7GceE9v2bzLk0iYJQ9ZUtZsMocgnXpJRvonKhWyuaeuP9yXHE\niE5yBJwuFGg341Ifc6PygUDzSWKFu/eaTlnL3uTdYVlcn22B4zCdnkA8IbFP\nfjNKrSe+TUfSLDeEsyij76n56N5/PmXhkzg4eH+dv6zUmNTekzE5JwSTz1TE\nRcnBSZCLciDprNS2LwujSF3LVlspYtLrvdsSq5uA+qYtNDpVEy1ElT0mc+pt\nE2Z8DZcubXp0JpOOAvzF1djbFHlxyWhmveUv9qOT0Stp6FGdrhYeCHHDn1hA\nDLY/9sgjku8vNX7sGsNJUuxlcU4ajrqSbw9JFf5uD3pWqsC79SU9FbL5FfID\nojkHSC1p+DnakJL7VOJMI+706XT8ZnU/pdylTyxt7FYxUpQefN9mjCP7BG6V\n9cro\r\n=Z5Qk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/list":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/menu-surface":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.d2b54d183.0_1592443001351_0.9940969810926452","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/menu","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4cd010fdf86bbe83dbf29ec50cefb0b3b16bd9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.f2a488e95.0.tgz","fileCount":37,"integrity":"sha512-tJ4gTnNRcHOWJRU2OT2Tf6tO15QquRhCPBLxcs7V7H/FMxKV0LQVSJG/tOHgOvP9ZV+8jV30h5tZg1s0kdbA4Q==","signatures":[{"sig":"MEUCIBxUG9TKF9W7GBcYhn6kKfRgVgFmLE/TjO46LhO4aRXKAiEAuzXm7AupQVWGDmoIxa7NXjthzu2aGPnvZ7/T5VJrwvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KyCRA9TVsSAnZWagAAVCwP/3oDMrJpmtuS4rt1FQIe\nsrm5iHBrDsg2QCFhW8m4/trj1hKAx9mLsLpI6R9kXMvBl7+glHnHjo4VpeOd\nJcrahN8mkV2BwXBr/ba9+o4eZvzTqGX+8NpDR44KHB0y9fOa+nkCp7jqvdia\nAgHIZEXtwaArriXqG8JvgLTyXMXkgbIodB03pzNiiPgRbGzkDbWb+p3UQNBB\n9cGSb1352sXXzigRTV12FE2dsnsTkPZ2VLxjB/aSsdAv7MDyjDSRzIJ7PYF2\n4hyAu/ODcZiVdKjgRHlCBOrWSws75wwhWRl3RyCUfwMJNpRJMAMPZL6G/FL4\ndE2u22qEWwBl2buZdPcE1YLhqomq8MwluA6yV3Wz7lhS0yOfhFJjFgr4qzgj\nArAFUbVtmBIGZneBd6pa2lRH2uujg97kp/62Qo/T+jTPO8PjaacRqLmHTXn5\nWwtRZjhnl2EpPeSn12NISnAXnCghfC0OfByMsQRdviQxfcQnuoUoMRjKQC3x\nJVaZO15F+UrwX0Jd5TPPwrkJlfOuYKwhmlfyGcJUrhX7nMKNVDWd1VVPaO5h\n+GiVQ2MJIlw61vodFj/Hv50dgp7fCdzD5I8+wIsGplaLyRXQaJegM63wVJ+O\n57lbQ8TBvLOxT0cPnEnJrkYKm2ZEAUDG43yNIlyf6X+AaquuC4u+8wyfqZlu\nrRio\r\n=cI0h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/list":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/menu-surface":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.f2a488e95.0_1592492722078_0.7286331482844397","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/menu","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ec6eec5bf4e4661294517298ba1a0f8f06b3284","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":37,"integrity":"sha512-6NLbyc2hmwcikxLzfWU/a3LceZvrfqAn7rUeFiZ7ebWVLe/Ph4F4/oxdHGgoyFPACKSmWJtbHV9rPYMDHxV7iA==","signatures":[{"sig":"MEYCIQDmP4mh6QpM89vP/wbtIQykBb5jnc+6x+uksXaY9EIwvQIhAOYlZgSXNJTzOmaIkoKj7qXdzMlXMeuDJZAvPfzgroGI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64WFCRA9TVsSAnZWagAAk3wP/0vgif1C2IvBiRBgUyvp\nFe3mP198SnPCOVj4UvWC5sLmUuqxq1IgERDrKU40Wg40drQ/EncTQXe8dvMn\nRDz49P7Di3Q7/MDldgsrLUgowEZYvBcVjl8GPRN7eQhB11+DZNlfORv6bR3b\nXi6T4Hhrw/F/c+pSqSIT4wVjyS5AxtQJTJhhDf4A9wU7V+8NGn1j/C9GGBVt\nb5pbBVs3kjlo9zzGdDBkg1+pBDx6pPWu9r+tIZaZvFF7nwYnMKdJ8PKLYHyb\n4XAoGdAkG6GygYR/lNujC4xDHcBLaxf5ynfZ1hBRjZnwH30/HX62/pAoivMU\n+itW64eSpLSmgEnP22zFByiZM8nMHN5qgmT6z+RyCqRGlHWC23t3SDk3wKMY\nYrCJu7lC5BD0PcwwrvXY3C5oi9w1KjWvZWvrmrvuGEemsJEDWDN5aTLjRC1p\nlmeB9YDzKsQ+qYuO/VJ+cHS631SRrAOK6GhTMUkD52HMW/z8TKKtkywbr1fw\njOBBdmFf/JTvr+1R0ra6U39IjPM4f6x/rM30AWSWbVtEzx0q/kOfBc+Z8Sam\nS4Mewa1CgZt6L65nv7SIelgruNRHiv0/x/cSvLtnp4CYVpD0EsEn/IdDuL98\nFoxcvDTmvGzhfILOXEn3BHvyJv76t+AoQX/24IcxU0J1m/+jWvAVXYKsYPyE\nQIo5\r\n=Jiq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/list":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/menu-surface":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.bd8d1aafa.0_1592493444571_0.4389514074396239","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/menu","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb5bec44819a2e094e4670d68bf8cd330bf1d22","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.1321eb968.0.tgz","fileCount":37,"integrity":"sha512-XuLe9EDpYTcwtciJzNy0ROydlBjChdOueE1IjLzZr6wzCWsTCFqhFzL2A4GaDZlQ+vQjTLIlRi8z/DtCF5YOqQ==","signatures":[{"sig":"MEQCIGICk2SqRBesav9/t4kp9mCYtgZSl98nZzOmQXyXIhuvAiAprRU3GWJ12F7qxGRIdDFMJNSAZr6+0wD3onsccaHh7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBzCRA9TVsSAnZWagAAFVIP/2Krj1hpNSM0jsjNSxKQ\na4yR5/A8F/ql3nfviIjdD9w7hrYXqUJyTWeWsE1R8BEWL61n+2BuoK0BOKdD\nlGe7v3Wmv3XUyfIPlhTzJvzVsYxrcAoMPCkpyGprBxqpnZoeBKeG5CmHiSUP\ni09mQ+plz3W3b6hKBupYHJcsXl1O88GbfX4tHuEGOPhNdsMEb6ARfNR0MKQH\nH9k/0i3KSFsJnOAhCg4cELKI9woGR7T88M8d7yiSrIsSzXeyJc4klSGd1Jze\nv/m9w5R+j+Jsgl8rIAZ5SA2JakQjDXopqz/+Gs5CvtxgzkcF6pw/GKrLw4NN\nq/ibpO3fwW2tigqS+9GCYG1prHW/4/wA6y5hdALhEHlWuIRr26QwICGOOcQN\nxbHFXi/3lAtm4NfSz3wEZkBK05AluSOitHVibJYUqwWDwG4HPJtOLewmja70\n52ielTN027HKmLZVuMgdx7QMODTivWZF77F3/iuUyuTUcEzZMDBpHdUyIUJC\naKsFIkKUej0zQFL22vrCSCMRMu2fZHtaBonYpjzIXMdE4aIaVEtLLmo4lGs0\nC2yNVvSwmjDDWzY7GEWhteqoxVJO+AI5OLjbzzqHDxfRXm7YsbTX4qa4dl0t\nj5xH95KzZwSVj9LOiZU1jfaXoMHsw0/S8jnDvvVVAvWbt/Cs+10tLK/H7yT/\n4agO\r\n=lPD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/list":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/menu-surface":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.1321eb968.0_1592594545914_0.17831560595807128","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/menu","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a27a44c140ff9c7352bcfc848680b18c5e30f03","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.db5cc0382.0.tgz","fileCount":37,"integrity":"sha512-7dQBaSwT7XppMNQPQGM6nwH+01lUeEINoBxdopgG8DFroaBEBn3MmOaG8ybbGET7Ujmpvte+Yh7B1WNsVUUnTg==","signatures":[{"sig":"MEUCIDVe1zSMhrGjcPGaz8Eq7kCBNygjieUwJk4SwCgtJ3KmAiEA7floLDAc4DX/GzTuQkiVO69xQ3QSllY/Wa2Xg1d3//M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHvCRA9TVsSAnZWagAA60EP/ilz0DNfP8x0byfVsab/\nvrmQ/5JqkbiO9wXR1MYu5XnfTBdqJ2FW55+jVApnP2SwbULioNnfPKH0n9W9\nPoPnToTkYmG+eaFGmIK0/CMXdYZdRAIWM+zaSAvE22LYeWwPvdsbVEMDelqG\nXqAvO/VRyLW9td+X+fOgYHgrghlu0IOZeGNw2qDe9cwMAab3ePWxBL7utA7S\nLGP2F+TQpxesJx4+PNCKWWz6Qe4m1GiGDRT4tPmjyEQk6oKcmr0amVVqeX/c\nZlzlhfV2inq0STrZ0QJ7GcDpk7RD9dMQjNCZIhJ8kEBLW4ZTqBNw501PgkAf\nJ3IHgsH2SVk7mCPVHiRPpnwbEQwMM3jUnbMhZR0e5/R7c7VBkPLd2X/1pjfa\nyqG4dthYULqH+z10NkBqkhSuZoXITWSr6y2csGCzq0ri+HXs5MJNEirdKpZe\nzW4I7YyJM5stO4Nrnd13lBaJ3N+mwcPS+merbNuNV+U2V4Wi+4N4p7HrB+cZ\nHyau8NM2biGUScYTtpRLZLqPav+g8Xcw7cM61/RBMNFs8woMLQVe+cVIRSEI\nRf3erZVRHu8fdjcsZAuD+KxFwRRqaxVt25on9+G+QUj78sOcFiFUw5rHbOF2\nPAp+dwuEiA3JHo4Z2j9uDVOTIrf4tUWAsJaKsoFxrEwP/iJlOdZ2h8Sy23zJ\nkFX+\r\n=ngjL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/list":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/menu-surface":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.db5cc0382.0_1592594926803_0.6854705815235356","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/menu","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe68d13ac3ffe1c6f4cd21d17f552eaf2ff97d7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.6ac9bf031.0.tgz","fileCount":37,"integrity":"sha512-OV9tlSnsikjnbkg7oXOnMVmj5x7ZS0XB3cZFlXvMQm6T876/ZflVkvUv3xTANBTp0s9+B2MxzEHCJ0vIGprwcA==","signatures":[{"sig":"MEYCIQDpBhwaN+Gn3NKJ0NAgbdy84rn7Si4cZeHi8J4w9S+YAwIhAMlB1p/DjC4zEOP/Up+Rh1t1v/RFDtH/3BTeJsOwHYCo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RbDCRA9TVsSAnZWagAAHcUP/1kiFs6nW2NTaydNTxyu\nhCDhBI4bMaCLwwuTCQ+Ki0vzFRzBLkDimqNOn1jKl5ox8eyhMjzSMNogPIkI\nqmGeLuE6zVQv+9dEZYGe6OJ9ugxro/JH5iGaWdskpK/qt+g1vq1PVsnqaeik\nF1o80OJsOnhitKFePcCBWM2MOsXemPY9igoZA976DYZMW8WozMpsLSdhHM1W\njDutf+D8cDGEyugmhT6he3/XuGIymWHT2dn8iaTUpGTCdEIUyRzkTOFtlwVS\nn0jOvCrYlTYNTzvtD8DhFxyHl733IS2XQv10dCUv1k+9LbJSCn+UutKXgwBG\nfh4mgOpQeyrIwvFZLrlh6pfTIHaznBfNCwjr9O5twSpDBomyoe5h7978TnAD\nMPVrOkamyMfh0dGeACv9nMF0rGFqZocHPRFJ2rYjU+gmDWBUlAPZFOqE7JeS\nQZ6azYjLp8Wdmx60vK7xiCawwMKERcuaZYyYR5ZbphAb8UdNOuoOdOyNvhQe\nxGjs5xen+54UMUFU+BRtU93XeDjnj8s58lHqS1vmciSxnuD/gFUSLr60qbol\nkk0JAQrsH9Og9uIObj6M27KQ1bL2m1aRr8wx7g1u0YGyUEhXKOsp8Qvs4fe4\ni3NK6sJuzZgsw+YJyab5g/rqTf+NslYfbyVpiJ2ML/35vGFv7mFP8M0F912B\nRr+F\r\n=tsyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/list":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/menu-surface":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.6ac9bf031.0_1592596162956_0.6431084945629393","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/menu","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded601bb542ecdf0410a3c6fe7a36cec4a4f41db","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.c21b5c367.0.tgz","fileCount":37,"integrity":"sha512-6e4PaLPLTYeejZkoW/gIlha7XgQa8CwwiLMEz5XesbzlkGznkp7Wbjs6YBA/Olfu1+pTO9sPFSPWqVd+2MkG/w==","signatures":[{"sig":"MEYCIQCSpod0fEy6bYlPuYPIeAT/+eavnj7giMulUgDWSP42IgIhAO8KhrM4Mvn8b+jkJzWNCxgFPkE7XTVA3TBEh8jwNblq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RwZCRA9TVsSAnZWagAAvEsP+wabL3i6iHHMTp/Uv1Ix\nRTknqqjrly1hSU/WKXWeE0mCvi7gqU5XbX06Hh/vWk0g+FTAmCtLilXWBpVw\nEnyOtfxItOSdW5sQqZE/5MaAS+Q8wHk6FEhMuvOF7crXIpW1AQcULRbvmLA4\nHPA4XRErJNXAHLdY6J8cvzYlk8a8kUf7JhOCyYtRJodz3ldy2HhEGIQ3klIJ\nLfLDY4yStCTtKyeoqrMLeZsD2RrfrfwFUhub97Kiw/Agoyhf1LEzRSwrGmnu\neG02C6JGaTLkIR4GLCXGg29YtaW3ro9JKvREnGj3NjpwCfNdkDDpQ6GxxYcq\np+DCPzhL85KuDuNRegusxmGs+COOO2cm2mQZW/q9S0j494uk1TLJzIySGPx2\nWeSnyi5C/jpDHjPYDF+rRzcDqQPxlxe9SU+Nsne0AdRac63CHjybzSAvGsty\nvidngH1D//fqhEdmCFPl07XyZWz1F/GiQIPDpdtcXVYcXIuEpEY92u3QwfG5\nhmlomlMv4TDaZGpDOUsrg6CYrFZjuzqDDhaSrRQ7ceWI4CYtzpRlFZeho6iU\n84vChCpS0TDwqkDTuezdMLagQeIzUPUx28W8WuxdOCDIC3l3Bdd+cSZ0CKbp\nqLqOLxOGclkTVS3UAcNdPkOx78RnbhD9M+yqfAiNFhZhwB1DJjgHxM48qwA/\n9ihb\r\n=oAb8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/list":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/menu-surface":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.c21b5c367.0_1592597528975_0.22262503130805378","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/menu","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2df0c221876f9a90cdc1c756fa0530470bb20e16","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":37,"integrity":"sha512-D/CpBkTS63ceUwleR9Vyq7HpKxY+gW66HkDEOFaGZyYaDmlFJ7rb+Vd3rgAdIuJPvMPrgoVU/N4boLDenKHw9A==","signatures":[{"sig":"MEUCIC2FWj3fPVHG4Uz2WHwbOFmOoRmHAPJY6NhlGVYEvq4YAiEAk51lQ0ysSRqDDQXoI+E9mw8ShpprjgdvcnZEoB0cULU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4vCRA9TVsSAnZWagAA2ucQAI5qnlKoQ3qRlzgaJJ6w\n/DLGMtlyxSUchqSh3FIzt/G9m2E36J96EgVGPkbbELrPEXDLTF2I5rafs8df\n1kOt87oZEtph1brGCooxKOBASv1XIB0iKPHB0hsuttYyUeQZqI6juW6S9YXy\ncaBSrTLkl3yNKPMz2fOCng9fKzMmoAjeJpot0KUBawrdPekqAPegZ1MSRI5A\ns+0I1jcbyE7zIreiSg6JunnHXLHB891yAXiEjRTIdrkrQaqwiS5hRaRUsIOG\npb7FrToyvW4d9xDfizQuJ1dklwi/IKn/BahlrspTvVc7sbP01r0uTwIGgaoZ\nFxNHJxIjIrlHgGDNPtfP7DRJ0ml75t3X/wD8/f7Rp45OKcDsMcFbKpPI+Q+7\n1BMn/fnBuwOL9SJfMnUUlHFapTMBSps+35vzGY+vFOZ5Xu4QP5iDqKPXjQVv\nqbNH/85Y7JGW2NV8roU4GWu+iAz3XFe/SJUJPpAADL5na6AtL80X89uyePXX\n19OJraayTZOYP5X1e+v+XQytXZ2qFzBqqpjNC1AZVJ4Rz4bLdvdzEXrFajSg\nnzDPGzSwJ/iuRwHuXU8afR571i3Y8eppTCb5+NE/KGcbBeUCaJY3WXUbpywi\no0EzRgMzs4J3iRoVp9KqmfzBY0v3N/tzK7sYGBi6cZAwar0qchXK+FSqNev/\ng+7B\r\n=zH44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/list":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/menu-surface":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.bfdd7fd39.0_1592598063065_0.49932460975680604","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/menu","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b34265210fee20bcb0da05a3d68e5b08944e55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.10b505785.0.tgz","fileCount":37,"integrity":"sha512-QWndilr8FfZaH2niphXzOMDPNKKglx+eam7Y9Ua8FQ47Wie8AcMLFKWFY7ulpIIYP6lonEWVtuL08E8KvwyYCw==","signatures":[{"sig":"MEYCIQCXR31HoTWsVfYv5sqVpqk9Y+1UXl6QCvbDDI1Q+F2+2QIhAIYdWY3RuR0XMqiSD9DCO53OZBTEO4Qu5sXo4Na8pcB5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R6ACRA9TVsSAnZWagAAOd8QAKQiTwTCfTIMi0wc0Swu\npKbo5+OlwwR/uIIKi6WWyvhspegL+5QLtY6o4IOEDOnxlBfEtkyUoZ+/tQmg\nzHdzQq/evHjCqUu5NnMob/xnpjrBbvjM6vLDyUA4J3fb7s2shZ8WW50Q/JaT\ni8bdV+s/rsb4jmS7RQtgnPg0cO8HIL61tLET5LLNIGVF0x6GsOt2j7UYd/NO\nB/HQPW86N8c3nu72nCcZwg/fZGM8WZXnTjuZi59aY+4jsJX1/+IpXz47Nci3\nlAVRwC7URIFLbfgMNNm25m13c1NuoJzL/WmRfjPnupQi0yvbFGWGnRNivZGg\nCpHr+6N+Cp/U6Nmymnoi17DZExb/TL3Cg4eRS2SxeuNJBuj87N3mjDH1j3yN\n1p4J6nw46e2xLgDSDnDm15iclzIIEj9+jcSu81woYKC0LOOccdBchDV9i2DX\nQdxOyvRpieNWJoBVKALeu0sJnPAE5Jnzi9J56snz4vJWIawWs6YArHi9dH/d\nOLITOSn6FIT5TYuFTzjppaAMfWIpV4GZwIovqjxEmDnLZnU/DHB3XVHN+k+K\n+lsyzNVgnEfQd7qkGmWh9bs0l+TXT9NMzXbiZ40FXvJH8hDsaxF8tPbxYsfv\nr1lM1qbCDWwzvwclyWJmve45msajo1Y9xC27otLqdv//O6tIjLk/ObqZh1HF\n3AJd\r\n=DlgW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/list":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/menu-surface":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.10b505785.0_1592598143977_0.282735593372788","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/menu","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e75dbef0efa3f1b346425b76017c17d7aa5d6f97","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.6483d3f44.0.tgz","fileCount":37,"integrity":"sha512-IpPNdavu/yf7lcxiaNeSYcb0iG4Qa0gIe+G3l8hvHLhU9s/J4MWZoBKJkUHbiqwsnQKig64PojYFE3QjAD7MKg==","signatures":[{"sig":"MEQCIHbOcV4/Pd5lU0EECIJ2B4OUPwYUPkfgHN0AtyksnFMTAiAEO9j7LCBsjXT+ohWvblHQM6ycDI6/F1Sw6XIdVR4jqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJPCRA9TVsSAnZWagAATqsP/iloxbUW8b3xdOMJwdw2\nU4gE1bZJzxLPh78/FOu6ljrwoivdfiKLvsH5py85Ft7ijj5iegyawcYRIBAO\nYFDaLHhDdzUDusBqAr3ehLEXesvu77SCXzJU0eq3gOjkS+YE8S/j/DqR9P2b\n9CXoHJbw1OBl51p6Ww1+q/5VlvX/ux2C9+RW+BhLpDlMKyEpgT9a1mOBPr//\nwxA8av6bq0KPA/5ZkApIHLUfiLirBPtf1MbDP9QhhZIKZ10nUhSn6mbRFDGK\nP8T4RlHa6kDlb0Ctn8EeAxw7sbEQi9rgbNdEEe34z9sbDHNTBJBA3cdJBIyf\nD9VjRCmj01HNaWZzFugUhx8g6dSr7/FfJMyG+oIF8xzJIaTJtCcXemaMky7M\nAXaatlOHZTMyDNhvH60gXTdSqbKTifeALPKTYn7G9Sx4EvL9n406fIpF9RTq\nut/6KWXph0LaG5885wWBZbJWLXJ7oped5HIy3TnpF6OeTt9xhbIXwnM4tWLZ\nYLyjy+5zvF7c+YA5JyGiFkF7lkBLBM3ipLHQmp+yemYj7ljdaeUb2NvhsdUQ\nSOt0iuq2huurIAcc2bOgFdKr5i/DN1HXTPTIK+KFaNPHNQoswF+ReFi7fQqN\nnpcpXOgsQfeueWsF8p/DZ9QvTj99w0e96rw2CCGDu8tFAbKnfOKF3Ktnma1h\nxAut\r\n=++4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/list":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/menu-surface":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.6483d3f44.0_1592599119104_0.0055593653565448875","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/menu","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98b8679c3a80f6359935e0519eb3fb9fd03fe08f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.30a74e921.0.tgz","fileCount":37,"integrity":"sha512-VwOP7g0lEUYCrT2M5+meAqORl9rR3VTkC5+zpl3fPetzlTV+wMYxEtHi4KxhHA4VpONCwdyD3eSjCi/zW+sA6Q==","signatures":[{"sig":"MEQCIETZ0/HprBNsNauZdoMCh9tws/J6iPdlE8Dlv6QuOGcMAiAfB+gs7Q7iY4ef7RUZIt/gYdZFIObYwM6N5P4J4wMX5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLXCRA9TVsSAnZWagAA0KUQAKDHyjBBJ5lrYLeoCewZ\ndSXulLu5x3fbN9mP751zKQ4mK5oib+BNN8XjtTtwROV/tzws3Ng9slg7eosO\nc4S1vtYa9GWPhjW2lsscHbFkdRQMwJSOirqyIrgemKxfWR20rEozbQfYQNJn\nghkMMKtk1bevPYUJ6gu6NfTQirPrX90H5/IArs3dmPmicgqkSuni0tHpBRVa\nAtlERgNIoDDuXGIclO622aO6Dpo1tSlcjbFYuW/dBMFC9uBoI0ISAV++RYhs\nTYDNemk9gRlc8jTgC2OANKdC9/BlSHF7w5LoOX3O9KiO9EWKQV1J5zosHUbX\nzyMJkvJ1PH/w2kaRIpfvlOftSuj/qRsL53qPQq25ZIM+9wbX19rkPGi54Utf\noss8iOpH8KadN6cxbVxQ5I9s6YCmK0B2PtyfRtjXLTLe0Gh5hmIJ04kGVjG3\nBHYvYacVcu0qpKEb11Cd7spcV3uqfmmYO45MYImNYCpSXU2gx4RaGMBfKqEG\nO6GFqHIofb6nyljKG6CIRxtlnsoAGJCvR+aJy3pKDWXzCrc7qTrLVn51oAzb\nj+38Qo5lGKOlwvUKOwBGGdxf2pIUShoSWIs0sAuQBQazknT4gOAibwNQlSE+\nIfV/WOi+ltN6SWDuDqWbnV2zzUhx+ngcPszbeVO0tDUIGtvij3k7FcoTWpUz\ni0Tk\r\n=NjmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/list":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/menu-surface":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.30a74e921.0_1592599254681_0.7538293104506912","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/menu","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8b1a9a5b3583a2e5fe76c1cbd4a4d1872aa6ddf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.c20727498.0.tgz","fileCount":37,"integrity":"sha512-KICzB/n7bezokZPJqTLtq3VeXk6bDYgLTuEIN9SzOGKutDYlvJUHtZlxS0RDzn/81Vjga+SYl4jHEu4wLlhhRw==","signatures":[{"sig":"MEUCIAZ8syQv+hIGM8lduKjkF6hjKuJZ0FolM4cxe3IWpfTTAiEArhidbKOpsKC20ekEZrEXmRgtOgBFDYpqH3+99mZEuzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SOCCRA9TVsSAnZWagAAdAsP/20nrfvqfdrDpgbL33IJ\nBMklksHuIU4F3agExFG+cbSSIerpejJyHNeXtQDc0tfO6FmG+87vErW/0lqa\n+gC02H4TWQgXJbBhHBC67bml4rxWwR6xGv9llzCPPj/0e3eQdYt41Cm0MKPD\nPg0ZZuPvz+UNcmaohe+I5i+cmVBV7jrnMbi625rvTZEeyBtC0loNGxttLYiZ\nLuptBgNVNKjTSmigj+rzKnZoGS6ATG9IvXE74liq9VkaKuNSCyOWUj04TccS\nAfKcmqQ/yuIGqL0DLVU65h7TI+TqGStmgLZEtNCq8hrR1CT3cezT092l24tn\n6YrKxH17tHsmoZHsTQwq2No78d5PJvK/sG7ZEgs7Bq4tIEtwt3r8ZwcnrBh4\nRyPPiuFEEtBdR63x5VwIKpcEjxtN0WiwHcz0CLkBgtXbYzMzETUav0AGxqNf\nHXvbXKy3uRTcPN53Lc7rA9wW01sjSsHeeCJ9eY3Ei18ADpAu+LUyK1eGMniB\nPmwvep2yGio9SLJkqD4CRIfSSfmkWEpXu7g+40gWaNaejun6ZeaAQH1yYhFi\nd1ZA2agfRDNcLHipW7fpWoeJzyKD34KfrWRsjlLp/I3zKy7V83nfHdUlB71z\nq1246tqMCyw42FmyUsoH4Cc8WC8mMMpDm/ehG3nxX+S8QVhrMNmMFaOb34Uu\nEyJH\r\n=s6cJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/list":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/menu-surface":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.c20727498.0_1592599425724_0.1399022520181139","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/menu","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171d509084462d1a01c63d48bdf8f3fe5b5a7190","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4e360ae94.0.tgz","fileCount":37,"integrity":"sha512-QOh9h5zm8L0Wd47uIzmq2GL4YmqcRzdCSxoEwBtqzOAlWFGdeDF2UVyqvB8PKNGJpulFbrhNB+8RRt6FQNbCbw==","signatures":[{"sig":"MEUCIQCfPT4WsaW//0ODWYV8lnoe43Wy1Y6rICEX4B5UKpDf2QIgS0TidjLDSAjLgucej8HoKhYTSgQpWJv2EG0CALIa/bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdqCRA9TVsSAnZWagAAxIUP/R0ztP/GBTCkuasujwvf\nEslBg5yrVqt0JCNpDbxlKtwh1rMVIzbPQ6DpGbqJbl3Pm9HSJRdP+nwbctQi\n9tQbo+mHyKOUVRTwGtc354ltfSJGvuAWhr9TDwRlHEjEcKFpLar7+jIiP8Pf\nW3RU1Tv7diEpGVCD/fJNUSnl5NyFkXHO77whT6GgOwXJvvhho0sYjqopZm9J\nQO//hLvG52D9LhbbuYiz3/exeD6yWvjYxgOKZr2wuNC9eFTjY6eKYCyrXlaN\nLackVqxXVycWzx8r0VVk+WZwfLDYGjJXvRBdlqTeDimDvDCUBEsxtd3AJCuz\nie4+URnXj7sgqXa6V7ihSMFIRqhkC4/+mtGADGrmucmJrDm+vGXvQ6fYhAUB\nCNbp7Pfe/IGa91fgZN3A7O068qYCWDT4JKw5ftl4Myiaa19KFkmWLetCsuF5\nEDVpUQUim0Osyy0vJVTih9wZ+rlbZZwLn0UeTBlzwazL7UX/z8gzDrLxjygs\n8s+kGkrkV9zpkU+YtwFaPHVmKvWaplMrdz+MOcu/8kitA5YTBqfz47Hd21wq\n9s3JQ9VQcOD3z90NG2yyQGpzuvTXQVO5p82XZFMjPY4eH7S2aQmtiA2QFVlw\n/Y4ZV4vYIxiIW2W78lkHzKaeozj1ScQRU+HXEjFfBDtUrPpVrGCYiskCl9l3\nSp4O\r\n=nLMy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/list":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/menu-surface":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4e360ae94.0_1592600426489_0.485397558795329","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/menu","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f7da5e5439ddb6ac9d391b71eacf737e015d6c9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8550fa53b.0.tgz","fileCount":37,"integrity":"sha512-xM6+qvxnv+woZY9JNLP7xFomIEm18DxupLOhcfAld4wVq7C6ldDMPfTdEf8E9VzGpMwglQfGamarucSKBvFhjg==","signatures":[{"sig":"MEUCIF0qQfzvGrQgzqc+kqQu9wdZ0a5a1BRrAl0bhS6e0jdnAiEAwlepaqHHTwRZMeld89km8eKXy4oqBSILGg7nftfR+zY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf+CRA9TVsSAnZWagAA9zAP/RHnEpWblYAiQbbZDbxv\nYFx+rOsHq+UxyoT/2bQXTZ8NQ4u2SGNp22YvjJPAuwhgXqIZS24BaOmPcGka\n740oIaI0LtZf5nfWht220+k9zWXpstGjPON6fYDiJppDEhFCsdg5Hfw7d4lM\nD9RIe91RijB9arEhekRXjAIATsQERlAXtUsO4xOhwzt2mfvvqpFUXekZ2sae\nrBBHwDRKo19slQ7TcCDR9MXESWOtG9qlBljgynoVFSAQJ+LCdRJRxKowHILk\nd3v7kOl1yqdtQhZv/mEZE/dt2eXG18HE9Yu/4rAecPithKxG493zL3sFXBxK\npaSR/4jeTQaAgem1OznwVPWx10bEpQARsyZZa1Q6Ij+xTUsL/5cMjJLfhkjd\nMQfqdnDAvjyH6hpu/UKeoyANASn6kgf4VUYNG47M1oQIOAFCUh9O3uetb1J7\nWTWe/XgETH10gU9+1hqCTL9tNcPoYxa0r/2yBMWFJvP0e9hZ94Nx5WTBhlV3\niio0citXlpDElpHX3oE5AMt31kV6PGVz1jZAIqIymn63wH6M9Pcp+pVDXlzE\nrAn/yu2L1Nm8ukv4dUj5R+7jyhpVB9sALY3DN7jDGHWON7/D7t/kbU6Ssy8V\nilcAgSzLk7zDaoky/8vlNaYxTOsMoDPFqw3RqHI297Em+eWbpMQ1nLQN/Lff\nI0Hi\r\n=h7Fk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/list":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/menu-surface":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8550fa53b.0_1592600573616_0.08384401968631816","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/menu","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd3d195a7d855b56cad736798ae317d2b5e26c88","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.93ade142e.0.tgz","fileCount":37,"integrity":"sha512-2HoTQcF0sHkCAFA5IJvnoW/awGUKQp952T9MUCIvtTa1nI6hDNo0ICl+nKn2Hi80EmOgGnsPZmC/va2Hm2xYjA==","signatures":[{"sig":"MEYCIQD/iTMWG1XP1qvghO5IgrTNEQK4aBTpxtGp8Yebn6Ma0QIhALMmqfq59FZ3yNtsaYwfkdeFqSgI9MNvfspfCVtBv7jX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ShDCRA9TVsSAnZWagAAjzkQAI2L9FNRGg9SP8/QwaIm\nc4fpULrDAbhqJ0ISWztMxjzA0i2hSpnOpvrkPWZKpSC0/LaycqqOr0AWN9He\nfn6pWF/V/SWcqKAuIXBrrBa66KoPWVtW/4K2MJ40OzsfotJHFmNNlf4eiIIM\nQA6lfeJZ5n9CkZcNQr4mIDyQu17BN4zbMDPDksDxl/HCxBq4HioQkqWOdfKY\nM9nfS8/ctOydfsxrrg0lFUHrZqmvFwZiS6Fbo0Hb1AFZ7a2J0dBNYlBs/4tf\nlYI01ThLjecoCSjtsRTWeH5ubVho7QKmd0V3g7eBVfygxuLAqnTQMb7prb3r\nQzR4GYfqORBT/odizN34gOYZhQAhKbppsXRpjYVnIDb/Q1WlKCiK87RcWu/G\nNUAVJMtv4OEduZo5sB95sNV9Vngh0VdeLBvV9naiA5yFU5mY/NUcNxVl84hU\nfieVQ3QejsUSe5Y7xRj1rvdOmc6kb9kayQRbFuOtwD0IPdyB8OFl0kVGMRJX\n1SKha0eqspLOSrFiek8DQIz0NXf5K8TOopqjXnRSmfE5P+PLBSEkBMfALI8j\n3aC5EK2EUoAs2iV//l+dDY0hk5/s5CGwM4ymMh4o7syO2J1L2oRaSNcevMIW\nuDVUEg+uXBE2rn/+fTAB8Zb7SHBPMZTOfQAmx+ZF5ZsU3QHNjzzK4FIqBoSH\nZ+6S\r\n=2ZgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/list":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/menu-surface":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.93ade142e.0_1592600642595_0.6459825966310238","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/menu","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55308820164108f2486e727c3fec35310c0802ab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a0032f5bb.0.tgz","fileCount":37,"integrity":"sha512-K+4tStYx/O9mCIoT1GPTHbJU7uNqUQ2T9aHXGvolK0KLTTbL691TXLUAeYwYoMJxmDENIkUyxNWpXnzsBFsWOQ==","signatures":[{"sig":"MEUCIFDMNsnxlnxdsSTmmFPPJ/TX//Y0TRZW92gnXO2BqVoqAiEAxMN9TMTQV2xwnBFKAPiukNyekS2rnqHpn2rfGK1tRsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4uCRA9TVsSAnZWagAAQvAQAJBXP8KJabG0RjQ8FlUx\nK5VtX1Hk7afmzoGI/FqVXfTgupW6p1ZuOnIuUhZ6ee+R25YT9IM8Y1wlK+aj\nymRTvIiQqT83dzUbxpNEkkPb1LKH4bFDPEa5mmdyD64Cxhs6F8j0u6nbpeUV\nrxkJ2LXyFI1j4NyYfZNjQ94wg3xioP7eRokihNiM54NEbKLIHa3ENP6go903\nFnahwLK1fkyhsJbNmerRSloVpHhzUTFxo+oMN6LoajhTcIBI9oadz8msiPqu\nfjsUWssq8pCfYD/E8fl+4/lU7k4cMfFqBot1xdH9pakFCypuccPIkTKb6+Hx\nbyllOHnw2hnGYaAuVd7HLvfKpv30fyjgl43b09a12phWLoKN5OqxSsebruD9\nMgeoWwUuofImrW3Uzr34aFnFEd/q6dLVZmNXh+MGQ0Y4kPAHuc91FhnXSKLO\nLHY2y0QQ4bO5eifpcoi8o4alER71IdndZuZnWLiFaFH0I7jYJUNcsG5+EtWX\niR1N2FtY6ZCk889bcC+IaMEWxcttTCg6ea+zB8BNvjHrqgk1KfptZ5Ccl55G\ncdVAumGZOX7wDtDuPo6d/JnVFe1vACGl8VFHoiVBLa52zFnFnkAXtF66Hg2+\nMyoxy5sDmgjTb81rIUxm4gwwy/aidiaBR0VcjOfqFb3vpQmhhO5G0gegZ1nh\nEvl2\r\n=YCLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/list":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/menu-surface":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a0032f5bb.0_1592602158452_0.7642918685792464","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/menu","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e7a881b4337b36b69ae9615586a0121ebba20c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.3f342e721.0.tgz","fileCount":37,"integrity":"sha512-oA8a+YZmZLuiIe+0WjoQmORuK9CZX7urjXGESCNuHdwjeO7wT2izEe7kmkA7eq0s3MpI+NkyxmZw0gpBKCBWJA==","signatures":[{"sig":"MEQCICUljk70u33fZ1Eks5HcJSyfNGguoBHn+zvKBca7jwndAiAexzv+KkQLn6QOSdNyAjbUcsOLsOksUdTWeZjYVcb53w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S61CRA9TVsSAnZWagAAruYP/1gHIsaFiYCUXOD18HcC\ne5oOaV/8PNV8GsEWNYVW1b8Ha8togOhxZCLxZiN2LO7YXNC2Q24EFTDmr9CK\neTI23FwqmDPSjBKCNAQR2vrZyhW/FuShQk0qZ8MV8kDRNcLAhNKTai0plmjU\nJ6NMQTItmyeuQMw5p3dPhmc9ZBzVeO33AdMcKEYFg5GEdEPalITnCU6MuosD\nng6WEogxDhSUYLLAq8gnAXqZLZNgmmHa9uJqIGLkT70AmNwjl3jlkIDzXi4C\nI4eSrNn+M1ndbQ6Ze95/nOFfSfDzWLhqBzzKQDVoo973XzneoEmEkcQM+lQ/\nLNcjnpjtffDGTGxsXHTBl17FEHld5uwj12h64RisHKumFItZDsSePaY3+6Wa\nJdiXLOn1l863GOpGxFgEF7a1/wl3rEFbe2157k4XadxWGJNInLv9N8JKKrgg\nbDPt9LmH+WVIl6FvJyPymIAyptO0kev1r1o+78L0OR9BbTYlmmIE6M4GO65N\nxPYoyNOOK24AZhuB4jp1X1/wixPTu4if05RsD2lr6Otv8SLsb8lBSNT5Hw+i\n9y0vVzQNokevnf2OURDWwJrYf+MjTfw6+yUQ0rcSgAvz+Q4jydmGGUINB5dQ\n/+Z7EopuHeJ1y21izeXDXW/uVH4gjcuNZYOtiMmUradhKdNBpSATn12y+pjA\nzO5R\r\n=dpL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/list":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/menu-surface":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.3f342e721.0_1592602292706_0.3300205029222061","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/menu","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b452d6f9fdd1f2ffd8c09df85b48e74af7f263","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ff89457cc.0.tgz","fileCount":37,"integrity":"sha512-ewySF7TFjg/hulP/Lgz5A1OAgKRLeioFr9wzoCO04z0kecEyA2QyOqeJgycfOXKF3kq6gZ0/bY9Y8eOvskQzQQ==","signatures":[{"sig":"MEUCIAk89ygukGykRNxNL9klXE/7NOcJtquxPxhu9v2wUq9xAiEAugi/CwzW+kNbkezYdhWzoBdo/qIrVTGWpYcO93walJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7mCRA9TVsSAnZWagAAH14P/1ytbyQ7Kwe3SKM9Hl/g\nH4V3KuVACLbTTJz6cVLf5GgI+rK/aKUsmIaAvIzSYV0dthPOoFRxkphMLJTY\nmeBXd9hy1v6IIhPn87pU8opCKaZWUfbDV+PIh4lUUszuhaNdd8VL55uA5ZB2\nQ/n3xOlDzeXuifUqumXvq9+7RCb2/EoJwCYNWDhu/leM6dCdk4CjL9fHb0ZR\nXQ/orfCpC2xeCdxPE3yRkIbbjbCUvRvq5OgHPY5fiU/oObgBptfhn96bW1l7\ncQTwpvA0tf9uQnq0CnxcKPHmsR/eRDr2zDLFHI4hGEIj9sS0ocaNXtrSreSc\nK9NCCOb/mI0hNfeiizKkhz0EZMtR3OeNoMjCnBGfeBbUUDKnsMy5P+qacPOc\ny24Pz0Sk3CLc6yQwMKCt9U/xRn73i5P1R2t7k53EHxZhimqPKR3HxjoL0t6k\nhG+f1/Mb2W0XRG2hch2IYcGqzCB1xwVctPwjcQZsZhTQuy+nYreN5KjfRXj8\npFWDPPyc859ApZOWJsNykAyaf/EnBU7NKPklBPSpBD4wsYjM7hSviPWMv+iB\n10ta+mUiQlSSuzhFBE2+UFsAv8uFiXHO/S2iLj93YWOWR7/xYaMc1vepGh0m\nDsjo/a0EFvag+ehqwVKLHkfQKqOg6Jsj5NsE5Y63E1e+k5MoeDTTce6L6ngA\nGgQu\r\n=w+xd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/list":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/menu-surface":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ff89457cc.0_1592602341875_0.8345626833109343","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/menu","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad9ebe9a7eb99f3955860d405463bc388c981a0d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4a1855cf8.0.tgz","fileCount":37,"integrity":"sha512-DI9+BHzX8xXuzGZyFO3WEZ5G/mmMM5WPK/hkpWKM8VfyiSvlpPmDaji0/VgNaxI/oqJbUzwfj2xapBZHWoo7Tg==","signatures":[{"sig":"MEQCIB7Kn9tgT5ZjJHsGppddoCNOaoFsfKcIjTSw3+tROc/qAiBTxcSl3Khn2zJvEeRnGli/+ST4S4GFQPMg8OL09cnFIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S+KCRA9TVsSAnZWagAAck8P/iFfXnYLGeMKfcGCns5O\nv5VQfONY5GICwvWTsU8t0WMzh7V17HZ5rChTib8EBGH6haJL7esOQ1Tfcftv\n1kcnSRJfNWXQ5v3zNzQVlXgr/x/HHIeXsgGu4rCOU8HO7ZocM/SNubl8PkLf\nhOWDN5AVJIihw9Ne2WbEKEqEoccCb+q71VhCY9ZyzH7QVAWVm8ZZnz0+ZMza\nxFSNCCQNOpJU8NIQLyUSjA3s6Z7qUhjjetHhgiiz1OMTgelzP7rUDUT52D3H\nrNvka0zRn6sFxhPIIY2bVv7z+ERnEuy+afhwPlGvYMK8AW9znoZ+XVrL5TYA\nrlN9ZsF3QnjoGNpfw375AmAeBC+aM/89fwRtE34n6eTikEykQ4mVPu5xeoAm\nrrfEJXXSUKnbMsp76DQZKkZWixYS1gs1ete7PNZCzoTfM0zWMP2xS/FJAKqZ\n433rtiucRX4zLjmarx/zD3wMzyxFKAIm6eqKxYJE/ZAsxO96L1OQVQ52xPmc\nwyLa/LxxPePQZVVv+OjxlY55MH5rgkC1z9AuekoHIEgULrrqlttZyMU/d/4X\niId4SVUSftA2hMVBXERAKBGtgr987C13SglrxJ+GShbeGSNib/OQmOfAwIa8\nSrNlWiqOnqZcZuLwo4yj5Y78kRreFBWPQxsMHpwE8u430XFtoWJON2KpHNI6\nq8cL\r\n=D/iv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/list":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/menu-surface":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4a1855cf8.0_1592602505952_0.25607015211047957","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/menu","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea7c50075f83aa2f62b545d36f30b4e0cb829670","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.8602f1b4d.0.tgz","fileCount":37,"integrity":"sha512-yBYoFYck8Ia3nlh2hkT5JmctJVh995QDplmfXn8hpyf1qEvlKL0syCu8vnFB8A1P0h60nhDj+JPRme6uc9gWkA==","signatures":[{"sig":"MEQCIAzVjaX06+cWh1z9coXz6MgkIQzutyDKH8xRZgXklXhlAiAQfAyg8MFPLE/GfGoH+6pFBS++AmlIO8NBZ1AKtJUAsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlgCRA9TVsSAnZWagAATfMP+wYbmTWi+mue4wmzMCHx\n43r7pMRveGDcHMCQyNW1jUBVcWbm5NaAXD7/hhu30W+ihKRPzXwy3IKqW2CZ\nBy0IGZIoNC8fIs3gORnja7PaZegsHACIjQzXHTQr8mlhFTtWt5M9sG+4YWRz\nq+5uOFZvqRDSy3LVMDGKlinrq7B7GZLPOH5X5sNrTf1j5i45UlljnE4VIhf1\nA7Cbtsqqe92WSRzrbwsoim29k6g+LiEsiuBHJI73smt2bjL9Faa/A7MAEYVb\nbluKM8UBZqJnGXOjnduDFry3cNdsR3XU3FAUE3VU82DVWGIjQoIkxvkOm1TC\n60FFeg90gVjmzT9jLobXC+80M0V7gsZvnBuSCoRyLqtE/LbZr66SKzou5Jb9\nphXSXmDTOj4IWpSqOnLcfpFlRowgkUWkkayasnWIiE2cLCUtCdZo6zQFBuYQ\nx4lKWGfcqdw9Twku4Fj2VkNIzwbRH3KWL3YtY0bgEMfAeMUgGalXLYjcT90k\n2Zgss8jsdHVb5Mb1mSRZIw7QaBFgGpOTAeIFVLRI5mA9aEnuLxIoyB4k0m4M\npyNv8pG/QzoppQ6G33eS145XPWc5OQb66UUw1INElZrikGoI0oELm/3psEt3\nEDlrQlkFbleSECQSi3u0Fytc8MKQXW0CKZzAm8BLP6nNWN+XbxHjhlyvIQAM\negLh\r\n=PVEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/list":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/menu-surface":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.8602f1b4d.0_1592846684857_0.0448797961892442","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/menu","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578be36efb58f43ad17f782095118a02b7b3efc7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.69f9f0982.0.tgz","fileCount":37,"integrity":"sha512-cZljqxTvt52u8admjAMgCRNSONT77uZ8IJk9UM+pFkXKnBS8d3L/xPOf00xDnBnT1onRDCs0IrenmobFSptCrg==","signatures":[{"sig":"MEQCIFi6AND/Gm7nP6kesyhyTbRNu4JAxLkc2FOS7paJCPmtAiBOLnpoXaPKzNqyYpdzgZS+ZyLudNrTI4xwMpkec/Sjlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9/CRA9TVsSAnZWagAAZn0QAJmL67uV0CMtfXOl3MXk\nxvgn2zSRsC6Mo+c2qlyBgL0PV/vV8MM9WU14BufgtuXyT72M9gN/sRToIni4\ntwxmuWAdf3PnKtysdwhTMn/xN0c/UDDUs+6YoLw0fqQmaVodkUXnXbxczpmp\nbG1TCJuj2uJewp8kFiT6NbdLOikVxFbZJyNh9i0hD6noQUYlM6haFk5F3reO\nEk1gKRXZRAr0GNIfXdtIjjQYcpo1xjqCVWWRo32UeeswCdzVxzOTv1/3MTJA\nFyf2reEWObFmOUewcPoe8BOEJlh/83f/UdE+iLzRkjQr7UiRIj12DpVik3Z8\nVXh+Qb0mbnvcNUUqkjuOfqYLJSCiaVzAAtVe6XAvX7Qyr1ucT9GVgOoG9TF0\ns8YG+tyk9yrVkH1+NTCJ3cMY4t0i2prSEK60zMU8dRavd2/zqm0tJK6QQLb6\nN6v4wjz/CKcjgVjOYlzpfUe8J6MKXpsNU5r0qg919qSoa3glPTpjTc4jmUqq\nOFewX35wwL4Pqjbnj2NyFppQtP+YNjUKgkbRu7nr+c64oUf8qiA9NdSYUsN0\ndO6FTkWIWMUuZ8K7cAT3fZ6yWv70OZBFdMEfUweCws9rWHse1SuTTzJHI3/m\nqyb2QR7nQogNyl6HaerjSas/MQm307bSKmNvA63aE9aIxvhi7Q+Ql/cRIy2T\nIZvR\r\n=l0/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/list":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/menu-surface":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.69f9f0982.0_1592860542778_0.754239424816523","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/menu","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a43158fb0d7d0139215bb35d5b3277870d7c2fa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.369a293f0.0.tgz","fileCount":37,"integrity":"sha512-2yVy1zJ/weQfoGU+8ce8moPyNssOgd9jjULKKHuxte+5qVeyN/UKytVJWj41qJMhxYYzKx1OGcTNt11AkjVz/Q==","signatures":[{"sig":"MEYCIQCoTakY9DVjCW8hOWOJ++0v0dAlgfofZMITjtpteEg1EwIhAOBGl9nCF9RdN0qZc/f+Cfdeho7x1NX0A1X3eKtiEx+A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SAlCRA9TVsSAnZWagAA4EYP/Ar7+ImXuxYIlFkbcqGO\nk4s0marVMLwQTlYBR1UGiTauegF8eTIk+3nWAO/W7+Uk3fCTh/hYQHSrKsc6\niwKyUoPENayMjjgHDXvyA5LRTiEJxzHXeWGNjN6CD6mTHOVIuIN2+FYik2im\n8TRPd0B0H7ogsBFnFZ7Zp+rXLAVSfmqevivCD33d6Ac0RHu/OBQtQgLZ86HR\nV3DQMZqe+JPpDpthPIbeU1+0eUGrNnqZNxfxUsQdY2NaWxFiJVz3498KDF0T\n2/IDXCftCFegq4y71quzM4YiIaRL8dFej4VGluJpwttI5tBuQM0uPKEizUst\npuWluxS2GuRpep57vtq/z3m3oJHmZD87fc3yFMb69GyHLG7WsP8/GVQyYEaN\nRN7TfyZs7/d9kiY/2Q8vZmPGpo8GZwolcYwxXJVxyOz5dVleqYTF+biezx/9\ns3JINCGcsd0ZwU9UtHyRbSGbofAdRXtFXut2/ogkrAK9I/XelVf/XvzCTI9p\nNv8LMcH9MpIZyUbCnWL8XsdXCO+TJkbbNxzn8OJroqY8qhDSqXmx6alIvApr\n5Ymd97mL5HjMn8FNL2ix3vHgT5HO4E0MOHAIchtzVBz6KgmyiIWKyLgaYPhZ\nYc6iarHxpDeTIKK4lXaUJVqaCgJF13jQi6KFaZatbYmvTEXEph6PGfw7aT/C\nU6F7\r\n=llB0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/list":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/menu-surface":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.369a293f0.0_1592860708702_0.28595711245013766","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/menu","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70100b683bc9beb976772e1778c3acf608b9de87","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.f1432b5c6.0.tgz","fileCount":37,"integrity":"sha512-v7XmvV/Y/IaXUoAxr5kKpeNmcOoZN7+qBynnhyeavqn77tZ10ZXuCR9POqPJZqvvTKGRTx5Pw8F5mSqp2dCPSg==","signatures":[{"sig":"MEUCIGnonFiwCYgK++711+SsUDzoycXFfiqsCvmKi+5SUtRdAiEA5yhOWarmBNu8oVj2vF/2l2LBJlczpiMPcj2DWBgw5cQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SH4CRA9TVsSAnZWagAAmT4P/jmqNb+boiEG4FCiePaE\nmXOonS5NIp2jhG/vlx9mMnHvddh7ct5LZUBvJmXjT0pZemaklPCTjlFsvKNW\np62/Taf4i1+DYnVT/eSmWcz45sQNc0k6fC7VVExbtsN+DjTeO7sYzEDm+NLq\nkJWsxhIL+f4yF9nbdgC8MDdUn/ur0SAnaKTBtowWUe12u2QL/dKJu/Gb22gp\n9w5Zj+PI8xpL3e/JleAH55/ksZNCS7xsyedNy3bcYHJb0hIgyu7ednaoBRyM\nDXICty9EeSY1NAzI6UwJVconuZt/ONp6EPoajzVgPJQ2rWPjSqZ6tTeij0Xg\n1r8SPvT5APMQFMtUSO+Wwl2ykze/r2SnOh3wopNSrj9VGtiWDqdhdMKSSak5\nDS7qylw5xf/nyY0RKNj0wpHfKNAsQleFj82WlEI9AH747aRhcv2e3AtUBYJP\ngZioLA/iyh+aVc0YC6/RDrTov2RhA1Hd7PD64dCoXgMUFNPLOIpllCdbGjx8\njeovUF/vFSgAioVmc/2i3CCwcEWNnnwLR3t8jd74L/IwyfAWwA8kA02XpMI0\nq9mVi1lrVAD+qBLtD8DAhKCfGqxSeNhqEt7WvPblqPZeHkA2EOTvir7TkU5K\n1Cb59SyVtQlErcfaAAXrbzcXO92INOTuE+5db2YdqwNXxgadJuM7uSMnQL/z\n7CpX\r\n=isQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/list":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/menu-surface":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.f1432b5c6.0_1592861175921_0.3935980689534839","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/menu","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96a666c558dfa56e4f200732e73b134b9f825f83","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.4757a16b4.0.tgz","fileCount":37,"integrity":"sha512-yxb2gRAD0A4V90Ar1JfGSLyvmWrIOU5mkRQwlEuT5qlLKuxHKMJ004wDaiBDArpMc8dNWW4lPsibmgdDspvuiA==","signatures":[{"sig":"MEQCIEu4hKs5Dak8YPSdkUxqQJRLVinEg4S3TBSz946ipgMdAiAF2vKFrZvNCln0tHeB07rndhwkrSkCQI0/Xt4DFOrQDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiVCRA9TVsSAnZWagAAqHgP+gIObLbiCUzLjGB2BZdl\nACG6cD7YWxMouYvBm1cfXV40KW4X5FR4NeUGVIrkka3WZeJqw5YEzpu+vHhv\nMRlz+BXyS55a1ctuKM15u47SmoBW28BPNVuEZeJVD127lt2iB7opZ8W2d13P\ngjnizozE3CW2sQ6tX5vRO65uzsRSS+lI15S+XqX5CEvAbkNCY0PPGLNFeNlb\n67tovuDyn9oUNMaDPvvCqz+ciiy5Q2qhoxg7i9j0ONgUBbwGmP2PZ1EKwN9l\n6vOM61mNQaRLgfwoV8BnVM0CAltl/qmSiQ0vXGWrtAaN5Crv1nWj+O3jqjFS\ntG4NS4G1iseAxIjnPZ5Ygv4jjWCAPgZIMPHXt7AWleLxeIfHmKetIYsVgz2s\nHvhr5ApbhlMf7EPt0Ftp/UqScaCjHtm5RMFvWvhivbe1Cbe1RcHXS7HaAvBo\nDPkB4AJ65wht9suhVgKYytT9LFQXtUJupV6tYFvASIX9jNnxZDyOJf5uVZav\ntiZ5zPa7rUSSZXT83c+vkwcgL4coZtJEC6mwb36yhb9pkWvmbAeFzSCNlRAr\n3Rzdzcw+pI8T96mKxNHr9Gz6h2ilM5LmuEF66nqlfOuLSLsA9FYQk3hbuDFp\nty9YKOyWpxT/5EXW2dU/AKmRXpbLSHNJtErA0mu2b2LjmT9FbkuxaLNPMtSR\nl3E0\r\n=bVXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/list":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/menu-surface":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.4757a16b4.0_1592862868768_0.5567805574701581","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/menu","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e80ac85db8697b1f55345f309f75d0e2469fc22","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.f8f472762.0.tgz","fileCount":37,"integrity":"sha512-S6cSlTwbZg+t6F9zaxXO8LuuGlqkIPg46f4Wp1buDTq7hAm0cOtMrMhvbAWqjQq2rKglaJkNjQrfnvZ3RXCIlQ==","signatures":[{"sig":"MEYCIQCYQrD0Mohm3Gtxy4G9oE2Fzcklx7rOEBRTGiWjoEv+WgIhAPlJDWPY/kzN67/fynjcAIJx43VSp7eTvIZiTchENzOD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SmHCRA9TVsSAnZWagAAppMP+QDq1vr5AEPYH85FbEIp\ne+GAwI+9bWuJy3vX3hMlePnEGXM+4Tz1IkXsHme75yC8l7E82fBJhjiVa4bf\n9rJ0TJO4R61JjvwsdWYILmKCWOcYkiL46axfNgXFkiyPa5bMCFZbi9k6C5Pd\nOjULPA5U2i6dpj66mxMc3JAT1XhfEbvdcvyDVw69owr8M/3qCFUjsAraEL+s\ndBXwxLo0dOMM99jbsUXm4Enbi0h2na5zWd/KKYlSgGtEkTLd4CILz4mUBzzd\nwklQejQpWvHutQj9+Sfz5r9wcSbrJMWnv5gjHx/OwxGFcU+N/qVWeG6ztB7v\nKwqlILQeQYQfmNFQrA4qD8yRnotlH3n7RfiXqfcC+ulAi2/CssbZUFVsXuPG\nU6gLUX6Bu7AXcA7Jj3t0mFL18Gd6oYcZ/Uh/5zRV0QSTKj5jsOEWt82E4hTf\n8FvP8w10eZa0Jssxg34u7P37Fy91fuZjyfggO1ePtlEuOn4Vli1bRzDFZG0N\nrWw+VPXViPjfykRY1dsPBOyLXmiKqsguwSLUbLVA+07jtVjMR1ic3JqpgbAC\nX77oZEL/cVlSwoQy0sgzbPjjKnQ4RLJ/TKAQstZQ39C4baVLw/VcFSig0fPv\nrWmAieIoIVRID0luwt1SHi4l+gxskFYZvMOTvpYDzLs8hBdw2tukaHfremKg\nON7x\r\n=uTbb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/list":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/menu-surface":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.f8f472762.0_1592863111318_0.7227224083831765","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/menu","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232db2935851f5d963c3efe423faa983983ba501","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.7e4d55c34.0.tgz","fileCount":37,"integrity":"sha512-q2/0kTKS5DPDhae0+tVmK6M1ki1Gv0YXC/EEq+CW226LMX186Ka4fEQ/PISz9oenC1HKD8+NeAlc45RWw+Dbgg==","signatures":[{"sig":"MEQCIFXm0bqU8EUZSqPC1TIs57IJoNLjyFsUbBwuwbPCoV4GAiBclbCtmmCtXPph+zweuJjTI2vs9CmUNgFw/I1lZ6Bqng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TEACRA9TVsSAnZWagAAwBcP/R2QhdzlRw5W1RAOPGMC\n3TtiSCy+eDnMHQkB7JIwuxEdZjYQvJBspODpYcT01GTae0y5EQjVHEHDJ4q/\nRvIWAd6N86vo45+26o8Wz/7z3CLJBeWmLczSlv3bbQtcBQmoxrd9DZ/+WOed\nyjq/BaEWzuwshu04NY4ydxkdLPn07ZYNOSjAT4KKhP23Z6I93LRM8208+xNm\nbnHr/M/iy5ebwztpED9QfkKkyq7aHzdg/Zd471BqYU/z0Yhh/t0OFL7UKGZm\nDufkmkifm6DEhdBbavMLZ6h6hfpP7fjptrFGRCYbQ5cCf7STKw07beL16CQI\nCVT/nAG2U3Io6EW9d8XAfVW366CidAxugZVSPs6oZmY9pdzwJU/Bn3reqPxU\n4E0j3FymKAvx1xOKHJXa5VR2eFk/E7fbfvo22/0/g0FQXHSVfOd8sxPr30Ff\nJVDoI/IkViRaAnkgiy6NAbPG7Uvfxeov9i6jQFXdganRMNpMV3xFrQsB76SE\nX5dLuryR2pbfTaMWd6X1pIMxMjYUtJ3GPYV4ir7nMVoL1T59b1yEdzjfhdc3\nPBQ+twTRqdm7xLaCkTXpTPrS0bKRyTZ2qOyG/NJa+nyghr9zqsSvyAr4oN+N\nsflN/XthPJ7UAUEq6m+mpgWBNqWUy0P4oGrmjdNOAh6cmlCk0Knu0FbkgXTL\nUkTj\r\n=shgu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/list":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/menu-surface":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.7e4d55c34.0_1592865023952_0.43320585139783296","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/menu","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b30c50a7f6704f8539de2d114dab931dc4ecdee","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":37,"integrity":"sha512-5sQ4m0v/Z82jpSO1B/6QKJrHSwE2mEP/1Dlp+Kjogt85VBHOY/jZslka/hW0zAqPF5EMUa50MfhLcICZkQW+PA==","signatures":[{"sig":"MEYCIQDqh7SVLvIlfwP8CAdLMcduWTK4A7TdYCMc1kP6tzLqvwIhAPTw2Tm5m48K89Ts9GPLvRBE/D2GAeo0SIVKCBYRktTa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hHACRA9TVsSAnZWagAAFAUP/AgFP3IhVuzLLCttdZ5t\nTBNlZDCKqY6NTTUJTnFoRvQECzw5wEXvNxJiFc31LhpwsyBfx1vthEKTr6ST\nVPCmGBc4cHt07t0pBfKL0boySCakjqEn+gYMK/0zLk7LkvkbAFWWh/KEQzzJ\nvX0BaSr6DSoBk81zAO+Spg00LwB4X66BI0rKNs4LhE3fxCZ0EbINE7cDbkZM\nAp+eVWJDGSQmFtnIkPX0wseJSYuuznb9NpcgOBLwBe9a7iBI3L4rsbEle5fV\negX/M86ccTvZ0tX3V5N4ZDzKtF/Gn3Cjio53llMdqN7Pu3fDtQHdRBsTHYMq\nkeHvRaGmQH7X+toqLNLjLtWSoAk3VbJeUQaKfrLV7khbQEb8OUaHHMJVBZdM\n6K2T9v+RvzDi6OVMMAFXm5GBgO+w7SgskZIGmoaURyVitxw92PNs45fYm9vt\n4OdItKNBkK3feSSR2+qLd7m8njSnX4TIKPzew8j393np+TpVR0Kyjkr84FpK\n6l48I7OipjyhjHTYObG0UwSnASQ0rkmV3fXEy1hhe6SpR+x+vAA56twKMu/K\nwjJMRuv9rqN8krlqcc8ZGwB3/NohZW7h+Y6yhm5FYTT6kG4GonEIdkR1D2L4\nfdobyKncyPX1ZMKgFC00cEH7PFx9PRxh8WFnfFInnsUWwCLR4gzPJYNvNs9i\nBfYB\r\n=8WhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/list":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/menu-surface":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.bd1dbc91f.0_1592922560375_0.9327282265638237","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/menu","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae297f370c7384ec80154cd8eca981a50c2eb670","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.31523bc62.0.tgz","fileCount":37,"integrity":"sha512-tVfCfiTAnXhVG4lPDk4/IKcbpv3uT3XNwFylu2OotlfYZRxBRKXO8S0ZS/szye7fwIuxAde71mPF2FVrq5UQRg==","signatures":[{"sig":"MEQCIAvhz2Yg9PXPBZGoEC9AnRaW9xKRHo6zFrG1r8NGkB7mAiAothwSC7OmvQkN+CoAAeyZQfxrmtG3pmJOEmmV+FsEBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMaCRA9TVsSAnZWagAAJkIQAJ/AwBjN3DGYaTtagc/Z\nJdellWnfoq5u7ixLbxOWQqM9FZF/zd1Iw/DHXesy+4WyF3V/hF13vlMOgs6A\n9i55LtAU8lM7lynAKe/FhwTphothLtBo/qzk6+7ztVvm0uWkqG0v3J3p1MHZ\nqUxCJ6pl3MQXcYngMvmRSAaGX2BZZsTGsrngrYkKHa0s/OU0zr2Aq54OEDS1\nFdAD8L+ayEVVvDs1e6QnN8Ypo0GhqdbeQq2dC50/ZyyxCeRF+2VzgBBCQmJ7\ndmj0Xo0ckhywOpAKVWemcI56vIyEklpdIAUuvr37Tc1sgQ6neHuygPkjH/mM\n75eGyhBnOOrieiUinRgysn0V7B2FbTPlm1RWUCaAq5wy0/k35Li7uxKzviRT\n/ffVn4WFAUnSklCVNbQVM1O4cH5M++b2mMGYmAiM7cMzUbd0qFkBbedyn58b\nghw9PyyWJhAlybwSBX3GbTYCwrpuT0ksRc0LwjIs5k1QbbtxzbE5vvYL9e6n\nOoNR7F5nS/V61k+e0KCqwT1c9wlTQRfZoh5JUA+XcIYBoZkIt7Zn/hzPhEhc\nD8dF0p0hizZzvpKTSsu2my7P8qU/PPu9sEYhDo+wRRciYodaTrtUtJ3jd/qZ\nm09XjCegvF17xXfcYqj4yaqULi+n2rWI5TmLLIXCydZ/3uhHVuc8NFPsfoAW\nUCuq\r\n=ohGZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/list":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/menu-surface":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.31523bc62.0_1592922905633_0.25455994903788004","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/menu","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3555ee5487a118fe758085d2c0c4b90e634a89cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":37,"integrity":"sha512-GWD1zKwkiBux6VOkZFMuGVQhRM2o42+jU/ZFhwiZmKk9eXoPidl1q6dZ6L6UxZLeokbOkx932gnaloK8XmYN3Q==","signatures":[{"sig":"MEYCIQDhNFXo8VmNA2d3xgi/8GqUHxlUstlC1fTWEA5mmyIqhwIhANtMXwaSEEiRISqNHdDFOtpypGmxxEMfZgkVqz/T2cF0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hT7CRA9TVsSAnZWagAAEB8P/2iSVXIUO1kMHfuzaeYv\ncvCPt8Eh2BU5eshpwSImd5RIaif5LM4je0nrW8y2B4Il5UBBeGax98Jh2bki\nrqFb5oDV2U0ajIVgaetyoEJpl0ovFQzANijIcYoEEAVylxNV/iMT/my5e0f5\nyhJiH3qi62xLZzQHxc8ZKnL3n1EYDqRAcWSactmIN7laBxlW/FHMQ90j5FT0\n1ErG5wn/bo331WaOpZY8eyCvGPFvjo+csXK1vRDhVoZpPk0noeZu6lbv/2PJ\nyOg8gLDPn7sJVz8cIZ8cZb8PRNFTi+WF543sH5IHTU8mFZkGw8TA+BcZR1Cr\n+EirSETbRcuD79hCmS7Eh4JWq/BBwYqwqTe4BCG5a8aA7v3MNcryX2Rv7aqz\nlSmzwskFI6RUDSdMwKwlIGPJ7BpzQRRhHQMMr27vcbWlrb8PcKDJ3Jq3BBkO\nR0I9hGaAYkr7V+W4H2C12YrJE05gA1FPQupneNDFQz2DAVxSwnanlvey0sf8\njOehuc7VylO1f9pxahvCNPk2ocoCsC8UOC2tw9HgIb3rYhK+nGB2SnxfASMx\nla1whU9hos3LsNoTc+8YLmuNoD2Nr+csFZ8ohL3GNb2BMFajmHKGU7H6W1/o\nv3gP3KOH9vvhWvXIo+Kw41KCk0rQ4Fsp8JDK7gOLkbz5S7N/gBBBQwR0L7+6\n42G3\r\n=Hl70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96a5767feee3e2fd2ff90ed98a721999f8cbcf5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/list":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/menu-surface":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.a96b6d4d6.0_1592923387337_0.6304459441889327","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/menu","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14d3c1e4fcc8aceb52a7ac197e1cd4372a7c65e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.ef3a09533.0.tgz","fileCount":37,"integrity":"sha512-DQyyU0rhctNWsjuDphKshL7u2Tg5LGWTSIoQsPoaSzKYc+JsP0MSngpEd9nh441aAGGssLII1heCpp/aLXwldg==","signatures":[{"sig":"MEUCIQCJBg3w2WMhK8iZLPpPq4nY09/LZvJzCn6In9uB6wiasgIgKruQ+LsebbsIvXZkvvRcriFDTqMdROOzqvSOrn0mnVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZsCRA9TVsSAnZWagAAWKwP/RsknrLDRsABUqYFLKPi\nZILRKLM83v1WMCNcgG1Yr1olm9IkYW98OrUKHRWmfl459sa+KvvjBAvkg0IO\nZ/blSaYSUQUxZU5WWPL02txE55xCgpdFKL6PNYceBYH+tRKL63otM0GZnRY8\n4ZeJM5A/0BbPpOQVi4K3pBLWqS6twTbsvsAdDUlMKj/+51ur7yLGyq7ukRRk\nfUhimK+xe0EyqQF61X1pmRL9wlbfKWik0My/T71OoXTNd5SaooQnVaDkJBjR\nY9mdscGZIL1y2LgjI739/fcdPsCEY4DD51UnWz0v5OTvXX1kMNV42xPQCR/S\nJXK3Z1Tju8pozZLr5Ix6SXg9daIE8+I6UagXvLHy+azBgnaGXnh0TKie0xNa\n18DpMKZhrCAXfI8Pa+aal002CcdDs/sThZ2Gy3mRxKu+DW9P0JJ02R+bUyZN\nByFh+PZp8eZY4BmBKv23W7P56obFBpYqn20CNLlsN9scGL85S6HFfD0ZSErn\nsU/Gl4NRE1RPuANez4uZsyrPJK7GByd8cmtilEJsO495nTz5A6LETQ6SZu+G\n8a/NP5L2J094zbUaRyLTNYLeexS7D0va5K3kOSHDEaT1uP5fiJjbVqo3bicE\noc5Mnwal/8isxHR85aMMRpczvQ+y8OZGRAmkS0DuJ5oa/FvlclXK9c/8AP0k\nez+p\r\n=U3Jl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/list":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/menu-surface":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.ef3a09533.0_1592923756424_0.016798208745307353","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/menu","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dedcc78fb14a4e94b036a04e89ce5ca81305c70","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.080965f39.0.tgz","fileCount":37,"integrity":"sha512-QTJyYRq9rIaYN0+zB+D16hrqODCkvCotMj2euNSTpA9recJ9pcTVA5MfgVuUKKTqE7Vp1ey2Lo7yvd1FhaCT4A==","signatures":[{"sig":"MEUCIBV18YaCl8UwymEPha+M2a6tpDH6lRhhfKuBICGj4uE8AiEAtstb9jue0MQbvHlpgosqw6/spV1VXQ6GxfZHUn/CeU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h1NCRA9TVsSAnZWagAAbocP/28sppoPYsnjA5rjIZ5w\nA+F0fqzLekCIES5YbOoAJbOE//HepGjLMjvDVjra2nDs5dRJr1Z/PuXMnkhB\nCD+H0lr+51VdcVDh5y5CsNqTlTN0/609DZ4GsFHbSxSJLTsaAJyNicPxtmWb\nz04CdgKXY6hXFIXtOq2dhyzfBJ0pyjKExVfJViVER+/kQBGVVNvWxIRE9k5D\nWI1SJNHJAvyQu4lirmMKLUamjz9kSiIqYzx+b1J6ZeYKCk9Ibb3fF7IQ5d28\niQ7RQqRmhhRU97s+nF2hMolq3Vc4+bBSzHGMDiZcM9rPX+lEjSNM6SZfzxYf\nDfD2dYyt5tAxM6SlWhI8k+9+dYP2dhAvhPvlS8XNws9d/mQppwtH9v7k4sY4\nJmZiiO2jiKJ3dDCQBWp9PcIkvOjel/WdXltMT1d0vWXLjZYtDe+oiTBmV/Am\nYbnot44LQo2WDbBmTaxAeRB3DN6yPISG2iR5sqUTh8awKJNwVXxlqa90heYQ\nArb7uP/wdBl3uuJOuc1KykRuFKxUnGL7JkN7CzmTEgG976B8C6cNkVuyO0dl\n8PpIHmZictx/wAKA40fzFOZaxuPUEGI6sj+oCPBJW5darrrKIWN3wkb+bs7e\ng1dgB9CUoBJ75LFjHQXTOxux3nZE9DDw9Iisf0w9nkcz7DnupJJW1+RpK5rc\nmwp4\r\n=S5j1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/list":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/menu-surface":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.080965f39.0_1592925516495_0.8744523682600045","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/menu","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233efa116dc072d0f5ceabddf663e238854e4d27","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.1bd67b65d.0.tgz","fileCount":37,"integrity":"sha512-WGMLavAY5TmKSGFcOaF9cF3koq4RYF4k3ZvEt9ilsoS313RXdIohrTHOB6E1pcqiYe0+1LI96yQrXyk3NrWpoQ==","signatures":[{"sig":"MEQCIAKMBH1VxKhQvoSWbi45oOfKzJw2YLBdEhWT700CNRwKAiAqsUPMrnnxp55rQBxzF+JRTFLYrzxpr/v6txobsRTYPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8idBCRA9TVsSAnZWagAAf/MP/1hl5Mb/yagXcxA4aQ5I\n92YCZgN3kvloLq1khfj+IyAuLOK0YfG7IXsXpd8SpOsO3XMLc/FZLlVHDp3v\nJHW0DPgfB5DjmgBuoiOTyGuDjacrjulEoV0gOyBt9lF/6zUAGGknUYoqNbxG\nHnL4lYlgJAqpVhLl/czFSa36GE7LuU2BHK9k61fzdc0GebYKaQJU4mrNDeEp\nXrcFX2GmLOQJHeGTNz3xfCVWSJC6vVJVUD74wtGjqw2ywRXvpDSx2mZRed7M\npSdFXyw7biP4sW35WNuaVNKwd8+mxi9u0g8EGngFZ21xOG8UfXd0zOpql0B2\nRv+RUTVHON8ErVdn5BmnbZjFYn5TDBLFabUMNXmoc6++yZKPtOXsugOduReM\ni8Rmbqg3plCbGLjO9p197i5WORkdqT/hHiD1MUNGm/XOdg4jfFtcBA/zhq4/\n9h39AVdMkkh+H36H1G2dztw7ZudjCXsz9UeioHRPm+2yOa0x28GYui+jfR3o\nIcX2L5hwEi56YGIr5pH/RkfwYhqyQt+1ldRZMoHBRhkmOYjFsHuYyOvoN8fS\neU6LJ8ORx3keb9AUdLn/SxR6Hv293b3WuoLDsWjfzaUM1OVKqAA1gda2tFd8\nBXJ1ezRRFqbuNXm7ZHAGUXPouXYRGsRIJYLzFSMu2p6Tjn05ICsiMimOw8L2\nDHj1\r\n=id2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/list":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/menu-surface":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.1bd67b65d.0_1592928065227_0.6336947573295839","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/menu","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359c51b00a6bf61d1983058c63131a391cd310b2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.18ca31248.0.tgz","fileCount":37,"integrity":"sha512-1FN5Aq3q/vik5IaKvNDjFfLdrYuQAF2Fs3oX3NH8p8DjFK8XWL1RvqfClHNAK/ykYYr1kXPawvLFj88KTwKhsA==","signatures":[{"sig":"MEYCIQCCATYVmyNVDXSwF8bgv+vJRW9XhpPvFcFEeQUmAM2vwwIhANG2ZPKW5DMlRDqJ/dIg9QBS6DQTakSlLUla3tXq2Sr0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kk+CRA9TVsSAnZWagAAZ24QAKROum093sUgrsJAa7UJ\nZKDmCYYYGdTC8lOteNFg/DYbl3MW4yG6wpDKQmPRS2v0jxGXmrlVe/AYTM+x\nbbPHoh5JMjZhQi8VGIKi//tca2oYPMVXx2rBBS6SHF1z5DXnN5B4ex1xundv\n9c/ZP1uMoGwkF+lFFl2Olyo8JvvXWdLH1G1a/XCd/47Iw7OyMYPm98XxMZ6v\nxU+FHdWdDELNXoVmif3vGbSJfwQBuKTbIGrIMU4q5LMnyoAFzRyr3Ty0rOWD\nLdHgFsbhr6YX52nFPUmFVykE3ecCpICzjqp97QNY4zoLReRGh/Ok91j778f8\nc6Qu9llXQVhlzETIahmNf2diaN95amAQ4hDtEC9zKJ7IGgN2JLav25KaxcxB\noOE7vwo65OiDySJYSN74tbQEx+wA6Ty5IGdXhMeGYarSRsiAXtjyqseJhTsz\nzUFnXVM2ist/htn8Ta3VMsXzR5w48c7NPFSAuGB9FQLC1c3t1XOtAXOCsOLp\nPN9fnaRO7tPFXhRBAZhC9u3hsRgSTN7WrfU3DGlFln6Oe8eGKFb6hOpxxpZp\nyLLZwPSJnisruX4Ec4rJke8p+dmqCAM4IuggFe+yMNm47h1UNKbp/XEtC7oE\nvXAl2Vhgn/udUkjRWlaa4ekuRwzo5ec+k24iPn2lcMNTlO46DyuSY77lE11k\nhsPc\r\n=gL8I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/list":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/menu-surface":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.18ca31248.0_1592936765646_0.8138217774237235","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/menu","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86823e6e15ff166b4ac4956d17562694b59f8a9b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.39cf00836.0.tgz","fileCount":37,"integrity":"sha512-e0ET4LYcS6wjIPN9937RHopG/0xnwdqYnGAJhSl8ytm17ZU4cT8vaNrHeGrKC+8OWCPJTiuwHXLh62UL9Oi4Nw==","signatures":[{"sig":"MEYCIQDysnyrrAPYBY9e9IkpC6ryNhsVrbNr5kRYdAwshCrqNgIhAJdJnKRvwGoxyleKk79RkQ//ZClGdQTs6VPy9jGQIHTB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6cCRA9TVsSAnZWagAAVdwP/iGhtCEUoMpvd6E21z/d\nn6eTBhjTIlKx4ejI0uN8BDGqG7ukx7XwQNlp+LeJvEZHWIIxoBJmkcWpDWPK\n08jGklOY1PUa9oDFkUjGDwzTkCljNiRNn+fyNl2TPgPGzpy8s6QoCC/Vu7VN\nB8rUt8RxJSUlwIcWHJcVBYSwPUcE8YlkaQZnyeX6lERkKkPDTULGzpBTOtKS\n5pnFUeBFLt2QFHfLvh40lj/FHHjMDJ46+21xJU10x904pGj2VdN6Ishl6mf1\nPQ77H7uFLJHjkH7Ae/1HMGN//R1Tbpc7yS6uyGVhNVOqRz6NssO5WHXziYNA\n4v7wztrx7qRhIj+cw1WcnXvcl4jlGNfU85KQF/HPHa4xCI2dgtPifkylS89e\nH+azmlBntLMb6yE2J4TgtPZHJsE8dXHavkOx1uKA9XbeDJD/gmWJSnPiEibr\nIcCRvelqQgbqljMVAl3kIupKClZbd1wAt9UXLvEOkTfkhxZndBfmrYWWPGKb\nQgFi2iyz3i+E7x5r+wVDvVdPJLbp3T4m71SyKaJ8yqqj+1TU4QcC5eghmTPr\nTmOzz3g1X+Rf7tcJ2XAWPR1NGVA+C9wuPi08u2MFJRUakLKBaIysA3DOqZ6B\nNG4WHeqghBUsoZvPolkJE14EvhS4aQwpvmBigvICnPE5IbMYL4S7E3HJEau4\nnuoM\r\n=eEsA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/list":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/menu-surface":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.39cf00836.0_1592938139749_0.4308232442581159","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/menu","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17856d73a4a53b2de040160c9c7dd8f564b67fc0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.1bfda9e05.0.tgz","fileCount":37,"integrity":"sha512-yp1qDTOPcnGPiO2HvTAGqTuW43bKo4/NQuR3+aNWDv+nBQV6lrOH52bLJ/J/yg0lBAeInaTRCsahm3lIbASqBw==","signatures":[{"sig":"MEUCIFvZdF+FJQVh9ABa9ceZmk4hVAf6YG4VHiLZ8dQrNuLJAiEA6p41DYwWaOTYJ5gS/uc1lwMwCpsrMFwaM78Y8xRR+qQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lGLCRA9TVsSAnZWagAAoFIP/3v2vemlZMcaeHru8bku\nkQpG7Dsz9lLnqpXH0SPEKFlN6MbYN7dnwKzMenbZE0OfyVQb3OdRkO1nL9mU\n6LyyPY74LBnD485xQhwbl15kiS0xI2agoG/NaBgSAjdFiaQSgDUlEuQZWQ+Z\nFabM//BJ1LXSx/ei99av0utiQXJGkAUj9y21IrrVnX35T3N0p1og3mm4D4Is\n9Q+duJ0BLx2wJUbzY5eJQna0AX04fMWnGV2GK1o9po5UWB9/inHIFRuygIwF\nos5BvdRhd9aApPoyHacqqScZCauEdZnAPGjT7wWT6xRdKZpm0v5aP6Iog/a+\nuitPpfJTzXPR/mjxBOX//6kEI+emnED5/UMsRpbHC4tZguIITnf/YXJrMpQw\nw7nG069dLMxPgTWBiVkyy/2eWTPXuhSK51v+SNUtjaSCaq2913xxuJ3dXYjH\n4JkszWnajJPo7WK89KTmkF/IQD7zg7NdHHppok+IVOfl4RM6GdQ+uMGhJ8sS\nHYT1QulUtQaohlZJECi7fKh3b6k1Nr1hNwZ6wv3hIO9DqoVRmbUnwl3nfZfw\nvfqUd27aDr96u/F+9Y7lRF7UdXTLUNTyScIeF+jsNg+fqD9wnn4nsiBljTxK\n4gb+UMcy0D9+NfGhMu8pyBSnaLFYHbr4dVOPSwqa3x/XnWVS0sOl4zqdZiDj\n/g3q\r\n=DEfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/list":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/menu-surface":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.1bfda9e05.0_1592938891027_0.8741811931335624","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/menu","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61616474cc4a878504c4fc3438a78e9ca3a27da1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0-canary.08731bd95.0.tgz","fileCount":37,"integrity":"sha512-/OZhOS5W74dav8VEgfUy2oBrPYt9U+JBRAdnQ0J7CBLkoBCxr2WuttlAtEsuXaGmkehKNZ0MSjDC5uKkI1hr1Q==","signatures":[{"sig":"MEYCIQCqFwBBLnircJsIyl+2klx9ZO+y8CFmixyfKKvEUkhIuAIhAOHJIf/rB2550eXaB9slFktPNcy6+H3p+mz3BTi3XfkD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIfCRA9TVsSAnZWagAAnpMP/3X/tKEUXIqFTD4T8qTW\nOdGLUGvh07xx7RrxygqtFl2uxf9Q1Zts2ZBmyFi6x10jkk0QC0mzjiNxTXOt\np2sLFDQRzArEb4n1oesqM6Mw/gPyDOiLLVh8W3bWjGnsp4f6iN49weWsFmOE\nDetko0vw3xcNURgirMDa67lKcYB5h8qv7yN+e2Orpq7Fmi7ojkZJRvdv0aYq\n7OM7Z8Qwhzg7DJuHAHtsqFVcV8Qy88b2P+i+idoHv/1Qij+16Bhz/RJbmRFN\nBpWhVxhYoxfPkhXmLZaYG2xls52HhhZyxNHwxNELow0qmZdlz1YDxiottuSG\nVmOfwFQumI4+hnzSjfG3gePsVtgZxTg2wk5yuT/hzAH3Fy/oiYvcU4IQ0UyM\nYVSONpEkk5bQYqTGv7Lt+njns+boMNd9yUUR7apsmk4N+lEcfihHz20s5fQ1\nLnnvttwbdyfymuDqHlycna7LfJSLyrp6A3QPSuYtFJQfs+NVCvlxdaKBMV31\nVr0SL7hoxqlrCIOJ3on2rdkfMt96Tl/mNAEz3Oy7Hhf8nuK2xe5X+XZddgZ7\nJApIx3bkNN1hgMBkHWDXxPcJx62Q6niDL7PivCtvLttClaApiLm/l35ikaKL\nivdKxoHyL8uQBnfPkIrLExl/hgnFziKCMvNUBYc+aNiK94Pe92xDwNXEeEmK\nfkWV\r\n=clL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/list":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/menu-surface":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0-canary.08731bd95.0_1592939038886_0.45079807695690044","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/menu","version":"7.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"109b2138b1cf14cf6647683ce00a3d288ac9b0c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-7.0.0.tgz","fileCount":36,"integrity":"sha512-5dKdeRtxg8DXtPXw7fUE+raUOlZsVdPVMqRoa0OXcLBatbkyqVT606WGqTGy6+QhcisiuWbtYO4ibGrfpCXZyw==","signatures":[{"sig":"MEUCIDLOVlVcMEDPTGN1gzMZpN6BYPM4NhbuKYTcPN3+ed15AiEA10pZ/j/b+koUeqeXCuBSyxYBI9+vfrseS5+MozQepq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":626970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQDCRA9TVsSAnZWagAAdTUP/R2SmRlqUjN92qYmMWPv\n3hpQPyZnV6NnjWbWEvwLuxNub6f1GMeG9xeUHu/h6QNfY6oc2KEeSJySFRCp\nJzufMBswKhHkgEZ42daQEXEK7sO81EC0kuUu9ezUpoPZOuX8yq91eFPdqE7I\ncjT0ERjBjxOTAb8hYYNrWy5mogXuJuneAoUspRTDMmxJvFuT3n5EavKloAI4\n+T4kEQhjkZsZ1q3og0kvExC9nC2iZtUB4fewd/FavTreziBOhbI9tzcLzYZf\nTCBdEk0zD4DCH+DUVGlWNth2CECGWLRxuLoIMQkne4d5tL40EM0u3liIzqUM\npHXFn7FWCxnXDIbkG69c6jyS8vgWCBmXnQ76QiMF5Jw605lHV36jMf07e0VK\nf7XOK7eOT4XBZj4hXToIr38/jocyHxcN5zuNFIMYIOa0WWAu7CHshz8UVsm8\nVnhNOZi1gBnrmzcG8JYeQIHeHhpXiRtJ+1RCJVrTx0Zbc2zCzRIKXWf9f9jT\nIrK+2Pk8cbhhE4QwALNi4y4JUP+w8VOFEVUMaFI86QDXEnd1MdHQWWu7vyQT\nJFK5kqVNAvkO74NVbde++J+PFDOuKl+O9DpaSyy3CTgYcWk6uwBBLaUETOEk\nRCMuP+2tztka37Q+kQRJ4L2w7NU25IIj3dCIzA5gSBoSlfYt5vOo4eGH0zQ9\ntJBs\r\n=I3na\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/list":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/elevation":"^7.0.0","@material/menu-surface":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_7.0.0_1592939522889_0.7616706724550111","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/menu","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96a7a492046bf0c9711dd9ed779a274e76910653","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a3212b209.0.tgz","fileCount":37,"integrity":"sha512-5Tl7OLzLZWbzphXCoHbHkBg1yixVm78iVvycYxOldK18VE6DvnKnRdh3vCbOfd+lEh61GYZcaKNNZJ8o/8jddA==","signatures":[{"sig":"MEUCIDizgnRrhQ6WLwartjRa7Gm9K4PWs6WKnw6kN+0ih4xHAiEA2WVjqEl92fvcfSTwU6yXxWG34VBOKBQPKeUi7mEwMWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQ5CRA9TVsSAnZWagAA9DgP/jt7BBo6odcRTJFa2+UZ\nWEAxvybqVy7VZon/fyie4KzQd82Y+iqGFzVLx7yTTttYxtA0yh03XYPoNMAj\nHcX0KeTt0/Fh9R/8fE45ofzX+nl3WmVrw3cjM9NHqh+DQoTpLbyrfmNG2V92\n1bVT3NfCQvvSpfPBOEVViiVAh/nB8pT1PvZ67VnzvRIIcvGcwmuDMrzd/iCs\noJB50Tkjpxhz1NVrQl0vP0JkC7mACWEsW/YaGBlwoV/O7AatbMUDEGEOaSGY\n8b2+uKXuizCTp2NczLMKOWWTNsDWi/WrU66fMwQhHEV13KyYkCUGS/HG4YYX\ncA3sm684ygMekiy2XwKISGLFqbNzvTM0GCXeVIiqeB1vhuKmexdhdiaVHDHQ\nWIqr5qi/uUNSUxoEkQ5IV7al97RB2IdfPSz0hv01qHMZrCuOgv+2sUUPk3uo\ntCy8oEeDTdfrM/XcgDZnG4lVWslCNHRmRi0E0Lis+62J55bus399NpsfEz/P\nDvvp1t9MnfvyleKUD68CJvk4oSW5XloRRzvDDJWGUjWjKHlPtQYIH6NDO6R3\nE3IYUdzQDH67glYDjPSh1XKAdr5g/8tHMsqpjVNeQOTkSftoryEa4gbs+1C2\nDdIfD95hUeLKpsVkaUrEB0ASAsJqFAHoQwzvKBs1een6APDFOG+ZPrcBsDMl\nFjGk\r\n=tlLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/list":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/menu-surface":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a3212b209.0_1592939576853_0.3262671734648761","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/menu","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91dd0a8610886083afd66db5911168c74a79ad9b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.15e81fe98.0.tgz","fileCount":37,"integrity":"sha512-h1ppioT881WGvMTO9wTYY9+eU9FbtGz71AyGNMeuwzC0BaZKqupHp68s9O5rseKv8iSt3zZSHOowDTVKcKqi7w==","signatures":[{"sig":"MEUCIFV9k/O/4hYx3A/d132ftoHLQQZRAYNsFS9AkPSQWrHmAiEAjBAptiqkcljndF2zk8kYmoX6yG7NdZpNXfVDEh6YmNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lsbCRA9TVsSAnZWagAAkAkP/R3/tsMd2G/NbvWjgXLr\n0nrcRCDnN99Tn0TYQMUkN7eNfJOc8rvUVuC1b3gXZcdksD3hqVKC8FD8pvOn\n58VVgXYRSyxRfPpxYXte8/g9nPtlgsEyLWmKBSgjIbKkoluxBbcJLL7GmZ9Q\nRUU3kqu5pyq4J/Eh1D2nf0riFNRLzUD/kT+ltxAFqv9//NbjE2+4lrDfYSPi\nFOP3Gz8XzfwDi0Ef5qhWRYwYVYkGAN51MbSnqxc8m1lUQHgCUSyEh2eJ28i0\nd6OhXNFnDJwqGurhk/GcPLneBePBlM+A+vLzj442DkW0p05Scguzvbxovmuk\nbqpnyzuQM5JTYpJkBnUYV3hDHS5VUIy3xqr83Yu2368pOBU5tH7lai2MrIZv\na5J1n98zvG5/UoB9vHIeKhSEH53own42qin+5pIakFt58PHl78/X6DaEpgqR\n2Ym5YF0H3mzqFyPctXR9M5Iay4pV0tU1CfQSzKVDUL9jQnNLL4HSUQ1xQr/y\nM6XazbOikGGBtMt9zrwGbNaWG56b8E4gooFpYlVs2Xk2KRRTaG48AFdk0WB5\nVlKwUGIrHLaWZqi4dYMIc0EYNDzojdU5zhV7IS+PKSyzQMgdg+Jx5qi5ekj9\nfhsdOmFJqZQuK353YT/N9WCcuyEbaJP5LNl0ZB/aadU1K2e6UZjWkFdOm6fm\nwOgm\r\n=IVqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/list":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/menu-surface":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.15e81fe98.0_1592941338968_0.14800527482585868","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/menu","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18c9164d2359123d06813df4ccd7136e11a9744","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.004c9d392.0.tgz","fileCount":37,"integrity":"sha512-faIul++Rrp9Uf6zCpkGpTZAEr2qVByUz+U3yD52fH1AEKjg52m/yhISITP+1b8dmvn0aeTbYvLgoWNehhklTVA==","signatures":[{"sig":"MEUCIQC4NHLwMVsLMttX7S+x6ZyTObAuNO5Zp2grcHdsLJ92egIgaVWKd8gjA335kF3g28ujrBzd1FmV2hFRb61JKMEYuBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oi3CRA9TVsSAnZWagAADTYQAIi+twvbQolK1P/2Bi4Z\nWhZhxpzzZjC1o48U0Ir4krLq+/SnrH6kIuYUSqXMUjQwFcx4R9B9LnMiKO+N\nHuGJlO6MpgnFfhL+qY7nAYydaf9HjEkFd1+DEvo7cVQY58dUKQBrcVo04Y/c\nVLTWmZNRNz8JE+osiT4KPQvxw00cJ41XjdM9tKkBlyAYgIXQai45ju5voY7K\nKZtBENz/RRf/EOAJKt1+9gzoQ7PHkUNOcekbh+fxLvC6J79IOqNg32J3EE39\nAtRQIpVCP4D29sdhRR78ur5Q2O1w4hpSUQKYyGSuXbTws1Q6MuurjQGCbStH\n+18PC2h6EoNco667hKil8q218Q6CUjzpVHhcI7xkhD/yQrxgTvYxBfGNwReb\nPRI51XIdkSpp00ITA6zio3TLCZpRpT0v1fq3qmL7rw3HK6hNG5em0BujT7Pc\nyyPpyvAl5h2UjPt9//qz8c7ovWYmCE/DUG71QJ+02Mc20uYZMxR4WvoCXmtN\nkQdZLy/ZeDR8Qq8ZR+d2awcNtS+n71TG0vaEYHKSL32ZbDSOdXEixQmMVnt7\neL9FVeoueO+uE9ElPw2ACOZurEnFwX81rA3cK5HAGw2TwbfonIqTpGvsXViT\nQLu4OwtbOaQ8ZyKgQVG/i/Fb73e2OF6RL17P9oNUDzXchEeYCsbcrIPdMBFv\noVpG\r\n=oeis\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/list":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/menu-surface":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.004c9d392.0_1592953014591_0.6467769554033576","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/menu","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30eb7e39b53900e708b524dbb143a40cb4089056","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.03bde00f5.0.tgz","fileCount":37,"integrity":"sha512-HnUu9bhVeV6F21ZUNspv2fKuatD9zm3lpvnrUC4RQP4rBPqlLj5/eJH7Jjgf4sC0/k3A2ubOKUZB/eIMPSq82w==","signatures":[{"sig":"MEUCIE3CzWygHJz1EKRDrX898gUjLJiG1bAtmGVTNCl0voweAiEAv5GW8N2tPMvbkot16xij1+XZVq5RZp/D1jSAHh2fibo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8pCRA9TVsSAnZWagAATdcP/1BRAATgk4y8fozPAxsH\nbRH8flB4+iiDl6O6icGd2FQjUs8hQGMMvQwVaknDCiEGGcPn8CSrUSw1DK9s\nBO2MAeByqAcRAKYF88tUM/+lvkIjquF4xcBKv5I9XeeSw1WLqRwqqkIVLThY\n7G1c8L3Ph+pidJyaMelflNuWy4rEV2r7yIy3nCyTL2EB+KTOH+6fUtiGQaWe\nlbGya3q5jeZpagzo/fiubhj+ip40LRAWJc3G/3pvEYFgvqGStwBvvetGtOVw\njMicGo/XVtwfU/4tZxIvhyfnl9iSpulcG6B4j0t9RyALj2hvgqBwwflQkf1M\nIUBQTN2siOLABstfNXvKsBzXXgKpPEs7B9V1n0xQM5EBDNMldobGlmE0m3w3\nkb2bJ7SyAjNeKRNv4VlaGlVwOzA2BMUr5y6PoISxEkadnZMq7yueWxn+pOtj\nvTSzEz4b72LmGAWM8RcLV12fUmGv5LEhMHxEh/rGwsa75RqJuZxs5nrdByjG\nRgI2nIBq7/IXrVdfTbqaxUCdaY8uE0z/W2+/BrcZ2gTdLTkNL1dXkCaIRG79\nL98ZUNds/rCM167i0MEY17hZZPtbc0HF5pzdSEzoYewQ7JB0tLvkow3vnXXG\nWrjkBmcHasTQVS5ooxzyl+m5Hd7SPQxqRWnFUIsvmRob7pmI/RKakjnBNOCq\n1XCI\r\n=DxYX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/list":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/menu-surface":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.03bde00f5.0_1592958760917_0.8186323573410734","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/menu","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b86689280f381e896a521b0e77f9f347330a854","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.599b8c319.0.tgz","fileCount":37,"integrity":"sha512-QdwPsH62X9V/pu13H7JpMU5USVZsbPUo2Cvgpeu/AIULO2VKJNFL1ELGclSStnJ1XcBkYg7dFw/OzWSMQhf5GA==","signatures":[{"sig":"MEYCIQDsJK8Iq/drtWlzNu0fD6mc2gbvGJiGs2yZ3nvT+Z8PJQIhAKCMr4IvsvmA2C8ZpKOOz0ZiRYzArwShQ2RfefUno01h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82n6CRA9TVsSAnZWagAAnKAP/0FbnGjzsszY8VuF451Z\nD7WS9OpyY1APGcQr9WkQIEz0fAjwxUuxQLi8ey0W5/RS758bXdPeBRDuwdLC\n+l2KBXeIbruOvOYHSdV3YY33xQoPT4eSzijDbIetiidwxvw0BJv53iSML+7I\nZzm7YJXGxic+1EfstYth2T8UbFli7DjmlgBeWoZtDVh0245N7GG8e7BOzpQJ\nODnnPlePF6+aRLbHhxyAUnA6RPABXSz+5X58/l/L8dwX53Wn45ZP+Amd5aGd\nMcusjsXnitp2mxWvoI3GOr0Ey3K6J91ibdC9eKfcvR6SC3n0fCwE3nDKYFJw\nHmcJK9J0HkCFeiiTPpUHI0H7x0RNM3xpSXwqhLkyPZ0d2dqRgiaQPfx+JkIC\n2bbhkLoHv4hgOY9FOl0l61gjR3WUpe9zFsy4zbqFt1HolIu3GzPZME7Y77kH\nPL8HqoIqCU535+cEp4VrqmNkKnmxPEuZlYYFyInooo9qSCFTlSUi6RtXMeaD\njK5gDb4uiMyygEtEpSQ6iqcDdI2+Ymp4OAt1cIaWNl/McOnFgJD05dx+zNRs\n3fazIhCcKqehK3miUPgTFhaPjs+IszMttgu7M7Rj9UttLSUPqr5HfABUcMSK\njCsCkvPAR5olx1t4mHgs9LZeIQ6aswhW8uEJJot2ZqbDnUmn+2qeBRT+7YNC\nHw1S\r\n=T110\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/list":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/menu-surface":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.599b8c319.0_1593010682140_0.6522096275885401","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/menu","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"754034c9af6be17abeb9dfa1e2ee199f33797871","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.87e3be418.0.tgz","fileCount":37,"integrity":"sha512-7lfb1Z8fRg+AyUz1oYIUKcvPe3JqYBFvQaEzQO5CUEZnSZUIWeOfOVV9NBRgZ4AabKsG53GyYZUrsEpRt+8DnA==","signatures":[{"sig":"MEUCIQCXDvZpv7dulqNCDFH73j5woJEKdGZmiHRCisq6vwcE9AIgEPlcBtH+2/v4Sv9y6vFbCZZ7bMSa1s9k6sK6CTdTLas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85NNCRA9TVsSAnZWagAAqlcQAJpnMNagDMb0VF4mQzRA\nkQY8SPPDuaeKv0ShbEdxc1SgsewM2OUX8Y6nxCP6G/vZsIw8UMQx0OTJD4Vk\nn8uqIr+9fL1K3WDgGWP6tqukdE5YlKHNPbZNrXsNFoKi5FFJ3iny/ZZd4wCZ\n2lbKeWorUyAXFjydonxYqW4Z+N0c27VB9kCfxipXwrgDWD6a68ya02wa4O17\nrNs7qXMGnL5s3OZn9l/4cPhtzH1Gu8prOyPKA+bg1SrKGu9auRtbQgfo9r50\nH7OjLPCu2tX4ul2w/LgpluZNiv+BrNLd5G58JEyBub7U5iZ2pzbyCpAYV71u\noXmV1yTTH485E+4emQVRG6Fv90gh/LLD+fb5S3IEvIxC/EWM7I8vcF22T6ym\nzI3LbDduC2aYYB8bITba3HKsWED/G/+iOBxWP6D58Ma9OKLazcIMwLVYC/SA\nq8Xp/Mu0G1gZYQKV8BoGr67Lzch07HksebWESYIpxt/UbkxAEywK66MykJsF\n8Wwf2F2XP0oTlc2gscU/c0zf2aileDsz1IFA9jUFzte22dNxCLajSaK16OQy\n/w/VPh5BCytTPHJYyAg2gS61QpZ+vvRPMlKktR9ZI+T8uD5IP5wJRk5D4FQu\nftZCKMSJNlTE1PA+Keu+vkyK+h2I+PwSUNHSoLX8lnLOnAGhHGkcxEDd/5uj\nL9qr\r\n=/M4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/list":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/menu-surface":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.87e3be418.0_1593021260743_0.7359821476219457","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/menu","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b78f65404beee90691561557e56bd4682a10e81","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.035cf2a6f.0.tgz","fileCount":37,"integrity":"sha512-T9dHQXsBkCcHPP5x5Fx2jjneM1qCsadO1C5djC/QKn6EtR7B6cplBIRD6wFg38Oam5R5p7+C+u2Yt3xACeLEOQ==","signatures":[{"sig":"MEUCIQDnlAe/WFeHIQT37Yuuq2drgtSvT2I2HVSh2r1+GHY0eQIgS5rThqU7+xsN+vE4YBBt9JIFMBYXRn1412itWGCb7Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853qCRA9TVsSAnZWagAAS6YP/Rpb5OsGs7YRdrKG08Q3\na3kuKqC+jXICMnOQ2woEDWhwuJa+csiTlq79d9c7aVtKwb+VNNvA5wompL7G\nsHdCBeHsghO7RjmKceJFvQdDvXLaC7tHKaX+sv9do9ltUO1s+FoPzTohGuDx\nsLhUhzeiCQo1BBKlXoAD2CGlkZiNTctUsDDoYAtUOd7Sg68e/JtgyWgaWtyV\nxCPTWi/qSKwhhEFZd+dAfJCr3JqJ9MJDB0CCjLJl2ATzuamxLT+xTpzRHZnv\ncSvLMf4Qy4VD0XSlU7HFeZ1+3EvK2gVTzAosjqx8GdYuE7TYlWq0gQ9/fpNc\nSybfMp/7177KZhfaHSE940ldKQl1KF9gXFRarFuDAW9ew7HWM5m/isw5LVMi\n+aINz+WzEueKI7kjEqSYYW11we4NkGt6o8C/+DCUtifF5G8yzPjODjmmqilC\nf6Z1wd4JZestn4kwlhra6nhSDHO5Sgrv8aWzqnHVYmQyRY9EihlZObZtYLbb\nlcknJ96TZJKj/5wr5/oPhn5D+XY8AmPwed9z+b8clwiZLo4pNkltFha4P5Np\nDyzzgwYiQIjefUTCPvK3r41wsJtcMqb2usNiq8gElwVlrBdp40DPgT+mE33k\nPfJeo3JNoo7/YaDmwEsl3g7M05gowHKjVP+2AEoKa82jJV2+UvG760xfzipB\nPOEB\r\n=A9qA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/list":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/menu-surface":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.035cf2a6f.0_1593023978452_0.3084060681930858","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/menu","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a41ccb099994385300abfc98708e95a4650fcab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2fed2c12f.0.tgz","fileCount":37,"integrity":"sha512-xwB62EyjhwTwHzcf/e3OdWZf67siDcQZ/KNa1iH2v6NNVpF5aJasMaqvwvJJi1ei0Jrdz5mMutoYRW3wOQk3NA==","signatures":[{"sig":"MEUCIAOsBr8DI0fKUBA3kKJxPcW4MR0AbsTY5hrhqydY+GgFAiEAurmZWDUWoMIiot+/eEjgZcKPsB9zTl3D7Chb3mOvFSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLnCRA9TVsSAnZWagAAEXIP/2QfrIuQmR4jNCU87T9Z\niroomZavaFGoIJM1BPg+amVozk1M8lhQPx7ZmdWjeA/PEoifBR+GVxTVJGs3\nj5M7E17W/3QCVoIcyX/d9FCzSPp7EVxC4B9GaMszuVcSrFABs2wx97E1lX7i\nEEUufH+oPT3wJ6FVru8egw5irbQq91zkgkBQ/ley32NVO91ZAFM89f/K/r2J\n7HaF+zQXOyYT0tB4ifzOdRFuX01dI+D8xUmknM7zMH9bfdUaULbvyPxyI6AD\n5iVw1K0wFOhwjSNqrOAPx5kxxLCTMz1lxJ1xK18neDrKBvBRhzzH19BUE75i\nad6z8i9EcZEwhroLw9SxPIHzRRPFSkcT57RRIsJiat6ow0sdACUGA1Qepw5B\nUg5fZk02+va4NKvPGv0YC5oWg//zpCdQpkLP1TOicwtewFWv13X0fnuww+vj\npwiEfw1Olj1lhRiJszLgvaQzJJRS/uufyBnMeGUKB4A4D7swdT/62LVrDfHr\nJbKY8zXvFbwlH7pco9McQoL+b8zXc4T801Uz8SkFkxyvid2iCkiDf7AnlwtH\nhgbTEPkwuzcPE7A74W6JcA/S8/99aZ2zAfgo3g6Apo8QitLtIE6CbYLjp4fD\nnieVoeflOXo7SBXhLByeyPPogOh8bWmbmSUoC/wbOkxem5YAFcBCFuLNYYFg\nCSGo\r\n=Ch+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/list":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/menu-surface":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2fed2c12f.0_1593115366794_0.05276801126158848","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/menu","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e7be8adb72e07ec8865d4a541bbb0ae55a76540","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.38197b443.0.tgz","fileCount":37,"integrity":"sha512-R1XaW7htDse4D11CkqSeJx73HMH6ccO6m4r1LerC2pNa3bCZosMzjpE3VzNoHdzYZOPJ/nzzQw4t0l9dN/FwkA==","signatures":[{"sig":"MEQCIADv5mb6uwXmmf73b4CoBtNvj+kXnymbH4o4vrgVOFKOAiABJllX8E2cl1pe0Rc2wtGFvEg8x+tZcq+oI1a0FC3HGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXaCRA9TVsSAnZWagAAZfkP/jEtvVqAdOQw/JXN9DrB\nflk36IwyI0Ac0hdIlr6iLiS9jOD2WSz1duFbmrjdUmNq14jGVZVOD96V01F3\njIQUFPCHf4LVqeMKj87K1ap+ynrE38ixlar6w8CGETpjj7T7dtWisgCBcgJf\niBPfNupLndYIeZxP0Zk2sIi1rUlmpXPFgCnF4naNhwTOaFe4K+xiFc2WxTM1\nCSmaOBFJf1AuP2qv2g7kpxpb07+H+U9f1gBI3JGwhOv87WAyxEtaAK6mCk/r\nF32YzMzXmCGubuUoHZmyh2Jvi19TTkeHkJfBV1h3cigxnKvm2v3lwbwNEqTE\nX/R0eNOswzTPMifHwDJPzd5KKYISYoWKm0Mug9ukMZY/cA/EWp/G25Ma538H\nHjkdDcqc1A8b2d7uI5VuHpNOVDmiFoYzd5Fu23iK78wdUtd8bZ83jCp4IHYo\nXZ4O6tSIzerQJOp6XFcobTGynKL2jbgM7gZ/YZiQsynrxABLyv+i2OI4+8HO\nv1Vmh7Ug3UrYQ7oTqWrAQPg3un1VPe1xTslq/RvCvDj4MYivNN8KdZb4aqeb\nIieu3EUjNN3Mn1TqXKR/VcWHrtb1y4SzeGXrv6TnjI6ZNWOfabc2HwX7TZ2S\n3kWR/yrLeyWLfn30uHkjwoqfh25qT2iSzVyAF7LH0bv4tc8qyYWiI28Dn9Ta\nppu8\r\n=frt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/list":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/menu-surface":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.38197b443.0_1593120217443_0.8679424828460403","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/menu","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70d3c006ab83d1399891e0de58d16d863a1ec20c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.69a35e80c.0.tgz","fileCount":37,"integrity":"sha512-nXdL5qtDmAdwEZwMgmVFJ/Ino3t2LDt1bGDgmk1l9Q96Nrl+wAcPXFKfFU9RqWPQhhztlxTXPFAsWd8EdMh1uQ==","signatures":[{"sig":"MEYCIQDPSCbalONso1VaqBzmpHHi0vqa3wyv0sCDBo6IiNJ0PwIhAPV+OALdwdsBBC1zNFEXmN9nwtUy+MiRCRV9ep8HM3PH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLjCRA9TVsSAnZWagAAKUsP/A+BI0I+S68dA1TIO9e+\n2GJEWYhaBDxluBE2qbUms56TC4/gfIF1DoEVtGyd3r0Di1PAkdOs+2WAMJGY\nWUB+kpXTGybnOaIRNuXfl6sEH6FTAPw6xsTSAasAp1srmO2Kf/bOHvtriRtN\nJyLeXyFwtOgJglGud8dwEiOUEOM1UW7lstGje4n0yZ9SxZjR69GCjRZBl06Q\nqEPSyGI5QV8+ss3OAzCnVEICGJ082FHA9u3t6R2H0Kmr8ULjSnz1MyN4Tqxq\nfSw9W7Fl2yLphuqZa6H+9SKLtJxFEjwO3lkshdqQRjJf+cenxyZGUkRAV1X4\nGbFxMAjSizaegIfQz73DL/yhnX6SzlT10vriAYmltARflNHaPesSQYgL3b2h\nLbcoXCSCGdVDrQAUGRz1ddPWBaYLOpzJy7hek+WfmZ+GBi/DupqpY0xkkFuC\nWtNcf32FtPInaEvUlHdaggAYoiI75DgR6TEgSecQyg1VFNUxXhmJf4B1Fvpj\na4EMnN+kBTnhztviUpxywrKhASgir17U/3mQ+PgFon61E3SMHAeVXkrSeu8B\nwdBiF1JHNd3de+u6aeJ9dzUOb+tDNljgQkvdGoazF39zfT3+dqChNy5B+J4T\nVDfZUC3K0BGTqQDs07jQvWSLb0nCdEO26q1oOJYmdybk2NguCM5E080ffkVI\nec/a\r\n=P7zm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/list":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/menu-surface":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.69a35e80c.0_1593193187158_0.18442252076540067","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/menu","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3956693ed5ec2bce1dc288fec411e7703e68f18","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.df7154fb3.0.tgz","fileCount":37,"integrity":"sha512-0lb1eddUYzYhTBSU7Y8/riIjo6/pCkJV40+cB1ljACZn0/XP0uMGTYHdgeoOWC6XGGVQA1rPZOm0plQceirUvA==","signatures":[{"sig":"MEUCIQDerNPwFdIjqfmQyYfAK6uCQkO5LZjQiAfmKOe/17VuWwIgcYGidB5eATsTRSsJmGXjy9XOZDBLMWYN7Dlgl2zQ8hQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jvWCRA9TVsSAnZWagAAPvkP/RavwLUMe8VAZoFJEmAK\nYk3C9R324s3qboLw2Ii/EfQA73lO4iJ3zPo8Y1VPIgw9xDViBCNQMrqEJhzY\nwmPHLaKu+Dbexr+HTmk4XrmKuxZtfwy3NkFCH2Ttb4Q8cVEvBFLvYuAhRjVr\n9htlsHOQx6ctoRsszvt7cAnLUYRBnGekSVfd9ZkOBSc7cC2vY5Bqj4ZiltTE\nHzqmuomr2XOlORETTrBXqi6WnT9FjNc/JMPHJEYaAEPopOzstK0l1Xjc3snB\nkWznjC6oiSDc2Wg3GcUEuvTx2gXDkqtza5hfAtzxr9ALJtE7k+kDRzh296UZ\nZolNNkk+zWEr5CjuD/jRhb+2IGCYD54/S96peJPe3iQVNwsx2zQl4ptE1DQT\nPjVA03nP8Ba7iZ5tnqfEMILTYaGViD4cXV7xIgVZmoN4HD+ABgeWNEYy4odE\naBQxAqSx7vrw76op3Xr5W//9paggMm8W24cH2EwAjtJ7jdeo/HaGzjGhvnDv\naywznGWONnkAyRpQVgIEq/4epQGBfETiu6DJ2wk2Z9J10CaY37BSp+SrUiLr\ncfYvMvz/pX//gZlPj4cKMksLjlUl+Ynde537VkVE8vyGtg+VY1a1jQye5f2X\nsAiFLJX2NvnJ9liiCh6046onInLSSaXt3RFUQoznH5O3md6H2ZSpygDp9ROn\n7vk1\r\n=IiFc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/list":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/menu-surface":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.df7154fb3.0_1593195477551_0.3555666560220001","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/menu","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827da1cf596c1bae2c8a8bafece7392ae630b1d1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d5618602a.0.tgz","fileCount":37,"integrity":"sha512-Uf8j0k0c+qs5zxM0nCh22ihABGQqwrC4tbaI+ET8NormGJQybg61D3OUrvQG0ozvrQe0agbVjzpMAkrzzNXoSw==","signatures":[{"sig":"MEUCID6BIq3gA8j4KCv7j67Yadd4j9sAW96zrpFVecd5vqImAiEA0ZLMVhuOmX+aalR7gRY9lwFGnwxBdBEyIQYYJLYwHLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1ZCRA9TVsSAnZWagAAOAgP/ita/T5YknoUECZ2rgKp\nCe+yr3l372AAu+G+9GipFanqs1ucMKH5yglZfL8rcMQEFYc7Ae6xChYFD9cN\nNrEKs44b1y6oBhOEDVqZBFVSbAwx4Gy4mYdlVIm+MxMJyAF8nKq4sdcUfuot\ns7Ypx0gWXL0EK/dcQF6Yf3tuhWKDgxoOyViQtOhANjJeQAc4ryXrPvddfoL5\n7fsPlytVjSMqSuvD5JQrx4hRoLBal+BeFbuFB4svv/1MHCFoDlFvIz8WLQti\nIf5GEYhIJCNJUx4FwwuNQvSL5qokr0p3x+C/M01AFXIgbzrdvYCmwWltcH5t\nVGrtLtii5Xc1nc4W6pHExoV898/HIB718sGPRWZYW8Ohq3ZEzSSm9SPdPZBq\nYDFgpiWQCckPMX35fhjreLUk8dPFxLdgd1QEmVBQKxuI1a81M7WBQ20VY2w6\nO1Qz93fBOeLbqdadU32lsP7xx8zFHIUxa9ZI8hb1RT1W4V5Qp2u2be0Pw49e\n5ISgliy6BDHmGKTZNEIsJgz2bpbhCqOzqQblToffHTe8huIkOpEd7dhSyc/w\ngiU+Z0urZ0SIenaZaOxEVfgNSkEqNAjbBYKbkdcSXwc3X6CqLOaI7kWqdkOb\nYsfY2F/GP5hV+CAcqlhCRea3V1BUjE+au19dta9p7tJ1VGUDlDRSTJWlzLDz\nAJDx\r\n=OXQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/list":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/menu-surface":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d5618602a.0_1593208153487_0.6896696816543244","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/menu","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88341e62791ba2f1b5588468201bdf461e502c90","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e590b376b.0.tgz","fileCount":37,"integrity":"sha512-6DPGMTq5BwTtwEObHWNnp1DdCdLs3eM5ZuHwRRBteBRcBQZjsFgYNXboqROtNVhtB9Xbs1uCAQDR2H4rC5pHVw==","signatures":[{"sig":"MEUCIBc5uw1z3v7KbGgIxTYy4atz3xZhZ1B28Zn/wBDMUsLfAiEAo0qXvW3qgrrBNIGaz/YXsN+nDWPKa3JzADJBIWvyUKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oO4CRA9TVsSAnZWagAAwp8QAJry6v8TmBByg3jl1qPu\nfjcodd6aeJzRD4APgH0om7qKcABVIMbBSezhVqDt1ovl5kkofQ6wGV7BX7rI\nhXooJFJNOWVa6q+ZGH2glB3BufKHMRa7Vas0UsHbJi/ECV+qHQ9YXRNhOlCf\nl4rclS4ksSiPyqtqrYsxkUOIBxryT9zjFU269eRez2HO3umSjaFF7mge/3FU\nfYML2W55+HPMq44Fch2UN9ORwgZbYBPbkVXEw4/3FaS/O4hWZS2m6OXu+x7b\nEzY+7n6HStn9/cr8uBPXUUZDkHAD4yMJtuvroewJ3BqAB0us/DswmCdOcRu6\nA+93WeGZ5U06CU5stiQYO6OK6uH0TNY7BQ9qMe80ifCBiII0T4bBII+NBexe\nuFJ8yMg0NCgO/oJTdCkUg7py43y7kYBqdnV6nlJRBk/MshGTMCLBYo3ZJAN0\nm5sy+CL3H9Vce8pORH89NW/ezGMZ60tZwT1na3q3ZdRo7ccDbHOf+ds/sUNB\n4OqLOmDIljjz1OP2beQ+6fDdRo/XAQYa75Uv46JeZkFf+12bbyZD5k+4I/wD\nxbqOhSoEJgXtBBv8PQoLYxNoXdmzfVCEzjJM4hourYdGC7h+LSLj+QIdSMMF\nMXQx8R/tOBKRq58RUX+tLKKAvlSxENg6NiyQS6wUnh2f2V+6UosmnwvemMlY\nNIAH\r\n=TR7s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/list":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/menu-surface":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e590b376b.0_1593213879577_0.7450414523646742","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/menu","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0214883608c70d4f7eb0725ddd2e77d5c2f4e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":37,"integrity":"sha512-kfTxf0c2npo+MsdcxhE3igzngcz1q/XGJNBAgXDD1huuYjt9tu/dZVXGIo/0iAFO/tSotbJ+Nh71mVCMBVHxQw==","signatures":[{"sig":"MEQCIEdh3Klhir12kgWPkSQC9JSBdAItVrwr2T9u0IwNywXtAiBGRZaXUxj3wCF2nDbtD/HP/huoZQ58Ppn0EMX3l5c6Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHnCRA9TVsSAnZWagAAC9oQAJqH6t8tWcAZf6qyrXb3\nSY1WKIuZa6P8ruCkdQE77P/uykWx7LhUJhK2/D+h2DGZgeu6ouBuLiOSFU1H\nVj9uMhTubbwUBm9sQ4Hv5TU4fdzXRFSPAk7AggR99AnRrKY7TG1blh4LlB6R\n3aCFwpf6oRuVqyGWARr+N86tqlKYsxg+zilt+1dEqS6MKdpSj/dSVWun3qzI\nsYpCLu9dn4n+/c9udJ6oWhgf/gmUlp0d22SYkhTa3kx4S1yBYuI5NILVGdyn\nP+W6e3ZrHjOvgQLmF8GaLtmQjpqb+PDL5caiNaNakOzpTHQUD+IX0pDtTVUF\nNQ9KDyDo4QgrlydZr19/iujG0wA/AX1C/az4bRCk3BKSyQywcm7tse3X7MPb\nTafx7M/SWUIDLSkXlG7gnrEKg80NanFTykZnltAqy9gg9inWVI5+WjFeOC7c\n2B3kxX8YN1d75wL+yx2sR83u+Ev6xpNkEXxHLuxgV4pEBNBy99fUMIxQwgmy\nvdTYUb0/wdfMf6KSgKUFvrqhT90D/lV4Pz8H/zNRNGA4l0ayYx3MVbqSugz/\nfLod8Wn+E97tbEWuNt+mmvQo6rBbf7I/4sSeQB+kc9PA6YsDS7IDhrJRckHg\naPGTGz68SmtLF4ZuPdwEXw/v/rndWzwuNwYkL7wY7kbcLO1Awd5fmF6qtmGG\nNd5f\r\n=bvf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/list":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/menu-surface":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.0c9d6bd2d.0_1593450983277_0.502637294810294","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/menu","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b84c00c92640ab51b4ea2ec0d067d5930d057a3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c1fec4246.0.tgz","fileCount":37,"integrity":"sha512-Hl6YxNafbWMYk2aCiU8DTcstm8/8rhn5vpPScXsApaJmxzebLSPqFsCTrN0nh6WF9dVaiq7NW77a7XWQBGDM5g==","signatures":[{"sig":"MEUCIQC+xoEQH0cdOjmUxNW5Zy6jD8IynYAcAuCLW+Tk0af/5AIgdlWfLRqP2H/35YuPTkvxq5fE22J4jM4lZhCgaep/1yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iWJCRA9TVsSAnZWagAAk6oP/3i/QPF5GBwMRSfJX21R\nYr6bs4AQSWgTDi/NOm2eLo+cGNIi4eFNCpJJnpro0GqKrufkzdqKZlISs84V\nQfR5rFuBX2pl8IDcDnR3zpfTlHjEErKDR5LR+BLPoTB8ygcvemQIPmtTPhOT\nYjVkQpqmdNGEEv31p3xebsY5CE9OEfczscndz+i0zmHML6ht+X3LLNJw6nxv\nKjsODX3wIhtmtPU/qAXqCy/bPiGlROjqknLwNfRYrzkfeAX0vzCtXaK95/vg\nVULRpcv6AScMrEx2ZrHCixzQ4mbilTmpjpfaL5rl3bQ81SA2AlRTPphCfJTz\nAwV6GrGsNFwM9bx+8ipbq75TVfUNEJk1MJoaGyTHqd182Zl+k0ldNpwf8RWW\n+/N7WnbjTK+0f94NvNZgup+2BJUsZNoxMFKTXlgMXa9pHpbwMJv7TAHqUKm2\nCHUT+YHi97X3cYTqSz5lOnrJ0KqSBCfsovBVadiOZ6wrXm15l3AZWbotTLID\nSyBU0l5utABZJCh0HbAIlF0X4EHNOKf4YjvU8l8zwKO3j57OI3zxd9GvjPs9\nxuo/mqyzQ1Gr/wlntiL5y5luYZkRoZBiFcln4s5X0Y8fUyu9wwMqfw9sYFFz\n6yrCgxDcuXdmQFGw6jzn03Nv7GMhv1ySurDwlJ40O7FaiTQIzQZnP9wrFp7W\nvMB9\r\n=fI2N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/list":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/menu-surface":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c1fec4246.0_1593451912694_0.499855487877197","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/menu","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67eab2338597fab5bbfd555a0afd85a6f9f9d601","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c678a9d34.0.tgz","fileCount":37,"integrity":"sha512-jkkeR+e5xbb+nAZBVsLN1Sp7YbXIQnOgHlFkmvUmCVzfrJX7LnlcwmyClpWOYmVlm1iKI01fK0DYshqyPIN4bQ==","signatures":[{"sig":"MEYCIQDNvUafyvQVehWWzHk8k+6nSI8ToYCpGlAtDo4CPze+SQIhAIn9hFFFQdSEXxDto5L7BaGGFPyM0HrfrC1oF4t/rOXj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ip/CRA9TVsSAnZWagAA6CMP/0x5RG0D4xkwvoghdOJX\nfE/mrzmR6+nrSXS5gjMviptHeF3LIz+DcDEqPZxF3yLXQHf5VOJ9AoCXxIDt\nALgiEFw6DorVqicbyoCSLijaELubYRoNCt7wIWW3t9hB6CvtjKFc0ouOJgiA\ndUKrLIftDusddT5D/lhshju6Ox6JMY3SyM+IDgy9YSJxitq7UWk3UVcAWplP\nwmLIHS8OGjL5/UdZ5aRyRzYq84nUJnv5VXZIx9Us8g6MTI7YjFtDk4jD1LYZ\nBZ+K/rg97ysIfYkKu3CvEbghA7n7EDyxO55xEqPYZt4uo9e/hVX4n03F2/3e\n+WZABysWNAhnTPVIfhLV1zKLz7fgBsY53R17T+I4zOo3oS1av4J6gF2CJulD\nqS/1WnrlIrqH71fO6Lw3EHJsyplol6VQqPkym4bJBcqVEvV8IH9AWxAvH71o\nLY+TUi0pBY28sRPpDEOBL3IlfE3H0V99qhAS4SG7LwWx8ZyIHuQydspLaFXH\n/5S7Pxh4hCa9V7kjdSxAkvEY8v0uuNqSVOkLRrKB8DZv+YyE57ASOYS2AiWW\nJ9KScQDIGk6q2CP0wAuduuteriAsyQUpRGy9ylnUGgZ6ZeEzEeOCc5F5siL1\nKpY80iWzcRAHhBWtlT2mmKKduvPugnoWRrxMxIfE/1d8feMMUA9F19UuK0sm\nbyYT\r\n=Jt3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/list":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/menu-surface":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c678a9d34.0_1593453183057_0.11360614350906806","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/menu","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ae25cc132efa51e44d8fdbb0e614962a0d3e035","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.521afaf6e.0.tgz","fileCount":37,"integrity":"sha512-Wh+Kv0IC6qepRFT5IB5ZEbYa9FkH4f2MlcBgP6SBiSfnzacZ18dcxN7ojZvGoi0ZrVK/vqiPNo7RlnBEvl/T8A==","signatures":[{"sig":"MEYCIQCqjck+3c0lm/zEbF+GXP8sPU1a6I18ZQU9iv6PwI7OnAIhAIYMVssfnssMHcj6jbqFAQi/TOkWM9O99T7Gvkl2FH4I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1UPCRA9TVsSAnZWagAAM9wP/icN9ggrk01mDp6Ual8b\nyY9d2+hzCBPCGoJSQu7X63eLnjjBjBla5dR8c7zz78/aYQXv45D5ezI4h/c5\nj8aAbegYqzfv9G3ifJbDdu3LJTDl9jc7eSDwiC6tFPeTM30dJP8b64RLK9gz\nCO0bNrUTh2lUsiHATKR0M5MLETpfoKU7bLES/nfurPgxeLZBvdgTRq+MoIsh\n/XPsz+wZeNckHHrCsrZvU3xtiYLPdRxqOWsaD/XbAo8dFt1V4jo9oug8YMLk\n+AogGb2Oc4g0XWWnZACfvYljvnnwGROus1yLahS17t7qo0BYvunfpbe0nGcr\nyUy2Mp7d3s5YszpeJyXBjCc8hNV6qylzhAJDo1rs3ELI+LUglWO0IxNnm5kA\nYJ3uMf6FY7s7KfFJH5jnmCwGWvnn9WjLkO2omV4xAipT6iW1ZYgZFW5szGDM\nxnWzTBbpEIZb9lSriCN1St8MT5+F4Np3IcCPujHOKSzH35n42jbUP9XdpSlm\n9n3YGVvnR7sS6hj2TMg3xSMQ9n4Yf0n+Fctxuv5naPnYLrLPxL3Ffd/udXmV\nFmtxUWtqAVbpQwhBLzzF/3x+JxCieKBpxaPFMoaYivA0qgyL4TLw9wwdZ5x6\nOUZ7UVs5jvTpuFIT1XmSk2kHkmwzcV5Ffp7Yo5ZCFBNhcJbf36K6XX87xwcy\nv0f/\r\n=7Akv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/list":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/menu-surface":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.521afaf6e.0_1593529614619_0.5118199804914798","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/menu","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee954cc215abc3b478b9d76cad5f46b685d04263","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a2ad48839.0.tgz","fileCount":37,"integrity":"sha512-OAI5AIeo30CCCSzyGKdCPs3nG+tqHrq7r/qLH/3dZVDfaW3S1AsFAHHdnpN80uOeRQj7+gbpM1FZhn9VwQ+zvQ==","signatures":[{"sig":"MEQCIC6Hlq46YuOVaakAiuIEV26QTifKJEwkgq7njoklgS3iAiBcjLV7PmAsZ1FqMhojJJ9/MYnyHhXHXxbegCwxHZ5zUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49YCRA9TVsSAnZWagAACNsP/ArwtFSUe6B7KANQ2Sfd\noGpkpaDxPiiIUFho56AqV8IPFOhUxGT+uoDngNZeUrCk1j/tomh7K4dMDRvr\nNdglmbmxQwte7bPvuc8VGJBimnXs9mzPftCW9CG/vutcMIcEUG32PQgkALpY\n99FQcByZE4cJ0WQbQKsnuA13Gzdjxf1ri5u7J+plQKJ4ndHp/XMHLvKGyrsy\nItiySDlNj8G1UVaxRzQlwbecC0FrVyjrw4iPe09/vm/SmYUPTHVjEkxuTzZz\ndUFrJso3qWwHdGMKYtt8rJTy+zJMNqwSbBTxoqz+Pgy0yTaG1kRvEhDuYp36\nUcmC0tdGtvDUAdhGKi/hekgEJ+mPWSTj2LIXeEOHGUGBnxvRo7yKaS6BNA8J\nbk6kqH8p8NCtXgVwUgTImkeeii3oJrPSq4dA6NLCzs+ep8K9XcdtNc3UfR8E\nfcpj3gSK+g1XOkeQXpQ/GIrK5L/PBt+0orY0i59W6JsINbWK1Rrwk7HzSdZi\n0mTWPeg/+fFHLjMVZ1vuJm/4HrBQFYI2OrqxERNWKXqJ/PaL+mTY5Eqh9ft4\nlCrRfVYeD2gofzIRtEMZZcaOb39VFA2vJze6UBWhqX+WFOYyS7Aai8AwWQSe\nV95/NqpTjkH8r02kLyWUPAQ0/+JMydWRVkyGgPOPG8a86Uehl6ief7tcYAmr\nLR1X\r\n=+MIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/list":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/menu-surface":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a2ad48839.0_1593544535542_0.6306304514049939","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/menu","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37762bed8ce713beb875873c0ae8bf99df5ffd44","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ec2385881.0.tgz","fileCount":37,"integrity":"sha512-IT8WgMZHL0NXq+xzJF+3C41jhhXjBncdjxf3KT5iBzzx8UN3uCPkGMm4EKsPEN/oUDY14ZaNtQqf7XrL0fC9Rw==","signatures":[{"sig":"MEUCIQCbcz4UakAT24urxhMKoBWb/S0jJcbsSTE5aVdo2BgaZgIgA3OvxUhswYIJqI1lZaS5LSCvAegXmKiF4TbVgXxIJH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MiCRA9TVsSAnZWagAA2O8P/390SN5Dv5WKwyB1sp59\n6+1Zda793kF0kSXrMo1vWhy2hWwYUzCyJQIHbjj/dbpEg+7Vo38ECgZCrHO7\nRRHIYf4iUTfJZEEqHfAuoSsoWM045fbN7dYpxS9F53dVTxJvKFeSGeGInjhy\nHFgWG/8dfpzLpMWvjruvYa4UFtj8LqTxjDzMJDe4zjpunghLmLUUp/VgYF/J\nMrJtiDOov/58mR2hy9GdCclV9b5MJj9BK9ds4UxawKJI+mp08I0qc91dbN0/\nfppL+6Gx7UzyTNyJUZVVVuEQCY6Dr+HZaLYzfzwAA/vo1jdTpnZn0FEi3cDT\noNor9BlgIYoKkmNTMoY1rpE9bgEyFiFzXX1HA8qUq/crpk8mDAUdX+co0/Z3\nKmWM/j2rJf6+OdbxVYzQe8A46SYmLnCvCa8FNFuNPMoetS4fxnuJKrCTgQWN\nA0+kW5KJhHKd66NRY+KF/OfmviuLxSWKsa/2y+0gglaZUyUhEun83K1qFAHQ\ndNcnq+SoZqgIx/F1Jj/75DQL6v7NDvFITQ8Oo3WXix4n0ywg+wqJ8o0erF/1\nM5usjuEmgTb8+KK7OpXcKLkQKwa5UpXLqinilSc4B+kVvJ9DLnzBymPSBIMA\n0g2zxER9u2Jmm3jSeePkhWaqTRCOGU4XvZ7fTm/bXnHbAediYbsekft/3HpC\nSP9V\r\n=FbPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/list":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/menu-surface":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ec2385881.0_1593553697942_0.21909971377698412","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/menu","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c81f3369d217dd52105186d3693b9050593a75f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.610c26c4a.0.tgz","fileCount":37,"integrity":"sha512-5GzbKd9XgGhE+R3Veld59kB+0hicJ7yJGk6DP7kOEBZlu8uOxMDuhIMpay7jew05G96O8Mmpl6Q7xR3cvRNtIA==","signatures":[{"sig":"MEUCICJ+QD4PWhuzxkkaL4Ajvbv0mOotkrj60+fW+NJi8EJBAiEAqlk/72MIMXQqZ9f8ToDswP7cmqtrC8OYaPlD3ezvVJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KReCRA9TVsSAnZWagAAuPEP/0GAFUXK7n/cdPZoDs6f\nRNXNH0C04FqGYMyRA11s7nUG2e5Pnm4JLJwmPgUdYQ0xbZGZ+dbuOg0M7zb0\nkmaVCFcBHKmxXzfOne+xyE8Av7FmQy8MT3d702jXDbAMbLllOORpc6mUOy/O\nrUURlho35xpDCYOzgwOVsjpvBSimfuM3wxK/ghY4ALn31LCKU91whujdKCXh\n6jpCosf6Au0Wl8FKUxrbkkwEjOVTfVLFQwSL8CHVCBmwfHdywXqxDOEUYQGV\nhbF23c3WEPbwxOWJHcO7t3FciQ+h2vJTfdsPFVJ07uAk/uSI+JkLmSTPNGRE\nWIbui4STIV9LRI5ISY99nXZ0VL5kLKhJhCHmEFbuPI2rtF8Li1p9A7ZUIxxS\n+icRBxl0KbyNQjQmwAjf/JLhV7aeAjk/6XeVVQ8bjeGW3G1ePTJ7Oc9Oe8nw\njzJaga7qaupM/NeaTfXySsi6PWdcR4+6XDd/7uZ2EBH4GAN0KMuuCfR0JdZx\nJorE8keJA+P9cZa0rIDzPPg8Pd4DV93AmP4R8B3JvO+cj7GvO0TeMo0xpE11\nNQwyAs4iCEjca35nKlQMZQNPYIHjVr1mPrdPGWpRR95Je/r2/c4YBFTfEjt4\nW5bZpMO9mfgbwH8mx2nT0o18kDH5dKTJ9NMQpxBVY/NSXAtBTqVTJV/hrhBZ\nupZz\r\n=E2oU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/list":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/menu-surface":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.610c26c4a.0_1593615453949_0.7673418118753192","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/menu","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a836cd17b39611438b99fcd4b42deba2bc06a7d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":37,"integrity":"sha512-X5YnFepYh9WvNj0OWI8sj7o8UX5rV+UDmocKzgZLMagncdsOSZU7UAfy5gsiLBP6UWb/mwdwrixWc36hkXyFgw==","signatures":[{"sig":"MEUCIQCGoWKX7r4As9yOUkiNUfbLBeg3HhxyzTA1AuYIRowv3gIgcz95riyIS1GrNkI7WxRf1+/GlEg2uVbMyH6r77a9mbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPOCRA9TVsSAnZWagAAVzIQAKG0h9BJMClITYi30v2I\nRO3vyqevZXqjKoHZOVU1chbxAqrauzRWSLkimYEbqsGZf4oLPAkYR0EDF6SB\nUduA8gQxRJj7EQL1KDkUE+k9DeJbRzEIJ1prZnkUjXsy6mezAsf2/kiHaNp5\nJtqSe8imYttSFvRJwP2crNc3rcdstNMTyUS5NodjF6fCx3a60n5aRJGB4AED\nlXwn4+xicj9WSo3WM6OeDv38HRqwvNf6dHzUVWeH6kM+ISurSL1BecXpioGp\noSs350+BlYI6Qse746rcD1X8JxjoUpfT4XfTl7hDXX3O4NnGnUKyEeu1+8J2\ngsLppRi+Dh8ZspbkLTAD9hLjII4hzVbpa/FhfqjOaDNtlwQsv1wa89ONFrTN\nwCN4nHF6Sz7BG01rGxQ8+IRZMklhE2XAsh/oa5haK0ITFf4zy9BvAXeiPArf\nQEqjZ7z3iQRuHspqkM69c16OfEQejFX1ZXMbZRnrkoTTlwI6uOmzWNeXuhcR\n3BOmTT2NuZ0j/4I46cZfS3qdBI1JvVgEUj/hCYB9o3zYjNcQZtqg9j53gcoE\nE50PNLr0LaD2Xg0aF0JTMuMs4KDosjCGaR/7L+Mv4TmnAlyg90pl3tujT4jb\neRNE2PM6ymuPl403xehoWq9x8n/S6aB0h0BWeZL0/guqMTUgy/aXfOzeQm0a\nyHR3\r\n=JO2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/list":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/menu-surface":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e2ea4a99e.0_1593631693984_0.8297137979488425","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/menu","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"259c76ac52b769dde9309e385a72db1f2ae8ed7e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a78ceb112.0.tgz","fileCount":37,"integrity":"sha512-Z9D8MyNjtMeZ47jwlcnvbGCLLsLSGc4h+a2g/LWnlpbMSyAa91d0x2XlQANmfIzFah3nTcjoon08q/9g8up93Q==","signatures":[{"sig":"MEUCIQDtwNQusNsWXmrs9Uvk2+hr2M1AmNH/b9h02Ka4pnHHdwIgLZt7SZX36ANLxLfVrlLNj9N9ofYd3eRnuLi3nrWSfec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OaWCRA9TVsSAnZWagAAmkkQAKHJZOi9G5VQOLX1K7oS\n7Woi9/rcYWoOyjONOujgZrXqBcCQ3sJYz7RXKFkEq6xv8bBFC3LJmFy9dzun\nzPtC4rw/ROqyhJKoQqp8dFlxh2jUiiuPuPnmZIyCdyo0ipfMYVOQzVauf5dC\nKM4lghgkgTIyEoYO7D6wIEG7gfy5E9sLKRmJbBrtshXZH96/I2gEOgEnSxGB\n56IXrJh1haz7qBX6LrcnuLPu+89iC2mgiVO1j7sBt2TPKLDwS6+F0Zuv2Ptz\nyn6fu3UgOqQ0PLqQ7VtfJ9ROOSJsTIzyAw4qe/FdzVsrhsO7mLv5qr2rtqmA\nILk0ddHmjKbI3X3EMgRfs4WBPTpo3z2Vd5id7sk60hmB8vp/lt7tdaxNDuAH\nHwNGa8blBEV/1o0nvbAkICuVBuJA5+WYWNlMvrBymMQsZRTMcz4jd5w16n+m\nwmTgi2X0s2X9EQmZ+Rme7kgu6xKfthAzuaM6NTpQSUXK2jPutshy4ejEob9N\n8MAp2U8mZAd2g6W9Cb9bQlnZb8+0b7tKJZuvHSWH35smIqS8Qun0SoD8PKc1\nw7VycV/TNTIFl0DTnU7Ih/JKCTJvAv03JOj9saEPlXLjSySuBfTbPOAJVhL2\nxSE4f7nZc0plDn5Y8/Y3X1DAQYY2Rgqir+QWaZ+HPHQ7TrR0YxBhwxLjw/ic\njxMd\r\n=wxaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/list":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/menu-surface":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a78ceb112.0_1593632405423_0.5027932561636013","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/menu","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"154552b28f87c20b429ab2eb41c0d94b2996672e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b0c456d33.0.tgz","fileCount":37,"integrity":"sha512-wy++Jdy3Kci9f/9n8jiF7oUxOmxbORPBWcOuo5ZD8pCIGZHTI/cQEIZgY5fyPVkK8qg4sInGOGs0zuDFn2PQlQ==","signatures":[{"sig":"MEUCIQDijW+dHymLU/7uEZy5DhtYdweoEPnqgPhdmGpLHpo2/AIgK0cg0pKJEFJ4Wlz+696nb0v8CGbCb7p4T89ZDA1dBHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jhCRA9TVsSAnZWagAAq0YP/3zSSkKoI2ggkBovUbu4\nGktMJxJdeW4Q7loyhh8xP5Rri5y2TQNhdG9/n0HVtpnOqAjFt26ymhYiJHKG\nDtVpDl/UVFmUfJcVp6wMOu7ZSGfSG+pxEJQpLwRCbgNb7QOtBOfX556q0kRj\nfG0tgf9YkBOVHQ5liuEB1mlxHT2Va4RFfODdcDcuOkM3/BsRmogvGCBgCswY\nPqoZewShijdWw6DUX83IRpRcVrxAX800/t9rMwNl1iZOxprZWmEMS1rw0aGc\np7YLOkEeR8qwc2l9NEMIUmNbN9HeI3OcVrTLea1dy8Txl5DRO0jo2uv5rUAQ\nHrFnxNTSNh9yFm/SO51pESd8ng1AMCeOvV6c8iuI2nGhndn6rWGCeN88ESHS\nQWGiRhkgrhK2Uv3BnbcVKaPRElgjrXNzcB9kEdVms7KLlIK9Q+Xi/0mpXFoq\nIfl5IlhSmWtySc9fZaPlAOJymOrCafx1edqG62aGLguGvcz14P4wKYpv08Fu\nvzHkcdLLhumTz752lc4rxmAvibSJMoT8WeHOQDlhX0NfBmuWEKgxpb0BZfGK\ntvQYm1M7uOiA8bjr00vXi8eKb7gmI8ZTXMZT1JSn6mLP3Q1phU8ZfRLMMstz\nS3ul5BVGthrfz8U1Aov7nKdoluimtBRyEVEqcsmo5qU5PPOINFNrG0+6TSD3\nvAyS\r\n=N2tV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/list":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/menu-surface":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b0c456d33.0_1594075360852_0.5253216203600881","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/menu","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c16a26c05e548a1bfb90f183d7d9ba3cfd54585e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2e5711e04.0.tgz","fileCount":37,"integrity":"sha512-QDRkJ2gXeIb/TZgPajKuhbA3uZaf3PGZZj5I0xUyFCIPb0pSIv90V1FM27EYLyCEbM5QfQvxqjuHsxFsspohdw==","signatures":[{"sig":"MEQCICvX9kRd6X45vihSJnaK8TaUfN+/bz1H7SDjsS964ttpAiBm+A3S1jw1RsOfGMUf6zwl4hujquzQVFBrZWdYfqnpcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkYCRA9TVsSAnZWagAANEIP/Ag6ayEG1whjBHobO+5F\nlBTVnVBE+G1IzsYcVFpweiyzIUy1gsIlPbHWPOUBk7eeeLDA4r0wg7H/PMwW\n7O4gYDNqi8c+pE3UCKw0aLH2z7uycp5BWcwjLdEKTtdIJxQo4Rkpl9EJfqGH\nBuMCgx3c5v7SB2BT0HInspItdQHePzJd5/eeYO+9FdtSsBOXKDTlywGMRifZ\nQEi58PsbIK4Eo7XB0mgGAGAQcKpF1il+KfZ1bAHItK7lMr5vLsv0qP7BJX69\nPH5H+tlUWYan/D7IJatFLb9n0y3ktbuadndJ9bf1XAqTu/vJGu90cBnRhGq+\nlxsq8X/C+rWl/GiU+/hxQafxN7sX5CL+F10+8AaFl0k7GZMNaLSrHRNrqoLO\nb/dUwhYmjc1uJwHcM7JR3xS6x8saby3560uOFwdEskma7CHLAPpsczSljG9F\ntPgwQ5lS9BUl4wk/Wrcsb5JWwP4UHpZEDHcLmJOQa9mdrMTE94Vu3z3JyMaw\nbId/178G1ueWVNM5lX8km1YPO9KfxzisWXJ+Cpcm7Wxyok9WSCkJL4kSRYCs\nbN/e0quXX1/WXDA823lXe4m4N2bM0qdYvjoMCSdKLpIeK5rKASZ2yeFReYnv\n/a0/DUMot6nJtpBF799gv+hjfB0WORZ7MmAKmPy5p6lYS92wROv4z3XnTvBT\nM97Z\r\n=BLsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/list":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/menu-surface":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2e5711e04.0_1594226967718_0.8049547283540979","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/menu","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9e1fb1a93d7d562c877f32275a6583b429744f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.811fc5d24.0.tgz","fileCount":37,"integrity":"sha512-29EdpfVFRBTl3PJtYVnLV/F7vEw2FdvuJz+x1PnewlXkQTPzWdIGkQoFqQfihCN/Tg8kPmxUbm383u9g101vZg==","signatures":[{"sig":"MEUCIQD3yFvhwrGElIZLJJDCxliT7efH08bY4Il6WqoDqgQ82QIgKuzwHmrUkUC7tbKwIoVwqcj/TKoZkRwAan7BSrEsB+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf+KCRA9TVsSAnZWagAARPoP/3K71EqouIWmM26WRYsf\nC92uy3AfYJER/IbV6w0IT12potMJ8Cq6As2XFrxj8G3HbgwF+YPQyj9/e72+\ndRr95gJznddR0yHp+CvzEeGvi4F1J7ZhUio3yyov2iPaobaLY4eqd0E/uubJ\nTRbmyO+FRJlzkH0ABNfA8tQtCAFDG5ugvTd/91YbskAqEtm2GfT6V2EXxPi3\n/U5RtJkNE0+ZksoTlJRSAQc2RI8htYvejqT3SKjGARcX35BZado7GfNY3v7a\n5TZm8miYApIPW0ISAA+cM4ZH/M9xZAQ+X+jlan5sK7jmroxmGD6XM1Gc5jwP\nLSYBkwH+aOix4PAHy904g0lHBTlzVjzlvUE/w6qWKDHkGS98DAXKPF46i8S+\nAJZhs71S2Q6hvpl4SkzLHd1wlhfF3vRW0ACsNH0s3rj3V1mw0HiTdoq5zIx0\nZPmVhWo9XCLmVLybx2XUgzjvnCvpqPkFnmNvo1K7lqVtuuglR1f0J980cAKi\n3FvcjFAP4sPktHf21YKmk0vgIbcSWlllV67WWu2tVtzd76a9OdBJvsG2+Gk0\nwWkQCigUxMq61rtkglxzowvMtIMHGD0q8An4acZM/paRDGXDX5O3Wew6KB5r\ns/VRw1317+q57/BSUCJ9835OekLDrZqFK/0lgFH07x9LLcjAzq/z5JyIXAEO\n+ytF\r\n=lrfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/list":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/menu-surface":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.811fc5d24.0_1594228618290_0.3108395099152723","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/menu","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05cfca1b43a716c8eff9dc99247431a3c2b7181a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.6ed717ddd.0.tgz","fileCount":37,"integrity":"sha512-UGWNf1Y252XtCXsHTJfxDPvHRT3ndvntmRSRdBoycZwDIf4ZZ23twSZiKAGD/FO5DwS6KYDxIk6Ahqca14nhnw==","signatures":[{"sig":"MEUCIHq+ponHgdfFpQAFJfrezhHvqd7UvLOOYwlhrrf/w7RVAiEApKSGJNPz9qyXtsL7ZqiWV301LKnf59tXOAythC/quZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiJLCRA9TVsSAnZWagAAf0wP/jgXhz5U5bLcfeYH152Q\nSCfEjpeKwhY7VyRv2Ov9nSqDG9bIz0VehApRI504zAXOVg14P+3wOd7BCN4v\nDpnPaBUJZFV5mGxvEBBocwSFgLQY3g4Fdz2BgX7OFps7fWXw8/hd/NwUdLp4\nIexo1TIiz4Te+9G82T1+Md+NnknUhG1p3jHMoqs0/B8khNd5d6t1JW6Sx5sc\nIR2jkZ6Teeg/7tqWuPAcILX1faCFGeVZDPzJM+PsnZBNcK0kaG07JhJyw8Qu\nNNnpzBu551hHeXDJCL9O+odqlU2ZfYuNlxaUm52aoE3C/5dlnzKvOQZkl/su\nf9ieu+NnlJ8qNyXdP2n8EHQ5skhFbsE8D9maO62gLNIU5BQv1/3jDqEz3dZS\n8H/yYElPN/emDDmxojHuhL8tUSnhNco2Gf+lgEZMYoUV2oGK5HyQctsUd8g2\n4QVHKvm80ODu8HM1PDp5yTsfVWtJHWrkjcO8AQKc5g08XBP3VLfFgVsLsZcb\nsCoQjKbYYA/rdLdy1BFMwKZuhaq/wt8xk+o2o1n32R1eVXyn/Jm16HaQ448m\n+gd5rmfpt1KuWSdSEFD9CiVJZ40rOMsMkaBfT6K4Zaqgf1nBlYxNrS6dTOt+\nsxlxuQf+9V2wejzULRwEGGyIUJv20+//4Mxp2mMhG6t1TqfpvxxvmR8h6LcE\nNvCW\r\n=8vTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/list":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/menu-surface":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.6ed717ddd.0_1594237515109_0.39876912857421476","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/menu","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294c6c8f737324fa35590cfca7fe62c731d7a095","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d850de590.0.tgz","fileCount":37,"integrity":"sha512-911rn2PHdmopA50f1auU5bFVBT2MOd2wLvWjzvp4KULWLw+xZD/qbkSmO5xEMEovbBTb+qzlUDz30qkQKW10/Q==","signatures":[{"sig":"MEQCIHiaG3FOYWbFwzDZxrGlssGHodBDxMxDs67buLUghdDfAiBUnncAU0jBkuMTl7fjRcK/ZMxAgr0h33gvn7VtH5Eq4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yqCRA9TVsSAnZWagAAE1QP/0Y2thqVsq4fpKXLjdvr\nx6NO4CY0Vj8OnEm/4ZRnzEGaSRzHWSS8UCBK8nwVbyISHshpRoRePDEdoVlH\ncn+7S1Ob/9Flx6q2DNfsoEJ9wBqJHAL4HTeuXrQHWNCKP6EWTq6hxZPV6iSv\neu1OTPibZBaCsZNLV7T8kBgEcBzS9JsJFRy+3ZCVsTxu4ZM9JUOMtjnBwz3+\nKer+Mih6L4CZTfEegD/PPHowh2cNYjg3EiUoSsgcGO59/kPiwbcw1nUGaBBK\nC0Qy/Jo9ChvyzD6lcuU39y0B5qVITSJEWpYIn6kiH6f0ehLTYM6uXm966o8F\ndGhGJOKLOgQAbQSNtPsdHYRAKu4UJlv7vh4UhRbbwUp3IlJCXsk/CxkMXxax\n0+JkeXlFGIjDmuJE3vVAS1YyquXlcvvGP4F4lgYfGEc7+wsUC8ThDRGW5UDL\nDfsGzkjyAcpfvqswuHOCr/GWDLqrlBAwT/csa+WqNv4FSFSGVaflGNhPfNMy\nSou857oe0INB6vq/hM1DwovSNmEnCJUmAsFbJZ9V8xTINWq2aw3aPGKoAHC6\naGKBZ2eT3m/FS7GPaaOMpAhtONcK3GRCxSQSB+Tc8eljd/EwAPqMJuxG158b\na38X50pWIt82+GPES8XSEI/kr+uNCAI3Yd0vD7m1UubtRTUGJemWBCBmuq95\nDcIf\r\n=pVT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/list":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/menu-surface":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d850de590.0_1594317994365_0.0840645923501333","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/menu","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bb596cf6debf189b8b6f83a1b2d1318795d1ab9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e07a70841.0.tgz","fileCount":37,"integrity":"sha512-Ui3NGf2sAOG8sPfY7M+3NdtXyx5nSdaOueBm8cCnsc2FpmyNzH9D++Fvy5ACeodqPUiXzGE0UHWYI1opwGHOzQ==","signatures":[{"sig":"MEQCICX9RyacUX57wOSgt5tDvWkE4OsocLYgRd1V+ARGOFE9AiA+IgEloYbIwUXEw9u93XKKfqUl73CA6vxQiBRvtV8Myw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OmCRA9TVsSAnZWagAAEfEP+QA1PhTn+SOcs5J73ulC\nHxIU9imjv2huI+UvtahBlPkC5bG9WF1H2HQcEqguJxpRIr9Q+tlt99w1LGiK\no6DubZsyHfb7Ndp2kRI2ZiU3HTyWHnRXHbfHsSBPN0lfwdQ7J0gMKB84n/M5\ntNg2SXUctniWfrMB/MN940YuJgBP5CUG/+KgfZjhf8yJQAKFJKRGF08lcuKW\nPLyLeUZHTtnjFUnFCrb1KU+Wg18iuz7BqvNWuFZdBmYn2cbw0TezlDS74e3A\nXnl+LBRRqzCFsA6PcuQCMYO/W9HuKfBhlN1pZDjwGPoUknM8Sd1R3mRzZTvc\ncPVVhZXvq51+uAPAMCWwMteUw9IlGHkOA2nythtNbci7yagqwhJMelpElFuX\nVrI9Kqf+JEG0u+noGdBVfWfu5VmCg+wHn6ojIvcVgWrZjjt6/ttUGcCgNRoW\nuwy+VXiaawkeZ03n1kAKXwDrcqwRNoDtEiDQjfjTi0mkW1yn1410qGMJ8WNC\ntBFK/i6IhNh5U2sezCu5eZQa4UeoR3dHg/3UYptoe27leawarrEAMpiucVQV\nka6i+pBykBIUum9HRCu7ITDRg6CL1UuYjxWvVlrZ2AgQi34ZukIAPvD+GJI1\nM5oS80lswJfIx1o4XPQZMHG7bV27Fr6uiVWRSzk10xOhgGv82ShoxSONVo5J\nsotp\r\n=kpQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/list":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/menu-surface":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e07a70841.0_1594319781386_0.2749295026872638","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/menu","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a8f66c8ad638a51dbdc1c629c763848c804abf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.37947ed6c.0.tgz","fileCount":37,"integrity":"sha512-OGc3JwZs1/FNLE6A/z6Jamt+YBzrr341rW3JmN1jcDjURUfMGfaYlyXZJMhrqbx7jtaa5AD1O9vJNEF37sjpEQ==","signatures":[{"sig":"MEUCIAcetDDsWqJVtzzh0BDv+0f5MXjVVqvy+ez5W1GQxVi6AiEAhTTmiSNtOyiLS0dhtWjlTDWopPHF7rI5/CKEPlueW0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4ADCRA9TVsSAnZWagAAeNYQAIgD+Z6+FqAkA64V7ak9\nurrrBPfclr6Bik7NRIqbB+/iQi6C6jnY4A2XwsMNa/0IR5/bMRz+MFo5HgIV\n7B8cPp43BPswMYoweukNNas4PgVKx1jPeMybJfY3ERrnAxCZ+6VN5oGqknN2\nBY46XJvKanHdBywhjQJpo22B/alCqZZqOewVg39KBiRr3q8inE8br4MnALZC\nkY+umpHuzOHdmwP/3dYjbSDqbTUUe2A6qhw9wT+F8ZNl4A4GBiQfAhhu6Mi0\nKsntXapCTyiNBWOMYIerOpp2qaDlTrtafnhtiBtxAm/sTLwLDFC+zPytWBSI\ncusMC9+97Hjk5FzHp84qCImrXZxfBiM8nGDm1NCvthRhrURqU7TOh6jBJG0N\nsyH8UAY1GIFS/Vq5Rm1NEqBXCTqiDpz402npp6wSR1T3Kf9wBr2gk+ZIb1hx\n3x0EtSj/4GFhRAKTX3btM2KTEyz8w381PIJIHxn08wapisQZRSj74E93rBCx\n62t3gJlpIYWI/S/49Zxqjy1wiLmITqj5CNjJnBvIrLITTv26A0YBf8SrzAks\nJNrDt8lrp/UTBHCURZSE18gMhD8NbQ/1y1qOHS3vxY2JmZOMFEWtHRw19rwZ\nqWSyVObxGo0m5pqLI0OQTqAi+WEtL2cWYYSDj9a4Y5b1vkMvF73SQ5U4PdK0\n8F48\r\n=o6KZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/list":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/menu-surface":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.37947ed6c.0_1594327042782_0.29358057449198016","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/menu","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b99d8c3f839adeba029de3355706f8c2e633e6d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5d443afec.0.tgz","fileCount":37,"integrity":"sha512-g5N1wlblNv1nm/Xf3Dpiq0vHN8EdMo7TxhR2qfPDYViwgFGoZSAhE2eX9/ypUxpbsukvUW8+b2q2dlFAjKVi4w==","signatures":[{"sig":"MEYCIQDY6DwuedCW7or1EmTAub/IcfliCIQstE7hl6CQQuBoygIhAOXCjb9Kpm6QDLdgCQMNjRPBgOy8y/p/nAcm9mns0Oet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OiCRA9TVsSAnZWagAAI/YP/R2jPZ8QFk0fs3vfpjQp\n9HD6l8LfKdKHZ4BK7YKds8ZhFf0QovyjDkmnWjvWjxBTg0mSsSzzxkIpJddY\nHXxg6F7PrPv5C/FxF0ccVIJ0STgga+Hj/iZokVehNUsZTx7TMxDhfENyZpcc\nbYFznRElp/NZsKn+7eIMeK2NBpy2HM5PsGxzJpaz8pRtGjAUmDtDB3Z2Pp5Q\nqie0BDHNTiTHQXNZtNUWhwZPcy8lVBisYUu78c9UBM2nMOAiNSkn8mjxDAQ1\nhxKq2IklZFgVO462i66iRPQJq0mwtHh59B//NIZT1Oky9fASLmXT04L4my0l\nwmKXOroFd6KyVPE4y5MTdg06WKc7+c+gWhsc8GXQVxFfbvUc50mZ1l/C5Q9Z\n9vf7USJUr670LeBo1XrgQhe0UQV3To2vwqDnmUcQbcUDSSh4PSoZSV1j/6Pc\nOdjEeYJr8NI33gNG3YIJmJoXjUoWJI1KLDgP8uCh1JVjJBPyNayBCPGepuW9\nUxO7LL6vyVBcZNXinVEgDTB/SSptVrpO7NRb5CXSzN3MJ1nELCc8zLrItxKt\nz7qrATcugWscXz2KWnnanEsRct+pEo/vtQncxBA+/qPFkoUzh0Y2MjDbp7BL\nbqC99X3qLjfEHMR6AU56QIVDbEgZtnTMd4IwxtHGhEhFAdn5KfiqSPOurMm5\nNZJ7\r\n=x5DU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/list":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/menu-surface":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5d443afec.0_1594327970253_0.5898077324155451","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/menu","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c00d749473130a3d6b3d7bae0ed70078390d3b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.9ac1ed914.0.tgz","fileCount":37,"integrity":"sha512-ZnsQFw0OTTX3jlpeQlY+aJX/Iv1fptLoli/8eEsLEzRC2CtUZfR0oFkQrW3t0aV0rYlr3iT98XUHd459RbrKnQ==","signatures":[{"sig":"MEUCICHQPWPKdZBLrel6XRmiNtgwuFBO/00K4yyhYMLvPnBkAiEAvu52nUDzdRXzHphbBILfsoLhwSImow3GDxIzw4TjTcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pqCRA9TVsSAnZWagAASR0P/1uUHtX2RLxGpFAWuOHs\nfU76iycM7Xy6A73U8ka2ToTH4+dIk5hoy3Y8mozg6fS47L9tC0GKjpBqHQfb\nOlfMloFPC74guB/GDuWvDbyXXXvEdD5J3IOow8DYc7LathJByRjRQTLCzaEp\n74cTDM440pjDux+KszTfNqCQR91THaJQxG7r4DTZfNr0K9V8P+ICDw/EOrPC\nOWOvMZ8IryJzNJlfCnAepijhYmIJWaV2pN77IaMs1TN8zYv5m6Oe/1HJVrPr\nwiNhrIfCAn83TtiyFYQYvePQwO/Gxj2CuXoFPSWw7J6/hlnoBojjqIaW+Z9V\n/2IEkEO2ewq6uPNOD41FfYHmfUTKmBC9LPbGX4m17BJceTvvsk1aM43mwO3M\noaJo10b0QqPYP7unSatwLI7kTPxULg0w6j3w328jCE3qwz8g13YLIfJDdmkV\n2gtc9O6a+JwDWwPgKrzr1sf+1XuVrRU7XDQWGkUNcPfsDSaoSP8Vadx4ncOs\nfasy8PplHFf6J9dllKT7EIG4lUNVE0enEAM6ayqPtfGYt/BIQQUPwh9JxAxF\nvVxWrDyRovn3JP3NjY2RFWHGvR+FKzbBGzJuap/wSK66JQbt6xwedvatP0n/\nYAXyR/vN3kIG9pTNaKLWApCEFsIzKPJKf8Y/FNpPzgi2EsLnqIoafDgLQWo3\nK54z\r\n=IlNB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/list":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/menu-surface":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.9ac1ed914.0_1594329706257_0.23562217229286353","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/menu","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a195978cc9e4cb327d13ba4f353551f2ec101aa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.1e7cb6198.0.tgz","fileCount":37,"integrity":"sha512-NzaZSXYO7wLW3bBXb5eiEEcgcq645FNHS5WLirQKIucEd/6uvlXZyIlQR9HYOQhf3Rbe8zVMmNnBn7nDd09XLA==","signatures":[{"sig":"MEUCIQDJyR2IJtJf0DgJIB5/HEGOmcUaqC7E2KQAWWaajCSKfAIgXUFG2dwDP0TCR6LPAzEXF1tyzULqUUKbM2FskavcAnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5aSCRA9TVsSAnZWagAAmy4P/1Mf0ngDQfEAfYavpiu9\nFQn6omSvUZxkKdL5g5btoMvt5oWP8qcQzyD3AlRRUh53U0HTJO12AoJdgdj8\nNyMUzRqVo7Jz7J1J7yTbGZj6jEUshza6F+OE3WWWYQuVK4Qn6GDPpoANR6gx\nEdRmx7nl7iltxcfiogU4mHYWCBJrmIOHnFXpDq5lyA03dYZsoz/kpuq1+lGA\nBqh8boSHhk8ikfV3fO6BbN/Vw+f48p4SYG+Ifxt/qa/R+xh0s+ZatXt/wwQP\nqvE4cro8Y05I5RB2n1LG9WjJl4PlCx3Wlw3cdpZax4a+gWxIyaHD8I6qlrzC\njYmQFa9rUruT6HZXB4EbvvUOHWuM8P8XS6HrGBWN/rb99vabhC2DNyMB7eHg\nSV4+OodYIGRLl+EmMGNkji88B1hHtcX7wRsJulJdC9jL3JgRI8ZgznHJ2LxE\nNEAoC+ik5ZRA97eBUj8g1GwjYCkKzV8NN0oB947I8wu5Dd9A0PlC/6U/oBy1\nGhIPpaLSveK27NF3uup+sKa1eSyNCqNgUZw3gyWlGwJNldZL1umyszjiyhzO\nQCmm32Pngnj2iYPOO/NDrryzCAlSj8Tago6zXfsfJ4+tg39KrBu5UCJJrlJq\nsAgVLEX+WpxM9M1ovnAaFp7N04xqz3Rq0irb0tb8aKOIJlsmuM/5nfODA9uy\n8m8d\r\n=9gmy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/list":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/menu-surface":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.1e7cb6198.0_1594332818483_0.21666280670230087","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/menu","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcd7dd6ee0666ecfbd32f9da457f394a05d45e68","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.843f636c0.0.tgz","fileCount":37,"integrity":"sha512-qXK7K9fiP1c87AlcOVYqIf19KuzqqNLpXloSmU8fx74KAvrV+ppQgiXukMsLfPvTHh+7PMX5QPjd2l78tByTWw==","signatures":[{"sig":"MEQCICRpd9Aun9SrGl/nP0LccZEr+GwxfCBR2WlvCUH3H8DqAiBPTZvZDnu/qihreferO2UvHzXuqlVK+JPvL+7OYQqN2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjZCRA9TVsSAnZWagAAGacP/jARseoImnfdm2ogx/VK\nIOEz52GA0SL1C9yvbQzqhHrdwTgW0OePYlnS5fQZO3Z6V0GrEF+Lzo/cohv7\nvn0I25OEoa9xRaB6mGsSAXNBXVwQZE6eMA6gNfLQN3UmOc1m8t3HaAx1WJSx\nYQKAs8CA0aS5+iYQvPQlaD1dE205MKy/M076Y7kV+iPKp5VNLyzbXeKurwfb\ntKA52DJREV+UCiRpEYZZQzpjyd0HFUOeQnZeB+ZiNTjxeGrr+RtrHIjUaijS\ndkLrSFW0AFvJUkqXxJbb9FlxdPApKlQ0mvKJMovCx+6DfhH8MHULYiRo1WZh\n0ePkSNq1G7Ag0RPA2wZ3d5KaHCwZLkIEx5GXmSnZaj5cmzNdhul+2rEsxiDp\nkX/j1/xmh2zlmoAw1/5QjnMpFCqgbYRP3SGRxyh2RK2RsKT7cqAoGstN1ep4\nA6tXDdk0M69xl5K5mPNDQE1m86R2TDhwjGF8EUnTaQx8t8ijFJgI1l0Ri5Rb\nZy9br/whd3Z8nvEkf/p+OYZyDYSrcqcsy0U4HbLn7GGys2sdmQV3nlqTCI/f\nDCTjJisM66+Ta4fh6Cn6HabzKREiTXeN52tldi0rzjVvlt146ZIQVFJUQP0j\nfsxzlJBzd7PLFcVWmkVWKIh5onOsOVPYEsDXbEfH62WoMP6XIbSqH/jvWDvx\n2nZC\r\n=+yzP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/list":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/menu-surface":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.843f636c0.0_1594403032712_0.5535142081525917","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/menu","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59358cd5c32504940f0a6927c0282b6ef0c7e087","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b2edaeead.0.tgz","fileCount":37,"integrity":"sha512-KYRPSKZf1CB/YiDkd1wLm7h0EoJGOwYk+iOq3S9CyXz+nojJdZfH+7ef1zsWayOuUCbKEpMl+5gOzQqlUoqjAg==","signatures":[{"sig":"MEUCIQDDJr51lnrseZEGvPT9L5X5skFncCMJw2b5Lf7V/r3nRwIgc6wwcJJoGZT+1ILIIyKmIfbbyg9DWoemP4V8OIdJXSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6XCRA9TVsSAnZWagAACgoP/20Lh1QvYYcRL8P8a9qd\nCBG1sTzQ8Od8yWrRBk3G/8ITMTRBmZIA8BARNQv5zBdli4A38RHWZzS+/efI\nvw2+bJuNZP5phK+pA9YxLk+0GMM6BqDL1d0ldRxaDqJoTzLGqsdTOluhRems\nHHm1WvJEdzMYhn/jhbemSIds8AIPidkmh4aZ1E7DlBhFRf8okF+gwy1r+j+I\nhfFkWTp5wokzJ2KjUIXc44QCtFiIYHO/YAvrdr8XRTcqyL22baqddrcz2uPB\n4H0hKQ6ZiiT/FxUNXDWTMc7WC6Pi5UVwQas2xwdnPHMNmDAFljDTkAxoeb8b\ninCiO8KDDKNp43MnK+mD9kahVBj/BgSTzJHpyVzxCQfyzlJ3PuJfSMalVhNS\nIH5lcDJXhQFyXlIy7K1q/HxAvbz0w84DhLnGW8bL63rSadOGLMzPZvLJZAFg\nCdGwqN0nfA3ZO8XQzmDviTxqb5r2Rq7AuxFrYNxzM804iQ6YuUXN/Kxa2jYW\nWT98rMCLX4Cxcmw8qLVDRn0rB+T5OaDLOzG+oSgbih1JU5BdvH2VFRRKH70j\n0WFRNGJIpw5MYR6Ys/RHFD6brpXpK5Co6IsRUCOzBw5EgX136xRcrWl/ClW0\nCGYhdmtetC9ngTD+LKHZQQzrjFgoEN52fA02aIh0x8s7LzcFw8LOXKnXM4jv\n1Qik\r\n=Iqie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/list":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/menu-surface":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b2edaeead.0_1594404502655_0.7911253868261048","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/menu","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6bec6ef8326c102ca1e82c076eb68fbf0c7dee0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5dac1f624.0.tgz","fileCount":37,"integrity":"sha512-sO4rtRJRsbbgLfRi62VV0+mVGfBcUXFV+DtseBPnEXF+BO0qpLD9FlTuXmZ7hltL4SqBGoM2iOafRtM/iZFgDA==","signatures":[{"sig":"MEUCIQDSwD5t/vzRtsK8VZ32ny8GgPqBfB5Ka+5TKCdJ/vMQgAIgeLUOtuoN3w5OVSIGDH43LSlWPCuUEz9NtZyhq5+KqLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI1OCRA9TVsSAnZWagAAymAP/jcRayr+Jd7ICEqGgCep\neMHZhXQAU0RzonbkWlyuMLvuZYvWZXSqL4pV5lOuHjWHXruTCw0q9uIsbTjw\nE2HbLgag1WSDqHpmp4hJJ9j0DqBimsxc+vSxRkXDl7HubkI7+OVtGfaL1PL/\njbwcEsryW0mipXmM7dIxvXZlL+KtrlKuYeaJcJs7Rtu46NnK1b2TqvVWf1yl\nZD7njBuoHyHLkj/+W4vjV3QPae6yBBF3U9VqHVzVV079inqmUOj0gUOfqhqa\nm8+U57N5ZCrYyWjkXqmBzHSHGNvZoDXEtUeBk5e+xqojAeSJOtYKc6q/XL62\ngYN/zS4wygq6UDYcVwHmjBbAVup+Z31352ldiS3cLMeV0Jq57c9TnEwDYMfi\nJXs9Fg/lVK9DXj34+K5+Qio+1CNTsNZyGZrmiS54VZiqgz6N8jWDTag/0D/X\npYAYAEgVD/xFL8lUfTR3fd/+gKOLcs1LjemJ77f8WbuewfVT35XHL4TzHoxm\nJdIVTDHa5iQH+FRygCQhUW+n+eC/+jy4lG/Kmy9qhu4wDXsR8DHMjcq9Mogy\nKA3/D3D3kEqkDCIf0EseKJ5Jw2lQ5D1h89BW8O8KjPHlhIFnpa6wAGbvcDn7\nib4EF9IjKqCgIU0karfSu5pdtu5r+KvfzuSfVMUTjhEnTnlrhPaHRaPZGygM\ncbee\r\n=Xi8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/list":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/menu-surface":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5dac1f624.0_1594658125829_0.25517740954116097","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/menu","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b2ce75cf4fc1ad1b6d08f6aa56b8f5352869124","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4497acef8.0.tgz","fileCount":37,"integrity":"sha512-kMBjZVGbunNh1yo3CNa+ge0aSEmGTew1Nr5lydEf0X/BGCI5KHswSEOn2PWQJyjLNf4PBmJ2vFCO/duSI68nOQ==","signatures":[{"sig":"MEUCIFoTBk5MeaY6hCAOQWL+bYfXkhbCP3Dphk6F848HQ7w6AiEAmhS5miWPFfWWU3cTaMk7mDamT4VHaKQyMDP8fCBiS50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9hCRA9TVsSAnZWagAAgpMP/1QkrFEoAwNWDSV+RW5O\n0GkRYVul2ZYrAaypz6JFCaCCmIVIY5LssMZwj9q10Q+70u0n1V3W048JY67N\n4efA6w9tS7ZoRiWeEGWmY20qa2qLgDrqJJaQfeY55Z2mA1OYmrjCN8/2Nx0F\nwKV1fGilGv+jR7uT3QvE08tijrsfk7a6jo5QZbxrTGTVGv1rbveU+R7P9J/P\nwd+AfXoWb0HJyPkiscaSYElrF8GhEH1xAwhLilYOx/um6uCXVT0WIIMyN6Nm\nguyamCp/8nGipJwiJCIMmgKQsFjIUKCSDHxSGZzCBxt1By020v8ojtZXztr4\njEuUTwJFZsijXAN1BjvZqgOKzMMj8dKP57W0yyXs6AD5Z/A2Rp2DCmaOL+Pb\nJF5UqIS69tmlBIQAOI4FdTclF7wPWRvJTxiMbKqlczsxI+f3ui3j/rjY/vcH\nUQJYKF2n4uOulRlNZXUDPVX/Mv5/gxkD2yENhjpj5AOA2FAzr+70PVb8KmJm\nyBuMTaHtPZOgvWlMmHW7BWzQHn67TRSTeG/soqkZdOYgfr4g6h5EAWG/aNzC\nyeKII2+FJa30b1ke9k0jEwGBf+vAdhvLeYKJH/Yxc9TXLOsniVnjB2H10f8q\nLgiab7v+jay6fb9aldnrSLwDd85dY6ISkew6n5EdlYToVcUWjDbMmvPi5TdZ\n++j7\r\n=J3pR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/list":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/menu-surface":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4497acef8.0_1594736481266_0.025965807521023843","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/menu","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ec8fe921f21f02e878e6c05870680af8a987879","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e6e23019d.0.tgz","fileCount":37,"integrity":"sha512-AV7eQ6W1z2hsr2qfXu1oCczY8vChTtXQKJBeQaUrkJyZwkxSYtObvGwsppxEXTVqPOyZuGvgTEtnHSwZjxn0RA==","signatures":[{"sig":"MEUCIGjNh0Niwbc1a+XRPd5s0RWHsYfdN9jx2tTf1y/zeqzxAiEAxg8JHeOvA5qRahZkXBuPHKIxZnrJQW9KhdpPK8vgzxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhGGCRA9TVsSAnZWagAAFxgP/2LQU6zQJwfvPeoS7Q9k\naaPUKQhI+rHBiIrgS6gs7yYHa+whAMcnwLwnwNOqaeBARkPFo8eh3+Lzn6h7\nj71QhHwAGS4TyyGWUYAR3eDqhZy+Gmm3PBjpIsz1/w6BVlg2WyArP4v8HMBM\nwyKWKyGyS2b5UlyQKueQJ1rTHegEEU808o2xwHSooYecCvy11h8WNFtniTKS\n145MNE4vpd9sH88czfza+XaLyU1ZbbMv0XeIFIjvh2kr7tqOobXt1c5yvFd+\ni9sXSGoF9L2U4wP+6omFEvQqn3o2AtswHW17DrrGPAMvfAHEIiLL1oE1fgw2\n7yi/ID7JWHhzDKnw4h/btwVGubQpQ3Y3kOoVqAFlaedL6A25euuvrcKb6l+0\nCN+oH2jZE24s4ywXQnv0j/F6X2t/2RlOpKzd539ntp7Q6rJKsjegYUcjXx/z\nEOhpvGu0dslz9qUd+hYmM/a6T3d47kHcYiY8W0ZHkshDLo8gTd65XEarqTAX\n39ZD1l/HvgWCP+KtNoRqA22hja74CfkaJ1wnPqgNSwCAHZn9IM67HLTcWWo+\n4nSJkDnVtFcXHQaTAoM+c3aaH4XwXKHv8DQBUAGMwOISaHyZSKFrE0st6uZM\nPga14tdn0TPggZJSzwdXhH4mBFzckJ11OwV7v5fX4XuD9dPj3woMIkVG3KYG\nAGuf\r\n=6Ho5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/list":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/menu-surface":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e6e23019d.0_1594757509974_0.5116496809929354","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/menu","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6947bae489efe286eb004f50b4f664170e82c06","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d548d7a92.0.tgz","fileCount":37,"integrity":"sha512-1+YG4JJuAiLLJp7HIGCjOxiUX+N59/y7nyIEdUkYXnJ+w4rkZhrQyc271dJEOOhjkbz9xHCYOqE1K0Y34Gezyw==","signatures":[{"sig":"MEUCIQD32zt01y8GYFRO/d9J2kmrpsqZ/tDZFVAi+BA41zJUwQIgXLNsyhAPTWCev6ZQEAghFzl/zOEJmyHKjMSrenWWBeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAlCRA9TVsSAnZWagAAaDYP/jxcLKpxzSIzqmotOZ6b\nCM/QyImewArZr/unmIBTn4TRIdi83bZU/othSFgrzAZTbGV1hXOZWmu8hibe\nbjBbiqRf5EKUoY8GdNYfCETjVB9Jo5JifJ0ANuy9STrZSZFSkwfNlHuOZgn4\n0LeG9jr+00nWK5fQbWtxSYgFmXnvR7mXW5tQtNV1w3oXK2DdoBumvxwboNBW\njiATVvDiZHYqhY0jVJzBr+GxqF07M77zLUjnLI6BVwld8ELqL1814yvVcpEr\ne34o7FvsQx9JgKUXmzK6pLL/ffnyZaN1rvB3u2GIPp3oUoNVVByflvt8Y4+H\np9Sk8W23jS1ZrSvVF9ZInM1W/RygyepCia74ZU2xQNNTHoaO8gLRE46r6d00\nH8a4goBl92anqDI4eVHfF62vAcC3EAhwx/pOg+ffiEnJKPazlIgEfjmnOHzo\nBqIBgNRRUpkWndbW2GtHKr30DNOejA+zVbGuLGk8nYl97s1FCUZJK+a8DmYK\ny9slbHx26XUDZFvQwpcrvTAn+vEdsEXOHK02BngH70PEB10OGQBJm6/8Da7q\nIIeKQqRhVSfrBPFTUC6TIzKq5xJBXTWhM9cXTgWzR8daamLR5GD96usI55Yq\noEil0JwXIqmFcNX1wp0ZmHvyjZ8EV7QVmMbcnbhOI7W4NY8gWajr6d5rIWa/\nrGuz\r\n=T/7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/list":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/menu-surface":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d548d7a92.0_1594761253005_0.46638727530514235","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/menu","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a68d3ba843780bc7959c57e5c2a3d0c1ea66249","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.58ce529cc.0.tgz","fileCount":37,"integrity":"sha512-JfSVtvPPZsJPtR+6roDKUsAmCgP02eK27CAGq0uZedI7KJWSMFf06DeGvgFXqI1fPErcaaYFXs8r9JxjYlXT/A==","signatures":[{"sig":"MEUCIH9n4XYiP0dbsK+Ix88k6e4l7veyUJ0IXnXrzceI0AeFAiEAgaiRhnYIXlX0UwcbzeKnDM83KihKPZpnVUeE23Jxf8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCaCRA9TVsSAnZWagAA/LEP/3hHTcUK3LIYAk5jZ92O\n5Vi3jkjpG6Ss3KP0+bPGEQfhthzirLFrxj2mb4AovJHxMcBDTguHda4dxY8E\nMSJP8RjAVyo0RQlIZ3N5v/RFDHJ4DtChgiOW2CBADp1BZLuv2k0X0KOx1sAC\nukPFSt6878GxWMTGyy4CJ8X+Obe/dgJ54OT9JZjIDOQz8Mds7jUgY+qVZcf0\nuZcZTfAiebnoLHpdQ28EeyK5ZCDGwQyqALrHDhFzW7TcqTSXKTYIzBlh9R85\nnXVGLYIJzUdnjQpGLsVLUceMupDs5W6Bj83E5zfxljJKp0LH2leI97v51g4W\nRM6bi+bpgkQI9xRY3mP4Q74n5WLoaj4wAxzuhmyqBxmdFu5KtXuFwF3e0Gdj\nEi7v4BVx+/Z3HFTls6ZKIxdmnE8qBUPd1SQ5q1i0iZgMlwdRk3mneXebAVQe\nf7bfq70uTOC73OWassFSM2LYNAskoyJe1AsKgmIAxFp98BrodeXW0VHJDmjL\nsAkDe+7mRYLjoAeJuTr8FdZXNyCm69N4rhMuWn+DMvvCY39FBzimGx0Dajn3\nxNgYwhPD0CRKWS5MFV7dpFwwzy4C/IF0QRMoR0lXudBy2A3Btv7N9R0HqsNK\nx435BYhDyFSno/icSb6IyCpHPcJoEC3pszZqa52aL6sNoT9YArwStqw9NlI/\ndpf2\r\n=R4Qm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/list":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/menu-surface":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.58ce529cc.0_1594761370321_0.7039053240854201","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/menu","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8ffc603b13e201733d98e333d06c21343d27ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a0f1202dc.0.tgz","fileCount":37,"integrity":"sha512-2S+qjE24FoDnLmw17KJtGdtZ0wGnAW7qzqxH+96xbtX2jm/ij6e5XBE+6Pk6kf1DeIrYeTHjOoH2JMaS/bYHLA==","signatures":[{"sig":"MEUCIQDJsH4xOt/U0NT6MKeHZHH/hWLO8gbLKqJYj1QrhoYE2AIgRsanpvUUNDYtvJtiuIwK5imOTwTsrkolqGIqpW1qvMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUuCRA9TVsSAnZWagAAxkgP/0YMeUka03h86oZUeJVD\ndAxWE/YM+jGQ5xbTG9qWBnIMWmtkCuDfGwfbEV1D3pesbNejWLw99BUM1e0r\nA/ZuB+1VszarOkWaAPWleXmRusDEd3Wf1YntGjDM0LcVrn6g4Ehiwak5bJ2e\nw4NNtD3OaSge3wuk3HtTytHxgHFpIxVs4nnq8MWotxU7cM/MU1Mae+Ie3Wbc\nAzQRdeUbpNpwFcSArRvdlM0/iuAyb6bxhEu7aJn1UmlduHlaIBkZMEjNxN3n\n6t4JpfdeV1bNTc+bg3kWqQcV1sr8tW18qOrOS8bGaehYn8K2luKYA/LLlunL\naaQzL/pMlFj1+wlrBiakSZxSlgXVmtqQ9GdmD9vo7xCyW9pA0xC8xBIC5xQS\nqZ/edDFUJZKK6axc0iPLrsV78g/7mqGozyGjrP8+kkI7o//v9RB0CSxDBToI\n4xaGCdx8QnxON6DM9b2PmS7JaCD0k3QEzTwkm7WumMJjb+soIc9TSg6HWU9y\nKyKwFHDZEGBNOhvlEmhK0pZunLgpUgk96b5CxVJLA/H0EaQO17rzxPNUW/O6\nZdMT31sKWklApQt1UPvBEX1cTmaByfJxclpwnorpIj3FhKOTLkHW9jjQggKN\ncBmWPopEMTfrdOHdwLZ9Ouw/FmvUEB4skX9+VJ8X7VFWBSFC4rO4pbEfsEO1\nOGNO\r\n=aKMt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/list":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/menu-surface":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a0f1202dc.0_1594762541736_0.005936793094358128","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/menu","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb39c12fea9780478222d63bdb7d708dd9ed802b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ad4df58c1.0.tgz","fileCount":37,"integrity":"sha512-ONrD0RmLIp2pcYS4bK7MN909QGWcjHYXz1ecs0y6Js111Tx/RY0+5i2H9M0VzXEFx0c7GCl+0I4YJaE5vLPPFw==","signatures":[{"sig":"MEQCIGRk9DEYZczUEcKlAiued0aZFmjAAeGKAqcgG2bwhTKJAiBQ69+8MD5siIUrDpAVoZkDopEuBjv70FIu7voDJKwzOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkl3CRA9TVsSAnZWagAA7V0P/32uL3lfJs3PygU7sVyp\nFjFpljAYDGLlJ3WNyeglJnf0qO45E2hWjJClhtsvbKf+Gp8BJhicK/FN7RMs\nJGHbhv5fWsd2aC37aOjoihMM80Og9agUrsD5wg5j9B/XwpSZU8oBvETNNmf8\nRWGsc2Aos3ISaSHhPrWg6rNjBSE2rB0wiEh4xIbGUIVeqiE9SWrxGoZFjoTV\n2xyPoz4wCUwYrYPne6B+/X/ITR7bBEWVdeBVLXRLfXSAhM/ekfmmbMqlq3Dt\nAFFBO5l7c4ao8e38qXRKYecdL1dcOKEZBvXkceJVLx3rxv502+k+LTO35dkF\nZsfdeUrdl6pnciNKrHUGZKK+ncvwmVqseNfmM/akav9QaYPRjgkzyTUoRFxh\nCjJ510z3hXIftYmYHDzHBD97ZrOcajCPSj/vpP/PpAkfH8TwwSAu33cumBvN\nXlgcDUOOPwDimZHQN+0NxQQkhVWJOQ9XjazNVdB3oJsu3QsFu2DTnErsou2/\nLOpRhXnwA/0yv/2U8l3oQGovR6O/DezEkf76/2/oRtJAobMVwWh14v6c1Lwz\nDGz5r6L2a8A65ORMXe2EjR4UCb2aFw98JDsFWlKE8IYsHu0oY/LDTVHPAaw2\neRL9jz21Vhy8CPSZ8DYRIHvQSVg6XIAuhf1rOU1QQMldwHKW9HsUs3ypIzTL\nX9Sw\r\n=FRrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/list":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/menu-surface":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ad4df58c1.0_1594771830758_0.08209252959048374","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/menu","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"044e2291c7098b716a5c8dde594bce4b7741e553","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.01db89053.0.tgz","fileCount":37,"integrity":"sha512-zt+jErinIl0LGa0XMObOAWAwo385csDSkltSrX8Wl0F7esfuExYKHjB4b47HXsoP7yoTc62J9piiFbrKiDIZEg==","signatures":[{"sig":"MEYCIQDer0V4RMSWL10/rBxdxqHItgIF2PRwxQXYeky1mCqSbgIhANdxNOUycAORbrI12cK1Ei0giEe2VrAtERkQmlFSIPq5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMPCRA9TVsSAnZWagAAPRsP/1vpUc4rLZn7nDx4QpS4\nefCEFNefhLKqcOO8zwtDktg+NmYRDF3WfiNjSXRidumjHHGooVyHqwsSVGHV\nqARGZHB/X9QAqUpCURE1uBnf/EG+ad3JP/CBEbrtF1nM4h/ALMsPFkpFBmN6\n4m1IUZDClnviCoEJEX7xA9/CNEEaGJVm4TCEMvycHDdtxi89kRJnrESpyufI\ngWomBzyi2nEJ8BhgedDFy7AVOChd1SzefsgN+N1B6xCgHKLVP6e6lk5ZRALK\nYKbIZh5SKEb0PsrABejXrIZKTTWEGNFs7ukUJdh1vqgYFxAV/GGj267Zfm1Q\n7o8S59SUE5vCXXc+rcKuldVHtZ1ZXOVtTkaKhl9+28vu/FtwGClGFoUY22pI\nebCGyywCGJsDIOj5fmPmm/PY4+abTxR06GfGQPrkvgEZb2H8y4bhIN+XxOyM\n69HSFTmrsIqP5Ucg9NmF0keL6UEXHvPA9ZnvufNXfFgsnPyJULeYc11yb5BX\nEBBotWdUcZEiMhTYqxR4tBfq+bMt8f1ZpGmVT8+5Ql1TDwgnUYwOxtRrYv4Y\nS4tgV3VAWBM6Tw1qQtNGzbUuyaHt0L6GFaOc5EQPe9qVM/5SxPa+e2gmIIY4\nkb3cQF163nwdF3QgHw7OIpq7CK/6VOoHD9Ub2UDTAKUUFawh9G75/gFWXBCL\n3Ze1\r\n=XbV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/list":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/menu-surface":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.01db89053.0_1594917647434_0.516617022001417","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/menu","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe913626611389578fd5770637070b37bddb0f5c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":37,"integrity":"sha512-tzH4su7OHKejt/U0N/Ehvyyv+uek50E/fqUt1uif5HVoPLOs/JhmFwFNKoyhWzVo0MlKaEeHlMeY/gg5/Or3ag==","signatures":[{"sig":"MEQCIAoUJak8V80LHS5ykPt/X+pMCj7+Lyl3yqN0GgFR2i+pAiB+r3vPlFh5N1O+GjCe/zbEK3oLkkNutg4baLoNtZlHbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6oCRA9TVsSAnZWagAAJRIP/1Hs2g/cPnTgfWDWdlx1\nGqqXIhvr87mR2F3dq3F7OUJ6bagzZxRM/aROvx7SJxXQPrvcoxuiig79QZ/I\nEwr8+0tJkmOEgy8n32C4KttSTMEq6obMBc8dtz8bVspNE91Oq5k68hRieBPe\nNCB0cj4QrRohMTvTPuwK3Z1ezSu5I0xG36GrlKAOaB05lgCSRiefeJfvZ1Pc\n3JVoQ2iCoO+wjRlwFaz+hl+ai3c7GaYisVV9bRs+3bo8lcOrgqY54v7aM7+a\nTF26n1/Kk807BHc5kiwXLHt6X3CxPUNU2jYQWU3Bk1UdsYNfTXyjyd0dAniV\ncYY5WyH1SdpqFlMMsT3JC9mzx0GUUAJCHEVjZ99nEvrZbjs5M+bmPNtRdjGC\nFqHTTm2WvQEqVGrV8u0rWb7hHbXGcsY3LaF4eXS6jCKo2E/U0hTfzsxCu/h8\n4jKYrTP3U/QLu7rKrzBRMEs3rHOGN6bIVbLqkbnm8RJUytyvhugRVa9RUk6m\nG4P70RXiy360AWZXl5e0mgT7ZnPVrrudopUaEVfyE0FjarocSKJZDJLzd2sm\nCuAP9HjjmeVWvRUSdBN3CLJA2FZFs6bfPaxh28OlBUZQe/0w+mQG+vdXa8Gp\nePbmjmdmDBwnvfdFkl9hz9m090mwHOlalxvSP1BF38S6ZXTSusvZnunR7E6V\nrw3w\r\n=NTeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/list":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/menu-surface":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fb5a4cdeb.0_1595272872148_0.29424685782533144","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/menu","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b7f4fc65a61c426f4348ab9e67922608e4b98d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.8df0f517c.0.tgz","fileCount":37,"integrity":"sha512-7+yezw8FF4FdmcLiz9iKEZcer6a3v4SZnWhuIwy8RRTnqlR4iTy83IdoTKj6wyrI5wNitTgwLKIQVSpT8NDHWg==","signatures":[{"sig":"MEUCIQD5pBKUBDNhQkgcAG49bk6Ry+wRwXpzQys3zggkz0YekgIgbKimHcxItQBl6YLs3k2TLE3rV0kRF6WrSY/9iZxvnkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8/CRA9TVsSAnZWagAAyqYP+gJw0iYieMRM2CuEIdcK\ngtFvOS9Bi2XHoVul7VhraCE80kSgSDCbeS8swa0+lfXeFMd1UuFv9AHcUI1C\ntHiGd3928zRzYT0j3p7iqmnKgIHyTyMBfdmkL9/kTvgByzO4c8ZqMszxd9iX\nn/43Z2DDZm5hLv5Pqkvvh5eoQlS3m1DWCukHHhrobLZhqDxoTWSlGXekN1DA\n3cDlToKUfuenfrZ1YobOGcKF88oSFMKs4yXCDXaMrF3sPXAM2xEkkWP3qHdC\nYRzXsWLptJlhZ8yCpOZs2wATn38bY4Ca+uct1ckxTjfWZ2iumgSL3mnAQeEz\nTG4qYW6zdKjn77Ub2zED79/5sDrTgJ819yoVuSQlKu/jTuV4jqW8lASpWUJO\nk53KGJtulEOQtu+1YsPesZKaFMRW4VFa/QoAGGNpwhJylWvG3yRWeuQTtjTT\n33zxiTdPMHkUTvFeUWG4+YLWGYbO98023qMrdRIuTaRUrx7zU6AHmeSQeweI\n3N0rsXzLOnksqq8qQs8TY4dvFiA2xuUTZGyV5HXYjId7JhBF6TkrvwojNqfb\nT89AV5d4F2wSQa5WEP+uGIgiXrPmjqf6z93HnrTwD2yGVw3dGWqyDG8SCBMh\nRmXz99z8jbWJM+nszueUDsbXKy6n2zLSL6DO/oc+bbQOcdegH1fn8A6WAS1W\nV2JI\r\n=nG13\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/list":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/menu-surface":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.8df0f517c.0_1595289407077_0.5799206091942695","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/menu","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1656e10373f76fb8fb74afe630295b7e811dd288","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":37,"integrity":"sha512-8gumL+gd0lKGsnpi4wf6s6QBM/HgFnXiRDDhzsLCYAOonJ0f2wq+xPwVgTPDQ236Mm3JVmxwQ9mbKRw1xJKucw==","signatures":[{"sig":"MEUCIGhDlUWEDxAYKq6s+7yjVGul+HiwZh8lYXLVOutAjMdhAiEA2koASlgvhRrxuRoHA67diOTakSP2hIBMfwymOWLMAvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjwGCRA9TVsSAnZWagAAwmYP/jzwI8klok5IWBZNk+jm\nxpeun6AdK4uWcMtTqs56Z4U+IvwsB2VT5RiynP4ErfrUOJDyfs9noQVljHpz\na46/u4czvU7MP5YMr/KGUQeM/9tXRS7rqrv+arZ6DfeGOUFK6guf1NRt6+0D\nWLbWCPSf5fh1pJXbqJ7eQbIQgZS3cR7EhgwBf4owXnPS3VE8n4WahWvR7VFx\n5JErmN2qCF1FO/dXXdn1OYBDePaCCTiQiGY8BJf7PWfLmL29s1ieiV2OMz3N\n6FGElkhrN3Qkz8fclFjHk9wm69+nmrOM8h0+Ur60xyEhtNyKyDn2v0LSzVcD\nk/9ZhmMQtdbhv6/C9SCOMXRPDNG2fh0aU5pt0juR5wzQqA1UD0NzDruv6rSR\nkFDmNoxELTSQT8MKV4oKvRM7cwdYOmiPi9qQEFUNYu/aCxQrWpNljxToYGGw\nKVwnnzJbRumbgH7rgNA8XdrtY9W2zTRvIc3qFMyQSnAB6dirPNCCJ/oGvw4m\nlsv2mvzxYudUNP2bP2ZDW3xVrQutDbE+GVYGlLtnWdAAaIfP2gbmKnFhzlMA\nHmTskhuiftiaqMYhcI2wi6o7BgoRrhTeXNkgVvD/xXTPEmZopD9Bi96AuX0P\npZl3Qz8A+1+gGzyXZrKhoL7ndkJljU+3ppSfcohwTMISI00C3W/PBeBqDxAy\nAkv9\r\n=JzUr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/list":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/menu-surface":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.abcdbcfeb.0_1595292678370_0.8159662563566734","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/menu","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3eb6f62a8648485b3fb95f2943a7b5bd55afbfd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.7bd5075de.0.tgz","fileCount":37,"integrity":"sha512-UupNK2Q2WNCzeop2hQIoT5DPExGjv6gPBIpv52GdoHSnUm47CFcopjIpGhY4+sWy838Wsenxfng+MtQ0LvmOqg==","signatures":[{"sig":"MEUCIQC2xk0vdB5BZzYCh/X9cptCBR23nBz8iZ5bN9sK8FZkFQIgAO88zNp2kAy5cbj/uHrlgGdJd1dcjMGfyzZ3cPfoMg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzh1CRA9TVsSAnZWagAArZ4P/016Hor83FnmZoJcabfE\nAo4RJ6tms9G61LSV8Z/aur2ioYfZP/pjaVVoG37WXFVVeyGKlU7uh2eR2yau\nztizLq3dIUzjb3EBd+24GXSeI6HTLlu2EgRI+wZup7UFJ30XM+AIfBnWXanv\n35ufPGRlKLKHtrBTZhpes7C4+yDkkEs45Z5Plr2KVkaI+ca2CgzHd4R34eu3\ntkyd6MH7MhMmyElg3HCPq1LFfBwKx7WmTBpluG6bTLyMUvuangQYS6fCvMGq\nuIBcnQenFbbdmOpsspZNcaEXG/UfDz0w1p48aDgGjhI6BSC3kig6D3SFLrtF\n0+M08qq22R+SaNdASNDvvPT5/PdmRM3u7BH0XZviYkQU3ymTtH38uKRRosRz\nhKNsvYXLyAk60f2xdBToYUmqRZJzW8q4WnSJ8ELNMArZzPwQGHznRB0Rtk7C\n0MbqXVosfZP0CQ7RnjVdHhn5T3NQy2eUh8SPec3mBciDMdAKqHN2Pr8tbwRO\nXeqlPxlSCxBi0DSOuoE66TsaNt/77m6884IDKDcH+UWGfcNrhEMbAop1qiBR\nThgXlvk11YmJZhupvoQddEvKzBlCBCpDPBacpKjuTFomBF2WbAH2VkNYLylo\nvpu3UvVrKxELEwIM8Ax2/ZS/eZJ7Qk/7vs0S45DkZhPrjrAue4EVy0d6R9ZX\nfESP\r\n=EqnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/list":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/menu-surface":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.7bd5075de.0_1595357300768_0.9729883432886826","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/menu","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"811fb1873af44f0f20b819a9408825acfdac3365","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.405a29a20.0.tgz","fileCount":37,"integrity":"sha512-TCLbZAYo29iRaIcAfLTDYDxMfTUiGzwF8oD7c6U/u+64R4ycyuEHoD+DZCFkoEHxE0gi0Ph3gg1GPS6Y9s36ow==","signatures":[{"sig":"MEUCICw8h2KCx8bk8K654uG77t2vyZg1VOcn1UoLQvFQclnpAiEAsLppPirgFe6XXuoMlbsJU7vhvqQkrZUCq6M+UQEytlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLygCRA9TVsSAnZWagAAL94P/Ry85RT66DWXmI2YDdaK\nNHpIUct8rOpBla00AtPWXoBS3Q8+3A0eGF7DLn2f3iltjyBN03r10RuMtDNh\ndNu0Qo0GqtAWZn1V2DD1n1/BVdEDhrArCiP55lwZH1jnLsjTpHk75qv5uMoU\nSMZsWLGWybuvFAi9GKHJQfofkq6J1Vq7Q7eqwnjULmQ5zs2LKG87k0azt0hR\nC5M8Iaxhw9yNtF0w5Qu1h93g8eIBNeB2+gpLx5BK5v/EaxBIYM94+ffA76V2\n4eDxh8HdAY/5h2OpLYYpqJZ+DXWW8xadqLKUCnCwzjyjTKjE5M0WnkXWy4WZ\nTY3ld9A0DtyZx5ukMvoXGm19UXnVdbXmq2u42uCC6VAlznuH91t7BmOahGEo\npaG9F3M09mXl7lG+Awmj8HzbFormHlsKXohViT6MeR0zsua9CquIOv6pVR/2\nC2/Z+uW9EirqXvngOPFxcbJct9LB+4R58MmqFPgzAVr4ahi78BuqetqkOVgh\nSfW98TUC/8aCs+bPdT5smYkp3PglFeA+Hs4iU0nccLrnlSPZmR4+oLJSVkOC\nJwKgj1S3a2/x4SyzXJM6amLWN3+UMX1QsyToXF0fuQrBZ+lPEGqR2V9Iiv7O\nEdn2AcqG8fmS6WQYHXFmpMpu8VFdrzxjIcbnBcYdGeIxHbrqpSOEQGp/PKEl\nUDX1\r\n=5S5N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/list":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/menu-surface":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.405a29a20.0_1595456672288_0.5998461360502734","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/menu","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb19c9db1449c6df2b36de8aef8ffb4c11de6964","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f3693ac4c.0.tgz","fileCount":37,"integrity":"sha512-LNzCHYGtGu7+loU4iP0NG6JZ8EES6Gm0tdAE35MI6jSn4CuDWki0d9OsUh317M5g2Ay6If4M4Oh1ETYSakXbZw==","signatures":[{"sig":"MEUCIAC+9on8VWv9XSz2t9MkdQRUdLAK46xR2eC5H+EWC5a0AiEAz5zaLN6yZZ5qVuE4IV8WwolwR1/c0f5UYGUqiuK3QHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL8RCRA9TVsSAnZWagAAe40P/jfS80pibRy1BcnZvzAO\nrT62zbd8edlAluXoByE+Hdmg1PTr2ZG8SRW4oCkg0gt0OS4g2yioPFUxH7Y/\nBlM2HZNkue51st4A3tX4PiuD7TOjuGCPc2JuS5TSCc6d/oVLyNS9Ox2ibnBn\nDaihogKTGPnQ8QQid8o+1G2i4/5l4BJa4oLGz6SNuML/9tY6ZI0eOTiC1dsR\n/V1qMNqvYxlnyUwHb4YuYcK7htcKih6Ikvn/5PDkuNN4IohBY5ChVfJuGbUJ\nzqy7T8TgXB5Rx9x1YKY4t11OxQqfGAKoLnztLAUZBglTFCH9qP5lTAWRYlU3\nnervtPffsx7YyxxQ85Unxeck8afciYnDNxKhY+T7XJRB0/wQLtn1Cjs2bai0\nJzkW3CjYRKuaJ0yaKzMa4LAWaTyN0f5bju9KpfcYSH3/dFEeWxqcm7oshYu3\nN/N8xO9SBqDmrlEQUNsmGaFmMWJzG+kzmZHSi5/jCXn/ZYjRUd7+zK+z+vxR\n6x6hbSycCDRcxnxJF9M7xt6lbc63oIJOx3+4rOvkNuknDfwqWztZWPCwctvY\n4gsuyfOKkz7+cmd80YzUhXS6TRknEVsElIFJdJIVu/OLGnlJuv6u8YshAjHS\naVPi6wXR6Cz+rRcDHVtMX7tx9W1HZhQA7Lv6658VGD4jI1a2Eogu4w9CkkPC\npTvT\r\n=wiGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/list":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/menu-surface":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f3693ac4c.0_1595457297162_0.701302365055567","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/menu","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2af18b7587aa6d44779046bf76f262c2f33efa91","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.12a109680.0.tgz","fileCount":37,"integrity":"sha512-RTOcGQ7nzw4mVK67mXXTzztfavP9KEgPglEuVueB0g4BOSyhXHrRDaDxU/iu7EMlmWYmoVHrxrjAgIQX/QOUlw==","signatures":[{"sig":"MEUCIHQYHPFuoXHebpVAYyoDcsvkTqeeMUC+mLueqJxtC24AAiEAxObPmfL15oJR3EjSF5EGffKmCwYec9yVLtWttr9T+Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMYLCRA9TVsSAnZWagAAmuIP/jKOhA3sdNuAUtlvwdLw\nx0HS65yGVo/JhAN3s+xf+pTxv+GKuA3XpP1K/3JdEcpYM5sJDqo0BFeyWiiV\n1RplbYVm/QEDHNEVEk0h3vfBJ7vW7FdRygUEXzhsSaeZYNT2fqLjqcD7jw4c\niD3nspx8vOM2ZHwnEvPKFFHZANpu83w2DUKZ+jIaHIq6dPT77ZZMc4hXiiTQ\n2ldODuQw5XlfHbavKnT1hOqH+/iLhLwNSEbm1Aq///TQgiQ7IV9nzwKMe4m5\n2nib8+E50eVcua2VMxshOMiA5ehGoc6Qk8DWkqCrEZhMU7EZG1YJgBMOsvdA\nXWWHPgoxKFZDH69STWouGWkva/RrfT1iioisUN9z/GR6PmV1oKiUS3A36+x7\ncVkUxZi3VbJaXuN9WZfTZNMEgSOL4VAEapCX25pif1KIG55DuV8h2H7+1byr\nKfX1DEcxDs/FauwxhESDUTVWnVc+BOi6RXgLHL6f94zoVQDhFd6iHBjhOdog\n4SFMWy2/c40fTj1CWqt27mnjwExk47Ph6rNOAapB7TKRbcNXYD3VF4R0mzM7\nG6Oj3DrY0WWDqisSKPC8kBazCjINdkGTOFt9bko9mVPm/qXYf3+BYia1Tu9h\n9eEBeeFLLy4okvrovxqr5vCu2HCYl/bf4+g+N1vu7aZSLOjOka7kuFBwZ4iE\nSPvT\r\n=Wh7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/list":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/menu-surface":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.12a109680.0_1595459083038_0.6428759192334903","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/menu","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd702bf91a0a166d0f12da8b4f992680244dd050","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.bbd06696e.0.tgz","fileCount":37,"integrity":"sha512-fyMmbBzXeZvSwdAVoCWVC80jFdqEELSJL78eeT463HFAapLiTDzMSq+IWsfBE5zVSt9wXp9ZxfQ3c2uYgrOYiw==","signatures":[{"sig":"MEQCIB90dPlkGqDRCSMBQkTqlThFcESWWXEDzgnyqBFlEC+mAiB7h7Q8KXFhdcsDgUtsd1eX2SJ0mkXLYGtYKSZ2laIKJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGeCRA9TVsSAnZWagAAMXMQAKSy9CH+GI/9z1hTDzG+\nqe6Y//cXM/je/mnNL+/uLkg9QMZR6j/o29uCuksem3EDr2GP9fm9PpHj/fbw\nFUYruP381kzd7Dn/N3Pda86lsCcPsDvEAKsVVeb/JeuPG7zcuyQpPXexvPPf\ncnDkEa5n7p9Pml8XSDkpBQ4NxK7+WrcJ/L5y6fcy3DEAnwnucYkX72LWVKm5\nvVTTwY0C3DI96QWR1TaNYzrLr19/wzKphR0AzAF+r9buolXDCmKNzNPDdJwT\nChmF8ENxx5TNvZ2YvwJqx6APvVsbcLblLelH5cMGvJrshxtUKowdF1dcSjO8\nZyouOfBhVtCMn/5jS4iOH888MCKTyLu4x+iJ1T7MpR0/C4W1MsDai7M2yPJ+\n5jVt7b8mAkxclr1JWClq3elj2YGErUVceYgJZhslGz5X70mmLCSOrxYTaHbu\nw2V6B5YCxyRs9F33Ac3Ld5iiVPiPD4RbBhHa5LHOElAW2sL6S+Ll3XN5Tw8O\nDz2JnlKmuEVXCFmhPH2ClsxR7vrTksT9d5pKt0w/wqCeDEU1FVvEnE8IdbDz\nG7XGdfcjdFCAetCGpo0ETCN5++5y0b8OB+isGtnc5SsI/59LvT455VXsr7it\nKxajBkQaA/DQt07WomsSVBMkrqoEPHNfTDMR26BR8PFs/kAzpH3FhIgjPO+o\nIyvk\r\n=U6KL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/list":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/menu-surface":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.bbd06696e.0_1595462046165_0.3725164351162793","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/menu","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b465624fb5c665894a865ee7c7d8436d67b426ee","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4951e7651.0.tgz","fileCount":37,"integrity":"sha512-wUzSysJp7bHlMudY+O7swJTt8/FDCh/YkaQasMJFq5oefMKFchuHyMt98wZ3HTxmU321RzPE1zyin00ENkjYZw==","signatures":[{"sig":"MEQCIBwBexcPf2Dw+F7U154QDzVZAlVPIp3BhSekGhsMFsxXAiANx7uYwsd21a5doLpguHLdArLTUBLCrhh3azXH29mcFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGO0ACRA9TVsSAnZWagAAURcQAIsPt6z9FgAvGMCjNPpQ\n20lHkqoUI9t/7YRTiM+Apca1GG0nq0xJyqPubPEh/bmTa9i1Eu5cPFA5iYiX\ndcNlYj5dwcvEuuQ6A7iGYzP/jPZILVu9qLGlxVNyfiGxOwdNr7+67ScsAL8D\nGidx8WdEmcOkhwj3w2P29talicauHjjfqrkqZz2P4YcBahWib3d+qLql0qDV\n39z31Y5btbg0hEihPpDv+13+ykeXaML5vaEmqBADak9/kmUXEI6mufTOf08j\nWxCFfPRmdBqIfz9lCsRboWbu5vsMfMjc5wkcldmtVzodNmNqyb/eMCzATsIh\nUBrXT4cbVapOEh8HnWqVoZissktSFikc4hbxxlOpptNSSn0GF/VxVe1pT3mJ\nfO4NdsXPRl3CGyRuuV7+iOqPL6cTMdYzGXSFHIn1oQXEh3srBJJPv2STL1qp\n6+WwV/J8UMPtQUezFkaRj2l7xv5wupeysvfL284PsJ/skDrKMqSZCG5WTJLv\n0Jc806zCSO0QgQFeNFXP+MKYFp0zG8yopRDUkupSiAxzgSyhFg8a9P+fpaF9\nj6rWGyxzLPTAylMcNTsSUnCtzZyhSN0TOD2vHCJ3oX1rlg0ir2UuBfbBCN33\nk11+dxOpybxG13se55JvHIlg97n+AZADNI9QwUi5c+WFPt/yvHab/zVta9dT\nfIUl\r\n=nOcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/list":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/menu-surface":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4951e7651.0_1595469055579_0.2714849775329762","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/menu","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4c66a94cf1bccb6e157bc5c9176ed00559aaa01","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.75deebbef.0.tgz","fileCount":37,"integrity":"sha512-/yAUIGIHGfMfHoJlLchTvd9Ip58w49fVPRaMVGA1RtFiWbianCstBNvSil3eR3wwli3fAEGmPFr40B87Qq8PLw==","signatures":[{"sig":"MEQCID7+k66h4r87uJgilCfeFeTU1PRtD/6UAia+BLKBNbQ9AiAekQ3oFdidF4a/uKP0xlQ71LI1OrW9qkTTbkJMFxWDNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1tCRA9TVsSAnZWagAAxikP/0AvVXMvi5ENikDgxtcx\nPLgOa7K1MHWhAxgD/qqR/K1QmqDFGjPs64VeYILh+CIn13QRKWZIi2yqYmzS\nPyQq/X+vIDmj6GMck+uT0qKhDeCQ9kCZvkKyQ75L4JydoVTYH1YZEeGaQQQx\nwvJE2Xvjw2cHXB2+/aXprXAxl+7bG7v2vMb3QdZxSGOWyKIjgzd+pWE9PgOY\nh6pNm4Inps1Hy+CbyTgWY9ZUiQlJFWI2r9sIgCiWfW0w4Ys5fpAqMiVQkjVp\nqOSEtLNW4fLi0/mMM1twkkTOse5wQRg8wttPppv6vPVdNJG3wDx39cGGcp41\n3KqgPpmO3EPYpi84L4bc/WFjtbN4tXpyuh/mamI7hjK06f4/YIxDDWn52DII\nGr3INI4M5xAmgTcIKDSqGUwOAt16re2hwQrYDqDhn+XvtifviNf4hbcXMbF9\numCZBf/tD3zbjIrOqt6+z8XdtDKmj+a09xGFhGnyVRGc9rr1l0yDnPwo2bh6\ncjszf0a/naM7LXKruHqktFvw+QeCPgvEzPHF1+9scu5ST+AN4+FOX9V1pQwW\n3g4HollKP57VP56Ktd23mW1mE4JW5dhpLzRr35SRv87DbuYCx4if5A7tbjvA\n5diq43xI4QZIvrcykXECMSJV1SSrszifPwvNc+x1glqV7MLdC0Nky5dqBrDo\ntGvU\r\n=hzyU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/list":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/menu-surface":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.75deebbef.0_1595526509291_0.39261929509140736","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/menu","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74448264f50fcfdb1ad573177e8c72ed673fbe12","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.95aff33ee.0.tgz","fileCount":37,"integrity":"sha512-TQnSQNRj5izUlqRXQnRfPe7mNuDaABvzMvoJWokXiE27u74HwpVI5Fx4kegp7EN5yXt4yzzF4fTgBOVhNuEFRw==","signatures":[{"sig":"MEUCIQCW4+HbTp+hbokIIji+piSCchKrHWY2c02WJsYbbo0NvQIgcWHPnP7eHUmbVDMcmM6PciNKjyNnOHnc8MoNsmlqRz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGduECRA9TVsSAnZWagAAXvAP/2dCsXSwxrxAdTiI21aA\ne8bFsaZAjHkwTmbRYwPmtVgKlxDYKTbCx4h2gZDL79mn6wwvi1Di1U6bQZWs\nvACd9i8h3NlWOvku4jD4GcTVXmorTUREPrQjnNhR51C++OPTqDuS34TRVGJI\n8+iO6LmEk8/+4FmCp/7sWUb3YlALPN3h3ty1WC1VpLeA61RXZr2cwAN2fJXc\n54uDcLdQKp7dhHLEb5TSkxefhwWU9HRkMqaLuPvE6COm8QmZLsuW0xmKAp1X\nt9bhez/l5Whx4rF0icpUhPnLFN0lFgY8no5y2Lvubvw9HU0OpwslLYRu8fYK\n5q1UcTfPsQaucKooCJ/vqiahNfPg01zDi+yYFlIcmGdd1enAdNm4wOCev7/q\nkgJ3prl5RExOhin7oF1jSZP08p+yFvFaxkqpC103i0S1OpPRS/28uMam+fsO\nz5mpw4xfvObrSMZXkf3UgyC5W6u8Suxq3n9DlOtdTCBAur5+eXb0zkqI8VQN\nvldv2ZyrrUh+3r74MJXuJD58bGjf+8EMDXa+ROEy8a0MIp6dKCicANaS4JJO\nntm8nSXuK/Cjsxq7pcoZyuMNtzu65hVT/xdI2AAh90YTXDh/Gqv/fXzk484+\nFR6NTQGFf6ZRETGFP0Bf1aoPcZqPIjt+bXCBJTiT+5Wsx0ytLLcw1/LAJ5Qx\n2WkE\r\n=mF8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/list":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/menu-surface":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.95aff33ee.0_1595530115990_0.6493570632592509","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/menu","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f5ec38345693f4e8a6c6d4dc436a74a7ad784e6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.9d9f47473.0.tgz","fileCount":37,"integrity":"sha512-fI5CuE5M9ikhADsFo569J3D1u3mX2qEt+D/1cE3rAK86S790ev0nmQKRXRs8a8odlqvoMHbgaXDJ+7XbN4H9Jg==","signatures":[{"sig":"MEUCIHjK4vWfdFgZBHiscSspJ81fnVmUdKM3uboschuA274TAiEA+TvxCadlAhvXm3oRT/nFFB0MBZpYd71omWRp5QHbzXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGew8CRA9TVsSAnZWagAAPMkP/3UO4+j1DU3RmpiI8eTm\nhgxiPKObql8avHsCPKlfnsc9bWD43ESgcizYuY84YD9FLOFEEVSNhUz7Bhyw\nQYKBXlP/FzweU/grUiGs6ffa7glB8JJR8sgSXHl+6Fi3pE2wSt/jSjqNAJzE\nkZGQHeU0c1nsIbD0pKq2vGLb2tm4mODD4OXPkvQMIjKCwaCb1ae39LGtAvoV\nzW1yaDl+r3P2xjBRminTCV25zrBli8QpHqn4uod3vXw8ylpGWQXqiHXs73dT\n3cAnMP2DQFcDST+YE2k9Z6N/I4+BU4YERSamHZ0qj4IYzl2IYOY5vJb4Ojc4\nxJArZ0fjy72N5jBhTz10ZsVMXlrnBcQsqbTtcvUajHV0TzNFOYCj+bR8kYhv\nizTXUCqtwWFIKKHi/8IGNcCnNvfeZxuguQg1i46VmcEejAEm+w5VPpTT9+IW\nvDP3k9FV+DhR5DkZQcOCxs2cybEEEMeKwVT50JSGNiw2aSPfH8e5ExnvPIps\nsW9e7XlMaNTTADkhaFzLtzlylxl1QtTZcEl3hjhObo6LZOdy3cG+IOMEzDG5\nSYtFUYGDYHcqq2RY7CRLG+YaMOumjecTBHaeEdR+UwQUmtHOxhok2ow55qxX\nnjN6b7RiAkH7LATbnBhx1VECXzLjY3XuH0PsN2PIQnhLJew3wraXKYn4avFf\nkNlH\r\n=KaD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/list":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/menu-surface":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.9d9f47473.0_1595534396397_0.7030187566741897","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/menu","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1dc4ce573bdb8adb31e2a6a94f69d8f34cae17","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.00dfbf6be.0.tgz","fileCount":37,"integrity":"sha512-cvH/aviUvyPwLnZdLS7EchgSRbwM4i223MkjD2uIKveY2zZtcAgUZZ1H/4bb9EKDNDX6LIVf0Oc9reIQK045lg==","signatures":[{"sig":"MEUCIA8vwOMeW96vy6M3cMi5o9+gyV3A6ZZITdW1HPxMC1lDAiEAvfEmxabRHuM3dJq7Fqm8GkotFgwlfIk+JhAo/DdwQJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfqQCRA9TVsSAnZWagAAcbsP/ieUCiza7BPrxssLHZ2H\nJcgfl23KYlZHt3UMVYo7dVVKGrdQA38pYwJeVzgm80x0/z+brPBmwnF5Otwa\nIOaNZ8KcTzkTXmaHquWqIImTog2/etsCn4hNqnZiFRKpZkWIhnWNiOFY626z\n9+ktW5ldcCfNooY5a907Hz1mRnPYPHSW3E9cYF5VLsXenrGDMLIB+fe17KVG\n+PrtksmNBvBGGVIwhGsJ/YaW72aXHDv8Q2yNr58hbSxggYmONN+5UzKMXBMQ\nWeL/1H1ARfNzL2Jm38RHp91UZOk8IoBAquRtBiphzeWgcWGwCdTE3D0pA6tr\nQ7vWkI9vxCSzNRq81IFHj04H8JrAOhK8OQ4pEWTDzKuu3jfhxzLT9oAXn1/o\nZ1rpn94j+Iq0Cv7j/kkoZ+kFZoCD1uoyItOtTNWbFf7M4eoVvdgu/fIc1msS\njNMnRbgb5bAfj0Flg/lmxmMi0B668T+QZA8m3ARJv6Fv7VxbFJMS5gP1+3L4\nw/jUNouNwZHfzXStx4cMxsLED7PUl2w9TEIpvNEPLHE8z1R0jq4fbw5EXjDD\nQJBpVw/4gW/j2YzoZqyzxfIoSRjv1Kiozrwg8k/h1jxvNZtwizGUN30IyrHV\nGpFlmteE7uK6X/norF8DlPM18t9ZejmfTIOvbi+QAeD1cfNjchPrQmNGxIzo\nTJMO\r\n=eMbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/list":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/menu-surface":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.00dfbf6be.0_1595538063358_0.8155670060224496","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/menu","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3982eec7c749ac83ad999d804d6a2aa88b9a3445","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b87e522d2.0.tgz","fileCount":37,"integrity":"sha512-jr6bxX33wXW+XrZGuxIdJH16nibcd3lsgu89/5aGgLSfQBuEcDPXOJwJ+T35VSyOzz8PO2rSmK/s8mUTHfeJuA==","signatures":[{"sig":"MEQCICWeoHn8ZzekPTJkRFfhQxhsPeGkPiOxDNDTFZ8H2o+tAiAZumfftrlGhbZwyoEqUtjSl+/XdKm8Jed0Vy7PKIbBBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAlCRA9TVsSAnZWagAA5sgP+QBrhl3CH/jDJeVfgkhw\nkV0MIvRbPpI5yFnr6f+e3jH4INYp3pdR/XkSI6uO3mHuU7G3c/7BMBalsKgP\ngmkHI07f8CI+kLFgpUc9qFypva0bYVgV91dAxcgYPmrthmEvlVVfA52bPJEZ\nTKzRfF8+c2jcmT1+o5M0adk6AnnKmVlMuuRh/7L3EftOI4jpVAq0+IQ469GQ\n3t8cClBbvmpr/PAJH8xs9mq++ahlOuVZoGS4cw2CAmSzeEugC1HLOKWkqcvI\nvzhpcYya2ZpTyYK1/JWNq4FNsl5KAd30kxKCfDc6gctoVF4v8nQtgToo4ezV\n8htnQVDJBZL4QImyKYM05LWNGM9E1i5MGJww2NWzg+wCz0UnzF3Sq+7/34ch\n5vj8IStKS+bKe0K/mQD/bhCufKOt5MOELPax55NEXN33NhHNgarPcpSivcva\nWjdlIaG7im1C0bZGPamTcpFCQdRTb55Sq6wfUzYqFrH+ht6r9DPQHdkv1itf\nWZViWmzwHMsNJTy1LZnEVROy3YsL+hTzMP/jmibg4MbGg8KgmHEI+YCMZ2aY\nfJQ/KXIT6YqAZDHMsvxO+qZr0d9ptKSc+Vu5TAU4y7kPz3DnNI6EToSzov/Q\nJogmOWPLyYJsMg3koIOq1YCxfQI3yfmVpHPLXXLvVs8e7Gun3/BfrqJYTYdb\nwk+Y\r\n=Q+Rw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/list":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/menu-surface":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b87e522d2.0_1595539493363_0.9145285035237862","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/menu","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3cdd8b235426e1311f77eec06acda3056d76e5b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5b3e150e5.0.tgz","fileCount":37,"integrity":"sha512-lUimB+eWjcoi5CWP3dUU/GP5l2ZJv5x6V/dGz33lBslCX59MmXretDM7cawlYdkZGr2moPedA1VqQTFnwOgf3w==","signatures":[{"sig":"MEUCIDVU1qm/88f+3z2ywS3PTqhf8raRpuCuN0NzHsymUoZCAiEA+nu18hQXbu90dsInceBmHfItyN7IyRNsyjYxlbNuHkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjh3CRA9TVsSAnZWagAAiRMP+gLsuvmbPECLDx2ef9xH\nlbo6AG/PdsYkJEf9ACKOzixlqj/yzxreF5wHAFsIFi7OPB+lOc1+oPKbXJwO\nYCCw520Uhpgdu6PLOyPmqLkjjXLJF9OVuOHmHE5RrqV1OxstmwdJuv9/zkTo\nFvDClfu2BMWxhKMjvr+R+HLVNPHAjGu0BQpeJBqwf98tPxANa1w2M/xxC6Dp\nhUSxT6iYHbF7GOR3wYszfLZvK260b3e2PYq9NM08hbPWcqm3OjVUSvKdewmg\nnXl2WzuuFxbbOQItUXb7WbM+XrxV9TwoHpfBNw88p/edYBVUebfN8YXSeoBX\nBtk/BA3qtewjpIbnQU0Vq/10/pJWDDbSZ9mKcf09/pwhM+Rtvjs0rZ8PTm5b\nEXySuP4ElUGGum5cC8hS49ycYn9ph5JschaZyDJ2ZQ1QeSQlg31KED06OIMO\naZRUwdA7hCEg6CVdSEkLRFsIwufGk/HVq9UZHf5Mf0ld5ArHLC/FnVzRYbDw\nuG4MEAHMAPEZ8fBeyhuGPAwtwvByre4qDTpLw7wQZaMNpcnrdioxmpBG9jMM\nVucTxF0YQ2VKQQDf8lAEZLZ2XpNrBv0rwT2sP9d2YUYGtpGp6O98iPwd50ET\nGUupp8QyFa+Zpbu1XdzcYqILUE7MtUUzmROCvog4fAf+qcFBrMmZWOLK+Bsy\n8tT+\r\n=Vdm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/list":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/menu-surface":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5b3e150e5.0_1595553910803_0.7753239360147846","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/menu","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750f7f8e58b589cfb94321a06cc39103e080fdd2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f0ae11786.0.tgz","fileCount":37,"integrity":"sha512-m+0EaL/6unnb2tZ0MJI2WTRW8H0DsuWxb6K+bFbNFg3oR/aW9Icbud+c8mNU7LcoNWlTvKHnOcXu4/HtAlbmMg==","signatures":[{"sig":"MEUCICfsAS1S9W/7lcn4k/j7/JH5dffIO5e1SwcsAKFfGGT3AiEApFqLrOW1PvgFIwxAr6ZDd5Erw8LjeoWEJ5KlD01DRJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0XCRA9TVsSAnZWagAAUSMP/2owRP4Cxw8rX4vnkY3+\nvX16SPGcHlcAG36oS7hmyLZh0Qs136ecZT+teMtP1VeL2hmLP/+ISgsVB3xW\nFAu6l2mIFkJ/WnlJbOrDX5gdbo3+xpc6k401XeQGhoVNY5UJQ+G/XJ44WWDG\nH0e1D1KRbb7TSiKzhLg4FaDBo81pZBchCpY7+/lgLeuNCgt1SMaaT/0PCPUK\nRrH78IgpWfE6XreZEpM62pdqtCVR/Fi5JBco7sEyBYvlldTF/oDGJXXBQKI6\nKBcUy2GRf5tnesC/BKc/ZwW1y2gi3WLo5aydbyXH1az5iiKrMQL+5+7BSET/\nPgTcaduUllKRLuEW8umrBOJN+WxvElkWzrABc1k1fxjGYUSZK7KMKoI3IxOT\nUpKrsyqQJ5QQLnapCdGYU5O7gaRySeG+EobmqSLF1bZwHwvDEoH+eIFnyA11\nFOGkF9EbxBcFP8OL7KG/2iRqMIP6Kyqb9b8pBY/XunBvLQioYRJETtK88glt\nGJCCfrISer10MqM3GMYWs9lSzZbxDB03ZrZecS3TDx1G6rp6t//8S0CNjwsm\nxwqVYNjvb6syGBpTan2+U5KB+AhciJA1Abuswo/fO0khN5C6KvTzcYIYvinm\n1hRHYo3M0Y8OYipEn0IC3ZVzELdht+23MLLipcJKqMm3Usq4qN1K8ExssoRk\n76AG\r\n=uTfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/list":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/menu-surface":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f0ae11786.0_1595555094901_0.4305201745693441","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/menu","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c83e7217e3a9be1518f89b98ed1f73ee058b423","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":37,"integrity":"sha512-eqBO8zFw84yRx7OVlrF6zo3+HELfb600w2Sq+gPyjQIjOg7+gdf2Uha1Hz1p9SIIN2JJgEnoIfJT1dTX+dcIPg==","signatures":[{"sig":"MEYCIQCsTi7l8RdbcNYO8Wxef2ZJyKxdXKnrOK+twEs00NaG1QIhANHGE0RWPwFq8cYVaikx1cPuIwaVPvYppLHXYPF+OCEi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":650955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNrCRA9TVsSAnZWagAAUAQP/3cRLlvk9x3Ue3wy03Um\nRM/iFcKSAwv7TVQjxUwQeBqnlPIGnup5jVm4s/2gSmFZER/UnfDx9pmbgqtR\nAWdH3xo+c629SEAgBd35F7Y1Jo64/2+9ID+77VSjshMiAjWp/vINlSFrjlUC\nisTml/pvVFabPG34pZoE9uRF2V9Brfd79P+gWryDBajTDPlECq9CZ3vFGGZX\nrhRLfxPuEXGWfJsObZ8Uaj1cQXPEQbKqpqLmtsgQTStyXOX8zpBMJyX0nDWP\nJiBqsHxHO83AduZoda3ra13v15Bsl0TIkN9CSxSR+D/8YZuPuWFzJLyLqNcd\nSbFpvmzYtFFVU7qdYqzz/QauiBohSHBhhnt5ajQLoQkc6yqWnszKmYpkvhSz\n+i93Z08AndV4nIQPeO8A35wnxqT5BSck2gYmiZMhoxFZZOmsbDNGZ+4c4Rdw\nYvKXqlyMxgegrpNVpUkD7PUVbBNucn0a9ZEqxG5fvdKarsmZjzmO6kxKR9Si\n2Pky/7Ckje1QNhVLkkLyMYocjYxOAUZCDdJ4Yp3zXEOvhD+ICj85ztGtGV8h\n0k6KeBWRaM8ZXi2vZcw8dz5aFrz3UTZhvCusBcguw0pQk4H76UxSGuWCwR8d\ntSXZ/9EtCLhA50o5ioj4g11HIHTrwuJGD5euJsNneo1LRKufKDIABzCv4Ux2\nANs+\r\n=j0oS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/list":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/menu-surface":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fb4ee66c0.0_1595556714841_0.7482478929565393","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/menu","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac2e391c686aa79b2fbda736da862a5ee066e82b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5511e0aeb.0.tgz","fileCount":37,"integrity":"sha512-WEra6m6JRzZQwrDnFXdbKFp0QvfB24Wxk6vs0vsn8VDO9uEqTqUDBfnMfsLnYANdWixTUV3GflSIX+kt8ZLRlA==","signatures":[{"sig":"MEUCICtscnIT4RvsDJH42F5gSb6Ms/VhqF/iocnij6i1IXXlAiEAlSQdCkUrP0BK0/4yGqgeV5S4rjRW/htcIN3hESB9zHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":650955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMdCRA9TVsSAnZWagAAcskP/itK/zPY45imoE+HTfOl\nEUS2xCuAYe/2pvEwb5EvW0f/4iorj3mopIs5crDcYO7WFXczDzgbEAJxXoI4\nQfM94Xk++6FgG07joFSOQ9O4DUY4nE3+Bmw5+DZvH0l6SCms8FzjiFftkH36\nuHjBVgzMBuOAoU2sEDiBsB9LMa0olCTaANv6vBpWPHRnW/Up05UrGbo8LD3n\nJgRY6b58ovFMEf6iH1GSATRQWczw5Uekkcokc/3LXM2svgyqnfrXQzJZxXvr\njMVcziINbF0g0EFCtngjtuOZUfr/EYv9XG0CilKz+AP5jB553bqRYg3fFmoQ\ndktfA+SWjucq9uz2jdl7XTsYUZAqxHcsds55aiBz3loFhePybxqjuNbapglq\nP0eAhlkXznMVCzKjO68xlAipM8shYhSK4GPTd484Gfwu4p7WJY6jm86PVmyQ\nFq17D0lDqpYW5dQgffVMXE+sOkwbGzhulhbwjcgdkTWOUgbLZW00NI0lOprB\n4vcq7kL//vQa8XdsdmGSU5mxMV06f+CWgXU7EIVqwAUsYuO7jpWZTy5+/WeG\nW9Q102mz5YSO7wxesDIRqpfthIwpr2epbo6rk/jJrqgbBAVaqjmOilP9vmzo\nmxnJmO07N1o3WM9i9OVAzwQmGoK+upP4+pJ6azrdN+r3gUZ3l/Fu3mS5z86b\n0JPg\r\n=nkUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/list":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/menu-surface":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5511e0aeb.0_1595609885488_0.03954633780769434","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/menu","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912514a7bf8907ab2d298f6815a84025ad006fcf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.8388a9bf6.0.tgz","fileCount":37,"integrity":"sha512-XGfZ45trmG3ZoqN9Z46yz4NCG825p37k/kEVldH+9fAybmGtXzbAguZWjIkTNapa3Qk5OkzYHkhoE3Ui4izUUg==","signatures":[{"sig":"MEQCIBtR0OQsfxOBnhO5dEK2LKVIQdM6wZC/OYvJi8wdsy/2AiBeaW8vxzzMstKOxLpnjuqPJs+mFFYo/wRHP/zVIsHFgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EoCRA9TVsSAnZWagAA7f0P/iuS5dr5gHdCIGgjZN1q\nWL8B6Y+pT4gAizecP15EsmmsHeeqT8oJCNHUtfys3jEevaDMj4aiwdbj6mcb\n9N1I+ZIAmYiQs+kRe3tS9FV2wZqpsNgHmYyUzWjna0bbqjg+waIJSeB0nKk/\n3SwO8jlh06vEZJeGomKldtARYUijKW1Gx72Ab5OPA1q5gl5jhADQPhERSwlh\nu0pQKrjhXUlc2xXFQI6ywJKpwsYZejMr6YhTYgX5Uisyq8R7EZren/IZB/p+\nspSfuO3on0ICk5ezBaNsrr3sTUObpoTubcBoqWrNUZr8CsUF8cyAMTsCHfVu\ndqXaSqHPKB0dB8leA4VxkxLn2MflVqFgaOirj6QgpB1zpj50uFu7iVMMMxqs\nVNid4nYOH8Oj/zSzGoQoBLJjLp0fIuhucdWowmXjoCoC843kw/5BD+Jvdivu\nBvKXwo8+pIiUpSrc9S6E2qLlwNtXs1y886dQ5tU8UfO9adT+Mgd4GuSQGDkz\nSbyZpKISmUQjK64XIZfNhQeevuupsuEkJJZZqWc4PkQx+mCYYgbDVbVKuZHs\nFTG+Yu4ASru5oLgFhmzAmDctZaCX13UsEdVnS+2vR7NYuvu2YKaD1TEiu+0K\n3iIFGMiH5w0+GnXpfzbXthVsFBMRkqpiyPgKZtCyEpSR960UxWE7l8SzfrKU\nDR66\r\n=TEV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/list":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/menu-surface":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.8388a9bf6.0_1595621672241_0.8540870624476635","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/menu","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902001dc83b9141766df9535655ea520175dda4b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ac405eae1.0.tgz","fileCount":37,"integrity":"sha512-DPOiIgsWsMoJg4ietT4oec97qPxaFxRarERzTUVquly1+KyEsJ25SRaAEK27uV/9kYzJdkxsQkW9AhxMn9oPQQ==","signatures":[{"sig":"MEUCIFxBIb/xB4Rr4OUJtFZEvVmy3wbYV2ziFG2zx0WsERCMAiEA2tLsOiUL/cnwR/eZSSjn8P59cfoJ1ja9cMT81ok2mTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu3TCRA9TVsSAnZWagAA8SUP/0jgadmOddNDl7uTbu7X\nznBUBT7yFAAD/hpxrL3b162xV7gtmPEhtw7s+kK52qoF+N10bQXwujsq9h7k\n9Zz+eEmXXO32YXWca4KjFqpFmkf+1vdbcxz+dNji1kRGd//VXaASciHZmio/\necleuNVrfZD1qyTW0tyrhpuIufJEyCgKscFzpE4IZhIg8Lwn3zn+IxZFEzKP\npzMppRo3Z/xqt5B5qoXePHZCNJTITQ5sVfN03zAczZ+NdqQUCUVHTyjmSIHM\nkrsaNmA74a5qco5TS+T1fmSNTH/WimYQ8Z3slBfWUs6Yf3DHA05L0iotQ1mO\nGqaYz6G+qnL8aPKK1M9zvlDkio8GtGZUiw2pPJPl0vqyIpo4Hdx+/8FTrXrX\nH7Vnt9PEu2uQXdjo08DcHy3dxeVB2QTMUZGtwK/vAXZKf4bRDXfUFjwVel/t\nEEvRgkUsdxe1e+GDgNRanH8i/UQlZw7vfs+le6ShlOsU/kLZR45amtr5xEV4\ns31gfRbIpIqrXyf/cyWCankiv+f4O7FgJ9Xp6GmIk8cMShrjoh56xvYYtq5v\nJoPRZQTujuwpnyw8B+m9tRYmolsh3B5lYVZCPusCSdQOe7YD3/zBzkHGxu+s\nb5Jm6rbDC4P5XbsvHs5I/mshGGExjz7RkhSqBxExU42bTnVyORW6hXwzwwAh\niCwS\r\n=4i6k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/list":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/menu-surface":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ac405eae1.0_1595862482790_0.9722817829191459","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/menu","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfecb3250fac964fb11f64fe318974bcc43fdbd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.75553837c.0.tgz","fileCount":37,"integrity":"sha512-eDHybBg36sxNq5EpM9rtXu1DZHNAVZR/B6h7k0sf+BX28TZVxrSRBdgu0cbbTUTorpY4kn1kLgmG7/9DrKw1lQ==","signatures":[{"sig":"MEUCICEP74IVB62Q6gUTsan+5MOgJuZykaO2G1vKDcqfdMXGAiEA0r03UlAzEmoh7Pag/Q4RlwmTtWmqiE2OJnZAAM2wrG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8pCRA9TVsSAnZWagAAlnoP/0H26Dhe1hYLy9M9q9Mo\n9K49kyXCTOsQyz+eGR1R9ghaqFVBvFtBPWCQD4DaKMx+UUMbFg9HZSaWMj5v\n960db2RNmb7iPhzdy3gHZbR+J/dOCkIonBizPPTOu/Gvnpa4M2NGTymwGDyC\nw/St1co6vjagOC/V7GqW9lple8dkV+LiEFSc8EvMHt4SgW5yck/0OcwEWR+w\n8qMo/vw0SqbLc+RvLD4LKBBdv/fTadmmwP0p1/BirqDFCgTaM7sbvCP83r6j\nj89xam8F1nKDaSpWywtzaQZXk4v5HdP9bbKCcliiqguVxsE0AaDZOnjD5y+V\nEaQvoLXXD6ZgJns9lX1KaQmTyUlOzkU7oqYgJ3irb9xoIGC6W3BJPNdSNOUH\nIaERO1qnwSH5/DGzNojO/LaTYhsmedFv+jXDg+s6mvMYZWMBiYXcbc24NNFZ\nA47LBja8b9AdqrzqSye+8GI45xuBEaUoYjKM6xknAD/ePzF77yLnQhaFw8f6\nPfx8Y5P4hjNJThf1r1M4A5rCMDAp3oQLQVwE1NwEMhEzYzXcvMEUDjQZlAwb\n3LU4+TKUF359IsKpGex0XmLYxgWJBUTLgqb0oiX+7+WQKz/uF0O/JHy44QqX\n6VLOJmEYKaAqd6KbFS8gjbzUtBurXfh2T/6qbfRtklk+YxMn5V3cu9bCRpGN\n1MPU\r\n=DgBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/list":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/menu-surface":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.75553837c.0_1595862824989_0.9297169425705267","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/menu","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af14749cc656d5ea265efdc5a957106fb3c0afe5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":37,"integrity":"sha512-fVO8iXEynrXdlVbKyVsRb/c9G+uhXDNmv+d6+0xvtleRabBXHCpKEdrNZXeh9+ezCmxdu4Y25K9ADBIpfvm3EA==","signatures":[{"sig":"MEUCIQClnyQ2D2tFZ0mv8sb2gLwfIAUtwjJk+Qy2GeF8dcajqAIgB3VN8JjThSPCDINEariuxQL7WsAYhcfQL0mhDd5mpGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUoCRA9TVsSAnZWagAAw1MP/3hpS8cLlJWMoLLh2ZjI\nGS7l/UvgeDbLQArQZUDg8HKirIeTUBlzArGHhcTo0BO4AZOVoeS1ZcMw63VH\npUm+x7bgYCiXRGUXCdTJcVaJrUKskw9fsV6/OKUH1cBFeRlf8791UKovgcVm\ntdanHpzemIHhIg64grEBIp6K8eaCEX4N4qqz/rvJmOjBfn/rOypsfqEhurLZ\nWGtvcddmYl4qpJrexvRoOtrSl6a6+M+1N4xxpXKNMcRTDzye15nQ6Mckr72j\n7RrvcTz6lMIlQ1hGw5f8Fo+tgdqOcD4lf062fkWbfQEU/7B0hOJXpStWChgn\naojcryj9q9I5zbVavNNG/pl/5Is9NKwf44mYP0FWgMuT+Aeyf6XYRhbIhSr3\nkjpb6QWCTWb7ggGXj5P11+Iz7uAD591IWq2hTW59RrF4/KEG5dGpI7RJOeHa\npslNmH2rlh1j7uJzOtNFxREigrA9GnV8YQIXhVkjwZVfMbV6VB3A0309QakN\nl2N9AT8GH2kZdVE+5CQGotnjr25u7GV6swVMvs8lTKwpA/5aYJHHzqjTJP8v\nThExwmrAhuwUhhkM1yXnHVl2y0/jVAdfLscm8wSRdR3Ec1ZD+qnPoJ+3HlWe\nQoBBMX4eZKEzxG9Y+/+TiXKOvuhi0B8qc6W1AAYqrb+LXI4C2ijwaeqrWM6W\nbPb9\r\n=rpXe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/list":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/menu-surface":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b96fbfc7a.0_1595864359975_0.528897765913753","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/menu","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c8f911a79b9f31018d2c5b51cef63ca64928e5e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.61f1a8d85.0.tgz","fileCount":37,"integrity":"sha512-aImCQ+5BvzCLrwK4vo/aCsCJPGdPc/VKwoHuk4eA0mGfT7IkoK8iQMnypQ+YIg8Hq9IEnl0lN/w728UNq2qdTw==","signatures":[{"sig":"MEYCIQD/SR1LPdznO2Wl+I3Ur5Vw5jFcYCjTrYl0NFxyoCLW3wIhAJ5WLQJ2PHfo+JThZ4Zo3v/R1GJMc4oH3wqKI/PSrc/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvdbCRA9TVsSAnZWagAAp04P/ArnZcdz1UKl8dGok9xe\nt1ziU3J4zzkmVatMPgwqN6ujMrFV6WxcyM1aSkDDDZ8v3MkwyWTT7kgjAYkT\nW5Q+rv5dbXTu7sTq6lBxcj6E9UXHwXzUwME3YB+d0HKqCUkHl/CViYfEy7AW\ncvc8+bh56Z66t+GoVogfARj6GTMg75dw40NlLC08sGfwRFaFRDybqQb22HwS\naPk2sLKjopluiFr3bLQv7jV0DaWCnGAwpfiwHer2MkjVg6XOVV2jaUZgJ7//\n6L9UU846Os7fuNGU6/utYvcZo/eynF9xPW0WmKVcfBdbq5gxSl9zxSomT3Aw\nHx7VzxK+AXlrKjvnSQ/gbqJ9HI379peLOFt/fMGgPZrkBnVvLdRh0Akw9AR3\nSBFiuj/ixTW8qd7jSo+q+4sVITnPEhAim9osh2ZGSMwFUzjt30qLzsTtW0A1\nUmnpTGHTwIkNmTrByfUs7iiHIvM8pbEGXHnN1efoZtQYsz264+qTFF1sM7cs\nxs2GX5YfGCxeB2+uCQ1nUNz/Y2E/lqhYu3YnykALVTX1KojwMPo4K1LJOgmq\n21MWvZtG2cLz9ke6Y6TC/jI9AFEE7mG2/MZajxXTu7wztCkQ3NSTjwBnb/c3\nFat/nCLx0F3awGrSSjM+jF1DHlgyWiAXH6MyN14Rqzr81IDSywOLHnvKuulX\neXQu\r\n=fLWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/list":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/menu-surface":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.61f1a8d85.0_1595864923387_0.24110464532164122","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/menu","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1edd66948bc07ac88e0c4dea386534a4aa677184","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.81dc33377.0.tgz","fileCount":37,"integrity":"sha512-n3niMXREbfaLOVc167yYeyyXfRukLiWM6BWK/V27uF9zZU2Sghwb6BGcg1+BPm8m2C4NZfA/5mkcxdVmvaR1qQ==","signatures":[{"sig":"MEQCIE/T2C3H8lVDNcbKr7xL4kMHwYilScdvvNaLOCH2tP7rAiBtzyTc6b9o5585Wq9wW3vZRu0itWzZdeBdNQ7Q2ZkJiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvofCRA9TVsSAnZWagAAsdYP/3iYtvYyv7E8rKV8VUq6\n7O7dwn8w8wqGXOKdXfyPm42RqSt4dCiu/HNh/3On6vTQ1Ee6qpRqjteffXde\nN2B2uyMMMeUROzTv2B1JkuW930Pm1m6CqThJW2CzY+zWUANWG/SHC3XTi0Ss\nGnGvYhghx/3JUocsbHqqRb+96h2ALNOSZsV3FJKZ+yHtz1bqhy58ky9wQupt\n0xyk1Ue1QP4ztqg8Ut9//PBNik8Ig6Fki2OBk8pjA+86KJkndsXslLnCQgKM\n1Byls5gPrq7HP8U0yPVNNXrhXBjYBkOr23sarGbuaSN9t0pT1RtBhNDTcvcG\ny1A70yMC6vyjSj5K6OdzcJr5CvrjfGLfrg2k/aDZ44W4u8UIXw7yDqLCnQJQ\npeRVFutqJ1pfSv2Mvv3n8B1YEIRNmzSvhyw8quTS/puor6qRTQVCZlvUWhAb\ni1xEnf4vCDRXzNhQsKPwCxRCWRbUH6b38fgyQPkTXVfMl3Lv2NZ3bRxFxyea\np0J6YX3DoWboJL5WklyRIKvQi/0vL2CfCJpaJBRrMW9+z2u+Tz4s5QapyaRZ\ni0GSMXLqxVd/UCJuAAEkTKPIRNyMuYnbESwB2eO6uqCScVgHM/mT9b+s4/EX\n8T4Xzm3evucs+kwG6P1RMI9/qvoWHGKkpSLys/WaH7JVuCM7iv6QPTXb/qpp\nB9ux\r\n=OKEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/list":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/menu-surface":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.81dc33377.0_1595865630653_0.5094607050993514","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/menu","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb22c32ac2a15b3c746604e7655d26e05391d728","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ffd9ede58.0.tgz","fileCount":37,"integrity":"sha512-XyuzYzObKwQMVdjqw+ZNMc9sJCN5lHURhI3WdIw5wSSgWvPfdnIcmN/4V3s+otWYw0DYKE8atYb3zwfcSiwBWg==","signatures":[{"sig":"MEYCIQDsc1A5O0b+lloTFuiVIx5FCgIlOEUqs+RJjVgGapjchQIhAL4cB3gzY2jAP00ogHBDGVDRFhTIdl54aInP5sSwRtZz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHtCRA9TVsSAnZWagAAeH4QAJZvaYrRYsgsz034npAy\nHYLEtzp1e08iCgzXn6W1mq65lETLwuN8MDUQ6OGn9Ed/4meIGAktVoH0Bbf1\npzGf+in8anwjtAULsMGihCyZAKlMwa4730TaV54n1D6R2JhI7Z8ju+rjTfxA\nFU8JX+bUNyNJAHwEJLJaSqIVrV/5PPo+jMKITE/jow9FlbFrx2OpnqaYkIj8\nYt5rawj4ktu+o798SliNtnJNBQa2gJWjMAnItlp2qhvKYWNjbCOOk5KWR7r4\ngXb++xfmzEBV0mpbt53g05kyvNb2M57WC+1gh5uFu6cp10w781Cip+4ic+hF\nGfAwU422aEE3oOAAjcXDJtcxl5hdeHcAwx2FKphgfBr+DWlvvPOk9qPVn4a9\nfpNH1aoFLD/GI70DgZpVK/gkCLSTLwQq7hIzW0qDh5IoYS7m9f2jqUQcU4JL\n5Y5xcEegJ+A0KId3DVuCLpjy+1m1Vz/XNvBpFguBIdJtROqAvBXG0LCbSehn\nkjJrB5/J+H/t6/R6FF+Y8KahHhuFu8EgfG2zHU4QMJCtK0IOyTjQ1yIWTEpT\nAxZjRdRy0/ljiYGARestU8Ucj/X/oYnDsr0yzTFPa0sXqB/hpm115ZsCi1YC\nPUN6UM1mdoLe2Zp50iqjR44p1juoDQFaNXBLdh+9/lHFHKuiwr/bHVu6BLKO\n56jj\r\n=U/Sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/list":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/menu-surface":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ffd9ede58.0_1595867628738_0.6865279634203372","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/menu","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e13b3f9c87080468094bcacb3c4f447a35ea3f2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.52dc55acf.0.tgz","fileCount":37,"integrity":"sha512-oCvgduufFXB+J4bgiPrQjjW+toj9SIWgLPbwPToiGRPGtt9SdcVHuNrtw8cgYDeDf/s4bGqwsMNBVchxW4bRCg==","signatures":[{"sig":"MEQCIEimEZy1dFvvUdXE6lHePIQXh4AYaXBDD/VOCETitY5wAiAdDujdyPO1HS+q6M7Hn2M07BOfcrNFZZw7WtgrG3aBiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpZCRA9TVsSAnZWagAALYYP/1YWUho4/u3PsJtB82Wx\nppbpUJPr0w/IO4TvLK3YuGNmL77UKOPiq6tNIYH1bYZ1eUirzjgBB1Y79Wzv\nVKypn2cXnn7AgmDthLVJ2KRdnSB165sRHH1iIFbKbETEO2CjWsctOfEu9lcy\nsmRmom7yqccWi0ffJu2eTgEwDRJHL8gKOUeqWRh66NYmJk9ui0n5hBlikYro\n6DL3LGW7JbbifnFDDl6N1ZchLsehmlYq7UgIOgrtivj64SdTCf9k1KlQUO5s\njqpBGaXlWlJpHYLpopOOS4ovfoJGUHaGGnIbzMGZ9kv+v2OqwDnjvBAsF293\n+Lb2hdJoplmxctGFenFCjz7uPIzv5sNdGsIzCoRnmpXw/iYg3hVS67yyov49\nHc8OwQmIqavSAy9/YRxSybbZ4H1mBOu6mkWXbpYcG1C8z5x41bIv2lqH4PXB\ns6Y+OPORLs8SuAsomr91EY/BR3h52MCRBuwDAFW1SRX0RB6yYLPIY1OG47hL\nYdVfZ2tlVzY8+uZ74MFKj2ebaA7ovZ2f9eaL1IfdCyjdAkSzWvAuE/Il8fc7\ntbTRhKHoqKo0JaEQK761GkUp1a0SXumSC55miA/9GQTT2hWPgj4y1ogauDO0\nvl6FciRw1vFgTR2kLCbAWS3SRdyc1uzOCp2W24mQgvfUxleT29kTFtpNO6RH\nVzZi\r\n=jxT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/list":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/menu-surface":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.52dc55acf.0_1595869785272_0.18026511596885508","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/menu","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55168353c86e2f4108e128c60f6f24b384d933a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d4274ff05.0.tgz","fileCount":37,"integrity":"sha512-kMMYsxhIrTvS1lrgXU4ELPiXqwhpcxLWrOaIrotH+QqJuZpOPd2KoIhGr0T/sd2iyqx9suR6NDkdDVzPF0w7HA==","signatures":[{"sig":"MEUCIFDxZKfkV3eVhgGWry7bxfdjhnTUyQpFoAzPmJJXx6rIAiEA1//4h18AvlfMTxIejjmfoHKHegJEMvuW0OAHjvjQMyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzB6CRA9TVsSAnZWagAAr/QP/ixi7wMCRg5muYbQ5j1n\nY38uaTaluw6HsC4vMMssFNE99QaiC23gy2MMnXX0Jy6fe3P/toe7/X227Yyb\nSiBnzpvmORKzWsYdMBKAhdbzTBpiWWhhY7ywJg7qJXUchPnnbEJZ2uOwMyt3\nZAxRwG+yQVSHhTkEohLb+hZaa1ri0K83UmdbC6D6mt4kTR/bhXcxkaNuHrCZ\n+dem/gk5m9ABJUxaEs2eqjQvs2TKccq+nao9fR4EkvsrFeo3p8bxkb1hoVoV\nP5OeU5DVdumEFHXVdIW5L+f7+hSEigd2uEBMPQTUmr0AvcCIqkZJcyFd9gll\niJ21n/dn41GB2n1eYGceLsdQZeZXy+t3MtNABqpzX1NLDBl9S3zImRXvc1+l\nv9myRXFp8pHnLsTg3TuNyQoTTplv+8I8HD2fmW9H4OkPLMd7BmxPpNrIuPwg\ngIJZS9pnhmKYJKp/cSBsL9M35reS6UA9SzqsAxLzJUBaTakjhBD7O8Mjbsnq\nlmhvmja1SH+qTKx8tWQDeJg7nJt6VJ4kQDLlKKHfBaWmyf7nJ0JLwxRzGWAf\ngX5EEyfJSORtE+q2bqPtfv4ITqQLbu087/72gkEuXlRfVAV1P0qNtZvxM+Fm\nlFduVA+K5ZaTTQjwPPhBZx4nL2PMfnC1W1pS1vMufE5i1pVC4j91To13mmE/\njdug\r\n=X0kg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/list":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/menu-surface":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d4274ff05.0_1595879546304_0.6531331809024479","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/menu","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6609b9e3246daf28eadeca51d0eaddea2f26b8a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b82d0696d.0.tgz","fileCount":37,"integrity":"sha512-fUxpKCKXT2Jn6xlQ8jbCOjgpnSKx7h9PpoI9/YEdpZenLHDyd9RuXCpn7yOd212f7Uej4on1r8VALftjHiIPJQ==","signatures":[{"sig":"MEUCIQCP5Ly7oYVXmFht4pkQtLnaDNwhcz9m0x809CmcoljhDgIgCCJGgBaJxm9Ft2WATxVeSMkbvmVNKOfv/2+z2UzL8kY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIaCRA9TVsSAnZWagAAjcoP/0P4qTPeKZhHbPAYq41p\np+2ZkpUAtJCPKvDJU61hB7JwXvO2+PYVP6LLICAqSOPk36SUHn3JuOHWFlY2\nyo1Q0Do0ZzaNX83ubAk9iVEd6VqfNDKRSFW7mGusqDMy/KX8oOb8RixYeEUK\ncE4u3Hz6QZaE6/h0epwhJ4lknn5lSltHQxQ5U9/PFKSBJc8fKVL815JNDN3y\nqaSiREtpYPCee3su5twocq9rxh3d2oJZJKJoC2WdF4s1eV9AdY1rfqr/lFzC\nDdK59hFr4P+tUZ4Zm3Cz7xbUn+vynJ16CxY6SjYaQcI4Z9DqhJXPzFzZbMxa\nOTsLofHitcr4VWYNBikQ60NQC+ZEY0ewrbxHH8P11NZvBV4JXqNs1y+FCOhg\nyMRevPxzO14XLr+6vuX+d1WlaAwgTtxxrBRHUkbd1hobbwQFAy3i6Q4RENCs\nCWRAyY05Yh6BXpCZtCVBL/uYNRbDXdT/d6cb3yqD1XYaqDj6mrmhDAJahfi+\nHBEypizS1PNTPS1eNZoQdjFg0of5YGnkuN5J0y5C4Al6DdQohEJi+i7iZN1D\nTQIY1N4O4lrXBlrKL3XiIYBAzapeoNdcT5hT/HtbUO6zT4415XvPVVLO52W6\n+CAD4T+Nqy5TCREExqsH5jy+NuW530qm4nLPZo1qucTlQhPNiD2st4YufThy\nlKnQ\r\n=lA77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/list":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/menu-surface":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b82d0696d.0_1595879962371_0.6426793296325124","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/menu","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beb17d2e31a2388aa4967697943f53910ba51ce8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c2852000d.0.tgz","fileCount":37,"integrity":"sha512-LZVsnOQQr03EsV4IQvaGZ518vR4lDDnd3Z54Gl2hwsXs9nYoOVqmkTKxcMqiW4ZZoEee39MbXVZKe/W8ApJ0pQ==","signatures":[{"sig":"MEQCIGmmrBMQnJQ4hDvPwrctu4YUWzbmBKc8iFY81WV9uZ3IAiB+VZnd1T/vMg/RUVOPwgH98LR1+FvpxDfJf/loNXseXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0BICRA9TVsSAnZWagAAe2MP/jU0Y7OwFaipl7toKlF0\nfg4fh7w2nK7x8oe/fJLUupCP2kjGh7zjdY8q7Zl4+b0Sh56TBzstM60ZsJ37\nXwZgE28HSqAS84rhQBQkk/7fUQ7+sMctaUDihcBA8jRA1PZoo7yWytOo5iaS\nOTRyDbomlORbWDr7gvMZPfSw3dydkGNKd4xSrPXtvY/LdT57zhJBgfPd8XnT\nqK1anGyF0s1rp/dJYm8ruJmT6JiD1+DvsC3GtXSZuTHBpHK3QmgJWpGe9++H\nwjMNC3wPwaqANUzPBPNReTLe2XAZddQcfesIXaN6OQnZXGzS7jYjnocWCYMK\nYX5WC9cDLMS2rJiI6u6Td8gJ9dH2VKc9mQU9+f8gaoqHoIe1tyi9XAQGhR5b\nWRwzNWfDfTWvBGNMXN8r19VfPaQ8wETvtoBuT9313FRJGnMQOi36C/9wKtTi\niS4JnIMG5j0TSYr/a6/N9h4UQm3IftgT9Fw16QqbqoZtQmyDunywYtqJmbDd\nQBkO6koLod8SgF3TAv5aeoxjMadIiGYjSFPdbl09l/HSbyEIK8uV64RtHVCy\nCkffEC/43QK7l1gq7IN1eHWpaPAjAE+hK20cb4HsGSpZ3dgMltbamPM5lNqJ\n9DhsQEPHZOFy/6OPmZOJpbVnrLvcVJdQRAg3hbdhmTso3alXPlFruQ6iz3eq\nAHf2\r\n=fvdZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/list":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/menu-surface":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c2852000d.0_1595883591813_0.9099945558072688","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/menu","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22ded611e6cd99c5d7e396ab640c629515738527","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f86f83f54.0.tgz","fileCount":37,"integrity":"sha512-qwc4eO4aKNv7y86eh4SJcJeWvyfGjNBQcgMD8HxbKecODNh2PJ/2zAGuNtqxV+DN4eeMIQrG7stRzK9F39uYCQ==","signatures":[{"sig":"MEUCIBl4ZT3pTqIle5FwzXkKEa+nJ4phSEL8Bgp43lMnvFtuAiEAnEVkev16Lem0+URh1leviTVWzYCW6GR9bIxQ9nadhmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH01HCRA9TVsSAnZWagAAMywP/1IbGo+ESXKoGCzS/gQg\nrbB76E0U6EkExOrgIAayX8oXZwCnXLSdN3zAs881VjRw4OXJqRpERe1pG9QO\nE1VMP/3IxgecN7dI7bLzvCaN7AbOxPQtcgbAPvwJre60G9K5wLcG5s+V064X\nU304nhIG5rMOvM63z/Vy/XuZ2hG+I2XDJh1wDFLHJtLBPBM6G9ERZ2TYBh3Y\n3fmMT16ek+bW+nQm46DdSMwRiSzveL815Z/KlhMSO45CdzGf6e/eSPxTxn3i\ngkLmPKgkgkGX+jb7BkgFR2YAv1NvRKbN5yqJow/IZt6MOiplLg2IypjmLZEi\nOMqOd75aQn5sKB3ZkU3pWvuSfd01tABrvSbtfUhBjhv2qYi2cWU/rRvipiB2\n0nOJF3ZjUrPEOng1KQOfr6X/8sfxr08yBEXwSrDY13wDvgaxFLDWnG/iCkGd\nemZRHgK7GRzWbEGXbRBYNtqPzAJWYQFrCE/ORhQHuTt3/fxuWTlvTP71hGhf\ntrwqeAErt+G6y+BRvtmP9ebMmSGM7no0zDg35s8JsY4Sm7TksSNkuNAKTuOv\nGEPhuKQz9unHTwXWobNN+QPKAc1h3MPh5GU1NlzqzATWj83kHSuPRhW/apvN\n7+UsAT1rMUE1yOtpx0VkZl8rwc1/NniixAGaR9j3PVFaYveJBwKA7wniZk3H\n+o9Y\r\n=qj3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/list":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/menu-surface":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f86f83f54.0_1595886919110_0.09563360286765676","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/menu","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a028a85173f2f531920ee0614daa87902d34cf2c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.41eb1684c.0.tgz","fileCount":37,"integrity":"sha512-uwlzWm6mX7DrKegcoBJEjvij2TRzBmrZF0vN5mwflq8fc9juZU4jaPzSymt5CXxWAq3hati/aHjCRNTMG8lM4A==","signatures":[{"sig":"MEUCICB+YIkNEnEo7v8aoKy8DtfbX+j/2LHREbP7wf9o0ZP9AiEAv5YA1NBHji0HApsvV2DclGnf0kwSd0ytfI1360cYyE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWvCRA9TVsSAnZWagAApuEP/0Bf3ljM99loa3EsofJV\nHexQZW2wFDOmQFtnyPGq7BRUQGi9dwTEywrRDeYWTcbzEuhFHxnjvFnAAYAP\nR+sFehY6jCjWm4Myi1Yv+3wRm/1xWovX1mg1zJmthpSHBC2VVLSLl8JJPrdO\nFJEnK81tLTzEfKuN1JV9ViL4PGBR5N+GRewm+Zpv2370yU2enaPp+h6tZiID\n+XI8wGyfytcFdD+SiirStNVxGn5O58BEqw/cfUBJ3MMPjax+l0guQXFjw7f+\nkLn8RJdcuhP67H6ljscINGDP948/DsSn3vY7c/o/k/QLu7Tol3vns6kaM9zl\np7IEGU9ik3UeuA/X0v1/0WQWichUG1rSAfuEzLX6zmgwrU5jlN0fqZXT2WiO\n4vzWR0dPQ1JhK0fuPPotmSjdvYdvMjcOzIzrV/CV/RRSkKyXkZfuRGMNQelE\noa12Nd/C5Npr7H40g+Lq0SbnREzSyXQJOo+BLLKk/dx+vFY1bcayZV6JoB2T\n34EiI6czMckGYWzr1uRJ+ybZABx3YAGk7IoBR/MBJ240XakjGKvH/qJansfL\nRZlIqWUyNX10W63HmqgSmS4vS6VTnk083ILgs2tI9KHLDSFeTvv6zjLTlG6J\nnB2zxsG9o3B/BOk5mjdUp7XhW1RgDC8EGmKbSDfBzeFkoqCiu6SH4vgfH7/t\nFw9O\r\n=G0cd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/list":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/menu-surface":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.41eb1684c.0_1595958703203_0.23434418231347176","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/menu","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4f1254822cd44d1595e4feb64bdb39911da03af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.9e2f6c450.0.tgz","fileCount":37,"integrity":"sha512-iesulT+2AcKrB7O+c4RVK9Fx23qXJ2TcC1E/k98p3nYyZnptzfgG4Iaf8qdiI0XNsPakJcttQ1sYr6ATUYi3UA==","signatures":[{"sig":"MEYCIQCBro3ycmWx0YAQ8jJeH6+m/WGHTxvwho6daZPmirXeTgIhALSxKhevltF6dv3fKJNdKzz4auf6LJ0/MExv6oL08rgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKljCRA9TVsSAnZWagAAG7oP/j+AB4gy7GMxOTmdxnYT\nSAsykfUM+X1CGy6cL+jmve7sU3ok3Qpwrra4IeKZDA0uKk55q465XdegDPDC\nmS/1LC58K/Ug2Oi074gWNG7w8JAUnu1bxZ9Q7BnZJDNMB5W93GWvkuGUUTdQ\n1/T0+siVCt+NoTUMTyslKQ28vF72v/UWAUpOvbJ2pFKSWZvj2DYt+sOd90+o\n6epfyqjqJHlkCrlRnrbVvw6AcrrwJwh/drfA09n/BFA2IegHx5UZQoac8EnL\nUOQ6GgUqGT2Ica+D6oxJxcEHIur/xAh5lso4rCN9N9jrEMsXZKoEBUMe0ga+\ngWD5QneNbYWGTArlDiOwYR+hanv7svYKRlbluHCPnvYwL20R3w6whYI1/HeO\nKADcDwoyYwnIU+xoHvqy0HlGW0EnDdCWTu0kn87Szn5TAbRVPeOuvk1qUQLx\nKxVWpPz7adNvX7PlAW6TRoAlb7W0KTjkjemsf0kh4rtETlzYTjqVDPURR3Jq\nxQmqU4Q2G21dKKicxhWlpO0lftjDpnizAXmL7njFJdOgSZnIOqhYyFiROO9B\nBqqP034CszZjiwqZLhH0YOfWVcEx/CoLDWv9xPsape2EXgMpn5Naxef8Ma7S\nZMnTCiK5bsQZbg+WEcxw36ltM5iP7zC7/bRa4lHJwYXbc0siPY+Cl/eaXV2Z\nfHdT\r\n=aYIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/list":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/menu-surface":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.9e2f6c450.0_1595976034932_0.49366688465526587","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/menu","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2bee95bb4ad1ede4ce6572e4c0c56c518996a18","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e6950b55a.0.tgz","fileCount":37,"integrity":"sha512-nvHt0tzRAKCy5lH6WZMB3Z4a5THESE2UFU1Ug+gjOJbMAXZEinr8pWVJoS1ZkneImdT2BTPfnvs3J7NVr0QMvQ==","signatures":[{"sig":"MEQCIG5D1jsHvQPf4/jgcYtjM2gcjElzOOJX4Mz6z06smRycAiAoWqM+DbaUt1GyWU4RyBiGVq/qU6DUZX6UfVEcUeOojw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKyKCRA9TVsSAnZWagAAVU4P/2ntIy66OImTGcoBwPf7\n4zVcIpRfQOoPK8TTDv56imXT0ubw9zsX7L1Guk7CFxpoAgzGh+BMz45kDmUS\nMKT8jepfSZIQoC5Cgzt3ulrQNvrEsNl9Gjw1OYlDWf5nckwF6hoWS4/J68Os\nTzCoG8oYPxmN++cJL6727VyI3zBPA6EkkVPlMFafVsWOawyO1eOdVLt0Dhqg\n8O9jhloLIiak0HwA9JhFb1vNPGa4c06A6iem+ApMj5F9TJkZ710+msOIqdDC\nuc3GzsXPXZdpi+cdthyzwJvFKXd9xsu+hbP/tKFEdWgXMwNQYLDtZ4paCbsO\nRe+8yqGw4ksf/FTU+SU/RFMivqIvp8DQsRjzQoVzW7wmkv09CwYPnQVP16iA\nTqK+jLFsd543fqtMI7MiIt7qYNFtEb5r+q4B8BiabnRV5aQtBgFbYi84ZsGK\nzT40/lU+enDTnNJpGFs7shwGphqNSoGqdqq4Rkn9eQ/lEitmN2s908M3w02h\nrzL8pLhaUrS4MaMD0kAZOTKXJePdenaMXNIG0ivWQ4AjCfYhXDEXK7x62ZD2\ncgAJOAHU38tHytOHdIf1WXQ1hSxblSB329DXCsEWqmC1RtLyZmj2CET7UuvA\nHVTSRKueXPkxa6spSOzVlo/tvFpAMPoBEIgxjkNtNBwXjr2nIKDpY1f3dFVR\n8xsI\r\n=5jtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/list":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/menu-surface":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e6950b55a.0_1595976841560_0.6748851023526876","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/menu","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e17c210e7d7ffdec2a6c1c7cbf47407c4b89733","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5e51ee38e.0.tgz","fileCount":37,"integrity":"sha512-WmUwng72nH23lW7IGpIvPOqQdq7JO3XjYMd3u/pJKJHs8d+fUVCUkncUDjx16Ayxcj4v552gU6/ncmKSynF8QA==","signatures":[{"sig":"MEYCIQC4YaOoh92LDeeVapFfS6U/5EPjQCdIJaDXtGadMIU7uQIhAOi+H5EOZtOuIfuPX3Nbkz6h03Z06S/jnB/7IhNrpwSb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILH7CRA9TVsSAnZWagAAn7AQAJ1rJVBApPH5xSrFkcoQ\nGYDF/XyzFxo88TISGoN4ZyDlkASQdp9zR4cnS1OM7hc57aqWpwM3VV3JVFDq\nkwBYlQDgWqdge8lopua60TrpBziKTEioiPXmRrUw60ocXx+AamV0r3vs260d\nEYk9mTpHFbR3ah2yJ7Nwbn0FlPLbZ5sptQl6F+ftHHXYxANulXMwCk1PiRfR\ntBVs359uSl7IpDNIQboXOfiCViqQ/RjK1KJf/Zw1vQFgd4w5losWE++TxZzh\n8QCATtaQXAP9MNh35USF0FS0LzOkZ8oXByv8mdP6T9xgCcCf8CTrqPr7BGdY\nWHZxrtiwXjT76nbVlm0r7qoFiYv2QScfz6Ohb98OgBJYU6tMR4MKSm+fWdUp\n2Guoy++er8UHS+HeZwYv5K+lg3be3RqjFbFZHtV9r9i2BKntIdHUZrBHNp1K\nlfqCb+GJInoF0FwhPl6yFw2/9Sq7SLoQSJHuJ6DjCiZ0z0eo4wPKueFkldzF\nKZ+sUCdajLsGCwasruTXYYAdolX2lNxjk9mLWTUVMC88FUKLLCv6JiStCweW\nZJup/LuMsps+6MJLWHOX5LJTlp280CqvjbPnHFKMynpSxv+dAfRkFHfGSaP2\nluo9cpqZyZ83lUrqV/mt24XyoO0yh3KqmAxjAQ2i7d5UzxRSudJRnH4ObYue\nLReu\r\n=pmcD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/list":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/menu-surface":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5e51ee38e.0_1595978235040_0.31086536090687966","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/menu","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e169e75cf377fa30b859a1469e8cb3c13ecaaad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a3898ffcf.0.tgz","fileCount":37,"integrity":"sha512-MhWxuKhOrk+mAXM3Q5+vizUxqECpl4+7V9x7zSYvDcnmd9j2EXniXwDH6yrsccPrDpvAyheSQGODAeoVaUZ2PQ==","signatures":[{"sig":"MEUCIEFmfLqYBdrOf6u/oPU/mX+cnIx7SMGMhjJZBArolwgmAiEAned97d5fR+ZgI7S2b35ZxcbfE40+6QCupQ2UdyK66S4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTTCRA9TVsSAnZWagAAykQP+wTbW6c/uIfoW0f0ps47\nDKvjs8QZ/Az/W61HOK9hsGt06O/hLATWfhHFF/f6lAfFTdxZJ509btsmZLXp\nbByD2JcCaWgmC4zzAaj9N3Zr4z1wCKn+TgaECCdB+RNntTF8VmwKbU+MtJ7c\nHn+cU84ksgmP3VEhAB04IbOh/HGNDunZzkVgNBzPjU+oPQAQWzjusshob8gi\n6a5u4airYhyx4QhjCtvzuGyLMmlsMd2DQkoo3aK1WdkqZNsqP3VSOblAurMm\nwuENpOQKK+jUJll1RQkW962CgPbttSDndggfzSRhdf2CSUKNf89aavP3atuG\nZyY9wQXekt1GFefYQQAfxNJ5imqa2kKUCI4EdGIYduOumVprP5aseelbsKfi\ntEmQ+geF+E2FrJKe+DjO8UON1SP7VAa9pKryP53UMstc4jyK2RAPQdJit6jt\nvobXpV78uCBjX6V76vpunUY+uccKtk5m6+ZX4YMLtN6JucqSJpqpPrewSHUk\nJjS3CC906BuqHWmJ5B8CeyiaEdT5CQovac13E6WGF96z6flftcVxUohYK2zk\niWPJKGzjHif12sYPz627+K9hysZ2Lwrx3tZ5hcXYYqozXRwAwu/c5kj76GrQ\nuChmEbXPBYQ4zrChEUtKoAVN+av7hnq/Qg2f4t5qRZz386jrwL5Acr7smLIx\nf2bT\r\n=7lO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/list":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/menu-surface":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a3898ffcf.0_1595983059483_0.18778019593337847","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/menu","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cfdf577f5c0162677381c73a00edc5ff0bec3d7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":37,"integrity":"sha512-Rr75k/WfyEgrAP2m09scKjeTWHI7IqlE9VKwWp3Ieci5ElLZ3teyQ/BPX7in02wPSqg2dSJCeZuYZ2RhUWyyfQ==","signatures":[{"sig":"MEQCICuNGkmaH5o+ozPRYgp5+4GF1LOy0ic2flKjtcFCyOvaAiBxbVAQB/QO3eUFM74PST50HFjRcupgEWUP0ZrZpXPQJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMfYCRA9TVsSAnZWagAA7MEP/Alz/AZmbL4HmqUovF6h\nJatDZU6X9XEmIGl8RY2a+qYCdR8TYWJWTZQjDUUiRipV2mhpuBmlr+fb65SS\nOnUZ2zt0CwNXmsbMVMuJ5XeO0tcjAYeV+JsFQsgCzn19II1Qy21k5C5gUPgC\n5F4KjKdrHkAUhJz3rNQcKfDkqsy/xteIN+9cg2zQ3lSzZgG7mjeX7+vPm5X2\nXXnctqQVo8Toaa1ljc5dDbD4vcCdYJnux2OF+RNxRNmeUGeyVX37aNfuPigc\n0rPY768RwV1QkOEsfhkaWFKzpduoQ4r7fAiGqFhjT4FhyHj4wEnNVHtR5BiU\np7R9itMpRu5T+5k3DE8pqtPDH8KwDt58gECHG9Je3LlsHCs+1JNJ6RRTiI6p\nBi3gR2JJjFL4e4Fj7xI21PypH+u8gjfhwrGGxMsEhFqYsOW7uJjV3FjP0qmH\nryt5kw3wxmWF2DKg2f9WH7drvznsXahT9ubV31QOsoGUFl7q3xj9q1+OTVgR\neuZUp06j9s+kfRijG7TM/AjZ501CEnHHqCLHS3SsNkZYMPiX3cXbbX9c3FkE\n4K645ETyMZUop/EEGQDyXDOoWE/O83yeYvhi9FdDErD9uQF7reMID5J2TRmf\nq64Fuw+fMabUwTR0gxGlExsFtYlViyrssKg1tTOAMo2K2YodUksE5lmzHWfp\nRiu9\r\n=Wwy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/list":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/menu-surface":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.bc5cc6c96.0_1595983831602_0.23055602576182288","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/menu","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a0005cea86751fcdf849166381dbaaf0a66b23c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.9bdeaf928.0.tgz","fileCount":37,"integrity":"sha512-3CqpdChoynt33DB6TSkU3HspA6bGxIbEe2zOjaU0LZzhJkehFRrSd1xZ9bTK1d930Pvwvyeq1VULFRVYNHTEXg==","signatures":[{"sig":"MEUCIDiWgtaB22DDP7LS/1MAmNOUehYZ2uAWIDRkFrVvr1K0AiEAk5AlDjkeVD0dN41h/sZWyusq4ofN6FmdAhvlOcg1xC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM87CRA9TVsSAnZWagAAhnYP/3/ZgpAmG9yta2wGwA2h\nkoqDvcD3IUkhodTfj1GtVshjFti0iV0raqXJMgh8Sc3qOhNEq13VHkjDbFfJ\nkIIs58LVM5fQSZMbtGdzzh93XtqkzMy6q4vgsJVIj7WX0+G8qvgBKlxFPa/J\nBif1/8AFS0Iyx2cbP0EMyC6Ns3xog7buqP0lXhjFUo640sc8ojEheNosEYjt\nd1r1TlcnyH0bnX+0FqG9IIqt1T6m784Vvye3k70HnGTuVKRDHOcaSMmIi1XD\n+CsABaSmSsv4/NXShBUDWP5zwuL5we46IK995hcY/I1hyEoAPbfVp3m893a8\nAPJGSqgrcfdsq65eCdW2tLXaeoK07Pq3B/oNDZdGiN/nF2uKT1+tcWUSOZMg\niCLpVoYjWRdzqQZVZ/6k93vCCh5bvVTkKXU/06/EhX8P043iB1I+nC1NjxjZ\nx/+L+KAFzJTyYEfrK40J2qoSmajLyKLx2cP5yQs/1E9SRE/LemT8aXJC8GER\n8/tTdFmZ2jmICgtZLibyyrAe9QXNxGACTio/uysluEF0iDU9nVa/eHs4qptM\nhu/jVDsg58Q0dohPvcOk8nfF2C7d5rezSUZ/w8GUEdX8X7ujT6RNu794sK34\nMGAK/9ZQJj4yXmxYj5BAd5GFuzyBqKXIaCNHn3YPFm38pHDIcvQMXZymcT9l\neRFd\r\n=4B6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/list":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/menu-surface":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.9bdeaf928.0_1595985723254_0.8092241363439912","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/menu","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439f85463ceaf71d05fca5e879a6381291aa558d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":37,"integrity":"sha512-hNd/EHILMfH/5mOlkCSi6d7sP4QUf4t+OOuILU4twAyYcj1GgEtcUUWq9HgS94zuDlMDF6OamaLCC9FFx3KEpw==","signatures":[{"sig":"MEUCIQD3MjFkFllDtuP7cG3oPEjcoKLq45ISM1IRP4PnzD+HNQIgIRIUnTWXxGLqXLmdIwIoeVAoKANvy26VF8svH3CXfdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKYCRA9TVsSAnZWagAA/JQP/05PISY0dSAcU4/kC+3N\nFpm4KZIxnnEWbSBf0i+BRNNKh/aKKAz/8xxmptgmeew5bAXZhyU5f8PWokSB\njv78IdFppaSZttIXIMtlogYjLt2SIPZCCGYtvmM8dqroJI2JdhMKevrd8YL6\nkiNnrox039jQuN5L5YlWJm0DTP/VbuXRW1MN7DoTGTkV2C0hcOb3Tsh9eH38\nN24/vS3hcZ1OhMz3gtGBx6Ync2d1JgJ0qGE++SbY0fcluaux0wZvMbiWQpH0\nDrq5W+Du/spmiETIPk7YYTYKFHeMfAzWZ+p19mDMV6GJKgGYMFGgGo0VOVJB\nubOjuvcYNvkGOfvSCL7vY+0tzPWtLAi41JydCi73NulMZpXgl64cVKs2SvtO\nyLVzM0Pl1ZHDSl577W/aXpDmPnRH4eLYuGSShdbXWlnXV+uN6KN0q7uzMCcd\nS/EmSiTzPXCTiA2wCBQ85w+TWsuGdzshq4K60yB8jXg6Te3Wc6bF5/GJ6NtA\n9T2TL0FUrrPKwaOABI67CDQoMmAVyBxZ9vq3CE01L56sms/3UFG1qA3y3r0+\nFVikbco+ZaOawhad9bLBJeE9mLn3sIY46XGQeVFWJwdct2/z6l2cnBcIwbCt\nCcKQwvdyKFaoewAMftkrvLJEiRGjAiFpazSj547KC8wWH6fg1TLe6QVo78Ut\n3LqY\r\n=yVKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/list":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/menu-surface":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fde2c1f9d.0_1595986583707_0.4410120377236679","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/menu","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"778db8b1a5ac707d7a2f397c5bfe6fa8d59cb6f9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.6b3876d5d.0.tgz","fileCount":37,"integrity":"sha512-ahlpUWrhIDsE3RGCX6PBHAMdkvr8fXlQyiqTiglLUvFsIbjJ+7xLhXJTux49GzlceDoCmMO3QOIKGautT9UQRA==","signatures":[{"sig":"MEUCIQDPCIx7iyYi6KrauZC0+HUx2jRg6aggv/6OagoncLUjYwIgQqOqBXNNptJ/1NTvJVxtPiPIUaj2xgV0TQij39gOrUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINN1CRA9TVsSAnZWagAAJOMP/2xZQCuhOZRpjWmDxDDj\niBg+qi0okFnuAgxmATC7K+Xzz+DfdY+RzOMg0HTgAf4uYR1eanWvQcKPWyOO\nGkhWtAouUtpjw6oN8MsgTPWED5NCdPO7lwYcaNyBkAEG7z+5L21XdNWYNSm4\nW/bcVeUNnC+x9nR5aqEusEq5waKtmW/fvFp4XuTx4LARW361nBzi2LfsVh4+\nOHqbS3OUprWOIH7sugnP7AyDe6KLYjOly8XTz9qPl37EXprnOl6kx8DIVmky\n5FCovTrKaZqhEQXue13+Nw25a/KhHSUArGv3mA7LpKRY87oR/rn8xlldgyxQ\nZTnMhDnCjFzR0flkwzd4gZyvgTYU+h/dr9OlMBaqug3iFakxiGpuQu20OLWM\nNwAyMpOkZT+S/8T27ngdz/nHQTrpuMCAkhluqtFAlEB24PjXkhAVaZUHOpK6\nWOmS/OAvEO4cQU4HsQPlGtWbo/3GzC/nKFRrZI7rpKUEiSBb27+8OzJ/A355\nmsOkA6UL+QnyarDO3M+drH4CsV5ahcm9RF5fHpx7CTU7AY3WEouI7tROGvkg\nvMV6K8YDj0WuEu3YXSqAlivmLXCrNtvimo+VnBHpIl6wZjZY6vbyy9WVlDWi\n9IaOjM4OMI1tBBM5q4UcNRjySHOFYYeejaInP2qtglcqy86U54iasBqOwZF/\npZxJ\r\n=pv8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/list":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/menu-surface":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.6b3876d5d.0_1595986805240_0.5740233720990922","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/menu","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ced703be47fb453e536faafbc347397feb4d9d03","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.30ce17873.0.tgz","fileCount":37,"integrity":"sha512-askmV+ZL1hDeHn9WR1Z61TIB5dFzECSmFVY4eaOLEHJ5qewihma4+XiuJRYLvKLxdPc1yp6a2lMiJU7vAxa2GA==","signatures":[{"sig":"MEUCIBACCE3b9HJeisYcHo8Wmx8eZF9ZZNLLmqrbosdvsNR1AiEA6+g/OtsDWabagEOFt2Rj2Uvi1jw0f6pndpr9OWfLKZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7lCRA9TVsSAnZWagAAAhwQAJn54jDhrlfodgT2E9Wc\npFmsG9xw4qOhIlDx2tiwu8qi1AVgu1O4oUjKNwV0dPd5rCkFRPnAOGEC6x81\ntU4K1q5RSEnRFhUVK5po1n8dADup5/sZR/DThNHnhEdKrwHwE4aWuFTvWFXA\nUBFd0sGAD0i+QQ3D5CE0Hyb4DkFqLZ+V2b0Gj8yJC7R8nTx1Wnq+ZJdeRN9c\nW2DnKXIonWMJrvs4eQq/+Hb2jwRXlxdoFlYNcpMdtJiQa1K7skCB94CF2WMW\nVQjFNvoYzadIGlXY7fScR+oM7zP9XJ5jVrIPJOKm2m6+I+qPrxhurZLaMjUh\nTSTssc7t97MzSbFqxJxCoboPKUefWCWzoEjDbioi46TWEzv6L+ZFhDrJrjAV\n7gucfybTtLnoPqdzn2HoxzOmJqSIkJfPCAuXKc6fMEUJcz/ENxdasOdMaNVR\n5VnE0Jx2DPUG2EhG0Dey9KoljZ74GN4C+7lAweY+meMERdenCH+Dkja4UEeM\npEq9cTmYe+edpxFdpSMGuh8maAzghyn11ahVuSW2feI7+482mLlmRP2R6WAH\nCccw5GdtA4Ctu4rX6lypkyKX8VtL+MDWtsmnK4ofNghiBZoi7HKQ69UF7N5M\n2ZKqSfU9F4ec6lLBPrWjQtSeXEFRSnEVKieKrnF0ppGe+MnU+319UeiaMqu8\n5R5e\r\n=Rfah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/list":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/menu-surface":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.30ce17873.0_1596042980815_0.9930040838866585","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/menu","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5836728867e11154235fcae6a730425ce65388","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":37,"integrity":"sha512-pikh3d6Ak8K8xxxHtmncRYxXfWEVHUTznei+AcFg8BO6CmEzVW7VRxRpfChZc18g1gwPayeF1lxdJvH4UXDjQw==","signatures":[{"sig":"MEUCIGa0g12q06HVBlBvvLHDR9pCkMoLeC79TLnQwDoHo44PAiEAuY+GvCqmsgbE92euiGn3dgZPL5CeDHrjch0L6xIbRbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9nCRA9TVsSAnZWagAAi7IP/1Y8KYyeuN72+R5+4FK+\nh6qikM0jHC+k5vrOmAtxsUrFWw1uNNlMZqLKdbxYUr3XYaQ9SyMbuwjWkgX3\n0fxG5AyZgY2mIsH5RzWoEILKOAJlSpnYn1UdVf/FZxi94DLUVn5aZ0e+mV8q\n3CI4iOWd1XBZt/c6DrOFA8G6Z+yl6RC+xuuGloTTtc0Am99+J4NYxnz4IAkU\n/0G7vzxvUtTLT/BD0p5fGiWHzj6/58DxdSYJuaPe+k7hafCs/8Mr5h4Niu7S\ndKHu6A7x5iRRETMEFil+c1UXEMqNsvheohsPCVACWi11h7LhSdRc5KJ08R3F\nom20/wPeKzengaRvZ2rLuwZvsXdVg30XkMiKKhMT7r93H/5T7muPwdbFRW/S\ndFmLnPqPnzF+aF5/y+YZFOcw84kEWKkNBgwkfaGxkAOnjIqc7N53RKAjb20f\ncTMFJI/5qhoVWDQCSEam/0oZugZBijh10f9dysO8+3pwVSBFVSQoUzC2EU1D\nP8tdMT3Z3GI6vIIMDt1XEYBKbv2bzhU4pYcogSe7eBPEp7swrUtmVN/4kr11\n+A/6POJqyHeUtexLFHvBz79ObY4+f1IGmqx8HY3eUAlzNTzsVIMvGLKcH9Ml\n5zkecDuXHk56R8KtfqQfren0yZwKbTuDyxFTfqGMxnDZuhgPD1YAxPCgzmc9\ncRtG\r\n=FZpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/list":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/menu-surface":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f6bb43bf0.0_1596047206865_0.6731463830020352","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/menu","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777259fb005051a5d020ce223831da56d7fe13ab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.6af75f6ab.0.tgz","fileCount":37,"integrity":"sha512-Asldp4x9rZx/1ju86251Jsw4ZDd5OLAXj6uCZ/s0wRPFYiWU7E9QJo0Eq2l8hUeTiVKM+hRIGGp+YSET0fFHWg==","signatures":[{"sig":"MEYCIQD6LKNJc/X5oZHIWlfglo3lPFvzna1Sn32nTkWPWPC+1gIhAMF1ssLZIGD+oTuYTkgm8vw8BOba2LiPzxsrxitM2dlo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4kCRA9TVsSAnZWagAAZugP/jynWo69B+4PnEQevomr\n9TzSJIlHBbZg+q32cEDN1kIE6sWmUITQKDp5ApsqsuQdwt5Ri2MLhK3/FQyz\naJ28gPD23k/If0kLyfXSq4aqciX41IN6g6tNC5LICjX6RWT/hlAYhlVEIZtA\n1reyXh4aDYBBddE9Wk7+6pJVE7EO1frj78Clu7cuABySbK1jxcTh2XdVlqRo\n73wHcbnN35a1IYA8nJ9E+i9vJVAulLfZxMp5snZANUvS5gIXmZJPsE8qXjzn\njfAorKPWo3VAltxdTFshOBBp23nffeaAM2juyyJFTS374qImj+iZqIh8+3S+\njLJPyChwK9gTVE2Fp78Q6LGIBU7hyOQVKRxq3CKLewKiuBF0NVjEQ5MlAHYh\nOQauQBQfYjUHkmHHVfLPwVKIbtakRwbMeplA+p/SVgd9q7UenIC3e8PHkkT9\nCPIjY7UJaED4/a9gtbGm/xDu2gTZSqRJzq3D0h9LC8eOAFeXkHgtR8L8nIvB\nasnjLHmzodPb7ri0geFzALlCJ1M5LBnlsd4MVAZPceYL/dp8xNb+rQHTOK3q\nD0SHX8pam+QsWzEpdsj8SP/lbp4MdmbDVc/8vN1kLYuBkXTgAQ7mjWEwYbnV\nGFZ5L3ORXnQhZsPOCQLE7aYMhZTQlTykeEtOWiajV9XifWjgOL0u5nacla1Z\natI4\r\n=/Lnd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/list":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/menu-surface":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.6af75f6ab.0_1596067364116_0.5507143848460525","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/menu","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f455d96691dabf70645381ed69fcf769de0b5695","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.42d7a65aa.0.tgz","fileCount":37,"integrity":"sha512-Aca/RZcBBBkeN01qEv4cnz5XxNeowLT8IJzBKV5xYFjupUpPfF6nWiabemtOUGJ+lHF6yHOo+xDjgdArHJE76Q==","signatures":[{"sig":"MEUCIGmpIXtVBW9OWnsRIQw5bWwQzjQzj750oipaaXX2mOOmAiEA5G05nkS+J9cGRwT789udaZVnkAzn3q79o9qcuXIhNlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhBUCRA9TVsSAnZWagAAP+gP/0lntFBcxbhhFzSPmOWs\nrJUq7yFwpu5RNacChMfXuPxOqUJS44zM844Man1+bDLKRuC1HTte6cG7Y521\nKib2H2TU/NJ4xkcSByzZQldsX74L2YsQclfFjudfE2Te8zKHkbTGojgu63GR\nM2Yk8R44n6ZjMGTJy31PCfo7A3ff367t0PUCYj5wWw0T00P7tT75YCUwkEr+\ns9wdKVdsn10hJxM5Klk29aL5wtsrnX6uE0fVi9kfQAkkqJzUxs7ymDV7DOXf\nt8q7F3KtPKo3ZxlsGXfwTYjO6rrIkon6Yoh2LxqhOhoarzd4L1hyfkpci5mu\n6Mxcsb5o2gyHqtLHaZBJvSuKTNg95aHsMciingt0YIEb1P2hEVwrbRLWTJIL\no4G8hi4tI1HgCPKPSFowYKi7kx81DDK7dD3pXKLZPPHhbj4TpMRdJSEHuXnd\nkwDhb84DCMQtqdM7lANSxWPikR+N6BUfHSPLCWp20CH+bIt2fFCscO/9CjFM\nXVPHGUx2yU0PFFKVSLuzQgDefvr3lmLbSXCXb+cFc3gXevtctYlAtcvYX/V7\nKxwbOlITG90/ynrBcOt4xcq7FfZN39Y4cODtUCJvFSw5RQBIR8EkPz+rPZhh\nLAvO66cb4dkQ/VyidQfAlIgx13A7giCrwkHgEPiV0nc8IEtuUx1Hwe04jrVM\nubp+\r\n=JZxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/list":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/menu-surface":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.42d7a65aa.0_1596067923530_0.28838662484261546","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/menu","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c464e22336cf728081d391d95b6dacacb7f885a9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.85abdabb7.0.tgz","fileCount":37,"integrity":"sha512-93DJ43zNnAI9zNOwJNVFCBBqwRgC60HLExqkB2nk47GehumnmJnnHbQEMVllcubIc0u8HjCuuc5jO/+RPVEJUg==","signatures":[{"sig":"MEUCIQDV8s8kzGqS4HDNGcTul8+CyGmeNOL+wj/3vsaIp4BSUQIgD16HGd/BAqySiLqlCtG54Io/NUlLR7xXjnbRWPY8gyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFhCRA9TVsSAnZWagAAijEP/jkjafFijdxWN12upTRT\nRg77VNRHUXlFRSa2Kh+4uLynPO6sUD6JSgyzv+6AJij9A0iGx6h4CcHYEO5X\nqrFrB0ywrpIhKHBgnipHHIPKRsCfYiK29yu0vv7hG24w1TZFwT8755/9qFXY\nwwfVAmrOjnfpW5Au8khcHGwUxc9+7JwhHxPlhQlqUNw3+gFsSD8+dnLrom2R\ntmeKwQJcUGAX3mm8vWoHOyHu/PFkic9ClD7Do3fsjWJ5L1Ih5Hc0JCXN7Y6z\ny8YiBsVGTXYgXheXUCL5KOKEVqEZ00z9dLGtDNRTdpS+clRwnUhQL2wA9KW3\nDe3d2O1bN/5NCA8l5uUbUWbVOy3DhNCduM9HLd6M0KPC2FbbnxPDjzFDf64J\nhF6aEo3B3T9+zyAnEwcU11yuBt33a+62tEdC472RZusMPTDEsLohCZfr9hAg\nOI/QMg6wf028KNsQE7Tt/d1sTaCpd0SaG2c9+6RLaRl7pWdE27KN5qk+NXXg\nnV98dPI0zS5PTfczBRJoVC5k66CjzH9u96IgSAWqMs7lse7A3YElO5LAUapN\nkCvzV5sJz6syggyN9ltBCxfG2EzR8TglrsceQRZOeNwbmjC+f5e3V6nU5+WW\nAuyXuIy08TV7PETJu6mpyp+YOf8z1WF9G4f5NEjM9gnn2l2fLd2P1Yt0ojKp\no5zF\r\n=4P/m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/list":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/menu-surface":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.85abdabb7.0_1596068193259_0.603469003417259","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/menu","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebafb6b5cd7f6bf2335989bf1a9c6e2018d9b275","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.49fb20ca3.0.tgz","fileCount":37,"integrity":"sha512-GtROuHVjMVMoc+HOjBVrIzU5pfLQSO+IgP141+fYCnsGmcX+JQROFKf6g39pNVEpr595ira1HCjtiIWwx+xE2w==","signatures":[{"sig":"MEUCIEenLtmogS7ySiFItGDXCH5MijwaKX+zonoTePEN1vTIAiEAq9vHhl5WC7eH+Xqv7b5cISCGn2RE/9o9Hh6S7PEA4rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJXCRA9TVsSAnZWagAAa6cP/jYZm7RpM0VvnC+s/KMG\n9T9Fnc0KrEOvR7MoGP4bL0qSrIfRk3jB4Q6C6lbqQV7OWbNDGLZcB+PKGzhX\nltyguSLKHsEykmjcz6LkHabW2UkZIOf6dkPu4O8xmuQENEjU6ceccb3Kj6gf\n3QszGIlDS4slj9C0A5xInE06Kee6hYOJprqgskB+oMOSuChLjcWsKCfIhw/8\nCmwfxMVUWtMmJkxy3aLR/UThIX6U1Ur7m36RlmHqQFT8dvoZCac8oFuhr6eC\nJHEqYhHnwvzVM7p3GK4O12uhws4e6KlIJiwmZv+2sZtOXlntF5ZWGIi9VPB5\nmrKWfB8II6bbnKIO2lxUrVXKntB0UmPPx5pUA9fA3/SznBezpEJxX8R5fJX1\n0A1setbwP6u3yqlhPjieWWwMIzDFeWBgHHioN+U/mCtgITTDvq4tUJGoX+0k\ntwLZy7rZc8h7/vdZDYR1GdEJSRmC/LQun/VIS2dYp0ltEcVbPm6Xz7cTbItC\nTyMUzshkVXeH1Bs+T1v3KZHIjuJTtq6BLcBLcWCFW/96mYcEjBj8vPMzmp/+\nig5qMhKrzOnFSu9+r6AbzMiLAXOL7nRSh+/SSagn2EaUZYYGPK6BLKzFNg1m\n62A7Ak3igQd8Ydd3PaTf0pNJRsHvuGwYPAOwvdPH8aib7wC001jXr1OqvO2D\ntFLq\r\n=8w0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/list":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/menu-surface":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.49fb20ca3.0_1596072535325_0.955216369845513","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/menu","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c01c9465ca0cbc0d34559064e42e8006d47b7d9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.962d4abbb.0.tgz","fileCount":37,"integrity":"sha512-5G2OUxATT5uu5nsjpNHKtC/LwP77lJPDhDeI6zPqskIgcbhtMDkWcrAFZSQlHug3A9pdpP2LSiomYk+hWgp/sQ==","signatures":[{"sig":"MEUCIQDisHfqLou6+HhMFoVJbsPAcYafv82eowcJ88e6deRozwIgZjQVSdyFeoNnWGTAVm9gUXWt5RN9MjZPGlovpfo9p74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvExCRA9TVsSAnZWagAAcm0P/AmphNEYh4j3LkdKioCQ\nPIM5tDEo4f7a9P2spfchNV3JXxRkNN9jV56cGkpLw+ClYvhxwUq2fxa8sYIi\nUlknZ+ujHYUasmpikcwIQTdVQ42sV8cdz+Bvh7mvVd+0q/NcdOQDD2rRZ3wL\nyDP9jTimOIUTQOLk8qSxzzrXtvI5REhx2KgwFM3XujPopHPUa9RQIvVIIWwt\n+hpwetxqrqo2/MJKVunbEfoWQiBAfmj2xYqTbh+h3cLjXRDvlLh09KWyrErt\n3G8UAav85jiVE8X4arwcsTiU1zM689iMUGCLjA9Knv3mUn/NqvPVTW8ZRWLe\n0l9fV/LUe1cSLJLaz1AZJO37QeTMZU2aXhnLABzLP20u8CDyOkQJr8nD4kew\n9r7kXMj91RLmJbg2R/OPAlCu2AgCRdoNZeS6YnFsBAvRBuNbGfXB5xF0FNfm\nTTv34rTYc8bfyPEcJssaL9enJT13L7qtu5inPOs9ODv1GQvEljNQ6Y4Q86MP\nC3XvWYKXEc5+1f508nce0lZiUSASsGoMJsBBEEY1jvgT9HqAcVsqL2IhgH1A\nKSiWq9Vclryvq/FJKZ8Y0xNI0yQN9P0yVIHp98ullDWhhY48q7oYTNa8ynzM\naY14c1lvA/k4XUDHdgCU7x+leF7WFrr3uonr7bcBUVMFyjm2oB6m633kXNnu\nngH5\r\n=M9PF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/list":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/menu-surface":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.962d4abbb.0_1596125488693_0.614970477199742","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/menu","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2659cca3716eed27e0f7fd44e6964788a647a918","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2fcee40cb.0.tgz","fileCount":37,"integrity":"sha512-n3QrhgdITr3bt0Je86oCccheEzCNtZl//I8QtzQa1A8Hk7VLnCV0VPNdoZDPuXa7FacOd3v0241FtZSpKiedVw==","signatures":[{"sig":"MEUCIDRlXA2s+QIAICR3hge8ZqbOMJeegRphKdAVlz9gSxRvAiEA6o8bb2hPaM7i/k0VudUyqhKzdr3nCQ4/d4e83FcN424=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHgCRA9TVsSAnZWagAAhFkP/199H4UoJ37rBY3y5aMV\nF7lCnYyFJXC5nLOOQ2xv4ePrilNvT6MGRRFsbf2WPCtJaVY0wHUq75F9732g\nUeNVrUWW7Vgd4Vfj5nKdpdtBWLA/xqVIbDggP6Ovipm6ERav1NxfCRkRIsx+\nJ5v7F55Z7MUGbMOK25hfCb1RFSgVO18/w63WE/NKPUxWMNMRFdAJ4nlhfn+K\nzjZEUA4IjlQwUER0026flCMU0xSngTa6mBWItE3qcZbPr3QJHAagO3uY5fGi\nVBTqYK3o62qbnai4tEq7ayrA+t3jMAJk3sPVhnIXMRkIzy+aPaE88jb+VLVp\ntWqosBKSGYa36MVM1vpT8OFnpKiiFILXO/Z0KtK4tIX7HeVsi9nLtrVAzw4k\nrm31wQj57fVG+VsJFoHf2NWh3SFDVyRt5wA5YYBIkqqfmoY3Q8kTvPfS4lnc\n8iFKzMGGd5mfQMQLmLdOyjmWGqmR8mp9K2+TD+wxfhj9UUS27kqOI+WbutaC\n1wOL8fdZKA/1O9xVpdXIz7HlhK0IJTtmunSIUKAsryQ9Y9s+cpbBJMmoXwfK\nj0HknsBCvNg92DXR5Fxyzugdy4dcx5M0rM5wPip3GIMg9n8l6YQuzzSKGKQ/\nIm+riALmxfRmi29OJBYT8YlNFGXQnKjbZnsXuQKrh+T3ym5+q5urXaAtdWzz\naGbf\r\n=QEfV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/list":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/menu-surface":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2fcee40cb.0_1596129759992_0.40849885110435435","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/menu","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9482fdddd1a2d44fcfdd34a27ebebc45ac9639ce","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.bd5987f5a.0.tgz","fileCount":37,"integrity":"sha512-ia7WTHUfdeAa6Hsss24ak5eLc5Z58Ri/+4of5exNkstLVKasWNtOFQ3BydzJlhSe020B+GL04s4L2KozYVGFKA==","signatures":[{"sig":"MEYCIQCGXAgI26YrBxe7jQojdWGDClViqyC5DvEIRezOD93C8gIhAKlbAn30DfWGDsC2D/D9ED7IAAU0goOKtCcckrPaHOyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwe0CRA9TVsSAnZWagAAQVoQAJ3INZ31XkHZSGV8fw2b\nC92HoQBq4FJPIpCG9kgE3qdvnJGyIkL227WNiYWSB5MkgBSftjF1fL96ZWpS\nc15Z+pI/3Jwg8I7Rvv8egYJI22xnOp5gNPZBQTfSb7dwI9rkbosxoN7mleXk\n5qoNn0b75kO2ql7EVYlLhKKBBQVbXdkMvJ+vKbEnHE0J1JrrJeMu62hqL9eA\nGZp4bOJGi0CQqwu7HB0DqDmTecfEb7cO30OULFWuDq7LDe0g//wQ5gnA6Ad/\nBWFvz5HJClaAosHlspJO9wAsO8Pt5CckxTQ71/jN4Oetm6gNm4Czsg2TLJJT\nHaHKUrcNs5rEH4nwd/Ua516f2+bmg7U5B32rYJO+/OlXtHJrljToXgzj68Ga\n9zVbkGheMoTXOMuC7klVt3yGEd5epijMxSnMdC6IkZTYEexxdNo4cMa1Wb6/\nh2ireW+U/RUWiVQetQClg2SeBeMvPDMW2yl1XnIbIazv0gOzl+PeczRKQRfF\nAzhXtaHX/Sfdzf7gg6pgSGbYZA603nA1pIi0L9/UVaT/se8595nOoUotfNwf\noz8/OUydJ4+oNXuE8QwiexBa3wihr2J34UZClL05re84eollhXGQSy5Jzwzu\nSeYq45f4r/CZ/V3QHWmgrnwJaEkMXb3ih8Fme4OK/5de9PEWFs+PsVk3AJ2n\nCpVJ\r\n=+/hC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/list":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/menu-surface":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.bd5987f5a.0_1596131251708_0.31961621194979384","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/menu","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6f758af90f047abc81f7a912fc106444448e70","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.005e86a9b.0.tgz","fileCount":37,"integrity":"sha512-kioQfRbJ1HjyQOYTTfoU1grJZBgts0uR+FKVHxFjPy4JeHwiCe5o6lb5i+P7zL5W5KDUkR+XO8WM4mKW8C6WBQ==","signatures":[{"sig":"MEUCIGu4uv5JzaKFiSTMC0nG6D0k+PFF3LF/EypnkgPBiC0sAiEAqV6fhUNBJ8recUpupwmEFgIWj/6mnbfiafWd8HaYLmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwr1CRA9TVsSAnZWagAAGK0P/27p2KNJWDC/YUCm7bnz\nK5nKQZ1eN3BDeAgDfmeiMdaktfrjvfq+CP08rvsKkl48sdiMePo6sA0wK83q\nHFjW1WhT1R92/MtGafJjoNfFrwyA3OQjcAmaVxPET4DquzjHCrpkT/TXn3mq\nt1obWjq2R8h3FgvPrWYeAGZhLaw8PAkJJOdvY76mx4zqrBjYqGbZUUUIFK9E\nQ4/GhKWX39a/nIipEsgJGYhALCwCRmX46IQQboGY3pqxKyx7HXjY6ky1wDh0\nNxJP2w9prgOqwk9iCXK6eOXwhmX8Esk0s+LykUiFkzAvtAYZBI+vkfvXyd7I\nknbV/V4u/SNO7wTWfMOP5SXLCVwF+RZzlduYfwsIfAf2FrxcZ31vigykiiuc\n66J7BU9jvzLyLpxZc9ZITo89Z+s4gLT1xi3V5A9yVN94ZdI5FWY0T/EFd+HW\nHTjE7pbFpHDr9TOhz3xJEYMspymOz4j/jUoLXZgDuqWXDVwmBuySadUTHfIX\nsgLZUFtvH+ziaP66qXVRGGV8KeJXULmTT/E6WScvcqnpr/CVNUKasWaq446U\n+5JPReAxZiZgKkeYuQC0b9dbx21Tk6hE2VkFJU4ZsZ84Vug65WibOBx4/ICl\nIQri9fuTBN4ZBJ9HJa3rZOkMxlXZ+RNVe7sFZKZHVIAZwqakn/tQ3fk8yfwE\nBaFb\r\n=mHVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/list":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/menu-surface":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.005e86a9b.0_1596132085420_0.22544427911674236","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/menu","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdd56a994e6d97b25cc54d557c7ce0dc54b90e2e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e309c7c68.0.tgz","fileCount":37,"integrity":"sha512-WrRT9xFlHiSUkqC9HAnQDwXqXNt+U2E4dW4YzblxHWLW1v+kDLVnCZUmKDdhiHxRC0bxLVTCTlSO0eGZmTg7RQ==","signatures":[{"sig":"MEYCIQCZ5ZHk8Cu921dkn5X4aVPGb3MyHZxFKf+hgyLEPJv1EgIhAI/xUPKIcwWbSYxS2FSsE63FcSsR9LsE5QlJTgH9Wv5i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwz0CRA9TVsSAnZWagAAcOUQAKRb3HBe1/jQ+eM8Fo43\nXvqPXxPZQLKjOsvJ7s7rsgvcllGoHhgJ2DZyLwEvbNllOA+QyqWjFb9Fen7/\n8lH74c7aIQ9W2ukxXTGTCg7WWyThIC4SMb/zRW55kuUvcOzGrmxyI/RuyMux\nDhFSkw0XfV0rCO3cvPlbuXQqT+hcrce3ievgu/mN0iHcV3XyXhi9QE6EeFdR\n3vqQQVLZniIGq9GaoMggkdAVZ+FFC3tW4/+GAIS0SA1aBkhT8yYXXcJDI7S/\nmK1+zFovGxNowGnps3cXEObZydAMtY6XKwtzopmM+yEpbpvlJTv74wxy6T1b\nPTZoVluwYlUtRU3ZSxFWEhH4DEcyN5i/dBMccwgDBOoMvVLjl8pIhmzgc0NO\nacw3Lo1lyqW4ChWoItR4kwUn2ZqvvwYk/Pl31eS2Rc9n1c2Fb0qwNupP4LGz\ndD70diP4a08v8WKiWSxRnqY/f7RxGpNhOLsg3aTbmcy/wYY5YcOEuggoa3TU\nMKEecnkwZ8ey+tIKrvx+zYwUzfAG046DDC9B1MMow/lf33SAvEbyS7IHstUl\nrJCbhlRkq4WTUbldyngo8oecPSGf+92na8xB5jE3x+nY7U1etpV8itPYBoOf\nW8QV1xzHtakwCBKINNDcLbTmz8KWqTLLpX9mI5LUP/tbXjdVtSTMmVZw1M1x\ngvjb\r\n=7Vfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/list":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/menu-surface":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e309c7c68.0_1596132596310_0.46729918738094756","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/menu","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79a89de0532b3a1b189bc4b358e7229311b298a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.935a51cc0.0.tgz","fileCount":37,"integrity":"sha512-9p0sYiw5x4k04O3+gvRz6xLwmcr5osAnlztdWYgOdC9zvNCp3Ce5os+BXK/ilKl9fkc/PEbAURQnHxhizsVfww==","signatures":[{"sig":"MEQCICEsljyBqJsDA4KqhssfVq4tHcGi7C8fHS6zmQAywriLAiAA+oZGkBeb2e0hj/EBhTMpbcnx8rKJl9q0yXvIW4ZHvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+zCRA9TVsSAnZWagAALiMQAJWy3Dcoc1LePh8wrkeV\n+jYoTNu4e9m3537ew+Z1P/o5mG4nbch3VGYrtrkjXHi4VDaxOw8A3f9+4CVQ\nrjNuqWJt58kBVwuYMyvttXLZWA3tscC1WHbYYhvUk6T2CdMm9uiSr5nspwCj\nzGY5u6QrDJpPt+LWqw/oQgh87g5jyUyn9rKrnboMDnCW6T4yzRb1DA3Qb6Ha\nMHAmTB7I6bldLjW7GyqqWwE2dqRRXdYmRgdytLhuWUncQBzK/PfvQbI800Bf\nwJ5PaHBwvKAdI2BeIT1hwF4CSq/k2GAaWR2G6pFwyMQ7fHOX+AU6pSHNj6NU\ngLsfI3V9iG07kOEtYd/HSnoYxuInXCo8AsRq++3K+CY6gc5+XZHObvmvhH6u\n5OnTr7Ci3FxN7RdXhiVmZdr8OM1043Xf9yV0rVktelacrbyZnb9Ejn46cd5t\nD0FAe7mikDlHl/2wwmnHJjBRF0IGgODH48lno8zgfvvQAWCW6ttpJG5ELlnf\n3DSuXTfmSvkxqVpU+uvMaT1Xn8S+HSBKdJe2fUnYrorKftg4STHqQ2/5fvIp\nMktmGH0yn6BISQW00SxP1WO2ZQCEfNFukv2+tek/wA2dY8XA5g1gZruAkP1o\nNNxEUOBeTHlfjBrdvb+yZtXCrCnXadlwSz+cb0QOzzxgbejBmRaV9WKfTKV2\nJZ55\r\n=AkXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/list":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/menu-surface":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.935a51cc0.0_1596133298725_0.25369209454339403","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/menu","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ced2dabf49289ea597ad0665ab2cee88dab45305","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.74839da7b.0.tgz","fileCount":37,"integrity":"sha512-JEZ6rnolymevxlOry6M7Tps7IO1sjZ7CW+bVSP9bbhhrajwfUcbyY6l2YHGHcd08JVtSKH6XgyJEmgJiV1QWvQ==","signatures":[{"sig":"MEUCIQDgST9T6Y0gPVVBsBtrue95b9kuLe48ahbxYh/xgfapJgIgDvq5F5w7iHxCqPcbmrE93XL2YqpYdD+v/4yoaVS2n4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxJPCRA9TVsSAnZWagAAmw4P/jakHrLuwrPXiEQp6Vch\n0tLFsy489CW/CE6nU9wa6cktRmCiFtJIJw7hWjimYjMNSI3qyupR5pnjDa4k\nMigVvLSYqv0vxNHOKneXPfVkH2xEz1sVDY/+BW2pGpkEAOeDK2mAXahmdb5t\n/IJkfXJ3TwxIPGWwRvsbREi68FKDL3lFC3A4seEP/6flfBe6E4lpZeUPIZ0j\nc9j+Tlguc+ptrTSIGr1kEcchG/EapHwsH1/k2qqBLN+DWzpgAQCP8vYXUNtO\n9A6Lv4r+xJYmBVxFI+4/8dGtW+aQWqNTqTfCelcwmEdC8mOIHMsKs2NhUQjV\nCiDnV4CgydpZ0RP0mLo2R9vnZqZn70p5nJBFxdhXlKXuzZQsw+h+0XN/Em2K\n77CXdDKPwpy+ekdmu5qYSRYtnlg08DF8NVKOtadGM7hR9ujLirjp67Te7dbb\ncKbuno3i0KVgcopAcphhpVnJsWehJgCNgymf5vRVR4BzLtjfAwuQvnOZdxfr\nV6+0Jjl0yYsgn29krcxAB85sgktA66AKnh7BqptCkQbLxmBWHt9odlUw1Oaj\n6jxokXvL8+MXy14/M6Ixqjlv9wzMLj07d4vYgjvXo7y8v4GzYOVy+7uAVp/Z\nUxtlUICOWwzwdT05IQWQEKD0STiSA8aeUhGOqNBuabbpFGsAFWsA7DnLwDtk\nsF53\r\n=3g59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/list":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/menu-surface":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.74839da7b.0_1596133966858_0.19326145443375475","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/menu","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9888b8e968885f4b39e0d67a88d4022f9f75ca18","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f041a48c9.0.tgz","fileCount":37,"integrity":"sha512-n2PnvQkWnLL8gophDt/uzeyC5IO30sGRRvlK0Va7k/igufMrKvTS+dCbUOY5kq8rsXfYXCo990N9iccYyWf5hQ==","signatures":[{"sig":"MEQCHyTBw565tFqbEPfDMnUVQZUyk2it5xZbrZtqL4+fAD4CIQCWGrakxJ7iZ6wPQJVtZeo17ABHFoAzDCtAJEYh8OSJRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EwCRA9TVsSAnZWagAAkqEP/3n3g+K/oBMAkdNJfRTT\n3SeQn/18ym2c/ynwaO5fsKHDsudeceo8lEHEsCVHJjQjZuDsRbOEI8V/PJ40\nnW5EK98khO+iGsJnpLRC55zVjmRhpv/M4jU1vy0PAl0XyMeMXbMRWAOHtsbG\nnqVWQ70vPfk3xc5LhyiYeItKwOAYKYi20dLoRG25XKkUG9ihXfzvhSyco0LU\nt/2pFiOqI6Z3bHbeYPLTLZYkklotUht7pmOSN0isIx54YXVzFHGkR1dvGG8z\nNQQgg3Q9HtizuwvJ1cOqbkdoEbcdCLyA+HBsVXuiNUjv/3Xn/5VV+4CrF0Wv\ngTjSTYBs/klSjm8GfG95Vi3+IzWoxxsui32lfKZYtCtnm6e6rnvGnDsOhkLE\nnSvbYXts8UOfg6MY6/Kl1jx5V88xZPXBtXFz2ZQRQJC5kfjltQ7TUvOmHBGy\nt931L+abd1gBtWvRWGD5HYpH0RzZaXZh5fOrSDwI1/sXT+lb5m0ipXUqqcr6\ntCsftelor+okznpBf3g7NtHcncbhzFzqe28hEb7fV4aRBmUTpmih69t0h56j\nis5zklY7T7iBt61yTT8xxDyqxr5hiMzmTXijrp81FZB1uwwo0QzFav2kTbh2\nTEWHg1g8cwkYNpqgVj0bPBO2v/LN3+l/5g0oQMdMOZ1uWZUkU5M8QeXBVucY\nnEG7\r\n=o7qG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/list":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/menu-surface":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f041a48c9.0_1596150064143_0.8804430990297683","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/menu","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9c53b8b817c1eb21f5144795bfd55451c7d5fa4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fbb1381e1.0.tgz","fileCount":37,"integrity":"sha512-OaW9MyZaBx3yiZwB+hzMt06yIixr+z0wKSp7KrL3KLjb8i4knzwyq/HdmECW3jROyT9ypJOFwIK6yjkWWu5PiQ==","signatures":[{"sig":"MEUCIQDfwTkUJbgwlsN7YsfkZ+fYcyjKUcZrukXrQaM7iNnm/gIgUM3TKJlhDyvGZz0M/cTj2dM0Jpxj3PIdQBUnhxne0SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD4NCRA9TVsSAnZWagAAjdsP+gMb6G0bgJSfYOANjCjy\nFMiXUnPbl8YPjM9Lx6JpN5uiqlKdllpDUD1Lf3nseGX8LNHkIpobVBny3Oki\nI9EtLcRz4MwWlOYVN5R42YRmQ4K3nR9KgjbE1F+TKNbdKKmyNUHdGxByPh6G\n8AHDc72CjIv8/DI4hvpmRODSwDz8l3dEdhTw/kEmD4rL1E7UtTrjkLYDMmxj\nzi+85LOhrGRsrcY38Tv8RDzBPhTZyDV6wMvtktJz/54wLbD3EW0N8uPcghdp\nJR3CEaW+a5/GBFuohHXXRTfV0ZU1Buus00Sr5Ix/1bYLgLDVvNa8aXR8NMd8\nTJsyFZ4d5hCf/MNy2/0jsdzMR3aKXTLo4FP59Udi2/e/p7jgVGFRkwMADjeN\neOTgAXeM1guMeZxTcQIJBF3gcXK1jnnjsXxuDNvmnZr8OiiEDTrNq0Jv+O6c\nLE+lEPrxyzBTt5WZGu9oTlqfHEcfweVZORxvZWKlRTSAbKf7ylELhsaGkX0P\nSuQY5IoL4nBIKK22E6Eo/7qqgS3KNS7Qg8KCGcZAokLOvmF/YtYyjqwxNmI/\nI/dXhN4E0V7IRhvj0f1oB2aKk5mYemLPTRoZ0ueoYj8eGeJNzXnZ/wGgCni5\n0mZMpT8hHWPXUmmxtGzL/pmWS8Hc+4j7QkxbqQSmXFNJujox+7vv1o/19tyJ\ne9bN\r\n=H6xI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/list":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/menu-surface":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fbb1381e1.0_1596210700584_0.7102146104053992","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/menu","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d2f2805334a15efde51f6589b38008b46b572c6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.7f61d5785.0.tgz","fileCount":37,"integrity":"sha512-l7C10GrJDA/uGbqPny51YFKuMRA8QzBhDV6co7iOTF4lsE24z9uYLkcZ6091mx0t5osTIJGl4iVPua6/1a08ig==","signatures":[{"sig":"MEUCIDkl4mKcvCu6oZ+Ixg7VyNtRtO84miLiAhJ+rAn6BF1WAiEAlYU4uLYy4B7pK7Gwfy9JB3mfpoSpVIFvXc+8Y6k8ZI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFO9CRA9TVsSAnZWagAA5jYQAJy3Lkv/PS9UBVYGn19D\nXdxAyz59L31MxeLqX+uis1RheIuHqZsF3vk7o0Xlg3Lw6XFA9mCU2WX8rfQK\nzxUPU83vO4O9pruDXeQM0Uw9+kD8XctIsUg63IROFD6vZZ+cqyBs1rFi6Nqx\nDUvOZriYuaTW+F8CUL+hdQh6yPe5YpeNsA9qJQTjaJJFJQg5hcBVkniucIci\n71MPyDVZT5m37daPMFGPLc0FHRNkm6HMLLRISagbRL4imtDe9tC4x1MXNi1F\nw5i+1oWJ2HeCrx/RL5hggjvMy5sOHG4/RjSJp1IPmxqIyaTsskM5c/R5bqiQ\n6NZusSn+4NLTR/c+mvEmnm3iaHrvkVAmbgXgxUxQ99O4hWb9hwK5bG77NGMq\nYrwVPKGE+bNrffDzTraq21WfHd6GT1fBA1/TvLSsjBKKprBBkqufGlSGfltU\nVee9EiQ4DvZ1fBMfybag87Dt4/CPfxuEouQq5GJFJ1thMRyGOIYSCJgWC1MO\nqZJvKCOHJ0mAo3JBLMC+KW8+82gp1lb62UGBa64mUa1yjekfTg1SqittwUd2\nHCapf+mucnCixhxTTExS4fI1TuAkRqgqOEi61ijBTbpUZfs7oK1i7Yt/K00e\nVq/NJIWRBeTA2rwhh90j0FoycV2pAYGHJg0BcVS+4sNLH6PmXxoprd4eymbG\n/8IU\r\n=BGrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/list":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/menu-surface":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.7f61d5785.0_1596216253304_0.16902418508777672","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/menu","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fdec053681539010c3dc8e8e764fe881e371d1b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e1bc84d10.0.tgz","fileCount":37,"integrity":"sha512-1ex3ixWsGw5gg/IE8nXMi/x1R3z1/Lmhy7Y9xgoZ+IdR5HgLlZhwKuAW9pjbJG8ToJ6brb8cV63vEiU/GusnEA==","signatures":[{"sig":"MEYCIQD71zKMZINVrSH+syTiyHdsS/u5IWP/ljclz1KJi4wiiAIhAIPcHF8+1t0hNNza2f3ay46fAew6TyTWSpEXMrpgMEnU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7GCRA9TVsSAnZWagAAj9wQAJ2dRjZ5kfiGs8gGODeq\n1ycF6brb8OIDgFQZRSbP/7JMBrRc+ypREVqCsawL9H4ff6J8t6pwNqWBvRXI\ni1rScxX8a/4L9f1TikSj14+haqBGi6r2NimeB5Dli5yU559mxw7RUoYOGbzp\n1WozWL3Zp//9PHLHQH/A8do3w+R6NZ3dwosq1UiFh4fN3Xvn0GwgyLFZY0bD\nO6QShzcbGfMH4IaqhEoIXxubVPqGZx3MyuMjAeVru4EBHCt1tsS+yajG7i/9\nqWx7Bf22gjIUA5S97z9DrBlHbich/j7bRTibY5GGQT4V/T0wZhdVkYMEn/R6\nwiOIvztFGZmSdpY4e+wY2gvkxzNM+v2R2GUfsFg00ceqI1sZy+J2MLpgjeK1\n+lKy/sfIaemGVGpsNzeP1N50gROz/lU0S0IPYq/F+kSFulgti4JT/G99c6KE\nhiiQEQh5huLgkHCA9WBQEA2eog7NzID3vXs95U0bg9Eei7lsVPRlamX7DS01\nDJ1/VAyIa4vBw4K0GxhMCb6ZRUEF/SZsLY8VoRZa+VBN0//1gKnndopTRKTh\nKI5ktBTMBszMnLYxGYJiJM+2zuYTTDPlY7xFPF8wEET7fq7W9LEajvlmun1P\nqup9KtODuuKLc+jbx+elWLcJrSmY1EyifE68xueLZFtGBtUGjcUsh3Nj4Gnm\nKHbO\r\n=4u1S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/list":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/menu-surface":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e1bc84d10.0_1596477126166_0.9192434925632993","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/menu","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97f311d336e837a0bb9001375f2196b741a7ff0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.096a7a066.0.tgz","fileCount":37,"integrity":"sha512-3oEULCU3nf28U8Rl+nSn3KNtLqBSCKg/eF7B8GDfslBO2nBmL3MPjIbMh6/encl5Rv/PE6qmOcE3LkZ8P9LAMw==","signatures":[{"sig":"MEUCIQDiGKPo1yQwaxuxPyDxyNUR9zeJ8QtH0IqiYcR8SBoZcQIgDH6PAE036W13CwwW9lVHKOWV6qasUIXXQ7LghPW0pBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+OCRA9TVsSAnZWagAAQ9EP/jGomhHokD32tZw4Z5M0\nkFI8ilxwT25s7upBRQNz0B1jkQXdNe4vh7gIkksXNUGlkuq/p4ODDUPbnO8G\nKkR3iVFIXjAFq7TagB+5m6Q5lVoWTC0IOng0qvHj0x7oHofzX1n0cDiyrI1X\n5Zl5izq6vKi3GfNzuLXOkK4DqQE/7JMGK72mcYQBwHaY07cVwO50jUIpKr6i\nijX2gVmqdqVz8iLbsR3PpVtKIAL3b5JZczPD66b9FUCTzfh3adjEbLr6RCDc\naAIDXYDWX8+UGiNqCTo42ClhHD8Tt+NGaOvLc+kKCdkAYTLf/wpCRbblDo2+\nJaMb9bGCyX0BigrgBg7gS5Sesn3TfxUyA5UoltJMI7TTlVf2JuJy9YwIXujV\nottfGzYqnsKdMfLJZx8mSX3LKmRYPFOYeciQGV/p7Pdu2t7ORv1DGFwPRLTs\nlGuV9mz6YiHV5kOwup7d0MY8UdzgFpM1YvvnaWbGGmvYeZPL9fZVAB4YsfNB\nzaO6ekN4lpA/sMqV7iEI2Ow9WHhdPodFIolLDSZlhgJUrQyvnoT1JYT0SzYR\na8LdjNSftRhE3rRWbvh0GO+c7W/OZkq4Hs5inYDnhFmVq9VMXsG6Y6qzmQIV\nnqBT0lsuqAzzSLNxc5xWHr2xlz77kj80d6W3HlFi9drYQ7bGZkpNS8wAGiVU\nbFZX\r\n=LZbi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/list":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/menu-surface":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.096a7a066.0_1596477326052_0.28959047764739787","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/menu","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b04d3c012fc6f191f870b3d129a3be6e61d2e067","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":37,"integrity":"sha512-W6OYB9cULk0XwulLzLY6Jj1p6dvojPzoxV6ELZJCEoabbGSyxUzLOfoNv7JaSp5ldx3HtL+Fn3qynGp7kxgZhQ==","signatures":[{"sig":"MEUCIQDlpVHwW5s7LHWGWXt5HegVLotHJRM/Qjyr888h4rLbSwIgL3OgyD5BGsAogniBC6orpAvA2Hnks3rXJQzHskQV8yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+tCRA9TVsSAnZWagAACD8P/iE+ZY7axTpF9JXanRND\njZaQA/qWioi/8eQwFAh39XeoBhoL7DA0AB3gyZFevGRlrEehzwAo/UlC1eIi\nd+xBtZY6KLsIxMhocsqeYwlAJAiEB/PU/N65PVPMeznUlylwzh9Js5ujswgm\nddFyPwukDy3oo/Cdt8Op9OdBqdxX8GxH/lBvK8Oz7uJSI9m+tg8ZGj8JR9O2\n590fkqhRsb9umSgfVTeDNy2koFMTq5z1h3JNOvAH5ytweGbu0vh6yq2Iej67\nEOprUAKz5Noq4A2cxhIGrIHAP2834C2UCyiXJtEgHVXGyK+TdIwuWbleS+iG\nMX7IZel0PpixE9bx3ZP29eT4sC2RHyvH/0zOLMnxUsHbl+8NWtgut/Bbi5zk\nU4ZKxEPJYme1iKrSBgrUg0/fZywmMmV+1EVSUVpvV+Rw8+jIhkIWWnQ3DykB\nsa0J1vCXppL4RsZIGvmGVt38fu57zW3Jfj5GTYMVn3QEpd5G+oaMEyiZL0vf\nVFs3BB+nBd17xCpNM03P3ZSK+0dtrOXd9xs/iylQ8CqfqWf2F44PVeuAj2Lz\nAZFizTKfs8lBv2H/Ntay0TUz6Vx+xGUWvyAwPh5zoLwPZTT92vmqbUzzBSH6\n9FEsQFhua00Z05g6rDAPcH4NH/9GH+mmGgvGbgrZ/LItaTl9uu9rCs1JEvzT\n1ANQ\r\n=jzC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/list":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/menu-surface":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.aa3a3e5a4.0_1596477357203_0.8033191569450029","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/menu","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"014b4ee500a9e2ef2fc3a5b8628196486f808074","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5903d39af.0.tgz","fileCount":37,"integrity":"sha512-jhv6LITMhxe1hF8kT2QHsh8srud/VntAAha6pELEc7+zl+PWGmPYDIElhHteab9Si2+KqGmuvzQAQU3fnhqiLA==","signatures":[{"sig":"MEUCIHrKEvxvDVkxC0vl78R4Xqqc2I8NSURnna2eo8lSoEcJAiEA+ZKphJ8XebCDDjEac7qmVGjGdMXq8Jnmzwahxb0Fh7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE/CCRA9TVsSAnZWagAAfRYP/ibrFH+lWDHQje6FmQsO\nlO+UbvjCf2TvK8FJzFf6/u3YfBivOXK33ZKWWo+yJJY2HuAnf8o72/UwkhAa\nF5cTQgGlIsVdrYoeWhjeMHZZODEXkcza17OGmOzcNujmhxsp0LlG/r4EEplp\nG1xrXF4l33LloHfeLTMdcUAfMSEsWM1vJfnYDB49dwt0sfT0UmDiAfzNp0jR\nefD1wXm7XiNx/O6kXh6/tUVnrlP5Fh1zFsVDr5ia7QNby/nNYy7m+VKvjYbQ\nC+4w9Lt0WBV4xbtZA7DFrc+wmCx5PqnqK0AdK1gcoDzCMTVQp4edavgEwAnv\nGpre52SDinmeEm0Flz1/VcDshVPP5npCZZNC0YKtnJr7/x1piIOoDDYYo2l1\nwi1XWlHOBnPaaYmup0dKz/mYS4HRtR5I7Jx1MzDCIh4kUJjIr5HfJyE2toGl\nkYsRRH2KmWyLFD+c56f/HN1y3zkX6YzTCGC/VSddUU5i2G8+KsNilCj50c4z\nqgojvcNBYBbjozBt4hSIMQqQWB+j0mIA2XmrgtCNWCrkPGdC58QcNB6FBUgM\nF7SCOkWFJtdEReDulk+ToZQesmdFNuBlmK557YxUicQtgHoO1eERVG/2KWqO\nnFz9hJH8Lroxb/WUPOiZyOq7jgIIVBuhhjENSErU68OGZIMu0PzzD88YvcK/\nFBQk\r\n=1JY+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/list":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/menu-surface":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5903d39af.0_1596477378402_0.08493561422533413","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/menu","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"320903966ddb397d0a284f0c11c087858bd01e55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.72258f898.0.tgz","fileCount":37,"integrity":"sha512-ag/5iHlqi2QypHidNA+4WTrJiNvqmlIV8XdrW3Nd/qFfd2ncoUoANu6HbaFZnLRKse0qdXFMG6aYGA+KLdMSDA==","signatures":[{"sig":"MEUCIEOTZQzdVGfy0XPz+KBM/+Kk+OB2MejA0p9fWJgRYFWEAiEAr9bK0HFxKLaXbiV4BEwZO8J5eGNx28hjQTW3hjCag7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLd1CRA9TVsSAnZWagAAyD8P/A0M2BzK9Xb/ja1A2q3A\n8QmN/FQF40ktw8c/vztigadcofLrWIQ2bVBt9kvi/L6aGEHoS+V0Xhvu2JO6\npzTGIOdj4UyYa+V8wSelkX4MbGUbgGnoJGrWJf0flYJpreAyN79bdiqhyisA\nidPHGS+8qmPDzVlw0CLKl6dwy7I4L00RZ9Zv9cVJwmCTW8wgdodJUqS5JPvo\nRXEXjIkhzk3DFiBnV0cipfVRc/S5O6EwDP4Bh8LTDAKYSVfcC3j64GjNRtDV\nu5wumN1YYTns7mCEjxyAZj6bMIC13x12XsXbCQbUc64GHZxXhCBWGtNMihu1\nU5nMpE9Z3Uo+zKekhPwKPXWt5WNhdosv9FnQPkeGToYY9gVR9y9AShJJV2qA\nYpkzClvwhHJ3vTUGXEbPRR8HJWiJdq3ryoUIYop9aCtBsxwZvwWVIk+qwwBZ\nOTmjQgb/4sZc0D6vv6kfGV12SKLfNAH3t2G0351IZubx0/Hkp1w89+4FSjf1\n1BtTQYCIy1BuBnFqFWiaYwE50WNOZpCSLJia/AV9oPj2b0MvgTxPLObCN+HU\nHgHkDxSfKmW3y4O8RHyWA/pXFHXdN/BJprhy9oJz7kbG7gbv/iykMLGqFW19\nXvFfe3AA+IValSCZqwLbZDPTz8JpDjYb7edSEcTesFkUNM430WmuFgMxKr4o\n8K+d\r\n=utDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/list":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/menu-surface":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.72258f898.0_1596503924861_0.9994894514635415","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/menu","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b1e59c5d973a21e3c9fa3ba9e753bab151e524","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.1b44b43c8.0.tgz","fileCount":37,"integrity":"sha512-3hSyTBQ29oIFeVtLADedIqc/8ivLUu/knmDmxlVx/gHOZSxnqKVXyqX9MrymQRAPQDhtm9pjkVQ4wcZwnxCB6g==","signatures":[{"sig":"MEYCIQDY4iWt8Sa/ZXjzfkKbNZthpAlkNzB2RPvGoIzyGlz98gIhANkPRdKOyMUgCJvkTBDOVgSuIVXslcPBSqA9bNgpSZw2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZG4CRA9TVsSAnZWagAAspkP/ilVITX4S+JL6ZCMLqa8\nrCw0zhq523mHJ1qf35o/b4JCeA4sCnuUrITe7IpL9Sfhha27Bavs3fdHlWqo\nbHvurZ5qs4AnCyUJAMaenYPJwXuhFYJNh9oqBC40Vtwj+s1lE+mcA68n393c\nzG+c6RHxJZwC6arzCIcnKROQmnYiKmbVZsMhbVdtBqzSv81WHWcI9CiMqSvJ\nG3CPqnRzEUwY1ks786OF1MAmxjlAo+2HyKfsKZKTi08Gt827Uz2lHep7cWM2\nYwsU1jAbBcHXygXNi/GJMF95XLny/2t9vEgtqa2+dx3ic/823M/3VldQzu9F\nC/34cgu+sQlFL9V31Ga6ibkFLxvLZqAbcyyVAO6VHCyXMpd/caED2nIQVCAf\nna36xNRv8mJcl1bUexIdDsvE3LKRF+ytXJpUt7/I14jMdeHXF0/ED7RWaNff\nie8ja++zApvl+N2Lbu0SFJkR7gqk227YTGqJsa1L9QJNg+Pi2/okJpdGskTA\nxPZO7FOk1UNNrGWPTg5C3UrNo2Nr24h7yI82xhuvfRon7iPIwwyye2Sw4reU\nNdzeAyo6BjPOQWfOikmlVyXpxCtImiU1N07XkxtK3a3eHBTQKGckaHZgSOJF\nr029LiYb8ZLA8QR4wGGOzVrU0cXyvEn0WQzlzKLMGnf0/q+22MOlBl62EeMn\nqYyr\r\n=CurR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/list":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/menu-surface":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.1b44b43c8.0_1596559799507_0.1612010160524231","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/menu","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b0b6cd926d74b2a9f77a90bbcb81ad44aabe39","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":37,"integrity":"sha512-bhPXvyxRjJ2kfpcwMPPpLEYmyr60O51MM1JRo0L3Z/8OCBUisIVmTPQWXh61mb3eEzy8h5Jw/HMYCHakyE+FbQ==","signatures":[{"sig":"MEUCIQCD+OUmQq8/QB8WGycaJz3Z7B7mlbQhyoBYovQ0Snb98AIgRcylZcADEWn6aTmh8LLK8J93n5WC2tHUTtaZXdlD/+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQ8CRA9TVsSAnZWagAA5woP/09f33CdAmfJSGibq0NW\nyzYBfyr4FzTIrECrnEiDyGTS/5j5RP7wCll2iMMH7GYyzbw3A/xlNtRMt6VP\n6kH7cAgojx3Zuy+MzHjNunnFVOeTpm3/hDtpmze35R7hqxy5KD8bRzVOGiYe\n3qjJysIpVVQDk/q3XS3nz3xyWt5renwe+EJEnKVEmRMhquPY6dQRWbqlsZlm\nmzaspity41VGeZvYfCi4ZDlGSsP0d2/bd23GNbp2R2imSfV79dHkvM+VqPIY\nCFBzYk3p4MxK+8LZGxK8NsF/2HdnzqM/yPmGWqp7oxO9vImtyaBGSeuNKt5P\nJvAISKWYh/xP5L2Ka6LDdmhhuhl55U0CSXWOp7fGGHEet9d1wH2GqIGxrCiF\nQRFTXQTWjCiVAVZPEqvS7GT+L6gnU6GVau+Pr/l2QihMsqjWJni7p4b8ZUk2\niW2q6m6mdGU9icb4tWSAYXXLCl/+rcJYtVew9bKpULxhPUyN2R9XTyAwHrpt\n9Rf2IwQXkj78iIYDbx9qvod+0740MeV97fUTosXMBC2AqJPdso/D+I4ssBZK\nGYe3T8eDRZkbG13eQZ+d9zvLg8DbnFvYLjLrpfVlfQIMRd8BOJEWiwLPhkI7\nR2L81If8JeFl6rxx/5VmbEbrKuyvKyZgzWCW+3ZQNeTyG7pzJHkwxUtf8WKV\nlRYG\r\n=YOlh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/list":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/menu-surface":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e9d2e2f96.0_1596572731628_0.824717439974203","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/menu","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b857bf953f565268b4f01972b5979c9a1880476","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b9dff0a19.0.tgz","fileCount":37,"integrity":"sha512-1FTxneFxJkAJZftLUDTPH7anaRk+/+EMwuLeiiIr0JL8pjrdmmpvU7pFv2a5f3yEiuu0gWqZLqwK8L1F4fqGHw==","signatures":[{"sig":"MEQCIGjutt8p8RHPbrQNk2lsZDIgWsLGgZf/qlrUu30ERhPBAiBJJL7R05FMDFXmWXZ36B7UoyAaydhW/yCnq5D/nsoF6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKix2CRA9TVsSAnZWagAAjtQP/3+amNC6R9P+AHOhK1ij\nEri9JD/hKYz6zP41HSOEtPm/KnXFcGdGSzPjmLN13k6xLrQY7DI6Y4uYKpvS\nNAnX2KdCXOLy5w9ljClCAKW42FwFhzqr35Z49zALbE0BZBKzeQiQTZE95ukz\nTl1yRTYYrngLg/cylg3nIaT6Mb5U0TbElI8mZDgzf/fkz7yNT7acH81kGC29\nJbm8iPNycSQEOzwPrJOyXWJtDmwASMeFWNmOR/46vFR095Ru6x4YfsNn0mMJ\nSny4NghvoOLP2SXVl1PABVjGL/KbwmkOuMGZf09/daZ3sbQfw+vc5ci971oO\nD4XxEO6eD7RvaTABzZ6FuQZe4RPjMqtf353Ly4t+npZyEfeO2UI7oFXXJbSx\nslhlrghmht7ltzbAQVdkrn7Lh33zGHNHd7cPzNcHr4VucFV0RlqrZzRqlmGC\nlSRGR1eTZV+og9PmQV9DKl9oAIgNYgZ+KwNd95saEUF3d8dnJfbzoHcYIHXS\nnLmLmyZH4MJlWPdc7OxSGDQIM3nZ9pMrA4z50yTTo6qA6dw5KGjW0vIuTMAV\nKfMoAzJC/mbnXVpsoIHk+QG/RGYEXwa5Qbo6F06jxWNqtigX7d13XxhQkRAu\ngZ915SI501AmsOR99zl24x1fh+bGUTrYMrWp6dMOvXSsjq2Yuj/w3zsp39kt\nfLZZ\r\n=qH80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/list":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/menu-surface":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b9dff0a19.0_1596599413987_0.8512077251619952","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/menu","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd60ba363699ccb922944b6a7bd353ede7a9dc29","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2bd09a706.0.tgz","fileCount":37,"integrity":"sha512-943b/c34w8SBY8EC0xuw8jMSk0RxhaWZq8S2q+L0GCOxv25FHjdpp6YId1jFsqNHS5AXSmTdfXGd7kzhKuDJlA==","signatures":[{"sig":"MEQCID159dhKHSVOH+uzTO4cGLa4WnLFM3RUEZd5Q3IAeX8+AiAwIkerA06+TiMpug/jbrzIt4tTG+VNrK1WZJgdAh63iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2zCRA9TVsSAnZWagAAPAAP/Asri3PRi4Go5uU1ihm/\njvgoZ24oqyU2eBSg7otwcnWBCamXw2rXoPkhJtsjSQq9WaLLpnzATHLYqyKv\nItW5pirKcoNBdTwib8sj7gG2QOCFcs/fRC/iHkVzjob0IJxLBEuPGZijreEK\nOU29dHbqrTSG9qWLgsGtsooxAW/qSEgDlwUAcbcXPME0Fqmw2AqTTM7qNkGd\ni2oqTMx4e7Rn1Lzwd9jYrEyBVp2aS7E7ND4TnqFylw+LTgh3fO010xc1k/OZ\nyfe83G4Z/Tbt9hJR0q+7VSm4nbszssstxsGrqXgyzvcDmtt4SZqFBzK0Ttm8\nQ4ddEHuyUdwdBk3efkdzPVByR8W3ZAmQiL9afg3KVNkZLtPRsxLn7iKRvalg\nmxvkQqli+oyROchGz8FlFK8/wmBziwaGcwTx3/JeLY+KVKfh9HBbax/QiFhS\nobra105mjvGD5/tZf8XldTlHZgrsTJQAeR0pfiONd7119WA6xtk2enrF8Hdp\nFZT1KOBTYdBuUWIx1x47nDs0cVd4jzVgwmB9JUtkYqmaEfCyuVaHt3kY7LNK\nSGQ3eUrBZTK3rEpTh767Mpg/2zsgDzKMQhLX3K43NBBJK4iAloXyRS8cpzvx\njDQjS8kjvjxGpbwsueItqoHl9O6uzPvwt0ueFmZXkaaOWceMISr24kmmMqbF\n9XIw\r\n=W8ti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/list":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/menu-surface":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2bd09a706.0_1596599730914_0.015790202739069947","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/menu","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4598e4e32b5e0011a0b0572e07f7cf90d7b95373","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e0560522f.0.tgz","fileCount":37,"integrity":"sha512-MaSSC6bboqNV0WzSyKb9aqLzErcTscIfM3eE51jHAc1+wsJCx5Dmit5KtMTwPGLR6UtDzbBEVXIEiF+Gkn4Nlg==","signatures":[{"sig":"MEYCIQCYdT2NKum9Z5103fYGyqoZafdET+y3efNUtcaESsyDHAIhALgCx04nZ/AKJ5FB5sKEnFvpP5nE2gsCHw/Ha8hTilI1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqWCRA9TVsSAnZWagAAuO0QAI3BK9YhMa+EKPSCebOl\nvvBFgOwsUqwxpEkrqDvp3a+b8ayVNHFGleZJYpWLAmM7l+UDTPRRpEO8CKTM\n9/bB4Jh6/9iIwLpzNqdje9NIIrt3xsVZghqdjwnYz/p5XTm/4AFiI/p8jw/G\nRN/42JGKm6Iyvk5rZY2Jgsoq0HDoRNpNnbwBRmFUzqhyQRUmo6PuXO9mHFg3\n3ttffpQFZvLfXabViFpOKNi4NSc/WlU1yoIsBshGSs3QLvWHjxOkXOjTtK1H\n+8mla3KAr9bYFMfWuqvvEXdnr9BgK48cfNBLmXDFERQCcf4HnmU4kcr4JZ41\nHC83WIH+Yqkawpn8SvomjPmt7rO0INKBTCrp+5zaFs1ze46XKXVM0y3YJ2qg\njuNtogoPzw9jUjgzn9RTd2USGzywCCtqPo/MjPTdZYHZLPQZpEpeiX1fNx/Q\n+t320ni3Ipnt5e/AdNGXK9Hq+7vXfk1rvM6OY0Kp0bgx18PG0xtvA7Vmh4i9\nadPZi4I6Nnr+ufx5SCpU+98NvU7z/rMb8neqtpIM03oNVO9P+eejSfc6A23v\n5fwlJ+tjht7Tc6t1PyTkL+qh1JC2zCMd1RfcUOcxAgMY++1hvebsn8DebUFD\nOEQBLuRbwgOftOtAr+1vdU7u2ju+Qd8epAxDm1lkGOd+jDE7QkW0sWBD6qeQ\ncqBj\r\n=5Sts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/list":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/menu-surface":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e0560522f.0_1596648086168_0.4430984070170516","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/menu","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f2b1e02fdb4eb5cdd007b451169042eed82c36","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":37,"integrity":"sha512-icfvII4RT43wVErGGMA3uSFsYnDbfbD+ze//HQpNvKIXaWjzMQst6FIoIn5c33q0MdU+mpjlhzRYBrowIgX2cw==","signatures":[{"sig":"MEYCIQCuIb22gnaAaroPHxrQABh5wa5qT7T0PyEDjx1mub9qdgIhAOVo/XTre4riqCOgY5p0IPcFIaJWCRQRPDxA6idm/YAM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8VCRA9TVsSAnZWagAAGq4P/1HqFW9v2K4iZoOwFQo7\n3ciNDIrafbEQ1QgXBnrepo7S632MLSOtkYxMcPHnO2uDjemtIznGCxvCaazd\n6Drq53xn+Xp51V9u71U8/ewivamVrvYle8GF9bh9dxSIQN5CYxeyomUTJI+L\nJr6gJWgt7vXsB3Rhfz75FjonRU2z40oJQpYxr9Eeov7BKTPTTp6JifMw8Dyg\n1QcIRFjXWtgutOFcj6JGD9pbcHE8APfsoJv8d8Lh+S35ccPFkxLOkWYIghcB\nlWzLyqA4EtqM5HIfQFSKmWtKBRSa+i5JiJYG28vy/MEhvCH9kowG72LvGF+/\np6QH3+tMehGY1auPNwPyF0lqajVZBUDdOK1p69qzYQJBGFs+BiW3EL3Z5aZ2\ndFB7ctUoFran5oa4uu7Mx6ROwJcPNddCXeEKakgz/HajIuZMndnMUAyp4WPg\nRiT6tqHWIqslSywhc/IRaNNJmQm+jxhO2XQ2czKbdqMYHAmxCQmR8VN2dLuc\nBfZ6v4zrxnQM2yfmcT9WdI8P/NQGWiiXRbq1ubanexiyVjtI7fCk9qi9NVF1\n3Hm2k7b9AKXrqGC9/E4dOG83X3TgeLP2f65VO256CFeg1OC5AlAes7uoifW4\n6CPbNbTtnN88hq/35M0opgrB2zxlpieHPfn7cKZoZgR1WIuvIUmQ25VSn5mJ\nvfUw\r\n=5KAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/list":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/menu-surface":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.08ca4d0ec.0_1596649237247_0.40731999146714015","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/menu","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35be9201e0a68a1423521402ef21166900d13d1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.08090126b.0.tgz","fileCount":37,"integrity":"sha512-wwy4NmLpoZQsY//zbHu3zl36TQkmGTZCGybeNZIXKU5gxpz0M6HINaNj2xOlK28jDYEFU1/1c0GwkL3xe9gxZA==","signatures":[{"sig":"MEQCIGiWBWZM+lnaQ+8V0SI4KNaa0ruxher5i18Ot7CqgHPyAiAfBWnr8RKvjzbW/jjJjujoguUK3ksnzb8PcNxgAuiW4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFslCRA9TVsSAnZWagAAIakQAIbTu334/k7dIkLtdCY9\ned63x56IOlCdoTW12ymL4lfSRxys24UdHeX/y9fzPJ4iVsE9hh29wyKx8h5d\nFph4fyJXjqq7Johr3e80xhLinKm0Z0aEWf6hGZXqejTiXrvpsfRbK0jToQDt\nB7AvHF62oJiMBrrfPMjpbeglh1R0dExZ+ZZrwfj8NSQv7j/Hqdut5dXnPNs9\n/ectmKf92DnetHBZmKD5/G9RVpVkw5/4mzv7wxFGnHfipbN73irai58I9pVz\nz47R1x3vbvtG3xBWGEOsY52gjQUIh+sVRBKma7a61PVSE6DdSK2YmyDH3Rog\nF/lcS98ArvV2XZUFGHe6AC8gsBzpjwTzVlvStZiPZb8G0VaxTePejUY2RFuF\ndjAE0qmkPV/HTKn2vshdt+meiHH5gO7CAcATjva0QRzOZN0rwUMvdDdircnA\nQ3COBRSAyA2yyvZcqqaLbJX2T2w9lW10pr7O1AaV1MZsBqYPDj/YotgPnDXC\nkYK3xer2Eak7DBOTh0dR9yk4Tbsf8Um/Bl7NvECcEuyV9n8tAxZFIdQmkDIv\nJbfGXiis6IKv+b49jX3b6Ae9Xom0e/I0K/vyw0n7DuH9q0jfvdw3D/frEl2X\nqA3m2V7lCZGVJHC359UaoDLqCQWuGUmihZPKsWGCfHyvCO3WsarAIWBH39mB\na0Ay\r\n=VIM4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/list":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/menu-surface":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.08090126b.0_1596742436908_0.5562607198307676","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/menu","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"295918fbd30d69fb2d345ef4363eef328fd62f38","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":37,"integrity":"sha512-wHR1Sc9ioEf7Wl+/jGxTNCuq5EOPhwjW+eY3YxdMA+bO+K/c2lqopxbcLTYKqN3Z9UT+6JkAOZ2gfrXbzH+wVg==","signatures":[{"sig":"MEUCIHzuqHvNSnZbVALFZfvNuniBARlrvF4sfXzozY5/1Q7bAiEAjRhluWs2ibfkfKgCpVHL/t2JjXBPtqjjWWVQmMnxMcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtWCRA9TVsSAnZWagAA4KMP/2qZH0m4Vr5nv76xjYqv\ncXyWUrnh7galGn3y3vADF5NFyqf7N1n4Zf2UE8ICdPpmV9m1SrpBJ9EIRriw\nYkdWAoNQQLNrMkpD9md9IJCKXnmMjUYEyNDf1SPzAHbmVfxqfzFqhOhf/XQ4\nocMPBZbfP+/U6hBlOdxL9GimkFK9ocD6/ADmiB+sdPEqxu3qyRp7x31Jdvc4\nh+C4mIU3eStVaJrP3idjbHj4iKsQKdOJGrm2fX9AMA5SbvmJwM2HGO1Bj+Nk\nAi0gfeLBw6dsVjx/dPgBFwzVX2ZEvIKPJnMShHZny+atoG10Ypb0CmvtLN0s\n79C9tKbFnmqzhx2XHNis5nkB/za9pawXlBUMEsyo1LUaa8RdiL1MfZNUcgts\nGihF8MQ6Cks9JM5eLcnE5FXVOS5nDWN82ia3LFLx7nqZ6XQF9TYGMwwW9ef3\nn34NBdaO/sb/cxUgdhvJeheYg20YXTEUH8KxDsNIXYe67JDe5ndzrvlBA0gC\nEpwsKLOgvOH+bcNhdIZzSX8wnGPm7XhJLv5qB1hASoooBi+EzqE+lR5vmgr6\nm8eTZFNZEOzCAjRJbi6B2kpH3aYHG0sNhuSrb/gth/jcTU5zx9PQRs2Le4qa\nhdAjRVChMjqwnPSCznMho6oSa+OFlH6HunWUSzR2maeVDP0nkdjzEOqY1o6D\ns0y4\r\n=ROT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/list":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/menu-surface":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e8bf5b2ac.0_1596750678344_0.8286348926593881","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/menu","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcfc0051edc0772c5866b9447b3e7f2ed6a18c90","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e3b746208.0.tgz","fileCount":37,"integrity":"sha512-8NwPlE+jWjG4ZFvpztjW4mrMcEOxYnXEQr+E208CDHPig0IkIx6vOsAI8cAgLfjWkq2FT82c0+NFTYp6eJg6rQ==","signatures":[{"sig":"MEQCICbrsL9QPe5ngKmzW2j/T3B7iDpPzYxeqeBSbQo7IlahAiAoaYpJG3HDSVOZa42jUpCUR3bUgV6+NX2Psiy6aWMNvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIP2CRA9TVsSAnZWagAAvR8P/An7nET5WtisxLoPM9cg\nFBmA0GlrzItew2jzSHOdpRg+Rc3YluByVxOQn3YmU684aW5jrQ7HBpZDj5OG\nEtNVOt52/JNYjXhEwlGU+Tk1taaOL17gvxGWTNwqPkaR1uW7KgwOoTTA5LOq\ngEXz1r3KuOPxKr59VqAeTG2n0xDa5a6BQ0d10BJR5g6ixMs3UwPPJcc8Eg9V\nLy15BGmU6iqKtxwF2cWLG3KBB9q4oDMUM5xj3n1ankAEWI+ZdvOUnPTuiD8v\nSjBfcac2bdFtDu4qMGOqFbLGHt51Cn0t5M8MmoeFDfmIJVXJDRxkQNCxcvc0\nVafqxSD418Cl6zLR713QfolbpOq23QLhVxK3ltDTx9z+OMFKmM7UNr0GSkDo\nMCL6gfik0bm1OboVpJrkhVAK4MT7Zn6YSqmUobumhCL/xmdZ2uFGDYedNugl\n83ZgUvwps0bNc0f4wVILUxG1lKpcO2PCd2PU7JPpgB2gvwVaRnBTYuEJb/SM\n/NfXRhwXPawMyoZQ2E18NqnYXaAT+2LQAcGf4weRVYC3NaAHwkZBtKYeQdFs\nNDP0cuCdzpW4INx5Y8u/BdZU3h66wBhnkgadOUWRs7IM7MJS7PBJrapor8iH\nnK8n7AcWyiywiSQwgnCQSkXF2EhrRTr+wusvd6eWMyNFchEZV8Qn3dh5rZEA\nbQFx\r\n=ugXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/list":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/menu-surface":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e3b746208.0_1596752885748_0.08296235942084684","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/menu","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9fea85f24c5196a47e0cdcea88d0c9e40365f87","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.96a640534.0.tgz","fileCount":37,"integrity":"sha512-M4rW1+vyTHewZq9KFwWDxa2iOUopDfdwlh9ZDHeoBqHChWeCS6xyaP9O94beC0gbCI0ksmORJivRRH5cLUtuWg==","signatures":[{"sig":"MEQCIGAm0b3bsHDw4aAeqoXJL0MIWOHwDJfE1u/G01OlyZ4xAiBGjH1s+jYRcsyxb3cL+0W4WnSSnQmFwT3k/OINeEO7ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdnCRA9TVsSAnZWagAAMGQQAJ3AEs+8MaxoCBveiQCh\nGc3M7Bv4h9EFOfFsMnmlrqyqL6h0oxoInewzhnl0o9w0HQpRSyMaV3YqrlIY\nJGStwgNyewTIHIRGH8N1kQmeKLVmfOdSAXoGuTH1xgu7twU6zfdMws0gjmyn\nrfEFxRHEkTAJDasY4dzDvUqGPpsemU1BTgmZfTvbhaEFfQUYt+sq6XFIRDA/\nQgEWBpKP9j+yv073OAhQUYOk1ENjdgd+KCl5R6oS8GGoORebGkIk/YYo8gqN\npQ0FIHRF60ivWV3q4V6sYfO33+mrUK/2JAAaAtKs6obOv7noaiJPXRyHAGT0\n5sdLAwWTCUkyVOyCFaJUw/GbknmdbZhwa0IYa/dwoahUmUhRMOiclolvUaZ3\nPoBRcGLQHICPdK9JgCfIqPxYTIwSI6LGYNKmoXKp8ZChHke/AVye0hOE/GtI\n/ZxUwlxUtn9QC/+N+RA348hoqnIZOP/2nuwqxgxPRa+L7BCSGAQSSdpk2Y0A\nxlRtsIqOTDLjYN3RMP9pLi3HmW3i20u7XoZaCEPouUWxVdt55lF7GcbHSMh6\n4upBtoF18Zb6CDEYi4/evDfO8zHzHLVW/DtKGpKx9VawaF7c01i6XBvXZ4I/\nCok+W98jHYVfOCdCv0fTAX7iUarnt5hkaBFt8CluHSWkP/bLoP80FpSXl+B1\nb2nT\r\n=fRa1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/list":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/menu-surface":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.96a640534.0_1596753767309_0.6577192307537585","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/menu","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95661dcd9d77ff070913b9144defe51cfd67caef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.9f9aac825.0.tgz","fileCount":37,"integrity":"sha512-VEBChYA9FHkfxMjeK06E4wfBGJh/fC7Bra14k5och6vGsHkomCY47ko8o/G0ENDWjOLn6bOzxZ6fKcIyl1ZVtg==","signatures":[{"sig":"MEUCIQCQvnJr4sLPCmHkWw8zxBm2nXC5tU/ScAZ++FbF9PgH8wIgWmJE1QPj+QlNiG18OyZWyMSum+e/HepfJxDTmzAoEio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8YCRA9TVsSAnZWagAAXowQAIsyBVd0EGmPtMHN1eJp\nBeUE3WcWkEn11DEsqBH+T9qdfpIxH4UNhDqRFTa6qvTKAs7YcZm7oFnNDMtj\nFQGrgM9bq/wOgSlkAHOL5/2Q2ZSpYidF6d2H36rwvMZVxbFnINuSi3uoMIx1\ns+Als+ymIUh7r9tX0LcM0NHqm44iRlO3Rbp4B/XLz2nFebeHDKUPP7rKjnEm\nzx/vFXMLVolJ3zULQu+gNCiva+6qeAsPOtjb7M9u5eHY9Pw3YHrv69kpk3uc\nZdXHsT4XqFeTYoFEVGjoABdHxZLl17aABuAT0jejplP+pbSHpJ+VlGfxdtiv\nNGZHD1hzdAwF3fBhWZ5WP54TBZED3Ut3XwGeRa1IPOCQ0bd4Rgs7J6GXPZp/\nqmM8SaAHdcvVIsxnwNnnfKFYtOD7h44HPVVgIaGHfwwXJwVW91CcHdDu1IXV\nb57vPw0RHUepL8dYfCIMLlfo+ZJ3R13+yxZd1dl+jjxOymMRVJ9QpCQpx+Uw\nZZz5j5fOZAz2GgJ6ikcrHUPu3IOAPcMGCsYwELYJr7FUOZ4IL8wVrvEEXEcu\nuUe4FYjnvTzZ8wHyZ4tP/G5igIFK00vS5dsM5se5J+wdIoBKuLMd2OGM+l8V\n+Uu+vgOQoEZ9fFnRwjDa5cJ23toKW1+TLvCZJgwJHWd3P93qjOdq1amv0dok\nw7V2\r\n=4DBZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/list":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/menu-surface":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.9f9aac825.0_1596833559766_0.03588721952950413","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/menu","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c1e248ca5e8133641abc6304d3ab154a3f72b81","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fc65fd00b.0.tgz","fileCount":37,"integrity":"sha512-hHzOMUrTFVd4q0qUL2hEW5ruXAYsXBveWFqvLpK02H/+uDWV9K0uMDUoTn5itGeUNhkEHWRXUjVRx+vYcu5fZw==","signatures":[{"sig":"MEUCIQDkSalK/Mv6QfKOspJfVY7SfqbazMUgTeNCNnOSl8YtIgIgLgP2FKA1FRF6WiGQLMjxFuU8IdnACGciHwJedgahzVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYvCRA9TVsSAnZWagAAGccP/0GKfwK9vJuzNT+SU2iy\nqI0MCXWn29o89V9U/pFDhK11k791W/RTTXcz1naGrL2lIev3W/NBMsXlKnDe\nweuDAQPQO0+Fuc67YL93d0gxAjE+/UL8wQT7m79Lr3Zoj/rnaR2OTrTXMSPn\nf2ZptpBv/iyz5H8LF/U9NGb28gxxcQYte0ydEzBREvfnEvYvvLv/MlFslDZn\nV0PNNLk+TWjXDKC/OD0YunHJ12X2t2kwOft4o3U72zrtE1j1ToJp5YVsrKMH\n1s9lVbo6xoI3S14WfggoMxhRFjvg271CsQPpNkkjAQCfXfTUIx35CaA1MvzL\nsrfZDksXYyebIR9QTMbSdAb0Ww3Pz/PHg5asfQcJX2R97Ww3iy6S0PJdEK6h\noNp1X63knr3fDihZcyXQ7Fwq8JrMX+lfT3+fyApgf0YTHTcozQEPA4hk/2zO\n+dX/23nPLqXYFOas8ADuIp+Qj//jaCu1Slo6dwGhWteuyNAjM9ZeklmgeWh7\nlBYwnWoniOVzhZWaiMATspH0Ag5ilVMukpdWB+fS2h6KhRktB4cAI9/fzZUP\nTtda2UIhEd5ZYq1fwH7vCtRxWHKdAetYnrrMTPC5SSd5ZegQj2UiBgxGrjBP\nMCGae5C+vNRYlFxhxOx2QVPmJSQMiwVJTpPDqPJy2HUV4D9+wHSNtDx5aPBe\nJrjk\r\n=Cmh6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/list":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/menu-surface":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fc65fd00b.0_1597072942620_0.7342911980930467","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/menu","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60152d5306242f6a0e3a5581b3f28108e1ee8475","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.02e372c5f.0.tgz","fileCount":37,"integrity":"sha512-YiyO4lrQDWmgsEJlzd8TNZN8ltbQZixRpfC1IaEQTpERkkeZr4nHIaj6hj/GqzNLFfNK+us1LGZtrzrNHEvsEQ==","signatures":[{"sig":"MEUCIQDjJo8IuReJFJWn7gcBVWiTQwR3giPfaYtv7Mp5eq6wYwIgWmASKfgTFCEqk0fA8beJQyrG0smvD7AwtAn14BxgQeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWynCRA9TVsSAnZWagAA7OkP/RpggP3rDbTUdSGRcQol\n+vlOdE3DxSniczVxWRAY/IIYZsj83YgG6VC/YqM4hwUfyXHt8KQV99pMGGF+\n/Vw7g0sWAaaNf1RF7Wa2AfG0AIc4Kj5ing4xKz/bMk98bB21lpwnWq12Krg/\neRufuJY87SnU52htXqu45trrpHPt6Ja6RAe+eBYRGL1PxNb6QeuLABPaVRgw\nvhN4KBNgWDGnKentelquE23ajxBLpPmgHPsSkLeGhxGrqB9GFfkXvUZmnHVs\nsezUqcWFywAQm/+YijKwr8bFfvXU1lOKwrCcZY1lpqLVZ1JToUVvZurR4ZPg\n2eYn77jZFARI++A5PnqZ9YFeWpQvhF43FHnILZVlUN5eH/dkpYbpTomgipUq\nWgre2bs/n4v86DiC3Q4lNji3Gc8a/sSpQa4lGOUa1jlBwg/KV9qDhdC43OyG\ngwP+t8TvF+JPDJhfWTJaMaYMleMJfznifEM8P7l8MuXEdqetkPCo/yfjFLY/\nnvL8qVgLp81/6ABpL5KxC8A3jDijzSyvE0OreKwq03jp0wlyRUCKcETscQCV\nOBPx79M0z8aYlSfX7+Y7/82wnvKsylvFynPDlquWvteQwbGJ7Uuyx69al/zc\n2GcSmrfRK+QeSl8gTiSf6KzGUM3cxcaamHlIwzvoS4DZJXlstTZPEgfc9R6G\nOi0A\r\n=R0r3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/list":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/menu-surface":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.02e372c5f.0_1597074598862_0.2608261008006907","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/menu","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d67416315f829a53e1b5c22eafa3f12bb047772","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.66669e3b6.0.tgz","fileCount":37,"integrity":"sha512-Q+HaI6/FtEd69SWs97F9atiMzP+NsnwzF0RnIGwwJeUM1MYEzNL5IqA+3LRqPV+qHWoON3CXnLUPPUOX7rbgHA==","signatures":[{"sig":"MEQCICOWdRPIViJkFmxo6rCP9HWnMuVo+NjmAyNMAxXW97wSAiAEzXmPXO9/yHZg6CKpHjLuKXlg/gHB+ZkvR+MkpCFv5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2XCRA9TVsSAnZWagAA8JIP/2ZT7DErarrI/EjYXSLq\neUAdLJLKhiN732r6jNUFolEW4HJ1jGn52S+rjh8ud5rxlJPY0WnZucpXhIw1\ntWBd1Bw6u8migSEZEArg14xVbE0ZS5nEj1MSCyrfKrvGfxvVMuEaFw3gpr6a\nps2XYxHUD/AIiKIH1zgMUQWcM9HbXCgBRZM8fc9KWFlY/Vrj7BubPegDC5mO\n/r0Ijrjmqy0Y8uXlzelD20/hs8/BjIBd70N/naEJkkG1pcqqrNhdFiVpkAWv\noPvITJWgL+RrTXSOXTra88oNfZ076iIso+k3Qw8JF/x/+9ovJhD+VLGLFAYC\nXfEHGQCaVoMEzSeeA30yfP6mOdU/xQ/Og0qJcq3tjJDD1zEcMdO/Q30Q8Tdi\nX7NEbzm2YQu37RqLoG7c6EmhSVyJeAD2358ozuswVzlTRh/OcJ0CW0yFakWB\nqg0GPoLdCce8qJv3Pqo68rPtCiVrpSJCUO7xbc6f7XUAV9UhKnvAftUqCWRd\nZBoOpxUEBE4/e1Kr+g9m3jSIVEegR7V0cPzq0ZmkbcqwOEYXra7t3l9flpOM\nzolKV7Aj2KtAM9EgEyR7pT9J5XFhqvUKvm5AzzX551S6AHRCZF4DSIQdHkJL\n5QGkx/wBdncyAcEKH0TSup0Cn1SuA3WoL72vLc0EpytkR3rEOdigq+JwvWMe\nlxVs\r\n=T+xG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/list":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/menu-surface":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.66669e3b6.0_1597074838912_0.6899125858744573","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/menu","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a417db6dd383932a3e4c104fb763d4571f1cb8f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.6d1ea9761.0.tgz","fileCount":37,"integrity":"sha512-t2bIDuv72c1SYY5raO7zqnk2a9bKDhd/QTmesiRiUZF/Te4cvcyIUEsO0ol2psk7gIVQZYy1oDq45lTAWSSB7w==","signatures":[{"sig":"MEYCIQDQy5ISpHSOggJSkjMw0T31K1g9iV9PtS1tkYpaESEjRQIhAPON6cmUIjQw7BBmj7jmJTSI+iVstmlIE7tAaFxYKuGE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvqCRA9TVsSAnZWagAAWuQP/3KBUnSaxzSaRf7My7VM\nxOcIlc402mVaOpbQcS22QHQI4EL8bvfE8Pw/qSKc10PwhrOVcfQkC9rHtVg2\njuABGwxmaQPIZwOIFMrPErVeH1KOg4nAmHmQrc0GNxHu8PK4RM7BxFSAHJmU\nlNXSm43arzwXoYFVApghhEHPhkcI72U0/+QmKWhapOVwqB6lBErLuHDzcht+\nv6voLXVEtk7q3x9pGe1+ZbMTyr7MQkzxs1BIYSB0+pKm8jgo6A/7PFDI/OYf\n+uRqzGCcZeV9NX/qhW8wzJnloxEKQEAokENsQ8bOiwnHBMEiR3ou3mN12kaW\ndUGttslNCEUXABSNEB7RvF+m+7ytTVkN0/cOPjjEjRnom4oMmEmJc3HyDdcm\nD0QvLi5Giwiby8eseR+07QOgIl4aAns1sJc9O4aZ5GQ2JLnup2onD2tHElr3\nIw3jyBjDU6Oa3IBqZNO/ZzNqaDxgljZ+J+hiu1kCyqViRH0+3Sx74i6AtasM\nqqF9eP7jSgwvbuqFVE9z7c0bsWifZv8byEMYZrYFsxHXazZZ2r/t3HwR7aXM\n7GcIPtuo75/D6KYsXUxeOwRLOIEP7ij6N+YGku+6QKoDxYLsTe3jLAlgCeXX\n3PXgch1NoYkJF8UPEwFE8qcCCIqE4FgeqpVFnQrPBl9eYjFL4FJal18sG5v5\nSqe2\r\n=rSNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/list":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/menu-surface":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.6d1ea9761.0_1597156329717_0.06911630817172254","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/menu","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"591069d737c899551fc423da1622d63a110b818c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.79414bf9f.0.tgz","fileCount":37,"integrity":"sha512-RI8x68NhZpdP7tVCCOEQIW3FcARZAy5HWgJX5I0fAxxiBXhpRXCHzIC/5ER3iCmGgT+liNQ3LGrfR8xnwvBdQg==","signatures":[{"sig":"MEQCIAIJxX+Et9qYiYTqsX1VYSyOCMd1PFL371OEjREWaYdAAiAlg0/R9pnA9XtmYZu7FLu+8XsjPymWv3+REMSXTxG4Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMut5CRA9TVsSAnZWagAAGwoP/i6YpY30uK9uURTpCMgU\nkPflns6RNpJ3PqevA07e+Y6YO0ak2puIkT2nEzRq1vcos38HZFWKJZrblAOG\nbF9uuXC0j8dZAgoNDOSJrzCYLGV2ujOS0eQ95LwHJHIfdgNA3vC7kJ3RII4C\nMoYszORRENp4oNez4WUSqUAEd8RtpdNZSSnkyLoVbn4lMCEsAlFHZ70ZDA6b\nqVEvUdES6heK88DVsAJ1JnaiRBXGqmmmcnGbbxAnv2ABesQkEOqHAjSLtOPQ\n25nNLiE8CKjz5iLF9wtGstvb+x+G6eF3aR+D88DMWGjakk3RFCs9x8Bkfodc\n8W3SVF2i0tyjZvWqPKCPZPQ5UJXUD2rC+EnL7ahrrK5lLHEPeV+GR2LmVTFd\nwkBUKVoJVawFP2VX9noXes1dfEPvfjXBPXaad7y9CwYmFKOk9WodqYaREoFY\noM8jXmK9R7RKAAYej8tp3OHUfLBvppOLl2ZWUIOtdS5HZUS6yDHPcXUspAE5\n9Unh0pC6fLuO73MnZv2oK6AumefCG4wVdgH03v85C5B8U/bjR00na5BEzbTD\n4Q0UOYvs8N1nNVgzXI3A2snIkGGCzOsTuZxwAEIjyThdQ8ygyUtjLZdvswA7\nfJzl28HUSur4jYS38Rv/lztfMGahr0C9YHdDJhnVwWm9E34KwglUky3sPiTd\nF18a\r\n=24i1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/list":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/menu-surface":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.79414bf9f.0_1597172601274_0.7141350945400347","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/menu","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31453e1a8317d6da73f0aa58e330c663fefcf684","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.85a5272df.0.tgz","fileCount":37,"integrity":"sha512-nkYMCBEuQ2kmPJY1G1v4KDN67UHbeACKvUDjnIw0cAyUW1Wu+nHG4O2hlqSZNnRDdg9IyUJ2MLEB7tHqFD29aA==","signatures":[{"sig":"MEYCIQCjMgotDnFnB5Lm/d8f983fqw81VtJjIj0jPXtyYxr/+QIhANJWpw78SLw8/ZPmphslJRmFbt1OkZDOk1UzsvxsynN2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvr9CRA9TVsSAnZWagAAroMP/A3wz3UQ/nfy5qJfz7tv\ny0e6jNM+um/K2pCexaTJXEDJyhdpJEpqj9d63l4elQB0SLQCqGk2EMsLvpXM\nOYys4p7jZD168kTdjb6JlOinds2fisoerJmPt680cNuo5sBPi6lki0TEBVpd\nw+cagWC20WENEkK2PmtvV6PJ+6FeiRTB6mchr3aO23n+H5pwOuamYUPoePxz\n3WrlDvidyH+u5As6//UOgRqouSFElDGV5JizGkBwukMVaQWK5MYgwP8sm1le\njS4fqkar7UuHC/T2TCmXQgmZEIkgLwnfgYOolK5D/SCVxFo1JpBb8cal35VL\nW9ptnMVeqvi70t0L7NWBX8zRxIq61yMoQVBU59+RKMkugT4O8mGf8NPhdjk2\nulAI+ljO+i/oqaqFjUZ996uesgK5NdtEdiTxH9Gv7u+dI7mp/2xpTgiJpOSU\nRkY8QzLPcQig4FWvnynX7F5ARPjRkBgQysRiRu3Hn96HJocOjNzYZd47Y/6W\nDlJE8ZUuGRgaKJAK6NaRZ350uaXr0A+vkweB09k3ZqoIRyD6DHLQAeUtBFVO\nFfw/DR2wTMzKUy3Uc4zONJNqiiuzUiORZqONZrkxzIKMXU2T/G7m+hBuIXXH\nr0wAkTJpu1F/dEBu4jQeARQH9chTaiqbhCP/e8xLFDhr6zjWbgbBnSgkggTR\nOkxW\r\n=YCDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/list":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/menu-surface":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.85a5272df.0_1597176572833_0.7962922332963398","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/menu","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91c63f3729b4146a7c08115c8787ca66050adf7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fda053eb8.0.tgz","fileCount":37,"integrity":"sha512-h4XrrWpj/Or4YZkIwpzEKWPCJ5m/8vutXODw4H9yNdWt8/lAhY6y1xGXg7xw+rNmueM51ia72SOBo0QrP1RJpg==","signatures":[{"sig":"MEYCIQDvOgTwrmxTfmrTuVP4U1weZ09MTDVCF8+W+P3VvW4jsQIhANTv/3XDlC/ZXbKzq+whZH/ZX11mJsuxR+/kVyIY5q+t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEuQCRA9TVsSAnZWagAAG/cP/2IgVvAJ8G9hNBOo3wST\nCqyir6wllTpduJrcHn6sJrKDD1cVl5cIp5qRyaY8nyVFzzhkIk+viAV+gwWS\n2pbsIq4sL8Zrmo1MdVQ0r8IExtXg4WET15a6Qb+K26vLspdM6Ek1RBSVtJhG\nW0LYgOCUhW32RzLbSA4toCKzehTZMDwsLsWvEWD5deKVCZw9nnJHN+auarUS\n0oA0D1cMoOXjA0lRl9nbQZl/NoS2jdofTjKWbHxR5TvU1gaJc/fCXxoLnPtJ\nvh4j2wURUdrRUXuyFMjkJDhfL4NTJGS+YGi4CqocarSlj1Ee4Uuclfq06+iX\nbVUidERP/atsy/TL8QIFXEfxKOMeCpj8ez3Lq27DTekn9IBeQa/3dZrremjd\nr51v43tGZLgJAyjWMMV6E7HWte/jY06ayYzc4WAlmXfsSoLO7vYUvoYCCJun\n5lCXNBy1oNLVHaXNUdTz4f8npEYwfJc6dglHxhpAtujSp+OTdMCRTnbWPLuq\nClXwC/iaU6n5PeLxxBRe8BO2UUGF3nrPiBZzXcZJEt7W8618AYv02UFcOKmn\nTK49FGNVxwlKAkzyswg07SAIiuRb7dHYn0F5cbbGeDNmrQsgH1s/WQo/DZzn\nnmDWTKCvzg7RwGIJkEieau4eBA1sZ/+7steCddWzxsz2bylqixVERLPjcJlZ\nCCwR\r\n=rKiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/list":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/menu-surface":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fda053eb8.0_1597262736172_0.11611215973708777","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/menu","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ff64528eca25963e9d2518def694532f92881e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.760873445.0.tgz","fileCount":37,"integrity":"sha512-ZOElZ4DdWesEza7eIOwnWriVkGlaSrtdLS+c86LfJa3iWRW3hdybq/YWey4ZfWKArFVOFTOwXKx6/zWEebDN0Q==","signatures":[{"sig":"MEUCIFmsSk/BMknsLFQm/jbygmJbsuhSN8ChjnxoCHap+jAIAiEA5Zql7BbNTOM4X6JbyRkFK7q3IrjpXCDw4u7pdMgK9zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGLCCRA9TVsSAnZWagAAqQYP/1Synt+yNLthijMRgwOJ\nH29XD9noeC1/Vza5FN/+yCHJUdjl8trXM1ZYo29eyaUXPBJWPacdJW4xtt3H\nMjjA0TuxI88DQ9/M3bFWV/dAmqdD2X+lF2pMEFW4J/GQdOhTy7u7HqfJ6is6\n44xhTTqIPC1WfT6dwWIM3VilCpz+64YNraQDPROS086pnf05GDyvSjIqjaNM\ndbKFSvI2JsUllMVD+W8eLQtSID/gFF0tMMbiIWk1BD/GSDJJxT/sg41QmX8P\nMfDG6etGQw+RX5I+UG4K01bIdJHLwN6qROKG/Q1yezU2PsaFDgaFvMUR5KQt\nz/8QSDoPCIw9+CTNHuGDzMhA0on0zg+ME7Xw+DhVbZiLPesQ1vIXv48NX2sv\nzxDQtftf9T6fiu9w6430UB7ixTCJvmJ+8JY/y9wyis3Ck4+JuwhdcIIAz1yM\nfq0Y8raYR3+wSwDk0CYz0OSyhhHSaZ6kXaNFUTWqJCId2Iakf9OFKh4sWVjR\na1cnPAM0WUnLui9ktYMO8Iu87ONe4kXUBcdLoP6asLhUO4o270LOydLmqK6t\nt/J0McEPvG17uqGITjURntey58Jqp40k2XctzQX8rbyMk3ahU01c+uJ7cYr2\nd5DiD4X0eLUwbux6ZoHNEy+Dq3NzMZxks8vYsKie/M4GyHGRtNHZHpvGLnNq\nOIMl\r\n=LK24\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/list":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/menu-surface":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.760873445.0_1597268673882_0.49370627443303805","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/menu","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ecc7f81b152e5e5e68706f3638b3dcb0cd64483","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2f4711a30.0.tgz","fileCount":37,"integrity":"sha512-qccO5DAuixYJjm1+1WMol5VK3XsBdigmZYOu+TqazUlhaQGBuXRhbfewEcGtLCwkB+9gRJyUxDPRddiUBE/WSA==","signatures":[{"sig":"MEYCIQD+cAMV8GQ6v2ngZ7AGjq5/kuFOMuTYFTzGBMv4YY9w1gIhAP5uemv87ar3HLhtffVC12L9w3TJV+jZ/YKpKFpBRVgg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUbCRA9TVsSAnZWagAAam8P/0HTBpMPjW8UIYZTws8A\nXF+sNFLzGWs2BcpSI5LjqzizvbRt5Jwb2tnbP9724w7JLz1iOOOvcfMEWivE\nRH5UGZt4/ez8Db/2zrO30Q5gFXopthqQIp2Ow+wrloNh3AvKYmfNuSf4yXJ6\nlRYaAUyPW8hT/8h7CU6YuX4GVz4PR4FoJ7TrsS75crgswOnckNf9Ox9YvLwf\nl9USZgdfbu2QqRMOnJHT9aXyvU5i/TT2Au1yq0p9+D1EkU0cFR8+tiKG4lBF\nPjvO4gsCrHsbhoxM9wddggrUjidLJjwQpVQ6/9/W0j+B94GAyeDeo9f/5EHp\ntoxCl8y0dRnUeeBZa9orwhadWSg/V3bHFCyV4ytrDNjsMESLCO6v6A9b6/rq\n0WEJIemlV9euhJmwi5uDvlo1JOc2BxDbCpC4sda0AXI4p1a8Z1tzp812X5vo\ntrpMiNXAuqXssWH9Kr9Wt2O9GK8kfJFsKzHq9bYiOQ9b5oOFeErpTeattS0C\nNYNtNYVznpv7VKveL5sPcT27fYwXLcf6x7ayXKqs4wOLQPOL/dJoDGhcnNGD\nvn9Mohq8iVXksRxxTuIwa4iNi5qIWvmNLEBEsjj1nnN4QAv/2mBcrNQAq0e9\nB1RFsV9N7YMqxTNgl/zuSx1WFdUIGk24s4XU9ny8bWPOUwP1H/Mx4M1piMCT\nx5Sf\r\n=lona\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/list":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/menu-surface":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2f4711a30.0_1597269275278_0.8864396055505357","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/menu","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cc88e3e5aadfe298d2f1dc3256e4dec7f6aa96d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2d72f3659.0.tgz","fileCount":37,"integrity":"sha512-oStFhnl8q1K26+BFrWj24EnYCsk4nJY69gHAXJ/FQstYAT/HFaVS755D9vPaZcSes0hDPDT+DrFeXypVjFTKFQ==","signatures":[{"sig":"MEUCIDb9Tw0bqE+ZK4PHQ8JQkcrLIWXZEgS2EOlRCz6UdqEkAiEA1oNMdBPQtaQy/gKJfD6dtZIjsD2U1S7rc4FaRrQ/oic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbeCRA9TVsSAnZWagAAM4wQAJFhd5GZsNDsdHqDBr5X\nWa6OnBbeFhAroil/9Tf3pidsPbWaegWJpakgiPcP2CNjcQ3atPyx1QEEN2Qq\nawIxB0h2mb6WaolvHsrOV6KpK5a9rrWyWPxmhZb54AYgpouMSz5QK9CO+mVO\nU3aXa4Mr0MhRBvu9xvCR1VQbK4s1EhcNAdIPQiPiEX9jjil2JBEH6dV3ZY91\nHhdG7BmkiW2CbrAkF6K6+bAJ32fKrr/lJcmKrGxjS1I/Wupi+XTta3UOQFjD\nRdJQgfX+m71QU8MU7KoQREqIeKbsIIGT2N3XE2ZiMyIa7ND6A/Wy5Ijqx5jr\nnWxPJOPHi0NyMj9VZRRVCxWUDh9o9KI6jsd5ocwEktlfjduGqeH1C8AI/WkE\nyD0TkPzQFOVBWf81OGH6TxUVxtlBbfIwKVLAREfm5cUK861iJODo2242tjtg\n5bCoLJpkbwjyoXITerPObxoWVIs+pkedn+OGGnVs+IYx44MnUPgfZDmp3xfQ\nNsnm+NZseFmrNdcLSC7D26HbsKag1obydsCy5UbSVf4WffWcw5ibPoWtR2AQ\ntypWsMla5B36nOTeIvRSNKBbtqFgLxq2SyQUkjIhWNRjvbHXcJopVkev87dD\n1iRXzRay6WelluWwsrqpAAF536/jZLSEjxTxid/HOP3XZfvqjNMOanogZHsz\nAu3+\r\n=d3Ur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/list":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/menu-surface":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2d72f3659.0_1597269725693_0.36800291206375224","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/menu","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0ba63a3b0464a8f580a2029c8b19b05b2107f76","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.1fee70a5e.0.tgz","fileCount":37,"integrity":"sha512-eOaGcqbrkXlZ0eC5i5QCV6mXZgTWqWRQVa17m7PrMX1oSDqOOZwCGQcQr5Ng+uhSQjz2ErcHUhmNFJHpSg6bpg==","signatures":[{"sig":"MEUCIA/dycT2yeBb+7p/aQ5niyeVWWh9e3xiCD0XCglL67H0AiEAz9bkBt3gtXHfDb/d+onHf7p0TbhRoFgIST1bjWoWTcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHt7CRA9TVsSAnZWagAAwAwP/je0s+jOia4Q41Io3fh+\nZDWjW0UN9GZHBYxdkX2Hw3BfJ/Fu3s0rIDidUwyatQ2K3p7In5puxjxzhMid\nTNigbTT/6ZrbZNV4I1x8Kzh/HeEFMwxmYXvCAV6z/KSXliTZyfv4b4awviRk\neCsHzsvfp4Q+I/OCTsgXsdLP/BpyDPdIdYHOTQYue9D1rYWtf3EUCE2zmZcx\nKO9ZTA0Qt2ipWSHFW8kXqEMyQ6i/Frup3l1NkxisAqw2akmSSytWrgxbf8OD\nJfvsFCJLH6JC0LWFxXTwET4KzdByuNSpBKXmUkFSg3HQC+25smcaWQW9cguK\nXOivDBw1DBOHUltvpTh9zDc+0uagbft/0nuyMqBWxfonoThw7oMGtUmAAvjb\nfpHmUB3yc4WR/XtFMZumKYurXUxN7yGZ3waeh+fDZsdaWv98Q6L9Jzk+REmk\nGD1Z8GHnVRFBAFm/BzIXYVVjTyDC+a8aGMFLjZhjYtQvcB2NiN7jBN8dIput\ndjc6uJBLNR/W1Owcxoo3eAJmwDCC1g6tV49K3x9FxdFs/ZYhA/Q1js8EEi2o\noxdw8bEs+4CVOsifxwqr5/WBf2FUMWaaMwO54f9ROGfHm62kqBYXZ3FZ0AGl\nlwkVjoDgKN1tCn0bJmRYA1RrMlTsCElShabG/Wr1efjKYuALf8m5DVz9crbD\nNaeL\r\n=Psz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/list":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/menu-surface":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.1fee70a5e.0_1597275002871_0.6188034673078151","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/menu","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2732c6a37f129802ff4ae72e36db59a79d6dff3f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.023f3fa34.0.tgz","fileCount":37,"integrity":"sha512-6QF67mmul2iEMf20Iyoh/3PhEvOZMm7+bV1A9FxAmmo9ZaQ82blW7JUrZLtM9nlpaqd6yynxUyRBQn68vKAsaQ==","signatures":[{"sig":"MEQCIFJwsG7B2BFxl7stxetGVsdB7RmnO8iB3Fogp63NAdhtAiBDiexdyRxpMqFXudQtCdSQ45+es6dV+VcoewSQV3yTjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJPGCRA9TVsSAnZWagAAXMcP/2QTwiLXR6PRPrp4x2Zo\nblV5kPEXfMjHCbjHbdU0PqspN7A4ne56jRh7lzL0JNvRGOsoffe612K+soSh\nQtUtlfMOsk4Fo2rl1W8QgdFAXZAexgAW0ng43ue3xnrgF8bBifBMQgsKDuEU\nTWpqRoM+n+iGpZfR3G6fMkrxWZ1qLfV8tiwJNMkFTHMAHRhn7FV+0bBXN0kd\nVW0+x+PlNtqF6GUzPn3ndLFGErEPOdxXH7JL4o/n+Ga2rdR4tVsZHlGt5JAQ\npuiUlTN/PMtk7zLvrotJlt13fU6BVfjMxHCE5rnkZyQzmYWE9nOPj4dSleYS\ny3aBql176KH4GF+NxcGe08R0VfPUtRjx5bwaT3bv46evSt495nlkctOHbt0Z\nvCRq35LRe3dGmhav9TYH+HT/ja0O10on8hHRV5WNz7hzUXhYPL0n2VWJ336I\nzSakF9D+aMLHZut1j160i5hlp8DjCL6rpV5H1A2c20UY4D+SGPhGoaeQ6lF2\nKb75A8QTNZHpMVApw/L2R+dVPLboFYwS3Exyu8bc4cN/GpRFkfYOo8v/ORxN\neH92R/n4mjHinyC+yt6zjI8MpaCZxLv+LMd+lN3USrvkhpCgkIz7WM/OySov\nQKhTVI4Rj5EziVgOE4XDPo8QXI3LmuWe5v62omnDXTnQFW4sjHjbK/6AYv4R\nDQjr\r\n=gZvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/list":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/menu-surface":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.023f3fa34.0_1597281222225_0.25401502425006206","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/menu","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27f9ff71bf89ea1b852bed586f74803f8430b1c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":37,"integrity":"sha512-3ItNMOgASWp018kupoyXtDN1h6juybmZPdgUpZhMJId5FxjL/4OrF/jWPlkR+fjwONcChE3bVache/kqA+Bdew==","signatures":[{"sig":"MEQCIFsW+a4i1rTvJJeaa2xouOM1BNublzLjeXuvuR9HYP2BAiAWIkrJ0X8ZSInwZ4/Lz+IUMaz61+mUFhx/RGM6txWAbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJevCRA9TVsSAnZWagAAMoAP/2OE7SRw5Adtc5qXj6WL\nLcN0Y5TMZdxzqHFpW0r/eYKBPXHTCYm4kw19cc0EtAuPxQ86cDXlzJVSMMbo\nu3PUekKtr9P/LyTBr5bvTBNQPvRoVZOtHlOKnsDqGrg+vsrBOV65U4MrYU0k\nfSV7R6ddRwXyiwaLKIWkiGUB3b5eeF85iQOExCr/hiiI/uwFzRWDMZ/kU3b5\naibnZO3LMAXcL5gfFOn/DljOZ+jHgkf1VZX4nejLESgICsycD4XLfJWmDyHp\n5fCmNvHffz6DyhHtfN7aP9q3dS5b7POWXmr4UhFiiwlCwadYq1Ct3sj12yY1\nfnbHjP7+ffqc2q+gM9/OzoBltaDvMpP3bC0v10OPzwsRNgMVIN5MU8afLQ7s\nYciMsK7PeePtDCKJOMxQsoC53XYAubEB7OMXNOCxkir2B7+rOkl2zXxCpbFn\nqt52LzIlJMbWZeqqME8ff7HQ5IEjRjLA6dfiD0oCcXNuwJlDCYI3ac/vkH6/\no3ITVflcv7JVXTgeN830wU9jTwWp3tvKk9DaMWOZA89FB+wcoY5gm6BkRTu6\n4Ox+UFyrlEj3vidWuxpX2AMTP6yabmbA5zb9Qb6nQihvv7MahEN4vPN+aIHG\npdLKl5Lr9GxaK/y2dl/t714KFhsbgm3iNIrONTG76BGUVN7W0KMZBwklwhPD\nPTIY\r\n=3a+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/list":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/menu-surface":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.80f3a9e5d.0_1597282222436_0.4823069400869928","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/menu","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2f99332691f77ebd80fa17e6100cc7df04e5ad9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":37,"integrity":"sha512-C9NxICPXcX3yewVosDuEqzXtVOh3SZVGGSHsEEsuXNb9kTvSGZdSsTIR6AkgsyAZmlpraVcX2MX07UhMdaD84w==","signatures":[{"sig":"MEYCIQD5EJmiIIQ2TDHxlFATFuYqBop7JdbI97gfdEpcw1izpAIhAKRDnOH/FBm7wqFMB3iENSM2iFiKCc1FbAAcKvj28tgf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8uCRA9TVsSAnZWagAAxyoQAJ2W6JhEsfhqc2PWBPYC\ngJxhbZa+XdPyEBWN3zyHjMKn01Iu/G0EJGaHEK16R50b9Hl/JyUvuog8oGGc\nQeVT3Bd57LPQAyVQfi6+0doPalgj8t3JjpVjiHn8s5fXabXgZFrwHOJ0tQY7\npxwV+SjFkZRWr6y5I898bmTsZaODwQ5VcsasUwjhxihDX1wbFQmava96nzsM\nodE6fEBN/1kkv1B1kljHCF5RN7B1oj8Bb96Lotj2XBE7Y8QKd0AXg0Mza9/+\nLt06sv9aw0poGlMx4VbVK4jNgHyxkH7j2EcHyxINKEcb1Bi7guRkyv60U+Qa\nDEyApFhuQ6Uqoyle/x2kEpOzvDCMNIfYvN5FLzh6yYHCq4vo/+JcL92C7Ovt\nZ7g0LPzpszg/QF4Yew3wDceyPjL8bbMoTWgcqFZlYTqpWQ8fyGHKv2b9zJ+S\nKn57yguHB4F1wjV0GJGGHupJaHXmAQFPB7/na9ipv2xljlurqn/Z9HTJi/sY\nM/XUny+kr2FimU231AiunSDaJTAvNQgIdgEtGYcBpZJm6mghDj0d1SYqALt4\nimE0Z93SB8zSqtxUHBGrbmwloVNxGK052A5i7965JI+JzPikwK6/JxTV9P8D\nnEO44PR2eFu9BwNPRc05CiOV1yFrDR3GpJ92pr8Eww2tjuuAPjbPCt7G8CPK\nikg6\r\n=zWIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/list":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/menu-surface":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a1dcfe97c.0_1597308717753_0.2191111394206775","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/menu","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b43a57b540ee48adb7763d1b096aaacb6f4ed750","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.af332d5be.0.tgz","fileCount":37,"integrity":"sha512-sBCIxo42xmuqSx3rG7dC/6P+MfzV9aL/5G7rDVBF94PBHlgLRNnurByTdZiVJK0HnVOWWtG3Js6FZfW5eRWNEA==","signatures":[{"sig":"MEUCIBsyeZN9vXUYE4BAvV6SaxZ65Dq6SIOwPwAyn0nY436+AiEAiYYs92qVP3RaD6e3pFKREjiA9MAtWp/rKGfqadrSCgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa5NCRA9TVsSAnZWagAA1ioP/AupOQ3CS1OCh7A8zQzD\nFP9QluHvnXkB2GlxCSXv5VkA68ShXvGvi0+fE/rCybfpcID0J+XqjIKDF3w8\nJXS78oCMujpBwFms6dnhG98oEYohX96bER8ereSI/tJPQng5TjdZpYJHSbxa\nhD9eGphs6DKKfGKNlCdG4xk5Z463tXpXGrgGP9sRH+Jmp00NepalG7HK2L3Y\nhlOhCXSLQhdbt7g46qyUJRitq7D+FAi0HoJRFCS/pImDyQYJmac6FWtr6Dz3\n2C5Kn6o7sThcpO8BSGfK9ARMxFVB/z6ikNuzYBmOAg1RfyQqptP4wFYdzput\n/rEiDVdgiF5Af2V/zAjhHidBgB1QMAQxX771rkdQcRF+osNNUIc4O3m4QHgE\nB/qQESXjxdFaYUeuUjx4Jre85mzcfwo3XWucPf3701rSHnX3OPQa/lf1NTK6\nh+oM4h3Odt8mD7hNEtsN7dnCO3zD98XV8Y2CTU9nLrF9YKrpd3l263WOeLaj\nhQxfQSDcoyBAvbdGbb5fBywBna7LvRIaUcSLV1XfpXcRxzcfnbkfSWBj4YTI\nHRBij+oJYw1FmUonyVNYdvGRQJ7tN2iD6n2JWFpP/joGDuQJydaeyFxHk2c1\nM4+4ArzH2XjAelTdFJVXfS1WayS5iN5rP/KsplibGJy3OXjEb40UAKr4fgH3\ngC0R\r\n=lljf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/list":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/menu-surface":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.af332d5be.0_1597353549122_0.08312153234952402","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/menu","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e43b7b2ea01f7fd776547f7fd47c41ad01afd576","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.7dd4567c4.0.tgz","fileCount":37,"integrity":"sha512-S27334Af/WMGfYCcWGVCDPWErf3XZ8LyO2t4D+6Tdj56qED07Cr0SHcvaEG7n1CTO/5L6uHldNjWMGhW+W80/g==","signatures":[{"sig":"MEQCIHicquVwL2vDoO35hwTspoHNJObcoqcVYjM3LZdp6fz0AiAKrBQQOA/gRBrshtPa0tHJojzOxKxc0gLn9by0zDu9og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeBJCRA9TVsSAnZWagAAQXoP/A7oFhRdsYeq6B5KiMUa\nNSqxjm7Lb/fI1Yp1bn4iV8tYSgAX/K20+rB3naqcxEV3OcpsxmIemmwN8G9M\ncKSRW8xGsmD/qYtxlwm9BHFX19+RmpsmoUYYC8wS97kYUt2yGnqfOcaq5ccn\n+SXoSmC1Y4o2oN191FzTunhMcwU+ysFKRhNPVYt0KLpdnXF5Yz2AtLdh4OiT\n56Qd7QFckXFPxC3BaFBd7jafXpiYqK4dVU6hwP0WC5IG3t6aSrbbysUIrCDn\nLMvXIF3CPR1IZJ9pMypXewJuxnbVmPbk3zae1VqcXD/mYnjLcaHULph4h23Z\nBisCrr/m5jiMMuZhRXMPBj8UQS85548BEO50Uan3MPHBcANmfc5zm7a1t/2H\njWASSlZ2k9Poh3CH464efJxW5WMy53JgEuXlDWIYtsyALTVtRq2LAa+W5LUj\ndd4K5qZGquklRLbKBJEa7k63X7oWQH5HdB1wAbPGxukbTJq5LAAldbC6XMf7\n62g/LNPYj5+Q5bJFu0Homh4cAs9hdBB0NoKnpHPs2Ft+YG5GLkDQX21btzr8\nREnRumGrf5uiiJFJDOIfKA58rFMM3ygMLHjw725RYXnKytXAKs+ERG/SmtCu\nLOjf2XtrZuIr6JTVr6WwkSdUXnJC/CZijEplBwPVuu40P6x41LoqMPGAJ+Pj\n22SP\r\n=ei+8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/list":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/menu-surface":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.7dd4567c4.0_1597366345314_0.7660714968951956","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/menu","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ddb7a15865450d649c5161fe0af613b65767e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ff870005a.0.tgz","fileCount":37,"integrity":"sha512-OxEzKP/dITRwXAVggay/mVvI7klXFbjQR1siWGFgumvnU24ewgzbGX88fP/I9Ui58hQVWnUKXprAzTga+iUY1w==","signatures":[{"sig":"MEQCIAdhDyP7q/gb6W0NDkiQIu8C9E4Br7I2l0NPFj+ZR/9FAiBA80tXtpMqrok+dMnVpoOCnvefaQkjBMTfqymm6dOfgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYsCRA9TVsSAnZWagAATOoP/15GaI9kDl5YG969TqgM\nTjx3ah7eoOo2m4/rUueBlaaYvn7kYUrPPlhfDLYd1tGrTEV+/CFxFgGe7e6X\n9ziwhSqrS8vrywSUqxkY9d+lraaIkQ3qQYshK3Y7J7VXBEh/4dGYjHHd08nb\nvzVbyHu1Xa1gFa9EkS9Vg5OhMncSt1T60KuOJK/TGSOMkcwar8KkeXhVGvOh\nyqxRbZoVn8lCnowNGDYGaHouxQ2KbdCKlzC87c55Ks7DZo6XQfLMUl5DbiUi\n53NOE/MhO0cw/i4F0FdQgmHa2ElyD3hAMtUXC8reTFsFkReuJMEiAwRiUXnY\nz5MPPt+MD6iH8rRfZP4BXBRaLkUrMGnOMsGLAQWHgaxAN6LBnXKBZwH/RnSY\n8FZxxOJxC/pGMxJzddnN+kcDdvL7e4HTDsqmEK5gbphAxwhjhfM0IglmCIC4\noPU25Ryq2uuF6QDnBqEqFLJwEBD6W8PTfW4ZZND9aIewDlhhKsbxrMlDQ7MF\nNKWVwePqqzS+fu2ACMi0ZXPX2ERgr1TKgHoblG3lOwGhlxyGkEpLHQH/ALpH\nmi234W//2m+vDAnncaHZjNp8H+pv2DZSROxCfL0YSZl+1Y0fXu7ogxPChP5R\nYJkLU3azDEXdBOOQiII9BwDt5pmSqVWoRwRut303qN6jvEmIdhhVJu9brYnc\n9ztT\r\n=8T0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/list":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/menu-surface":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ff870005a.0_1597367851992_0.7845621280400734","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/menu","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c89049a3841c0e4c8316601336a4cbde317f60b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.150f427a0.0.tgz","fileCount":37,"integrity":"sha512-QzgBfEeH7XgNH9tPyTcpwyJtJrloN6Ovv+aub4gGioLw5nYN6dYnOyf1dQsMJIs5d4BstQXfB1Exh0SIdxuORw==","signatures":[{"sig":"MEUCIQCh3QcmMB/41UWjSx9noOpilFAsnVQaDN6ZOTEpMwBSrgIgCcgutUMK4UDrxZIJ+q5tBsZaOEdSPkUYKDpWop16zmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIyCRA9TVsSAnZWagAA15oP/38EiAidIMbizbbjU1Am\nTlLV78PIWcmqlnt2rK4i/5uukAbXQ717V5wvdfirCEvkxsQ4hJ9gbXvVFGIN\n5fs8+LujPmsOyzpU5dHHJn5DIc5rz9BgEJ07ehqdyHP9hjPKSGsiIaP0L03n\nws7KG687WKmESjOZSwi/BqbUw61lOSS97U48WAAQcHyssj/Cs274dFy2t+AS\n5gTr9L25rN0AnrqbO2tD6AfsdYctby+NdyJ7Mvovl8l1PG3GFVILeHz/Qhtp\nR5MuuNbcroVA8d8ZbVmi7tON5VvNDw6R06zPajJjdyE7eLFYId+0Ed8Rbv45\niKIwK74dEwmaOr7kfo1vyQh3LQxAR7wOPUVua4Kmnxv6aDpUsimbzq3HbSOp\naHIKOl0tExS8Q6vt/Y9uzzY/YSpirsUNq5EtYd9K2PfUSFutTv7yiMhttv6o\nAFSDs5JLD0NCCYvTwBmGKvhefeC/DR2frAOZzq98QkQ+GzfUc+09IrGQ4RUx\nB/KgCMipjG6V5iOMjlznKp5N/Iz7OtQKAqQIT2vULqZgHXdTfucRLOxfuMtG\nyNzgbopBoRhCjcDaQslFqK+R4hkNSRrTVgN7vmrticDWwGQjfBb0HVrFva5H\n7b99UKEM0LUVx4NT84JZyVnYDqEdqqyEaPhwC7M23A6BkLw+NX5l+zLlJo/k\no/Os\r\n=0nlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/list":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/menu-surface":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.150f427a0.0_1597411890214_0.6223671206074657","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/menu","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8d380fe8848419d95ab3997666caf8859cd816","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.bcc58290a.0.tgz","fileCount":37,"integrity":"sha512-oilmgJYVxJZltXIQ51s8u2PMldUxfWm1OVwbg2rsqXkZq/zuClwkiymGGJKq9wuNTHsTaZq4y9H+n8Ugsp2pvQ==","signatures":[{"sig":"MEYCIQD7MbOWKdodowT/mVRQxBUQGzD2XwJxqp3qDn3h9RaMnAIhAJ8prC6/03vXzlaDp3cwvWxJeyCJHahIBk8bp5M3oUox","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNx0BCRA9TVsSAnZWagAAc1YP/iFOovrBCoFFH+m3XTno\noxezP/tPf6DYYM7airI/e2QCZ378VvriOa2iotIz1Fa4CdzeUDuX2m1DOig0\n6Kxob7jCykU2Ui1c2tH8kw3i1ZhB1fYJtDFIqjV/DdljM/7WsrjLjlpXbCgz\nTe0HL2+RZYnDKvEJzx9uQHMSCbUhFiqvBY/KwIe01LAKSiBGHX11Ggedua7l\nyBZIAofz6QjYDbKo7YijZeL459Pw5M8lzAgDj7wZI3Veu2A8Evmcfx5ZyM+w\nkI9Esa12gF4CL2xwq0jp111fTVsFwECHszjoynispGJjNCSGtRSqp5HHIQmU\nC0tEh9py7pFkyqdEZl5IkJDV0WeQAU85wIzKA2bXf3GtLkuLMyVMOmQ4lgJs\nGp8AmIBbeLtCMKAnxuYMno66FzzESiqnDKBSQWDLiK+hMQbxUvcvYQkcHg+I\npiKAfiIhOsXWTA1E3l7ZF/uS2n9WgCrdUHP3T5Beczf+xD3CCdgPNBLjNkCM\nVoK9WdkJhYEfhOzbz8ZOotTcym5kWO8WHHf9IbsLKSLNlBA4Guk44whA0FEl\nA/IFG19TQmaPYlAn4M9sPGouKJC6SGPaQk397iuKJMQ/0qymSzPLMXO0J+JQ\nCGiUbgsfaDSnVxTZCkBFWXM1pUzEKZs8+SQa81PQfvnE6Nt5ESbHWwd9u8rO\n9bHS\r\n=dr08\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/list":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/menu-surface":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.bcc58290a.0_1597447425393_0.8459667315777273","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/menu","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5046051630d2e3eb284e0509eaad4b33455c58d0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4f55400bb.0.tgz","fileCount":37,"integrity":"sha512-LIYxenqkGi8k7I14h0nUgIISx29WX5qhwvUR4hl423PiMVAPkOq+Enw938gnOGeou4nuFp7ZSHJVkR7PaOnVqA==","signatures":[{"sig":"MEUCIEQ9PVdKboA3JStkUEveoghRfNrLrxyofNtCl0hjO4umAiEA/jCMaTO/pjDj7UnV+NTFgGW4xwBTlRWFzJxiU6KSqTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLWCRA9TVsSAnZWagAADuEP/2hcev4yyMVLgAPvDmZV\noMKpf7A8ptQmuGd4vxfG9P8CbkrcBomKftkDancbHluFR2Dx/OrUjfJRpG3U\ncV02wS7kyqHUiN6MGN/wgC4iKSSvGDENtAZndVkZ/FdIjU7YlsmTu+Yb71IA\nRunCc0DE9VFnwZQaSMZpCaVr/SuRrqy8Bq3QPRjXyFXnfZ3Ru3OeYQkxO5v+\nXp8cng2I7qVW+Ufc0Wq3Sldbn95AGoBgrct29fBdAqnZqVqmxJpVwcAzjD4j\nFMH8UFM6a+qLQbj6Axno7X2OUVL4RTw+CwLlGsKk6nnoG2KYbm7O0L+5iDeP\ngx6VGts4DnCKHYykNcKO3URSJ/0CWldFe6VE1RQ589sA1SOkoKRwvfmHgx1Y\nR35CjRrUeLRdGkT56KUmUuWsQHPsWB7XKHgcUYX2Q8Zzho8ytO0/K3r3BDFn\nCOYnzzqHYwgfSshHHetakCa1wtYPp1fD2AEYAuzLpZqamke0ZRIvJWE/KQAK\ndsYLAa8PgIn2qZ3Q8xMSaE+V10JR0AIbvBeI9HTgVmBnS7AEQDAWeQ9uZzr8\nCVlaTEAos5bBnJN4PTXVhr5FQsKvYD0H/NqUTLfFavMYex3k57R++PtIjiXM\nljjXmTe+UcuV9o9mw6i5Avz/X7tTm/710+7mEg3jHLfRZroRKyJyk2rrLaug\nj/YE\r\n=9KLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/list":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/menu-surface":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4f55400bb.0_1597682390377_0.5372106010054445","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/menu","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf5193288cfad5b5e7253181be83f76c628ee74a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.000d64815.0.tgz","fileCount":37,"integrity":"sha512-DYJ5zkyU0dN5KQvSS04s6U03kLp+d5nWB7elwNGwqeo+36fK3Wo8puWDC8LV5KJanC65ugsUJwBp/5EAxLv7XA==","signatures":[{"sig":"MEUCIQDiMKSBOHgxVtxlIuR5m2p5DHnhkbjOWGkil83RnBwnIAIgDuN7dXVtA9h1Sg6lXE4KRxoHOAOAUDr4jjsIvywO8ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjhCRA9TVsSAnZWagAA/5sP/2mwS2hN+gdkwukn18k/\nPF/XswQN5A2NMAb/kTyN/F+NdbyvKbwHhppjGXnENnbCuyiwjv8sO+7Dz+sn\nYFcdup1BE6fomLFL1LAj4iaTdUYBjM/9B/KaaOCeqQQ6Jikx9fbCyuKLrWNF\nkIPS0w/lRyOqUt7UnOWNXAfXfe7EEJo+nKaR1DF8zU5zxjJ196dZBK7euVVP\n48pZlOaG5xHOzukti0RfOrR9r2p+qo98j9xT4lvOZmvNU3knV7RR2NnFg1xJ\nR+SDMiTPoJhWmbKp4vhX8ky/oBSvatdTHjlBEqpneOwcHGZu6clTn86XO8VI\nSDOBnULd1PckQUtn8pjsnL60Yz61APBlTnUHq4kYSM/DhycHhHv/DJgappSS\nyIlO4YnFAWC1onRUb/TgkUA5q/AuV0hTh5cq+D4u/aUCCCibGXdlSLmBehyf\nGDfguoDcf/WNKtO70D+S0DngsFiZuXOZ/iqdp+cy4vRM+r3fE0Mu4mZhO9lu\n46INb3SGNHIECS9fQCQcesLdoEVoxQTRAjeT29TPLg2+uCR1bZssMwCMIlvw\ni618AkTvJYeLcnE9vz+FwCRAq7+caqoe57t7pMYDgBpPzPg1Kr3BiK1SGxKJ\nMTt6m3eBA/R5L5WfGF3+rnpiJqa3X8Vk0ub5GEoelAejSphUbZWNEufpFm0H\nWaBf\r\n=bplA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/list":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/menu-surface":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.000d64815.0_1597683937230_0.3603938617790574","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/menu","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fb6c3980b542fc9b78376bee5bafbd5b47048b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.defa599a8.0.tgz","fileCount":37,"integrity":"sha512-ZMqZaW9q3MRZinaaew9JUEmeHC1HIczEEXHy/V6pYIBRCfNUm39yJpJdxBT76Z1X5TCxrSpekAW0OLxy3CdEmQ==","signatures":[{"sig":"MEYCIQDbSpsJILAN2T+T9Nzju/QBr/bq5IPP7hEGCiriFVM/RwIhALEy5gAkHM+WKnipOJWCyqggvEvHn8+StSlq7enkEKDT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOumQCRA9TVsSAnZWagAA/f0P/3IPCfHAJtPZyUeBL/PQ\ngO1Px+fEw0q5uefMvkJ5sXziaFeHcs95+/O8+xllOmBiHOJk+iyy+EaXeF5r\n/b4eNaZkvHmzbi2Je0wA8bLVhAJpCEzQeDoku9eSfAd+OJ6xKWlmfPLvbN1N\nIgmmNoiaM+WsGJ3mNoF6d8iHywwoF/GYYZ/qXY+jkcuTt4a1W5kLa7Dxt+Ly\nfYlzD3WsLLOdWce6IL8X2bW6rl6nDTtnWW75/9MdR3XMPMFcCXNOaX2GL93H\nLBzdnHLrdp6DaywaYQr2goq1BQdeVaTJtEg4+iqpr7QMqToe/kAwGTRUGsED\n1gjrEwU+W/qVaby3mrFadm30Z/e1OGKq0sdSKsvloAt7xJAX0dNKb1r197wc\ntuBw+A7iHflJ9k8MKUhqv6UPGc9SOLEBYml0EBzVy5yfiwjJ0UtUcDYOVU9F\n08r3pLCZhEeagK3wsNhScHbcSGHWuKvnGuGZAnXE14HIBKyasq/PoPR0S1rn\n/a57MUvSgCMpA1Tt1n35Doj7E4AGoh6edNxOmyVzN1nCUWbK1ThscIm7Ux72\nGlu6s2fu/6j2QkXVf92J50VneYb5H6jlQDhm5TNlEDJtv7+DltThcCIty0EJ\n249tkWNlf7TO+aZTGbShv56gOq6T5ZGPT9wvYSYGaqMEUR4hWQXzjdrG36nK\nirPE\r\n=EW1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/list":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/menu-surface":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.defa599a8.0_1597696399293_0.3935800066581365","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/menu","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ee74c4d6f6b446dd3eb6a237edecca72612e702","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":37,"integrity":"sha512-rDtOwiq431Kwyu9WD801b3qcmLOygOER6+i8tfP2CiraVHkfyOyNYliQypFqOrr/ZC43k62Ti6vHysfVz+Jf1g==","signatures":[{"sig":"MEYCIQCsNkP2rzcwHFC92FiNeEuVpsLcdt8xta94cGgSNq0C6QIhAIfSHoT2A/wrqvZQfr60pSmj4k2vKlSMDVPBWhGRhtC5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCASCRA9TVsSAnZWagAAewYP/A1uaoFtWBOCucdtzIH1\ng5+rAmvUmbgWumIQFJ2BTQS4wqAifaH2jeh0h1B4nKSaJmGU6+QCfWOIVCFQ\nAJjtMa9ObkwzPfgamnMLMeWwRuwWW2JNcXRnFXCa0Frd1JOBORqaLu9Sz4DY\nuSZREwAGuY+IX+/kDR0uXiEyHEjoEctWWsAdQx+Nm6iHr7fHU+kGEXHtTuXt\nWaX71EsCKgF4YWbTXwO1qY9SwbEYzdo6sUAtA5tpI1gRYz+kyqUc6xsc8QrL\nmIMkdkgrecVGg2+9l1mPjX5vJBmI0qt2Fm4sjY5tdCfy92S18w2zS2lEORDw\n2qhb49/PDCZ0efxK7KJacIn4ZJsUH9Wwe1tdbc1ZIGUtlakuOjyjOXKctIW3\n9JcDJz1ej6CSKW2icmUXr5/JRX+IiEHcd5Ni6SVH2H0l9XMHNmSuo5FoT9jm\nQ/mjVI5y0tI7PeJaJUbVND7qREKbh+SCTCoCjCkpGQwaEcxDlRD19BTFpTWf\njPy9zvfJ+/g6Y3We3Oo7rFfLaQbq9TUXASGRuGUvFRRVJ8ZPDo+FZMe9rDvu\nN6xjIEWwJhd+3S0+vHZJU3NSsepEgokmOywVfJFv7p749y+vxhhS8HX4mWyf\nk94Tnwx5H6GUv5EqNmDjq77gOPxmFaYMLiWjS6qUoZqg5qXhsxLNamNkNLv4\nh6yT\r\n=LPMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/list":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/menu-surface":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.66b8ed7e6.0_1597775890200_0.20587942881961196","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/menu","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f91865d6bce5a64b7e4d863d0cd3df2819c9e268","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e2b1033df.0.tgz","fileCount":37,"integrity":"sha512-+WX496um1jWKobjAezzKaJH+ygkV9q5O2sro1f7OkJ4rYQtxivC/9Ci/wgyy1PYboZAdYsj6krNYUv97L8Km9Q==","signatures":[{"sig":"MEQCIAE7u56lDH565/GxrnKswO+8/Q1RwmrhWxBSH9KPn2j8AiBDTI7mKGuhHSFVVdWz5B2RGBsDz/LUOcZpPXSwrsQ7Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXLQCRA9TVsSAnZWagAA+i0QAIgUulcLljZYC1G8ttYM\ntV1MJx6XPQZInQ+cLNRbAvjII8ynyN93De6Lf8gJNqTEItjBhnS/Mr4XQsfs\ntFdfIHwjnNwaOutW/tJbBLM9UDpUpr8zmvWkWGVWK/bmtslE5e+WZ80i2ktr\n69JYUr4+UB53zrJSO3VNsmTOP7B4WVTHCML7oAwhuyykqNd1gblx0HVba+7P\nJm7MWQM8xToHcIyX3v14lAIi5wFlQ8s4Ow+6zRjF5hSebCvvWf5GwAWdrL3M\nTzwVGhMePwit80u3cUWE8NwxxXst9JOCkEj0MdyQHo7CpKIUj7F95awY7EUk\ntIIDyfLVTNSQcGy5GyYMZz5Vh0HRJDvu3eXU/mRjt7BngAp1ExS1bgmgALip\n6K2KDS01p4GIMXfYbufNX8bZlFz5XPiYY9HIGlmRd47wXApVUKlzGXV3OUH+\nhT6nEsfb4liZhsMytGMi4VgeXKFFvPQiGz6olQX8sHINVtSIeMxfk0R65F/+\ny8NP7xt6WHWYyHlJj8AXT2OAsU3PmXMiMTwVOGmwPejjsMiw7Ttd4QoNp38O\nm5/Lc7uaL2UekF9Tk2bCTfAsUpmQKQd8pFxUTlp+fyw8iwNcTY8a7qEHjR2r\nnGsCGcTiBFGn4k1qpGwcATcVYP+/txMuJRv3DBmJP7DUkBuOGZBiK6SN2wOg\nEWG7\r\n=RsWG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/list":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/menu-surface":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e2b1033df.0_1597862607522_0.4926344469393491","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/menu","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc5b81000fe8acf3403a15e607d3be161f44a760","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":37,"integrity":"sha512-mMerFVTdz1hZGXcKnbZtXnUPIeAE6wzi94tEsP+B/3y7eadxnNv/q7Y9d3VWeFKnsAcldFjMYohKpEbwd8Iy/g==","signatures":[{"sig":"MEQCIHlTpYG1MUaD9G3h3IkJttu9uQIcnw3TD/l+bBh5xvoVAiAF2hHCXFOAr4v/4Gsyh3yPluI51ktaQVfnptrJJSMyzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXydCRA9TVsSAnZWagAA0BIQAJosneqVkKfSRGcEtcdf\n746lhb4aZYziK8wBRozPV7b41PwFySQiGOMnBEh10MTHg2H3ZZyEKOOYenqY\np5EZUkDVMmxGHJFs3W5Pox/zKv++YCC3ejG+gDw85MXKY+P8AXGHueczvfTi\njH07n5B5unNljxAEErf2q8A+NBtc1aNwTfNQEs2yqecbqVePAjU2EXP1+FUR\nYIF8IY73TYpxNYMJS1N5uIxpwlfFW669Wg7XY7z+F+11IPpSvWQ2BHRz0JU3\nvLJl+Ri1iGvUj6SGmjcs/xdSOXIJThuIPgmN5iTN7cSSP9Xie1TBFOBEx+tk\nY2OvLSJM/9rGYPwg+T4pz9e5ypMhtxYStJQyj1NxylQXbCA5YaPjiaSH+BmY\njJE17Ew/e26/2uMZ7kbfpLoLTiuvCUxDs9QKj0xegnHwl4y2J8E0O7ntznII\ndbUztrWcyHFzdVRS1g6kNrgHVKHTFcdi/hJEBzDYvT8AabFBwTvgCR4LR03d\ngG7m9Udkb7Jg1O0BPWASA9sVo4zuLJ8V/dC1QYCwEICUPllXIPc72nuvjWVG\nvkhfHyCZZhY3TsnWegfpcHQCr1PHb9U5WMO6qovd8F9TUmVMCXqy3o3fCBG2\nOvGjciHdtzlRDPWNy+sLo1BM8Ir7/8pMQwyqF55DF4bP0+YR+MUyS2Def5U1\nGrmo\r\n=VNXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/list":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/menu-surface":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2e8c3dd2e.0_1597865117403_0.7590305438837197","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/menu","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a470b6adcbbc3f4646f2473ba85d714833372322","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":37,"integrity":"sha512-x05FWNLysTs4IpBzzeesIAPsyxaCdkxxs7etAh+Uh2JqFYSUm21ZW1OxeUUTZdQ570Nj6ls9gLJuSnH8tDFjaA==","signatures":[{"sig":"MEUCIQDIVfTXNWQrdV8nyzzwXO0feUSzQfX0l9O7fnDSQe+eDwIgZ0uEjlXUDDcCFKWsBXGf2g857tboRiutp3OwlyFkBWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYdCRA9TVsSAnZWagAAJU8P+wXIZbLPq6Heg5Q4ZmWK\nHPoWeP5D62yzzjk3IgJqFwbDQ9Q2jCoGR92RyCktueCVcXXqAQimy2lln9P6\n4/vXZPmYr+J7LyPsITqJISLY75v62OwYZUQPYwqgy1BfGGq3+duJstg5g7eh\ne48kHqoIssaXnGCp89nxhliujdlxUWiMnOYdejLxDZybfGomizBlBNhH7GyP\n+V2YzrbJh0wBGrMS7Mmdn7WGBuRI9GHD2bXZdyDvmygyzgUSyvAX6cAl4oHL\n4ZpfRF+k2jxvR4MNhi3f14HEPKID1rbwYbU5RHYrgGX0zM11A++QdY30HlCG\nnsVneLPO1I4HZ94qtJK0OoNDzau80dewQBpKJi7d880lwsVbT+8IPgCZU3KG\n7k737uhljK171m8n7cp1618dNTS1+HZR0W0ACRGETASScBkDeXT46Chvx7Ca\nhKMAJYhep/3cRnyMYc/KyDo+qV2MIvqdupKUDrPd0GKZYBEEwDsdteTvnBXU\n/wvOxk8ywxbreg9/28PPKp9JxaAC4pjCE4Nw4+z7a8pIbmTBtJCOTfZuZZPN\n+i9Q56veUbOc00tSHBpZmJa1Nz0jhJcBXw9m19TO+gT8U9PREFDVCvM6DTMc\nGKkNooN7iY1I3eqcoy3QWa+rLsX0damubN2jz4XMhE1/b2mwKknL9YAaXkw5\n53yO\r\n=+rMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/list":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/menu-surface":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b2e80a5d9.0_1597875741111_0.05083027739779067","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/menu","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8feece7a10dbebf40bd1dfba053e15a4a2acd5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ff88df637.0.tgz","fileCount":37,"integrity":"sha512-YmF/AXHSOTPH99xisuIarTfl0GdLWTRUS1x992ZEWSl36KBjOpCPvLx2WnIyZnnT5+FGBWll1QrH/t2RZGzVKw==","signatures":[{"sig":"MEQCIGkL3rN+1lQAw6MLMJN2m5b7qRr5Gqt0LQ9xaIZorJauAiA3lqQxqbuk8FtfrTtZn4x4Mxq8PGM48aT8oMsPDXrs8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaj2CRA9TVsSAnZWagAAIigP/RNK3xGlEHXECNeLKNkI\n9LOGi9tve3TShpO5kQTyksRojLTXhfeAhoCAd0vWOGg1iWu6a5jQBX16bIYr\nav2fiG8QGqk2OQwCgxul13y13RisIrGnnkiJwMIoXEuceaZbc0fFwwkCLA6l\nZAFVltpsskL8rjruvBpuyRv1Gd4n5QNRWFlXGtEPrqpcz3iobq9Gh5oMcELS\n3Kuu+d2sHZGeaUdCbkGSFCD5/iHFrDOxEnQ4Ih3WKLtiKKiQEFO6ytBoT4bf\nFKj35UOv+kNhr5o+Isy6zcHuUZqXdJHenILvpPiQonj+TPUdP8N0e/M+MWZg\n8V9wt9LoHdaa53LdtzWxgJWAYMZDuXAnJMGHoVZuunuGY6koXkaypmxITtbH\nUAq2hCwPjuFewCkLiUX0vdhwRo4g89mkH3/sS3I/yEaIh39q0pVgocgA918K\nCbaqPJxEPlcRP6U2boA/XQNBAmX07hA/1dwPPsXi/TGfYgwDelvbx24y/0qL\nphvECs4w7Wm9PntIrvl0+33M8fkiivNka0Fi/NDhKJA6ZDAJ8kfIMC/AZkGW\ntAW2JgIE+gVC4+X/VQNrJJIWIS1eJpOqI8xkQm/C1lvt4/TPqwvFPEIW0NWl\ne388iqzUVxJlEoPZnICB8qB0VHGLGWsKzZyKD9+GBW3yoRPhAhcD5mTMz35P\niROV\r\n=YbcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/list":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/menu-surface":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ff88df637.0_1597876469694_0.5481365988888716","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/menu","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ff12468702b304b4015256cb770a911735a0444","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.32fb314cd.0.tgz","fileCount":37,"integrity":"sha512-7SYLwwVffORA0KeosdHlHQBMZFgD+nz5WWjSw/eMXfELKWmkQxG3mMhyyfOD9PjzSnGeuG3C2/WSSWlQvGrZ2g==","signatures":[{"sig":"MEUCIHQ0usfcLe0fl6YRgYVbSjnVS+w9haetcyyUatWiqbSqAiEAoiYM6iSRvfumOb6oRCA+FInVkqWe7Ts8GUVpQCl2TNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlLLCRA9TVsSAnZWagAAyOsQAKCaaWcKjE+i/spgLSel\nnMzXo8hroDr9nh/O/XpvjCh6m1Lb9cvBlN3THx8+eRpt1UYgLN3Xbxe41UeG\nVhvno+V0QAn3Q2v0wjv83Iz+1Yu3nzf8UncocMl0+S0lZ9bSBKpLr1DjD2In\n9nL37dLNs5p20qEZEqYmhuyrxe1gtdZ7QqG5RPIrYvfBklIcH16X6fl9KjCK\nYfV+SvwMs1tOew7epy+1L0yaoiu4stvfh54IN1d6CnQTIvgGKzoRlyEkfjAe\naOxXef7jLlSHIvUzvRu6eVVUMr7JEhpK7YNtXOjKAvxxY34N4bKX4nKCp2FV\n9kDM0RSlodTrGHGTetSX3Oy6svMjEkWQrpw2Wn+wYk5Y8gA1/p+GoBCfplPD\nvZxwLPvMTztc0kL15E3jl/zVCrweGPx57mCjbybimhzwghAXU/YnXdTgo5vm\n7O5kEK8uqawJMDkqchYnCN4bZgsJV4WopBIZzJvQpB/2K4NziJ0wAF4b7nLb\nRuEs86jima6kZ5YUliDv1yq3Mk+G6wclcHecFAa+7bIW3o1yXwryKJpmGtBI\nP0+Q3dgPUnQXtRpH6y899TKu41M9OGkCDUSd723nsUwg7KMrU1NiyG+w+MUr\nc3MozbV5Fj5ApnDGVZVLIL8Y8747N4Z3k+/4gsEwWFz7j1ZLLMQrDzbNTmI0\nOXZb\r\n=fHpb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/list":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/menu-surface":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.32fb314cd.0_1597919946740_0.8618863432738848","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/menu","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a646b871118de93392298611347ab65d07c9424","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.546277d32.0.tgz","fileCount":37,"integrity":"sha512-yLtVzR/U/Vz/um4Cg25YxH6uhC29kbO84BfA8lR0TKmcREAYKpO1YwI+GyBZh+k5fcyEkkrFVcnZ3hpWB0ohFA==","signatures":[{"sig":"MEUCIQCeGSjcjJ246AHXggjq1xjx97U7JRWayjGnxPgDa9ZVQQIgWZ6kXQc+EnpD0fP4QWiWlRgR0tR7xAcluuxoYMHwf0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqi4CRA9TVsSAnZWagAA2hAP/iZyZW28+1mW/DKJ63pm\ngxqI8Rmcmn+Z/aVYZky7IaK1Uh9YuB87e2Sv7X4pmCtUtP5wTsVcCFNqAfld\njJtgkMzs3G3UZ2/8/kv4fRoqBCCQJ5EnZoyGEj3ebza+yKv4H0TcybwZek9J\nfit/f17zvXwwe1hq7izZQUS3qyQGr0Ky1BJd2eZ0g0qXY2Vg70Ex5K+MXnJo\njUqqbzGplykWX6m82eHB6HhMmQUvpSW7b8T18bFuc9EL/HvCfoOFNCDMtvVU\n/xUVeD37UHtN2D+O3bgmvWIt3/sRL0C6RkbjIyuAmo/Er1bK0DEM5gSyipqe\nwr5pi5Jg1n6ACLu5DcfqE6kskaGrVNrA9LMIrjJeZ8N8SUwTVkMga1khsIdP\neHTqlcaducckolqRgF90jC/NsQnIj47B8MFaIsy6iB/KjNiDLKWxFmhNuo6Y\nWDCzeqiz2bXB/URKVAqyHOjWjwG1a2nBWrLJCKbUbNYm4ds29VrtgfrUBaLl\nuE1DIPBOIUL79oqLpPToqp7j9CUeTtdMqyNNgs8zPWfVqhX4h14yIibjZIvs\nhhcKw0fj7+1l58eGq8K7SXDiDbbXYVgyrV+1NaRJpP3qYrAxx9oZq7atK6qQ\n7zwyrukBkArrefgtbp99DGejAZf5iYCGp3fH2P3Anlc+2SBQJZ6nvl26J4A1\nxMrh\r\n=OY0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/list":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/menu-surface":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.546277d32.0_1597941943697_0.983065771087027","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/menu","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cfe0ef2db3c57f6f34e323222a5f2afe1893dfb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.da72839f4.0.tgz","fileCount":37,"integrity":"sha512-zKlMvaE4xFEk4eKj43hOJRWTcPeS16igWJGdmN6bGEt9Dfgb9bbw6DQ6zHHCr6Y92D+804yXbxqYim+vJoj2eg==","signatures":[{"sig":"MEQCIEC7eFekRfJGfR4rmY9MKV8BmTkEm1XL3n2cOT/UzMq1AiATIFf9c74T07WrKGP8qv3etYULJpcEUU4HnJO5HN5OVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrp+CRA9TVsSAnZWagAAWmkQAIiQZPz4tvV8KIkXCgIq\nAT/ofaBo83biMtUhgiRdMnFt2DX38zk2P2N8k5c5CkvO0xIrxC6G1tS24Bzt\nUuUlHS0tMv0F+cPMmibDfw9TK8QThmimYK4rFkiZStg7nDzsT6f9izQLk+6H\nKPcthMiH4+XqvPR2AMsGXXj8mY5+txGHlk/K0zlB9Mte551oaP1EfvWs0vRv\nc+UOygJs2NWVzKOCKcNs72Uo4YGmubAaSYUWz3LWzdgWJGxkYTYMgD+fRlOB\ngyFyx+AxN/gzW5LesD8ApmtNbrrX2k4ZN1axaO+84FR4eGVl+j/q7Cmcy2Lc\nxxkmJSMQ4vXK9W7s9QSdtR354JLTOFMG5HQCK7FxVXVJ+r16aLAcL3aZw9If\nwh2Z0j8CCrFSGMj5ppzpX+bl+eeoimyYAthm/AdaGzb9Klf1OTsC1mmpS8Km\nYpDNQ3BJ2eU0I20QFWQFKJZUSGwIUCm0KDWRtCarhGqQmoxkmPjprCFu0C3a\naGLHDS/cOwdaofTtQZY660HKB71Qsz8OmHmpu+e7GddNjoatidPaua7/Le48\nu95xr6d4/jGcKYk/gXIgNrQYa+ZhuNOVQy37+xjAWeAuK3YoFTSW6QM8nast\n2fqvadH2HXWGsQU4TAXuXgLimYoWZMtdoP2FgK51sqMNuSw+KC8UzSWApIpr\nynzi\r\n=/1gm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/list":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/menu-surface":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.da72839f4.0_1597946494379_0.882332075666548","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/menu","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d324364430ed26d50177a49d8fa0b037d96d844a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.346069ccb.0.tgz","fileCount":37,"integrity":"sha512-ckWZhVz0MBiDSytVowbBIrQbqVYzsFFlLjpfbJDygfkdW/W+h7IsHBwa0/zkJf7Mzp6HnCICwf9P1qDZv9N4iw==","signatures":[{"sig":"MEUCIQCcxkMkNtEHt/WJJrAWbmq0sY9N+IVux3+dnIQYmAGrkgIgarawkfnkvDD7wMhXsThhclT+PMymkO4J2fAlpW1nQjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr7HCRA9TVsSAnZWagAAsBUQAJIopmBV4rhTiw94ftFB\nzPTuJybzVeotO5a08sN3gmWb0WveeTRpo6DGDCyog2+u54AOw9ZrpC50K63J\nEQKW1ioo2tNR+jI+DAZcrVdGnCEV84OhC4Iwm4KnPYiTc6sJL8KUk3eA0w1p\n9BCjyggXwA96ebNGDzL12GoJbcziT8vFPyWdQZh2nFSohVWoowULEnuwCmcz\nUEpyCBrwEvkss0tJMlpVkgJfPRloEoFCgPhiNs+xjKUa+3sZBE1NKIo1adt9\nEbRrbaxZQpBrdGtzHjaxIdxbkZyalUmfD/KcBGjAPZyuEZ8zkAY0596xs0CX\n3SYjXC1RFqqLgrk0WV0R7ORrft4TPNT5fMSbVTK/m37h1+X7g/9PhaplwOM6\n/QoGaEBnAaw/lRABNsfkjYL1WR0Z6xFHmEVrwQwJjBYN7Obm7bE5rNRraVnR\nL/OpAI0mbvToVg95uxfTC1KIK4dTw4JpRwovX3pnIPiZJw86LUFrYNYqggsT\no8uluGU5OH/LZ3BgB6UAElRObriTkkYfqt/9pEiu/3mMdzCMBadx2/c+6/HF\nhVgQ/7CXkzg+UNbVYSoiQ4PedDWQCTekwobU15+hqVANEqBEHz8sT52TZxn0\nNovwL7MasV/PUcd1wCo2GiVpaiUPVRLLgIbJb/fjjtB451ESu7Es05obWcI0\nK0UQ\r\n=jp0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/list":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/menu-surface":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.346069ccb.0_1597947591165_0.9707099951714093","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/menu","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ece5b7dfdfd8cfb37e017a62b8ee24dceedcf84d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e27c5802f.0.tgz","fileCount":37,"integrity":"sha512-Rp2IAPHKNjy9mTJn8zp2XEmq15tQ2Qd6ArkSOPu0nW1dT7qrQnWSc0bAGl7RTJ4VSBUOGYv4wHwHnU8rVOEOTw==","signatures":[{"sig":"MEYCIQCKqXNbOMecJ3Q8IZ0z3TXEp58LDos1kRm57Rn5gK3u2gIhAIIb0pxDiaQQq1QQpjsBomJNyZrPdDgSenNY8XP6EtUv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswXCRA9TVsSAnZWagAA5DEQAItWq27fO9V6+APhao1f\nkJWcExiekuqXMoY0U+Ix6fTzI3kh6n7QCQaJ7ZfUxX3nD17Jw9dtnQTT2jHT\nBM6LmaWgdojSzIhXqKQsp4Gp0PFTukFZXQFNJ9pQ4VSfcrellNBjKCGenHk+\n+njNJKY+np2avA3fhEiZ0KuHmzWmijLnKfbnFmPbzSzQ/lxSgkfslLoZ+bAA\n4aWydrnu5v6Et2786hRn6aUgce6FqyyWewfPejqm+1/3zGex27vTggm+Y19m\nD3NtpOhJV7bGsImRsfIESXE7Tha69Fr+uwyjOwmQG9dQyeN2iu6m3M+8xdhC\nqUMvVkW/zK7sVDu3zArdiajHlrT2UFfMTaYK5qCzXpOQ9G0HE7o/9xgU3xMj\noUwjeGUJyhwkfNe0Ii15+gEmBtYYW++mm/B/FTjJt+zOSu1/ifMK0Cy9go5J\nvordchZ9tRgDGxDjaROuhYYG8nqb0ecG2k34YdA7zHVA8HFm3iCf1nInggbJ\nST+TaqdycL+6esvfzp0Wtq1lhyvHb10DvMbPIkUOVaFGe/KEgnZxPqjPwTs5\nxBCmtjvpEqpG7y8uP3WVkR/6hs66+dZkFrhze68KMzSCd74LRsThD4gb8USb\nLliTJ0bXlJAeT0rsTLHNl4SI5zss9nDp+J31ID2cgMVLo3VyRAc/j02bqgO1\n5OoJ\r\n=w5S0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/list":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/menu-surface":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e27c5802f.0_1597950999159_0.6345020989828878","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/menu","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c47d18d5454ab15965d448200455583a6a55d777","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.f4532b9c8.0.tgz","fileCount":37,"integrity":"sha512-LvVt5Eo7uclCqawvM/NwkszRXHt/NOX2F63cxTsYyuhKVsbtWy5uyYDqhPo07hYRoVY0iRhAJm/gawd1DL3i/g==","signatures":[{"sig":"MEQCIHISxaUsO2d3Fed4qhQCv90ILg/9e4VmDIQiyz0q+AyZAiBsnso+ytUihmDLo0JjziCtzUZM6rfFC7jenjdwr6qYyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtYHCRA9TVsSAnZWagAAisAP/iY1zw3kAYo8/zQxDyOK\nycnOLuDtRNbvrXO5+0MJMwJjnOVf6/8ZY90XmTaQlJZpYV4clON7cLdLHOf4\naK+o5zCGwAbfU/573ZsnVpbJm54m/exespsCiXS23ofQavDllWNYxLrpcbD9\ndL1pSt6HcNKisxvzzOQY1BMBM7hJ3VWd6LTcI6+H71CXV4Ls/+orDCRIqvtF\npV+76ZxTENGUQrkcKSBLWzMzLlkmz+dyvmgoIj2IthXlXo3f3m2eWui0z+j+\nTk1NnCr7W/J5RWxxaFWI5aQqamBr65LFZQK63hsjq9APENvAjjH3kmPnO8bA\nYWdAhy4wSNX3XwcOysBjBvasOcrdmi7oRx5ToW2bZ6HXk3eZNxNpiXcdCrGx\n05pONF8aXjaFPnNaXA9CGh/s8TXAltcp2gAhEA7s9oumxcdTjmCUN6HK6nnJ\n5OECRRSsMBWB4IVaHXj3V5TeinkYjlsObgc3myOkuD9xusuP/4t6+XTJb+/h\nVbqSZBmyka9oYnvzV7T6LYfZuXfgd1tVWhQINXQNGc4vN5+xbutFWsSgF4vD\n3P+FjSlT63ibA9ESRjOt95EaRYrTFogFugSVNq+YlonIzjoBSrDPXM4vpGcC\nMw1fLbO34i1OjNPlrCLPOWEGBdELTtIi1ORFnpR4T6ffh2DAwYEbuyWaibrI\ncOcM\r\n=biCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/list":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/menu-surface":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.f4532b9c8.0_1597953542778_0.09094727076725184","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/menu","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f061cd722953b6ae60045157c63ed8b8ec019de4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":37,"integrity":"sha512-l9ZLzVQRELrZvf1JQzAYYPw1ciGKeiRfCsfwTpod6tRmRhZUKON8KH+xGOrJUfXiDjgI8yFZ+ccTHGqFjzznYA==","signatures":[{"sig":"MEUCIQC73+v3sJ8gGlv5rUDg0guHAM9SxO2haWRQP4ZyqvsJcgIgQR+1GJogyTETyft4oT/7g+j8G0/KUUFFiptwnm4+O0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYlCRA9TVsSAnZWagAAWloP/jmquJWkIpelsXFiZlin\nDdsJKzne+gJiGxRHKriMxTDP3hA0fsSi4oUwHwSjNvx1KuUIOPctf7kb6JAa\njZgWbj+cZ3lNmdQL9RkuBkoF09QQnn4H5Gp+tPccfipK10p5eh6cUgXnzEWs\nfZtkSpoA4RE7nhmD15+391rHjSYYLkuytrzab390Lfi25K0C0fWBEOGtLjEh\nTD5Hj8iYetVga/Cx5aiEHCxZvIr1Y51lTMjvbzwsusCTrlos5QNC0/Ruxcmu\nWQUCC5zUr13rnWjBBjhANxLvweLrPvsnuH0JAMPK4KCGJL0EZGaT8WKeq4tB\nyjG4P4WpthMJ62IDRYPyyX278gJ8x6aC9Nm8I+pb17DAZzw4xyrKLwB6MNsV\nyzIaiyQg+aEGp8fvr5SkswlquckuiIgIaoOaLbw6YrMKdbnL4hgIKjdhttq/\nsLbPGjRmzOvSVLK1BhM/x9Gwf9X4XEji4hCok+hnoiPLwYEdkSQqLMx7flDh\nk5J7V5RvrzT1Acyw7ptawhF/qaeJJ1s3hGCyYQA4j4EohWo8Jqu8GkI9oz76\n/57KkNQOmJ9yRVNM1Rj7+82c15nUmfLe2WQOmO5FAvWvdtq2NqHo3sIli23O\n5AaJ6OhoYBzwyCoNVBxA5BSZNcosdxSfjufqEIJDCEEhfuX+C6uFDsHT9Geg\nkYcm\r\n=R19i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/list":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/menu-surface":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fbf73c2a6.0_1597957669242_0.9428734264458014","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/menu","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42a4586bf11b44ddf8502a9c15c8a0d65c31eab7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.cf800124f.0.tgz","fileCount":37,"integrity":"sha512-KVffuUVHE6Kjn4zIlqyDjUBg7+GrcX3FZLbV1z5Ge2GnTzGV9IhsRlV52pdnfgR1nIRkYF6XP6Y/zwNRkxesCw==","signatures":[{"sig":"MEQCIEuPHr2opQKqBvBB0CrlWIhC6mYTsWMKeSzs2ywRM1J3AiAZeONgKp5ukijDY34rjjxBoZ2SU0moPq06U3LYdG2uuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvD9CRA9TVsSAnZWagAA6MoQAJHl2q6dLbSUMwf5EjY6\nviMlk/u1buHiNb6s3ZFPAxyXC+ukrZAg7NPRX56VVf2RiT+Qr7Dotfk4KqLz\nheEXQyI5SIH7BxeeEQp4oFbViVX1qjOm+WAxVK2rMyPlbbplXPLxodSET6Ph\nVnbrKjplv0THJcgAH1cpKmuD4SP8SWWIrciYh8W/S78dPRqrsLa+0yn+Qau0\nMa/Gi4HQSqqQ6bL4SQOVpVpR/DXNykOTM2kSzOAYZ64LYX1YRKubN8KQnI9v\nzZjSNyGRqw/oTBIxMYlZKcST5a7xqhSLt7wjwQD0syEabKzpN5wwm/Jipw4v\n44DC0svc0+ECUn/H19q6aAcBpSlVfH+yQSXqnXWX2ss/KXlphzz576iH9Wze\ndv9gPIs4IZQARknWwJdCt1MAKuLQphm10M0GlzkcmcBE5C4PQuODBFTtHEoQ\nGKEf/giFukYX+7ryfzXGfx43PjqVm0WGeUqs7so4QWwDauSUmrGsnm6SHtJl\n01gY6aqM1IPhuGSY00ywibbDcOcdrx4p1oiH+QNZnENc471DC7ZKFDJ+Xl15\n4FpqRsMBwrEpTrpnpU9LtGataLmoDU+W6qaQMkx9m8UAhnd9gqmpe+9yK+IU\nk3bkfK7zVJRhRXcFEd2g+FtIAsiPpLPqxIkXCiXe4VgLbBSVPuQD6QPffPwa\neHse\r\n=wPBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/list":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/menu-surface":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.cf800124f.0_1597960445266_0.195075668794346","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/menu","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ca9402c6970ff992c6a7f309b60e5b98c6b11d2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.95e4eeea7.0.tgz","fileCount":37,"integrity":"sha512-sL5W9QOo+ysx8g1/mse/CYhCF7xiNAOsuE0vPP5EMlURoKnYnRGEZC5tmJ5XeTlle0qtC7WwgDxdbLseKdi2NA==","signatures":[{"sig":"MEYCIQDvXDSeBURkVZ068umnTroYabqpyeW3C0g/oQQLoMwkoAIhAOrVGBQaDbRhZK9Vq2wFs4B6868Mn9zx80TiO/xJXlTp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPweCCRA9TVsSAnZWagAAa+AP/i/s5A21x5QY1ssoaQ7l\ntpAUsdLYd9N+nlLMnWcLkire9gM9GUR2FrFsY6IG+Y81vJ8hfk3gos0ZSZWG\nDzig+zukdJOxjz7ENIOnLlaMimjDhBc0ACdJwRzW/1eihSwZ6tmF1o9auYL6\n1qmVg7x5Cs89b7KPrjQrvpAGkufZ4m1QhTYiuMsESpOAY2SGOgBVGQLV5K2V\nHpiUTvaCCpMuqCWf5lO7SArsiYN9t+k8JTBVvafhswNw+B7BabBUwpdS2ItD\nvCkMbqa9zqRyzJlqeGRu7XPiCRFIBrSqWURChQC8gSoLv9NLh1ApKetazZzJ\nIhKv9DNBN4J4JE/gWKNAnH3meBRnRtZiZiUydc9fRt9FU4oyzXGN7rIYnCxg\ntXXwGU6lFaOlLAu0NC84YPGfbul+SnyB9eSuToq7gzjnlA+gVq7Ka1hGRPDD\nAsnFPS85oMlvvKxD93+Hx5/rv//Vetx38IhXLtqpdlHN5dWxZZ1aI+vTbNOB\n/UVCcPiqC97WSsyifslvLDLy8eI4hOhVZG6RUsj2KfAcPYN6dLOftEz3SbJF\ngC239+rBMtngbFYWng6TY+n9/43XJKDBkOIFFEVoY63njlenmCofsKm9lSwU\nI44KqhpupD4YLmSr1wTcsnPdlSOiqG6hBx2MHjWWP3+BwyLegmiS5gkkDZDs\nHC82\r\n=niLi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/list":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/menu-surface":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.95e4eeea7.0_1597966210027_0.4685385451270532","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/menu","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827544383744ab25b26c28cdbc290ca4de350b91","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.91ab1c62a.0.tgz","fileCount":37,"integrity":"sha512-OEb1N0SHGX8ID0vbh9HN5eEyKgguRhM6wDQ0IqbuOsteBGRKHQV1K/nNjISB1OYcaPYlLBe9+iB7a1jasGEtjA==","signatures":[{"sig":"MEYCIQDXh8cBgVJl5m73ZmRlHI4J3cPY6McCKff4sgoH2BpyOQIhAIrXrtF6IKbKORCVIg7XuCVYBtGkTra/amYH4Zc0yGRy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+SGCRA9TVsSAnZWagAAsfkP/11wnN+dAOi3cjD+H+/P\nNsUluJlNyh7+J0AztFwnGVnguRfP37BWPX32w1Nthgq4/Cxb+4l+rFss9+I5\n6l1lILbE53C/kVMwK6DcQXLvMIFiD0NkI0z+6e7+0m8MEIXFyPLlycwsIvXV\nnFZ6rT/TV25vc1ZL7Y8szMgG6/RkjgNnf1nxxoXousR/8enHEMDunMj1SKJC\n8ED8thOSJQ1MxuUJrjq4MP2yULeMQ+MQyyg41mplBOoe0FSvelQ8x6OKGjAy\nlvXP3AFrty7hFAfuICFYilzj776uMQgO+o4XM2YHx+e+x/ALSBaeF7LIt2zX\nZaTN+S7v4/CTauiTov2CgZ548JIiw8wPmoXbjgp5E2Y7GXXVj5XOKGRy0GVV\nDR8/55lRsrWmM1aFxF17JZGqVRpbwmWID9OrIIS+GhF+37Jmd/6f+uvB+3hS\nhLy88GCWkSJ3ICJLn+CGa0RauVYJvTbYgNXx7LejvsVxN4q0+GeRLRAsu6qA\noxhubqZu2C5SUIUrikMQvtZK2B27ldzuDTJpnUWKhm9J/rHJ9aTJrH24FiqD\nQJ2SXi1iArI4H4wKSBnhtXZ+1B4PnM5/dTg2GBHkzyqXwVGcUKstIRBAAYM3\n+M+IA6YBYpnv8zQ7H20z+WvbWIqOgD6ozudnR3aKl36bKeyj+ke8JJ7KBjFm\n+bdm\r\n=Qd2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/list":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/menu-surface":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.91ab1c62a.0_1598022789632_0.18431992307081257","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/menu","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca1d10efafd3bd8ddcd9c1ad13c2619e334830e6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.58eaa9f02.0.tgz","fileCount":37,"integrity":"sha512-PUdO6saytf5CK60QZcOxC3JvCQ10EGRx6isFT0aDVVzgGcteoch4+Toict6lKM+ZdqQCTOYbxu4GW+OHsir8LA==","signatures":[{"sig":"MEUCIEfey52G+QsUMblBUUIshJcdv4+FLEKDbNcGDEJJYa0sAiEAoadJPRxogROiAU0lsbUdRsLPYb1LB5BwRXKsI8WU5PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgoCRA9TVsSAnZWagAArqcQAIkKBu1fgxFuxk6ca/VR\nqvDp9tEJj6LT92M1aM99hObCkDy5CHMslIYBtX8AtMdBUdBHxI/FDE748Hrl\nkCsFFbULpeEtU/5UOJ8A1aexxlar72OfX9QZB05A6t/2OE21XA/B70DxMw8+\n5yM+bnshP7N5KXokceoETtp2wL5ZHVngpBDzTLABJnippJHkhVx+cX5wJckZ\n3eKMcWY4Cs8VCS/54IV0YFKhv8UQkMh3PiaOVqhcool7nYwnAMInkUHvt2dH\nvOV1HxRRWhAVm11ESceQ2iArfv8bzvJ0kAg5VBI6fax9gap06s1/bJgm7voP\nnlsnB6P3V/KNOSF809G0NEfXV+Fq8iaUMoSSZcS+blq3MbXzu9FlnzhUIjjG\ni6XN5YzHFMfByd4X8pic6N+4py8YozQSMtXm8liDESfgNndedebby1pPDBL3\nWx27g1k3OQ5gBsT3+7qT5+SyTcloOHXiwtE4RS9GXQ7PuSi7DHmB3+CPGOoi\nwMb8E+gPx05cqwwIgQeQRwxYNI4vvjzsd3jUV27RjkhfEZjeU+CaS26JGtjF\nxuuU7oAYigqqKT+7KmCX4R1u4CMpkU5BsL0+k6x5Ikqab9k29UeKm6zH5gaV\ne67CZWDUk6z7ejjJxCkm7yok0rI+tcCFBLKwFCKCIw2WbAYhu4oI8tVn0GBv\nlOcr\r\n=YdXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/list":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/menu-surface":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.58eaa9f02.0_1598040104058_0.02302880354963932","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/menu","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"832cef384eb7ec3730fd19a1c2a02a2d576d9cf3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.238216fc4.0.tgz","fileCount":37,"integrity":"sha512-Hbuzg83ihLw16sqlel3119uLOWZEPpb3XHvFdUQXFSki1CbWafqsQxdRP4cSYHvT/MozKsc/CldweTLo3/V3zQ==","signatures":[{"sig":"MEYCIQCxC9I0y+5sXAf5SeqmWsTCRAJHe5idbE4grkELwODNWAIhAJfa4g3tcGnvFcLBZQcxnidtGap974jcXsrgr7SfQy6I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/UCRA9TVsSAnZWagAAV4sQAIaFw1md4U9R6NDZRz10\nzKIvoqjVkwWJi/eut4NVk+Y9c9+Y+BNwjzejFhIUkuIoLBF4PXyERTzRjRA3\nTMkuNA7tMwHkwi8sgf74Yk1aCcEzLqXV48X41FMJ2VJw/2H/Si59UXydN24L\nEySp6KieB8b330+y5+fVO878KxkrM8kF34Mq9uSixVX0yU3D7SXAEYQKpF2p\nbreQR7njJn06xSlkAWTOlMQy+qr1VzGnbKYdUKKNHJVdV9ocIWEWiVvpAMEc\n/fizFD1QjeW+BnSTW/nKow6nTZkScV13arD7g2dljc8pJtmu8MrqO2LtgG/e\nCuwuQg5s40USXq8eKSlgXdBxRlxg4BC8J8WHZ+18hgIfvCPmkTcJrvPlDl3o\nAZnhzBOd30r0oEzNPIL1BpA2OnnwAWw3ZyQMU4FbqNKg2AlPAeEHE53YQdlX\nFaqv9sqQcsGpJnpxbKczpkssnQyPJULb+jWGJucduqml+2uWBwi1hB8Y1eWY\n7kxAffJ6x6YcPa9fBy5BPwowEmisffpQjn3XwxlCMAI25U4nPw9q7Urxgu7h\nPATjnE6rtFSXmm/pu5yspJ3VBsJPyU1/lDF4tBpXWnUXah21k20NHKmi9E8h\nZCIXLCZhyIbYFKDOOVc/6W2fLFJDTd39gAvlmVNX/29dI+SaKzYtPBmW2Sof\n9wMr\r\n=68OS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/list":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/menu-surface":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.238216fc4.0_1598283732367_0.1410079034797882","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/menu","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4310b3b9033bc28415e27665ca339095b869ac89","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a1c65593d.0.tgz","fileCount":37,"integrity":"sha512-J7OzWtsWUQwt+QTz64TEoNIPj7/I6nipUEVwGjUfpBmLUFdPV4kmN3SXTk6LWvtKqjYLxzkd7HHmlkfO6QawDQ==","signatures":[{"sig":"MEUCIQDLfLC2xzkOAjezInlq67P3IJXlkq63m/PmclDks6UQGgIgSaGvQGyXkGmPRFzojjUA+S19JBzZaxVp22JXMnEazQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/mCRA9TVsSAnZWagAAM9sQAInqvvzWuxXRW96uYnzP\nxbTFGc1R7lO6nxfKbgUCDozgdpUx4f137N64oZ4qEk9ALhpl/o3+nMs1n9on\nXWXDFjwP0k7DdVYnCRjrFxIwgrqotreM3nzIMTmuVibNpO5JNQ0oxdcdwDKN\nIaTEEc6Uf0+nwt7e5zsC21IdIukkrun4ns90yPIMYWi9lQfXS15OjD9nN5wO\nhwVTPO40DdWaIha5IxwGF0Fj2YUyoTSHoN/+iywlVg17AdFWqlmuyC6cR9YD\nPZd630HXHfrlddP6hougHiVmlWA7cKDe+S8LIoqPoyjOv4avuXfxINQ1HWW+\n6f+rl1o9S3WxXAUECs7+guy6ATOdIRYgUI5mnclX18lVK6k+OBk02luwkShH\nutNdSq2sNccBTHFXFF6cE+7OGrBIbHoGuapbtCBfRC210CEuj+uiwSlUcZlM\nlM8KnKSe/O5mW7xTW7vR7RCMLvmWDhnq2Zdp96zgF7cY7/zBEEcLZVvsJ+z2\n2LnRdtg+C1D884ySBxOn+eHJcjyfBr+s2kXLHSr76nTCR9EpP5n8YwGTwjsX\nv5y0/tBkB1lJHm8QJdCRXoOJl39URs2uZD7WcP54l23hcUrtRMthyPd7UAWE\nmk8DfzQ8PaWBcrDheAyj8e3PzSQfHNP95IpBGLJvMzhXOwfdUxZiWAU2Bb9r\n8/CS\r\n=WY5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/list":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/menu-surface":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a1c65593d.0_1598324709575_0.09872798137847205","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/menu","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d350e26bd5d8f39e113cb81d3b86dc9dc4881f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.708cc09c4.0.tgz","fileCount":37,"integrity":"sha512-tyH/g7za6alQlUDaSz6jsr1moRcaosG6j/qWCkJ7np1mSfRGs2DX8hwz8Art82ZN+UQm8atRatDRGUBC2Iw5xA==","signatures":[{"sig":"MEUCIQDQfIQu/To5LFk35vKu/m/cR7UoFclT868KarxvpLvrfwIgBvvh2pZtHLobK4NwL3uwEUD2L9epsMbWL505Nu7P0Fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTT8CRA9TVsSAnZWagAAXFYQAKP0h4wRIdofj5ZbzQoA\nmG10c5wldcrUJQgTN8jtoP1W7OBdgWkHzGbBSeZPCyfoW37aEDdqVzshP7/F\nf8QFA1kaPheJ/SnDUCujHH+gvZ/AiCOoQZD7ACmkY6GPsbhHInS+UGRROLSS\nK04557jHXEMxeV4MkPGHT27a4n+dPXxf9nsplpjSHsBmEptX1GisIDZbWt7H\niy1HwpnCHYs39dh6YM0qV066XkEw8YUFe1aet6jNgtTC9X4qSYuRo2piWiXI\nLlUliV4s+4ITigGZfP/HIckB1e2UG4G0lG7A1gyGjirFtmDbkbDb7CXPyKPK\nyAnBwb6HtmZlnCRZVYofBYc7/t5h7eE1eUbKWOipdbN6+jXo80JyY5nInCPA\nlqjitbTdIPthGCWR+dp9bCR5NmJznyIBKlILGCiHfxbwHJprx0tacgdd80ji\n5GTBoijkO47nnWIbPBkW3GvkUz3xk/tbC5YIIQ60mxh4fqK/vwLl1xxrNr4z\ncBUFmEGzT6tUYcZdBbF3aevRPn8A+sWNeVLj6yGMnXACeaWMWIj6ZLn3414I\nfV5+82POJ7gZQUCCj3Q6LqVAVbJE59OdhSfGz+7X041HWGJxACJCcNiR5O8X\nPH1W0VNmsnB1+hlBmp49IJ87O2GP9n5jKghG1PAK/1hDFXX9fuR6Sf5SmqeG\ntTQ8\r\n=yQSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/list":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/menu-surface":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.708cc09c4.0_1598371068329_0.26963408236287956","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/menu","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d93d2f600a0a5a4abb59e6c60f1dd62d4b387273","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.19bea2ad3.0.tgz","fileCount":37,"integrity":"sha512-IlVWVXtxb7Z0KflMlo1/D0EZhm57YtX07VRJl3PmHUhQr6j/EUs8RleeJauAejmzFTHnETryOODHr+h/9rxWbQ==","signatures":[{"sig":"MEQCIBeMliTzILKJPDW9wp4GPdHedrU1KnPkFUT1d2RH4QszAiAz6bPEQbXojgo/FuZe0EhWFkp18aGaEsag4udTKxP1/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq8FCRA9TVsSAnZWagAAe3MP/inQgdmOWn0kl7PeYVeB\neVnMyK879SpL/8ZM3t4eI/ScrKS7oJs2q0zWhuFHPhNnqnFwHFcpw5aPba/A\na6LsCv4zVZXXaAT5qfsVE7RWtA/BFegm6T7Vo7AIxK8p7XnK0JWt8MJp6hn2\nGY5FhyNXNC08OVYJn3sp41y2Zb3nkhiGPtOeUNeTOdjrcQAVTBmk5dbamgis\nvgyEm7/29WQEre7OqfQsgz87ZJDIiW85ZK9Es0Cn7gMEd63Y5aEb1Xxs1bDJ\nLqwmXO+374aX84zBI3EgW4yn/q2ZvOZyRfY0QIJRgXgfhyWVyszfVijjoVPv\n7g8A94+q2gdsINQyWq7FY8FgwwBQStpv4qXwh6zgXgdyIqccYfZHhsxknT6i\nP/nUa+jyjppJjlJ2Ha1NEZTbUZwnfcMN15CNA9LxXvplQPTfJn9PQqzLOCeH\n8p/H8zOCZIXBxJeoZ7fdn1/AcyQECUZTtEWyeveDJi0q9xXLgNdpNzYWLXok\ntmolu2ZQowrnSe9P6deOQA9wxIZTrpPQC0As5UO/zzwYLeV1oUduYmC5Z7CD\nF1NKP3SqeFcqUm/d27yCiJY13vVe9lclE6YoYa7qtPLmLQSW91W89UBZyfZ1\nWevwo4uL/DrETG+B6ZGdtB7rITWZ08IaTyPbZfE3PFoMi0wgwLZROMe5F4xB\nTqMG\r\n=Zmec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/list":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/menu-surface":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.19bea2ad3.0_1598467845117_0.5461643441907422","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/menu","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaed82c45298483dc0b694498f6b34c521d5735a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.911014711.0.tgz","fileCount":37,"integrity":"sha512-zU9SQsHQscuvKiHRJUk1pNr7vvJsQTxVx2eVV8HJ2+bUWjwbLipBjwyNDzXbXe1qNZ81wpQsXmp+7yLEXeAGdg==","signatures":[{"sig":"MEYCIQDDUBllCsbuisRmp86GjUmepQHW4DMUuVEibtswNmStRwIhAOg87zheRjw07Fhikj/nXk/3Te9+HDaTzzU/d+r3v9YN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9rDCRA9TVsSAnZWagAAgkoP+wR6PUr6jaKtdajNu5W9\n2qUPMUY2Dsgd6ytBJXCeaoDrJlqUW+7qu83Lso1jR8ifLiql3hk20Y2VU7fm\nOoLtsRx6J2OSmxvZvDU2arrbCSEsMtAYurgmEPUXd12KR3ib5ItIVgJeO62E\ndK14ro/e4bMf+UvtJ5FMict+KlTt3jBoqrNhaGMI5KxrVJ0R8G9TmApjycnI\nQpptFwqvDMDPfaX7tmuuZ44GyFv2eIvFjqs/+h4YnBeDbOdqhsJb0oZS/gvb\nwI3UrrBIDccic82947jdw81NYdsY2/n/LLaub/FxBuhrzAA0AqiU92MN+2uC\n8O0drbFo0rCpBzAd2NnS29aizPa3Fd6i1W0ZCmzGV/dzjxe8kPVjOD8nTrUY\n3eCaw8X1gASAo/UuyykmFJxhuKhy7gI1h5z0s2yrw4pouSeojHNrQI9riACW\nPNWJtQjJ73r0BU/qYgM9z65CzK7As2dfvwulmNhUiPghvkd3M6z2L5Jo8mSD\nXpAeXLy0DFyQy0uRhl7aQur6e2funZuaQPoTsLiWXWzv+Tm4rB3r0kdkRlrB\nWeOVfGUaz0X2QtKd4GZhGd13BlB5+3hVnWQxOLq2pouCLuT4m2wUU/3vzRI4\nkda6vtuhdr1f2oU8HLyhM1b8bgvrQ0wqckvEUGnMOrtKp0fnd3NMLW+rIcR0\nqYdX\r\n=W0/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/list":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/menu-surface":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.911014711.0_1598544578603_0.8247635182533544","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/menu","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3515b5a7758e3114dc040945fc30ad57100d60c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d3387f54c.0.tgz","fileCount":37,"integrity":"sha512-Epe9Oawc9+soRzhtjH2vqdquDx8JVwpNAI1yuXpTWAy8GCC1tDorhW5vQTTIf2aX+lqF0scawhAt+9b7fd6CCA==","signatures":[{"sig":"MEUCIQC11BbqETFzvracAckfOcjatsAgHrrzZzOJNEgNUbebBQIgKF9u5lrk7Uu6a4JvhMAjf7DJEqeyhyqMWdD7LmuASjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi1CRA9TVsSAnZWagAA510P/RFyGEVNxCudYUMbfAiK\nc19jT5we0x5Tp1g8LLQkqOYylJEkWlo92BzLPrD0+NTg4MgllUq7fTvqxTx9\nt8pGMSNdNN8s/pWCDKIVYHg5v2LYo3BPlSLUcNIFLkUGe1BS2W6KdRPNm2w6\ndfZCFAH3g0RU2OaewXyG16QiEB651m1//U+ktz88ZmebiDxh/ksMGcKR1Xdi\nazbEPwJUTl3U73elP1ru2p7SWqljRNr1tC9fzh3y0xfmgZzu3Gmoinmk+58T\nNPYlaOjURUosoRe8fUMxRVt+Cg400p6mD0L7r0rb1JcrP7MZDs58o9kGGpik\nIAG3sv0fEg88fwRwQLoxb8C7dB6fL9jsOJigYRs/9axysfBgyt6wXmeb5Gf1\nvlyAFbBpVCEfammwPjOyvn4gMkSdN66eYBou48tuRsnpWF4sxIh5T4kNdf7y\nfw2RzKAjdcFggyEwPv3L3TL92rWdsyD4m0YFYQbp6HYA3McbvnaSpyhI5m3I\nyUaQMdy+BIfUGu2NFTyZJSlJJFSG9Pgv5ybirNZoj55IzOvfmqYV5y4gGGv1\nPP4H2H+CQ5tkB3qUCdJelBzjyhNMcEDdqe+1ghICnrnYP2NUnbBG84zBcVk4\ncE0xMrkeUxwDTQfz/GpKI4YF2qKzY9DsCyyCWdls+4dsIz34U4g+MFkQfaDQ\nA6jf\r\n=cx5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/list":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/menu-surface":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d3387f54c.0_1599166644429_0.14104817238159795","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/menu","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"809f10038c8212219d41ea80fadce7ce393ab6b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2ccf996cc.0.tgz","fileCount":37,"integrity":"sha512-MgXb4nlJsC1FvjfMPUaXK6ymYA7PxnDagbOrl8B/UIdy6wVjMTTiTmB9x2BXCHcAPXb4I5TdUPXwsZPaduakyQ==","signatures":[{"sig":"MEUCIQDYCCrncaGpGC6JtuUTMtEmWOEpPwhskwjVqrWJVAwC/wIgWu5MV3GliTXNrlQCub2DM7BF9xa9X0QbX3OsftlMYMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjtCRA9TVsSAnZWagAAnxkP/3aftou6s5s2RnB9CnwQ\njj9soHh9/eg17gA2xefC37eHfGqFF02jgwzYoW63O799zqKRVSiDvS8d+Zbh\noLOlaxW6Iz6P2UcxbuZy+at0/weVsWs9PA6LX5SEV8OuX7c0E215Lhm93+tY\nkDdMMJP+S1oHwwcaUhthIjMDexUOkMsmNht1JBVDbpjpyS2O8TlXb7FqJXuK\nP25GgPT7S+PBJEr1f0wsADFT+CEMRbL86ubHVzg2BFmOkv01ODz4qXQWpeTN\nGP2YZ9MVZB72IoORqiEtlAPqCd09L9lZ2GgcnFebdT2cpwV08hQYWnas3L0b\n6oihb8aOQUHHTxTo8QDDk8wgZPB6jmgAWMtfptAfZH0ss61Ed59ZrohhxWaD\nIe/jdKqc3rjq8uO5IeaEfnX79lrZdsIzwYq6b1mN+yVebsddF9GIb5iS+AqN\nZtbmP6vUgcV6lx4TKQSuBhnj/uPxat+FCFOGCMJsgVVcVog5R9K2wJxquipp\np6d/Yy6JMoLSbwzp80CgOQafZRFoJapvoBBLVowQqd2M+/LReH4Ih4/TJGSE\n56klaSKTx7ev1mnMtKAeeSjarEEa3PkYtHSokpx+f2iiJyCQrOjLoheo8TL2\nhmnQEa4Bk56FEkcmflEIQALEOWEtSeocghLZ2uj21GYqjs0vZKkToWVi6d4z\n5gdU\r\n=rnir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/list":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/menu-surface":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2ccf996cc.0_1599166700603_0.4000984027453365","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/menu","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9166a3a94fc2fd88f2be7cd0e3b05371b3afb8cf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.744bfe5d8.0.tgz","fileCount":37,"integrity":"sha512-FK6peoO7gVv4R2/+OinoarcxiZdmX1WylHqj+hknWxfr19Fm0cf6tOxbf1Rj1kUbcp34GGgLyWBHAcD5tqSDWw==","signatures":[{"sig":"MEQCIDwMOtSKsLDrUH1fQgA6qJsDxdc7co+3vn6ZyrTVkPIyAiBmwdwunHIeTEB/G9RIs34IVkyXLU/j7hCkso4GxXRfjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVkGCRA9TVsSAnZWagAAgyIP/27uUaslwXTRy3VCLf23\n1qCUcC/iWR8RYbcyEY2tvagbadlxppmiqoUDG3NyjJyT2uUP8PRBi1zmMxR4\nlQvGL1UXbnP21CWiVJaw83yWmKR6kYNiTfYYP0/AzMsmGWOuMs7JbqPm1QRk\nSv3589g42RXbhICuoix6nqjfW7Gn8YvSkiXsvsNjLoL1gk350QJ7gY/5YQkO\n6e430CXIAdSU+7U8RzL7mfYvvu6HcIiy9NY4CjwNNrR3cC82JvAj1DfpX6yD\nctJE9NHWSx10eKJ9nQiswLWslKN/5Zn82NggGCBFGzu/o7OFIH7rABCOS1ou\nadP0gGjaewCDj3XqWAQ6hEaCHJEBnJ+vrKvG9/ih/W6LND06SIdwhgi2nh/S\nJh8y8oiBKU0gL7cvmadBi4oIN/JYqrcXbnotaHoiRmV/EGtXSLw2VTaWY4vM\nHDcQ19ztC0rn54rmK63z9cpG68CgdDDy4QlCt2Ep3ArKFxdvbxaaSTU1azr9\nUfHzqcILVzmklAYD2DelI3VLjrnSpsfTvCbm+ZbNfliLGou8NoQtPgHyuwsb\n1xY05CihGbX7EeJM2rYzX6JMdYSsxrDuvHydyptUWhSlgpnz6R5Z/V4DYTq2\nb0YF901R4PiUTgCnne6HqU6Q3W4kkuOlUoZUSmyUWTxfm2iN7VXSJ1r5PnbX\nS5w1\r\n=HAbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/list":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/menu-surface":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.744bfe5d8.0_1599166725569_0.601808753253293","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/menu","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44d66246f65bcc53983643ad04e78d5605172931","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.78da96eaf.0.tgz","fileCount":37,"integrity":"sha512-1sznR+47oWXEI8CYgHkvwnpG2CWlTngH31eHBLZgNIy3GQVQMIor2wb36UdgKl6DGEtaFY2+iwf6S/uzlx3rYQ==","signatures":[{"sig":"MEYCIQCtUbYrHfZ9k8ete6jsxgGhg/9UVdz+8DJeaJhCZVHNkAIhAJYe3w3KRcEPu6zRmbhIsEWmQq/sWtXk9RWjg/2dVKsq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9gECRA9TVsSAnZWagAAaOgP/0CFmBffqyTE4MLu2xvo\nzKeJ5cs7IClhpreUFUhL/ETCLgaW29Bz3KLOUSRtjFY7DLwxqrwP0Xv9i5bC\nmNmzylW2wA4OAEqrBl+CNslJxEpUMIHHBSu2ZFqyVgVr7lgm2+jB1KOdEwFh\nGyeh3XJqm9woa63pDHqvctsMmVmiVI6cHZC53m/vCyx+r+OJdixzhl9Mjqvc\nldrAShsByyEd1ytYnVjpAQxdwT5RKUK8Fj4Q0GjjzHDw5iyqjG+FlK5csAEX\nZ2Anul60zWNFIrvrQ+80NDHSYQMxuQbqQwQjCyslX7C+iUl7TZ7IxKCFBAEJ\nR03AlHmytjSLKrR9mhDnpQmcSfLD2boKNTqZVdMy9+AwXWtGirmGqtrBS5NP\nBPc14Dzy8AdblNxbd1FcLOBVTc9gcXxGteB0kqJs/GRBssWFahA78IJDF6mY\n3wNDsu0kVm1pxGwoiBZQcnLSecmPOgNCBFFAYw/MSOcxWhw/wLsuwirpnjoz\nTgecjg5whOe88IFM9Ug8HRnNdGuY2BYPyS/QlsvB0snSK/6D2aStgBMW0n61\nIdufVtOpkFY6+gp9kyPa55wfRS1ll5i3zLxPQRiSbrFsVkWjU7OAqp7iacV/\nlWI+VJMhCs8gnUFvHhmTMyAvzFYE6Zvcd/cho1b3mheOf2jj7CalQYmiwqBh\nQSBw\r\n=Maoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/list":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/menu-surface":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.78da96eaf.0_1599592451921_0.3326311100156647","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/menu","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f6efc894771a61b2088534cef955724d45bf3d1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.b0ed593cc.0.tgz","fileCount":37,"integrity":"sha512-2cNuT5Uyu4q+hANPT8+5IlMqLgurPlIAKt2pPvFTP6K+EMP9VjsE4hhroRhLN5t5qV7n0FjFWPcfDxo9DEcQ/Q==","signatures":[{"sig":"MEUCIQDrTb+Ny8FSpnK9z2frL/CZtXenri3PuIHIp0fcRRXxrgIgKYr0aDcfRpnIt/9TFDbNOMXZHvaLMKh8pf0ystd0ego=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNyCRA9TVsSAnZWagAAxKMP/ik4wC1BhkuiYXpLegBN\n0O5NhKfg+Mk79tRqdx4uHgAi7IY+VrMpBv/1oaUpcUXCmwkwv50w/SzCUJHG\npInO/IR8gmeftpf/5zh9Rbc7+Dyrnog68yCfBgbt16r//jRua79lfIPxFiZu\nU+Fp7vrozjCCCftZVH5xvpwOPPtiZCcHkEBZNrFtD+zmccAWNKKeBfJSPaSJ\nP/VcbpFOji9aeqrOAf0cZLTIVcgYBnNfclVL+zgf5H4s6W+zGSCX/dHB3Vi/\nSFqV4nVqjnJHWptIa0uR0t4VlGf8XSUuV1twS6gJQJ104j9uLmk7tARGIp79\nhwZdGDk/ixE63azKlLSuup6G+TtGOuj4oMNEmvR089GTP7LwW9gAjip8NJqs\ndbqlLjxDb1eOqiXyfNUoVrI5eRmID0iSzpDQJJhYKfUADxTAztApYIwMoNIj\na2RmhS5GTOYsfOXP3WpCnouf6XNKFNcwW63uFf/Ql+X0oIJKKZw+VFEy/vtY\nq18E41+06SPhfyeoNTtRltEwBYL1dtAJPNZ7rM88itlXHTDw6uvDK9gr543y\nUqDulH/h1OBJ/sIZq+U+jC3VzxbIj1NzS24dA9jDasToS/7CJ/oJKpFYIdK+\n5wefhJG6+qydO/ESMlZHNCCkuKrnU/UxJXB4JOboUXIR627is30IjVWbri6x\n+FXo\r\n=3h8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/list":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/menu-surface":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.b0ed593cc.0_1599632241924_0.11538301520576422","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/menu","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c8bd13e9877cb16bc91f842013251f0d800b6be","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":37,"integrity":"sha512-f2c/sleOSMEk9pDUzygjBz7lfLC+Jb+WbPdcH5q0KE7qTZkIoWxlnbpY/HLp09xJw2zsH3g4BO9wvsL5GNZLOQ==","signatures":[{"sig":"MEUCIQCzOotHHO2wUWGMPLtq2kXIqqtKWEmiAGX71be0CtDVrgIgYosOVnhk3Japf/x6IOUkjmiwhBwxKwpI4LROij5aH44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpafCRA9TVsSAnZWagAAfPsP/0CyuxaTb/wEtIkKpnvC\nvZ2zE5q71J5Uzssn9DfNCOOPaDfN1WwB0sxUAcBvCrf2TvH2rZ3lSIgwjaJy\n3kmt1mI2eykiLz6n0NzQCUllOv5FvU7xFoWYYP0KMLQScq7/+rdBa+tvr+N0\nCW0Tp0VBxm7oADPh1RQyFM7Mt6EquVsNdqPx90tohBG6Y3JZnVp6sckiORyi\nH8XIsHEUpBol5w4JtMp6ZaqLUk1wUD2vkBw4DqM2APP5Jb9fiMiZmFa2CEmr\nJ92+B2wIbFXFGNhpERpSBBO+PwZsFByVQVYZESgipLLkbUx5w+qfmNEsS+Fl\ndJK9ZK4JYfDkgLGQOKAKYi1mVar5hzLDxhh5d3OgUKOmXSvOs2xqWKP7k9PG\nKz4TwpaokfvRw6vurraeSUTKBCp2y4HHzJqEQCmE0GbFxS/OU+FDZ2+P8oHo\n3MjaJCp0n+ZZa92u7Ocv2Bq8fOU2koEYqo9owbylRbQcgSeYeco0vlFDofEr\n+oz30SiKIeW1bOcJXBxSAFY5TfYNyktO8yPZ6OjV0+On5zrWespPP6mPKRLs\nuMfAbfL/5bTVyR0/yx5S0Ziu6nqOQDlkNWHoByqZ7XVbWS8moWxhG2S+wYNn\ne2HDznxgD/EsAqYMdiz5aFg/POhdfLk38jYtf80a64hVi0QN/a70AaekWMQZ\nb3fc\r\n=wh8q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/list":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/menu-surface":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.85a1fa9ea.0_1599772319269_0.8805563845848736","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/menu","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"425b0ef6f32730f400b56ab0853e8c70e3bd9de8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":37,"integrity":"sha512-1iiy8fGPe2DFWUh9k4G70mL8XzE7vHgQZS5fVhbg/QzRG7DTc5agQ20++0zGFfmIpp7rJiEkaFUtE87sddBWHg==","signatures":[{"sig":"MEQCIBbZ4K8xtJORArPzOityyXfxhChnNGpJtyjlxK5+OoZ0AiBGzVcqOBc35O76phU31YQ4vutlbYtguaTdV+ius1a6Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kVCRA9TVsSAnZWagAAnCUP/34EbRwW0P5qDRQIc5FM\nfJvomYVpSDakuDpEy3IAR/TFj+1ESeUVLcaN1v6gbDBtJfGw0TNUHbHnh1tw\nOt6qNuhh9AMuQPMLBgoLRAuCKU5ECTg+O0Tg+QP7rjBKYEPhAj4CKv/pPuvY\nr3VZOkJEsgSVkMi4rimmnbMfASyh6Lmm6t8IgjHk9BaBhIf74N4zOumzALMQ\ntaRHRabEAf1Quks0UxAmBnR//atZzA1BqUIASx3rxTTx5TzfORF+2A30raPW\ndGYlTt9jBYKzws6fvQqjizaOAqISiNUfF4w9KQko+z5fanYC+Kgv755No0eJ\nRiR0IyLpEG9dp1fkb5fEzMiuej65ZaRKE0psEZ/W1vY9BeeyoIXtGkN0FL3b\nqoc56fB5mVQ9UNVRdygKkHYGbYTRB0FFScH2/Aio81Xrr1WAftkWbA9S+hSr\nun4HtCcYBeDxNTPEAXFgPjGnT9j8K54hGGho7f+KuXngsCLhXqMinZ9rXUc0\n73jU9pS0wL3Im1Y377iBtFsKwffow3l2Zq+keUl8DFrsaAnTYnk8ab6snZks\nMcBnoPqJcb6IIQZ4qqTQzlApPkQMxoqRNdypbPObZSGyk7topycH5QprNiJo\nCPCgKgyBrB/QtbFZ4xOpg307spZjwy795ZUbCtCcED8lZLlp2vPqXS5S1imc\n+yVP\r\n=NVm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/list":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/menu-surface":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.0bc41a9c7.0_1599846677377_0.4186898858637489","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/menu","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"710211456bc3ba03d4a917559989c70faafee6c8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fc0eb5013.0.tgz","fileCount":37,"integrity":"sha512-i+BSP1PFmAHBJZR4wOgHoekLTvi7nN1q4lHKwul33aJhcT5qVvdlNc75g7v0cdZ8Tkqle52mo+yEIP4SJKIeMQ==","signatures":[{"sig":"MEUCIQDVHiEMs9QVwvG2jkmy6YlsTJ+XRDdj/yGtIMrCmgJ+RwIgYvOpoYh+IaFTaaRRntPnI65SrvXIwb11VBaausrp+FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9aLCRA9TVsSAnZWagAA6VcP/AkNzKMe1AyM+/U5dry1\nSitG3GTt4M1/VVYqStrkKiuN/NDt7ODJ1PNi45nnIWD04wQ2n7PiFG9ZHWIX\nBci369w3uBGzWh9BujhwY/YPMhHmuDouxGUnsnbI4BAoV415qbEiio2Dvcot\neqDzqLgQ+RAoJ9pW1qqThIZfvRHwa6dXrTbNXklWPIKP5NO+v7Ph/D4zFkSb\nbTk64a1XDcf+eM34xJ2Q48Q+6rZ0qZz+x2ciAjck9Si6hSqFHZossPYIdN0K\nqi2pgPq3doYBLIAMhqbVnTDtaT4aVXeVgmPpSe9H7hd6opiCvEjiqKUEyIzr\n7qXFeocjHJCzLqfyiP3CT7Rhp+veBYR09IwyIfoyo2FMJNlwegpJDXlJB/FA\nPEj9Ckj1++buSOisJsopSkNsorqmLN0dnodclXLEE683Yg80oLoffAEFWC2g\nK3Xh8/08Fd/h9kO83Unwu1m1V5uIJK9oVPZH3dfm5Z8HRzgEyeKN9Pz0FF4z\ndJ5d0+esROF9osEqTllVVjmrzlAf0XT19B4flGJAZMHDrYbyfbRm1VwVl9ww\n+18sav65h4nrw14Zb6iNuhuk3y/KxgDzx0dARNhIjqKApiH8o4Bwg5G1S6gw\n0Pe61NcRhMWzFKfgUQ7BmhhwTeqWbjzbweFNLRSxfONDvswN6IjmADb8SZax\nUBJ4\r\n=UMYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/list":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/menu-surface":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fc0eb5013.0_1599854219316_0.4380634315043994","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/menu","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9487af7edc8ec6189d9bf802d331db9754dd48fc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.319bf66de.0.tgz","fileCount":37,"integrity":"sha512-SAkicf8uvZ/vNX8uEkT7vOa1+z3shDFlVLL1F0ftn7I2y/QKWxP3CcA9ICngcWYO44rfTkWNoY8Mj6T4xDe/yg==","signatures":[{"sig":"MEUCIQDeliZb1f4AebzRDCh9GOr7vbT4ndb7tOx2bMUtVvM9ggIgOmP6nibIhVBZWkhaz90Jbt4kjq/a6M2Vpjy63GKkitg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQ0CRA9TVsSAnZWagAA6lsQAJxCy9RVqddMiHrhZwoe\nm+lIkLsCMBm0/fgkPEqXtF81a/+lE1RO4xaTzkRk0MxuOaAQ3N34xKbn7nsu\ngkaLpsY7P4aKHUw2FR8y+qlgd9mtGrodsvx9rIbXmtqA/qmXsTnX7Oh178EB\n32Y9m2wnQWZ6GiBbBEars7ZdLIYhf+NtW81YFokp2dBcMt+VRfui8SrFKexm\nOGk48NBSaVvMhHXFETs+GL09zbGq51bPYRVTLTjB3gJnQreN6vp3MF22T5Ks\npB3/+iPz2iBeDKpHUyZCExSV8ywNRV+7XsCiRmAxtFunTqJFblzgcW14mLvu\nAXQBg3bPm4gaCG1NjgspBrZZGkPIjPcPb2u99g0EhYALp/1ddmXLMS4XZsGt\nf8z5ug6fhaocOoLWhF2/ixXEfwTukTghKEdEmRJEP6Daz3mKLWX4DGqOADR/\nl6sIhgqqgKj7mD/LfOi07nWS977jbapGADEF58GVSV0S1oXRoagod8vFx2te\nL72Q8aaEJnywkAHx1te4IjG+nhDuj8jJhPaiOb4ImiYni7KswyF29Q0u/4uF\n4jVzUxtBR1tidMAzLlsZKhvOuFWE6/QlvPkZof+0XIfvlJawz+l7mEQELz4d\nrxBIT2NLNWLaZTdnJqV0LC67v7PehRX0psSMktpoIFnd2f1YD7wioGzWhFqC\neevQ\r\n=/Lo7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/list":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/menu-surface":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.319bf66de.0_1599865908561_0.04017940900180483","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/menu","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7466e9459a0d7d996d1bfd956765658bc6f6b8f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5bfc305ec.0.tgz","fileCount":37,"integrity":"sha512-qiWjSegHE8zXjPpDX/no458S7uPVIdcTpQy7KIrxt86fOVYexc/fFrRVL4BoT9PYa2N8KDJpBj/QJFA+ATdMOA==","signatures":[{"sig":"MEUCIFC1Jm9vxIejEoawUtLgwJ3l01rWIr2AlwYm/NhDYYeyAiEAu4sB6vOMdzx/HY+3ewg5RNHkqXdL9ZmgY9uXVa+x2qQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":689911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqTQCRA9TVsSAnZWagAANUMP/3D/WgUXk3RRI1JtcJYZ\nBW6e4mLG+BuiGih7O7SUY/PB7bNdJ4Xk/7Bb3/z+DSAVxMDHH1Jb7D3OokO+\nunxg7JPXEe7t+uXhLdjVjQhL0A8V3G3+fOQG7I/pl76XZRtewlDmR8nwrdo7\nPSYCjbmi5VTouTVj2omcKKv3PndCmC9Xnb+TOI86dS+j68jJ/K9JiNeHGDF0\nmG1f5TbKzuW0O9LYB4pVrBQqmwht/ZtLwvkw+Kd+5yLw5q+cR2P+OrcmA/oo\nwic9MW3pk0eUD2i1Rp5dkcWkZ7z8FuatiRCZvhAHvhJxLb42Td26icqKHvVi\n3uVU7+xI8F3oqhNkIDwrJ/iP7rSm9TQzhOwFepufpZloo5FCUVzT3n5GQEAb\nKryDMix1wNzSM92/s7o4a5MDZ6ryGP4tDOdRc1rXBinTejggiPrlJQ1fcOlT\nE1BHIpcu018tAjH/dNFTdyXNQWTvjGgtI+NV34amzcWmHDGkG2mLqdo3m2JU\nWeMd5njtiPCKFkKHPl2yOkhyrHv29/1NOuTbySZ3gVGgY9LkoSrerB6nP53+\nV1RAhX6G76ZrgGnsRjvKivss+6NbyeSYsK3rRdZds5+BKbp/w1S9nDf2Aqhc\n8EmtWl+zC2oF3hBM1k8vMxAUd+GcLKnQMw813UqFHTDVfRfD3f8ryRgEojcG\nsn7L\r\n=0b3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/list":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/menu-surface":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5bfc305ec.0_1600038095447_0.8681662004467223","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/menu","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"749cead7eb55b5ca70df2a2fdbcabf4e210bd17a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.83d83f131.0.tgz","fileCount":37,"integrity":"sha512-jm6sSQD5HLdUGf47PsimG43dVQDI5iJnSR95mO4zLlUIfY+TKJqjxZ2JOgmm/ofQMKxl9g37dbaMlQRu+KqR3Q==","signatures":[{"sig":"MEYCIQCV+ur/4/gYFypOhslF7nYBwKu7cZbBlKVuozCyPrbmFAIhAKAA6fsH57/gWVfLD5CH6eeQWQAHGqmbLIEt6PQ9evX1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":689911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrp+CRA9TVsSAnZWagAAe9sP/jCzGDqvGOONSDacfX8b\n6K8F0OVr0SIu2I0T53zPMvXOCKZitnVKBEqx6xaD1qeMJXub1YhhzjHSB+DJ\nloittLaMID4ZTIv8LJEMpJ8dor823S2mnfBegz52YO0Xpy4QHZvD5gJ/3pll\nBXAOdPh2Rp6u6SLX4eVHkcvREtu/h3GATPgXtaBcHe3zZCmhWjRVts5DhBWN\nMObqGADOzIwQPWT92AuZMVeLOkddcyb2SzriCJpC21s44gLLcAFxUSD0+rbt\nAoxpB5fN0ju5U9jI7n7sFSkaZSQlPu7KkqEn+p/kVEYIzziV6G+f3pKKOTDB\nuaVRXgKR3DXBywcfFUAnD1GtTHlqHAzzyoN49q2KurEwM3o9ColaQ267r5Al\nGDc/ix1cqXKgZV03w5I2fZwJ9Z1up/yrzyHZ36WlB+hFHhjALAZVkMdJY6tj\nI7im/YDxwhiQSXFQRdbkJxiylMw+kswYO+GdhRVYDqD/D+iNODGR2Yfq1bWe\nxpIkFjnQaimrVYb6z/LJ5ntqKj/qi8njNc5SI4crdN/BWW7LmXdXmebBQz7Y\npXV+QqdmIn+Oh1eLuerRwnV/H4irJwJSoox9V0b8ESdxN41OzXmCzAU9dPmx\nDwgBR4UOQb9BUUOcaZcWJlBTp3Vt/b5T/enhRXB/eeGKEonmshr6fFx3/36q\n1sOY\r\n=cH//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/list":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/menu-surface":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.83d83f131.0_1600043645964_0.5412176979553891","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/menu","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c2be4f1554da13a4072264f8783295fbbcbcc6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d52b165b5.0.tgz","fileCount":37,"integrity":"sha512-lTDRG8LvyULe3BS6RU1PSEpP26ZZ/rQDelaHziAJt8U/pWNxwCUG/TfutDtPPK+Vpgub7smnPsAHOXoY7r1ENg==","signatures":[{"sig":"MEQCIFV54a7dpJl1gEf8R2XlQTmvnTDIifJ+BSw1teuBZrT+AiALO2yaTx8mR1byn+F6ffxupyVmIOmjBx6E+bt/ZPIkWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNX6CRA9TVsSAnZWagAA0SMQAJYIZyJ85pO0N9I7d0zL\n8tAP5giIC1NbJOa3rh/toKYRaE+qmf4SW4iFacvwYcO/h5Mw9Xm86XVnBkXs\nLxJ9MwLO5p7PEbFH2L7+ysgFp+kl45kTrr21w4tKCehfJo5G5jpXdcubMXL/\nU/VJU/pvyZwqVvAmjWSJzzAY8akR40cYsWBS/1jYz/wbnSWB/qvqjEyj9OGH\nnm0C3MIagSLmQxMfOlLlM9/pPmfv2Peqq8NNA9D7x3smkpO49wfoL/OF0FPu\nTAfeT2LSj1WE+oH1wYVAPs7dlzBYFnBh+SlabFWBn//ZLxi3vBzyXiQLlcoe\nrbB/49hspTeiUbUnaQV87O1jyfa1HOSRHFORpLLrAaiFXJbKysPRIfL6BplL\nyyNsq7ezWKqxZ3ujkkETIalDXUeoDB2CaBqH3AlOFT5xEcmFii7og99kvRD2\nq79IhULdp2XWlob77DyReCwFe4JEPEia17141NZSPJ8UgfCgxx8aTZ0rz2+7\ncZVQpcZ6MLtd3iBunFeKo4jmrqoffl90kWfYZOxLuzeA+ffL6e1QKvPmiv8c\nQAysalSHi8kwa8asE1ONtaWNEWVSYqvp+5lfCZ4RimlqMgdaY/FPUNxbrkuQ\nBDCSijnhlGxocasR5nO1FsSy+6jnwtG7UvPG/rjdANC6HIpo293OHdqXA8b6\nEpqK\r\n=twXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/list":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/menu-surface":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d52b165b5.0_1600181754332_0.9710381089732933","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/menu","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"316c2cb52899f90540581e49ba1221ceccc47620","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a831d4799.0.tgz","fileCount":37,"integrity":"sha512-cFdVAVwRZN0utOFIHEITVxnQiBglFzFLeL791ohN5FtEgzo34MaYfm9479/rtLsM6rVMEPYEyJmsscyXMYLLmg==","signatures":[{"sig":"MEUCIQCedU5KOPkURVIARDu2vqLmf1wv+bKu9ZU9R8LhLc5sUgIgTDnI78wkkxkcDvg99VWnAB4J8D5uuZccsxEq0bCdp3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP+RCRA9TVsSAnZWagAAfa0P/R1O48bB9ZN5HAiCCOx1\npIH422ghjongG/Ny09kUEQVZNdQVKs2X6hWef5vicRx21aAK4yNLCe3CpmXg\nV+O0r0KOajssPTIF2d6pm+Lq6UWNaeYIbIrhKmE+pE1Hul0TX7E1pzUxozNu\nW22agxAoGmZaTrfOrRQnMnTM/rq/iyl2KVYPL53bU0KY08aXLNUADjlEV06X\nGcS6Eht6uC7/zjLx2Ke+DCiYxsWTNgMK0blswetOnnuke7mu2oI4Go3qwMz2\nxha82uUOwwKdBpTozNXlk0nNEcfl4qrnEcF2qm+kNxASIsesMDENaOnnGope\nRrp5c0k0rkhOjp4ychzWqQrmudPSxor9AOJQSCWt7vx2tNd0yDpZwWYJPg39\n/ANRicoSinwj0zBKd6mKEH57ygK7YjBRZlS3IU3guQcF7YaddULYsX+EKIqY\nCvTcyHzn/niD7FXeWYCsYLPsXYJuvCXdbGTOi3uNPq9+HgPJx5+SkYIRpFzs\nZtvagzcFF4Qr8wGbJNN7VDc1uV2s/3b5RmTxFH4LO/M8L0xrEwv8aC3nLdyb\nvjLavO8FmBu8NIghaKoUrN+u7UgdVXBBd3EZA1iJES0esAJg82FzrsHvVyJr\nhIZeuAxlY1tA1n481lZBUfNgW2dkwd1puaocZa34g45Q/W1NWB/RTikgQ0WE\nkA6Y\r\n=Z1fU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/list":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/menu-surface":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a831d4799.0_1600192400843_0.9443952407649503","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/menu","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d8549210acbbf3ec51731973c1478c9c1d9cba","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a306aa488.0.tgz","fileCount":37,"integrity":"sha512-Gap9U+jdxwfqeEl+vPMlzTTJFqh/NIXDrxn+kJOgeluUXYER0ofPCrthsownVxnQoPjDWn1wUhlbcHYwk2byUA==","signatures":[{"sig":"MEYCIQCVM5CEQ2+irFO3zvoqJ0d1Av8jjEJ23wyu8IiSkJG1kAIhAJABDjdybe9s/BA1p7pwnYmWFbIW7RbcGsOTI6Lp63I5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUjCRA9TVsSAnZWagAA4jwQAIol+hYDjjqGjMZgT6Tw\nK4c8LdT7i8IEwOGGka0Daiia/VJoQUhtP1kCi+GpSUqzFj/gqebRFOOlGNI7\nS/mPKPfouyj5j5jXx+DmzIOjqLHZRlXRJq+dGClj1YbgFbiSVQf4E6st7zDI\nBPR1/8fs2XaFHmFmg+E2Z2jfxW9+eoioL4ua5zTFZxJyv+c7RntrE9PI1sTw\nlzAeQMOo2m1hrzl/LVOfe0Rg1Dds7mukwsOvDC3ualPGWVl9oBTZVIrO3Yii\nwW/EQucK7KLbciLGbuxgp+6OFIpUdDa+Oy0D/DmUh3/R/naJN4C2kOYNX64D\n2nKd7OAJfFtmFqH9pt/3rK6FSekXSlzxdUd8t+GhHK2vUhBUaqu5flBNYJ95\nU2vBUadXe2qKd3YXK1SQicx3s0wokoiOE4XCisg0eo/cd5vx7yitDN4i89xG\n4RsmciWiGkZn8ODc6TUzL1p0wJP1fBYLUd4SIXXUtBQwFqITbMDzlBUpQh5j\nXgbo5cGMZL1HAwVcJG0BQF6tjr1VKOJs0/5PLL3KHUsyOD1eUoWYWZGmfk/q\nbnf1goNYY3D5YE1D9lSZTJrpxV3R3v3lhbTgxHEDvBzzzmWl+RYIDr05I1Wu\nYiy5nRt7qKuo7N+Gv/AhmdDLnE279oL+mTcYa0+TYGBWBSh07kzK6JeMsTDL\n1Z0J\r\n=UuSH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/list":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/menu-surface":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a306aa488.0_1600304418863_0.18670009751438754","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/menu","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19ce1158d5b1e94e97460f1a775a5851ba19ba1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fd608ff66.0.tgz","fileCount":37,"integrity":"sha512-ccFei/civPB+NtmJltgaDWbNM5cHfbA3qMcRR1Cq6NaJ733xbo671YTRelfhuvfA0J4shqwe/WTNR5y1idEzug==","signatures":[{"sig":"MEUCIFkE+9MiYBGmb1xWIUPnVfx7EX7+LWJMog8VMOF1r+wyAiEA/bOQNRxFXURWzmC2iq+g8CVoTLDFKKLU5iWp47cdaNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3JJCRA9TVsSAnZWagAA9tMQAKFSu1fFo5Rwc1Bmc7L3\n7QO9xB1/BdY3/Bu2AdS8PLzas5k4HWNuChVdCaY5XWToEywY0mCCMkhrZPyE\nx8+BRupEpOebHnqEx7fYDlFYuhMyynY9wWCNRfYIjk5YNe2SPsqAtHxZCVfQ\nucHJmh1/hNxqMbTKj3Q3E3qUAtOQaRgeLOW5E+TyfEI7h8937GIDaF1CeGC5\nRCA0ynXoXk3kueRIm1qvy/tqGiDYBxN12dsbuCSNSzc23ILBxbS3ceuxRuBM\ncSi9ISrz6RB5WK8SMYZgEhC+IHDgl4pAhC2zQ5z/r0ZY7xsb7Re9VizaMTiT\nYNAMzIp/xjAB810Li/gOg71ou1E/PnLAUdY4zTzv2cvH9z0PyL9NyBOoUCCw\nB8sdzsZPgrHFzmESmpmOOyd5LLkeW6lrMluguE6LNf+jZHPWo/Mwogc+kX41\nxmMYa2z2DmmaLwFWPmp/fIw8l0asUk73wmsvCu/EQV0cctcMl2bHvaQFWebN\n4vrJgQ6ibqSbcW/kuCor/YnEmx9WL838fM0+uENN5lXMIKtMRhMGGz8AXJgt\n9lHSNKojjua8nPul0xZDIIxkbv4coI0y0npM+7E29pI57N+yIFX87Y37nEof\nCN+PrBDgON/lvV4GGjCxQVfPPsAkgfpqOYJomr37t6Ts8wl148F+AmZG56Xq\ng+Qz\r\n=hLqn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/list":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/menu-surface":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fd608ff66.0_1600352841246_0.2774937384178191","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/menu","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b12cb23f9548d7862b91eac45b7ac3c3207765c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.3e435ba57.0.tgz","fileCount":37,"integrity":"sha512-qd8UX4N5zV0e5ZACiJevPrIMBFNDImVUm2rvqauiSqqdlYAsjYBaFXDvy2sjoGeb5Ilr3RVwt1dwdYo9ZeIbMw==","signatures":[{"sig":"MEUCIQDDKNwupybR/3DLHrk2NZFUeBmDlR0/x/d8anEoG43OmgIgH7WKJHpmdNCmQuV+DgozB6jC6FZo849ciIoH6VAggfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZXCRA9TVsSAnZWagAAwh4P/1egm9inIs0v3ErcbLds\nsMi/ILFS6PDwBUZd/gLpYi9hoSs9T7ouAIizg5A1QU31NUNZmL/fjYMGs+mg\n7xjA9t2dvPj3RZ9vopbrzWPDo1I6RYMvlQ9Np6FcT7e/ZZolrCIHme1a9YKz\nFR8K+MpQUWe8S5I3VSvV0xYDy+46oAipf2KuQQNt8ThGnY+VD3opOsv/2yuF\nzQGPGZC4a+3Wvh9R1P3xfF8bR0RE7YBpPzLhmHCRjVb6J7Eo/fcwc5KIKT22\nV+saoMNAfAWcZ40T/saqHqYFiNNvqi200oatMvYv7j0Co/zGbZF0nKT3ltge\nxUtPxAUoV5xwRZTbGnCqTHvQBq05GcXkY2bTEq/TysrR5QrdFCsaeaKvw47x\nFJH9063KzVtXZDVWGi22moXfq93UNxWWgqMZ9+5gpo0+0mQsTFlDfZJh+sM8\nakvzQvb0Hh2d4eJhwCOO3TaPccLJ9TA6nv33/9MH6GpqdkGeNGxmgiBwHwPH\ncyaAQbtfQJFpy12Zace06l7HrYMpLhsQp8ECbFFI3Rj1uijCvTdsXE9/AT3D\nfe4SeF7mwLMdkTZ1aw6NRnhn3Kvec4UKGa2v275C5Gp4n3KYEZYOV0qgTc2v\nnhK0ugZ68DrUNZJzSp+Q4d4G/nmes1CeAfiR/WzpJVA/ncL8Lhsd5pdW6ULr\nwAiS\r\n=60fE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/list":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/menu-surface":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.3e435ba57.0_1600353878737_0.47014312058578955","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/menu","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf1180038372eacbb9891271d2dfa137d53ca03c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c250ec52a.0.tgz","fileCount":37,"integrity":"sha512-gwcEoG4wQAUlBD/i1YCDwOOVkXSnHWo4+rYFUYWXOPomXSuKXacfR1Ec/GXhx3Bdk/iqGt9uDbI/MOivzaMuww==","signatures":[{"sig":"MEUCIQC54/dBiMRnLSTQynJj+ohXIbaq0bquhLUWsTFPXoHwugIgOrdfdcJ79duttB0t6qN0g+/izq8+w8bVeTU4/t/YSK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8MKCRA9TVsSAnZWagAApCgP/1H51ai9lRy+VZ5739dt\n682MnFObv+gzP1NW5FJ+EmyyNPGCEkPpPm2JattTk3I9hvW5asbeaz61e2q0\nxiNwJdDtP/d/4mQM9TgAUC7cfKx0NVNCiwQKMCjkSFWOQCRAN64PE7TCTXBJ\nSB9L0DP3aYdzUfnZ9igHHMqTS2xCITLfB3zALu+CPDQwd6ynVPlU3mx1kHqT\n5PoOsA0jxOADLUpn+MV5L5efedSgtCudt5MYQpM9lvAAAtDye4blzSNGAhF3\nnhRQ2Usb/EUMpJw4MZPew6VkjGS+F2sBUEJvvzrvpizmgr/x268egFbbtjaS\nMk6J4GhGJdVJEVdZMcAAcglDikFNRxQwHGNiRP9FiWgyPlz9eDElysLK8Nww\nJ0X3nOEjJ1CwsAYTI7Cxftcj1QwhMS7JfOw2n8Q8UNBxNGNUJV2mLjUy/heR\nZBB6K2e3S0FZtz2YcYTrXlCciWn0faEG0QmlCOqUrV7b5mwpW32RkoGwyC58\nFVMZ93pa+/HsUSWd2CHAbv79CbUS1tYTAG+snYEqKLam7A1BkQTK/qlYJieg\nAlzUsjJUQgiTHeAN+qsgaT6BPTIU5AesCYwRoT7GpUCsSXaq7CvOs/nx8IeV\nBS9/luG92H159elmSoYp8pHAY3bhFGHWcsvM1LixlJsivp4OZ9c2Uq4B7fQ1\nLpBE\r\n=z044\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/list":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/menu-surface":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c250ec52a.0_1600373513815_0.3651939399643507","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/menu","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eee287a656435065724c2de78ba3812db630b818","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.e34e411b1.0.tgz","fileCount":37,"integrity":"sha512-dimczkftRvL7DHwBSFi8ndjI8IN+7sZ8gW8zOEQWdIX8KbykIy/5FUCcPCbnO8m6uU6QCaY2mNG8J9dqtDsTPQ==","signatures":[{"sig":"MEQCICxzOYdW6nHlWdfPMz8wnOm1HPgZ458735LsEhoX2TdaAiARq/r9Dkq4wuvo7vmcGtQ8FjQdIsZ+rP6VqnxA4lUPQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8TDCRA9TVsSAnZWagAAKNoP/2DtDUTEVnf03Mgpug3X\nTWUUlMt1cN5TmTYlBuHpq7RlFYZh/5WHNyNBNSZYvBYqyThSrvEvgACojme1\ngaFUW+5jztix2FgGJZgGu4JQ1pqgq0t+Vi5xso6FMsoabQnCJoFTGTU+m3KR\nP5gv0DE8k9NC2N1f8vfFU2FG7F9cSNFijks/gS/qbWYINTHO3261qio37ecA\nMIXT0ShEKSzXiX+9g0oYOKltkWlb+BqUlL2JEdBt2rKOmFZ11InZYFG5I4aB\ne6Q+ZIviLMDkiHdY7AFYrV6XctTrTwYHJ+ADt4zWdKoKDm64kCPvaWdAjjSV\n+XKorxgeQk0Mb6t6ByKgB6UpDMc7wX3nfuFkMr/7QCv54iWcurDrb1tF9RqB\n+hLqAmvkvmF5EC6eKgz1XO6xer/+eOMGST6p7h5lkSdTYO98/Pe5wATdvAyA\niTtKnVPABKAKWa/2RKx9XdtWoN4ZFp+WjuAGuLHeq6tWOHgRJarc8CH+0zbU\nwqGH20BUgtaN28m9yRdrby1NXAYml06n/8aBElj0tGjvJRH32TmU6bwBFr4c\nxMbnCircSfDoNVTG3DB+eqSR5E9FRxnRhWFDVYCljXLqqMX5krASZNgVeCx4\niI6Ysu3gjoCd/CHo3VRnEtKEinWWLmnrgyYO8LlYQ8t7WXlgDCkSb43m5hLv\nzXGo\r\n=7ly0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/list":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/menu-surface":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.e34e411b1.0_1600373954542_0.12541866340639563","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/menu","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a6659a704861ee78e0f468370c1f59ca960bf1a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4e9343929.0.tgz","fileCount":37,"integrity":"sha512-+6dfYn/ANSsIwYjN5bBWQzngW8tA/U6GN/GgEP1uJWpmuFAeoL8h/O4zZOilVs1VQwxEX29e18KKzVn88LueAA==","signatures":[{"sig":"MEQCIACmPatg35BugtEaQd6sOWdlq7NhzKdLS+vsTumo67AXAiBhbxXFLHrxqSQzIJpcfw368Wmm4AqCAMrHZyTMGByCeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qvCRA9TVsSAnZWagAA6JUP/RW22xJKf9f1QmE3SDJz\niW9yp3d2v1lihKFXLK+XOY/qZR/By0VXq2D3fEaC5xlzS/ngFTEEYRVOp7+k\nh06j0tEAKC5iZvKKGjmAbUD+pV/DV2FDu6K7ljJRAJy9OzassokZwYKMns/9\nxu6hfglPwsllv/xa9jluiRcHSMXskVZRpovxCbrNyI/5praTY1ID7Do5+hh1\nU2onRe1Usm335et+wDg5VzoXZRQQY+KQL4WgQjyogYkJS2ra1km8pF1dQQ7Q\nwSyBS5TCRpmPV8i9gkr0klxMGImV1skQoVf/ziuLxzn38A/0OEVZCjkV1dRI\n8pAIV9ouKcjFfHKAitaO/Aia0AKIRa1rHx8KztolFwua1Gcxh9W7P3xmJcrH\nbiYrzv59asA84+4+BBsA1+m2fFsPyvDIxRHnCxhgaYlEErlRq+Xjq74JWp8K\nu6N7IpXAxEZdsadKKVL4XWoXCe7TdLNZPcFxvwUppwQATbK+HwFEhZgqjdC1\ndQONQ+HELOz8eYuCrCmrcSwS2fnQFEy4Hh+ebfJ0zRktvw08vaDzKlYN1jHJ\naB1q4q0Saei9to5FRWEWmRqFmk01tpH2AQ+UUJ+tBDq6l1xYlXWniddprV6a\nSYqfx778ytYg3lruUEy17PKBujbNdY6tykjCyuc3psIUPVRFZ8bNzQ3mJvUC\nDvpd\r\n=JjkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/list":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/menu-surface":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4e9343929.0_1600375470622_0.11167355729157236","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/menu","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"add03c0edf642d520b705c4c8435e010218e8147","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4e5c350c2.0.tgz","fileCount":37,"integrity":"sha512-CXZ08lTqSTu0X8p+6FLikH8+p8bjTN68DPDNM5BP9ehPoGFTJZabAFcKvX5EcMjVOd21IxHh7KzrtvFgesUJuA==","signatures":[{"sig":"MEYCIQCekFjT1mFa61Gv7nBpsx1gq9VcMal5GKu1Yu3eX+y61QIhALXrs2aYMEAucQD1XFJF90o7WaTJ22x2I18Mf/vxzyjq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRf9CRA9TVsSAnZWagAAkdwP/iEBdm/DRWYjGc1K25Bx\nqUh0qU/45exXpso1L6xaA4/U0Giad7sW7q+e5I2dKfjSDJOP5okH3yFQ9hXC\n/A3EsJ2D9RRdBU/SQTQBqhkkK/sgxte4LkMN4amXgxlH1IMlDRrtkSK2Mwks\nz4gCIDOPz+LesPUU0Cad+2bbj9rnBn/VIODSVSZ2+FQNS9WuOxps4V5sMDqu\nxNwosfUVNK1pBJAOq6LSJeRF/kJkLsoWKOjvmJHCWrm0IwxilSbJtWNQvXBJ\nzJdFi8wrxSmvQtK+s8nmS36n3gsBeLXasdvX7dV9BLqsyEf+LgXE/GaGPBB6\nHl6Tky5z2Nwdspu1MwaQcjC1M1Lo/gLhRCRJ1UsojaMWUwtMpyYWlB+cFiG0\nGbSUWJY/0MvFtrNK74z9ypkPnnaUuHjevpfPWf+7RDJUWqzx1xGqogiGp5Tc\nybPyxuEaqS+y+CaYqzh69lzCBXXp47VF9b5rC2OEyH19/oeZgmYTypMyEW5X\nymZqAU+jja/74wZFftxbUuyUDMm6/0FUIJADBIxYJaO80QlUCTJJnKiFXnIO\nqZQeEIqVzTNZGcJiEMAJGVGApXuUQHiSwGoWQ0ZuhU+ZseCV4wcYVr+AyZYx\nQpwvdtAn+NsxKHXlJWpxJTyfja1I89EBxUW14DWRxcWxU91hOCab3zuA9zIf\ng8XT\r\n=xxmE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/list":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/menu-surface":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4e5c350c2.0_1600722940731_0.8838051190777652","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/menu","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f938af0751f5f7c3072a2fd14bdfedcc35b28408","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.16c563ef7.0.tgz","fileCount":37,"integrity":"sha512-b5UtnU1Ok5ohl99klqJpEhYFNo7k+8UFjJDalkWMf59fysojUKZMjjwqxhBDecxYZWDelQFh+eDdkjFpJh674A==","signatures":[{"sig":"MEQCIHk8+LjtNv2d5ktqvXuxOgvWt8qOkSNhfyEURL7gbtx5AiBXCWsu6e+JTTuPARmkbtT4XuveJlXpEK9Y4pwJyJ0weg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTlCRA9TVsSAnZWagAAWC0P/REH3lHpaQLvo6y5BZ6G\n0OOFtw4W4gIaGfEqZ+Ey0sZ7tLGWlmrxZ8b4JMrOtKV4xF6qWqMoUtBFy6cF\nbeqI5Ewb8scZ6dxBfvaTs2hjt//+NrsG5kautGRKc4eakyBbFwj5B7D91iTj\ntqi17gnyDQ4lszBOwBRdj9GcdY9y4SCvDQ+0B+BXQlkjDz1Ve5X0koFwK2Xw\nJUi4qZjClzzcvilkj5IDDcu+EarbsSnnL/IvuYYhxRMJ5D8pZuAmDrVQeVvJ\nMpKk4P28yWl7W+fXXEyTACSuiXGVRgTxcPSgMiNKZ4m29VAz4b4tOvqeND97\nbnM+dJf2GRaHVqYQ6zFlmTnb5ZpllESGgFPYuBTXcG1OzuldCexabsM1SblM\nurVeZgwlf5ympJOAaLr3x+bG7y2iOQoWMsYuP+hCxBnVF0yJWrl+dV2BDw/b\n7d1nUzhhv/UntcsFjhcjLHyIFSU9bCqtkxFIfcfFROAXZdhQwrV+BoXDB6Wm\nnQ1rIxCM555Nm5KwlPt+bLiw6C1BQOFi+xmkt7VF00ObPJrduHzIPJI4ItE0\nkHyAkTSWOZ/jjtZU7iA1Gy48PLRh8NN8s3UPU7Pcg/YnsHyefrayfGX33i8R\nLFlVdr2LKq5b+TQeryuv0Et/CZp+qvKfBL0e5VRpALgHUGhuSqIB6PwdV+IG\nFh7F\r\n=u/KU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/list":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/menu-surface":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.16c563ef7.0_1600804068709_0.3982596027740273","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/menu","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d7b19b7ec11618ff55444a7af0107570955ac7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.fd8af3d43.0.tgz","fileCount":37,"integrity":"sha512-eNAuduGJ55F1DjS+T+nxw4yqvEeHt+230Gzg29/4TCasKn9GQs4wGmGNSF1PH+DP0o5zQ9TsP4ZTbeuzTyuZcQ==","signatures":[{"sig":"MEUCIQCUe6i7dScGbEDehfcwQrHRJZODHSGErQMFZsctEerR1gIgbptXziQEbGlZI3/e74zYnRTp7ZEBX12/MF/7hCAQWW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MiCRA9TVsSAnZWagAAxkwQAIPEtbOnWE9UDx7wEngM\n8heLapmk6uT++I62HFA+zXxlQjzstW3n9eVXtXMdTZWxgAqUtXOzxFTEZaxQ\nSbQWdkE/G93HdxYlox/FBqzr9w+wyPDRYdpQ54D/2+C5R33j/emHZZkhl6tc\n40SJpnZ/Uk+E8Hc+kFmSiw6wMzRPFb6ZMaiszcv+7FQ4fPa0Ykh2QRc46NA4\nRlcHj/cyR0Z8ezyAf4dIC8YkP2FRKJ3ZwQBeQQBAzbBv3ky+mQUVVqbRgLf+\nbzaJr6x3rw9cGhOxUhA+2pBMvOCyNMlZB7IliAWvl3nh5455lNi9PeX5bTMU\n5m0/QdkV2UL6wFQaJdFoAhn7mFZ3oKWjJ8JL9Q3evAQ3bnFp+YLEHAgcrxNZ\nRDm7ltGLiMMrr2sZ0w2bLdEw8E6Z0DCgo+8NvoDBNG94LMdUdDMl0SfTw3c8\nsPxJ3xvZEe3S2hbKbT30AX13P3x+Z+aEYk88oZoOXcRnU4ksDBh4WUsf08Xm\nGrVN05pucnA6r1OpjB5TEOIPYc+4XhekuUwc0Ki9/t6X8j7x7YbSXS3MtKmR\nPZZMcnheFeIEZou08YHBd/OIyf0e9IefXg99tZusdJBheoHpd2ax0+va1MRx\n0Bajm5IwtDB6YUXDRZd7KWg11Xe/jyKv2lxosf0XTIIs0iTAbtb3f3B3And2\nKNaj\r\n=szXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/list":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/menu-surface":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.fd8af3d43.0_1600889634380_0.7195771456442883","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/menu","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f680766ab6a46468a9850fcb5393d3d3dcf6b539","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d4cd83a85.0.tgz","fileCount":37,"integrity":"sha512-EYUBUmthzBQqHAITfZypyeeSNSL3banqRdyUPLfx9fJ7gv1CEZkvTwXDMDWeRs7Tinl+K6/q30vMc6/GqeR46A==","signatures":[{"sig":"MEUCIAL2cwv63V8t/l8/NaO2QsLmzpiRAAdUVKvKzUU7uPYbAiEAm+VBuAKb/EUtKQovPL41jl1leVWD1ifslEoxZMshrTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTvMCRA9TVsSAnZWagAAwd4P/1Cr7azAqlF8QLo55Vpg\nOzKwFD4zNKVApgHJD3y+GeUf92a5IqvaBmlqOa5uCIAjLGyZTlCggc3mCcvG\nTa1yL3IVWScHnMczxxjSct41xL+PQFKXm+R1KzC0bDfzEKnco+/Z5SHzHbz6\nJ89Z9yDnL3HvOXvtuzIRXXRvg7wId3t27rZnx1HWJ4e3Btq6Z8XEW/JugogE\npln8Lmet8/Ui61EiPJaPgkkaU+nZ8XWjGHoX7CH7YgmakJPUPKtRvfcNOWZS\n7knGVNeNuI47vqiThAb8xmwiEEGtynpqrkWy/M639fzsVXLyWIdkskjF7Lf/\nv5mTbJNYi6QBEv8+DK+XTfNlp1Mnf7zWCtx5XXIWaVBTbPmOyyuuwR/NIWV9\nmXBB+RKGDLv3x3UdOipPdmj95cfW6VyxnG9ZqbY8GOtMzBALzkvaQrlCrfLX\n09pTT+OpfyoGAHsD0eC3Y5L6Z2QjD+AN8cKJ6pFecQCHvdmuLkG65/4gAVmn\nxx+vULqXoM7COw5YExJFjMlxAZUI6xTPEdyTqEQazsyn8D4augrJhtuGTd6j\ncZpSokYUjO75wBFOy8VA9iWVLJ2QdbdPrWXUO/LQo1NbwnepL/gVzukg6y9g\nLzjeShQ6s+K0v//Ra/FDR6zhBMATzGko++igKenqgfVo1QV4IOm3AFdrLcaA\n80L0\r\n=JJL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/list":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/menu-surface":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d4cd83a85.0_1600994252243_0.8050120843636455","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/menu","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b017e017dbe2a7b1db84eb48fdd12c6a99e10de","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.199aecdfb.0.tgz","fileCount":37,"integrity":"sha512-SL1ssIhqYKm9XTZKZVuQkRJHiQFwXB/T/Jkn/cD3K2hq8hf8h8Y21aUcSJiIhpiEH0v77KIIPwiXt9uFpczYVg==","signatures":[{"sig":"MEUCIEBLfQvCoPHRmCUpDSlEh/UiS1nuSKZuuNi8YKy1eC/GAiEAuIrvUhODa9FsyYXqXddbz0DEa7tfYtsB4Ln3zTDyrG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJUCRA9TVsSAnZWagAAyewQAJSsT83SZCwnO7lfDD2s\np5izmSbOxji+U1qFiGD+dh0HEMEZrXihmEvxpTVPq7X1B2dxPGPEe57O4+k7\nEiZEcncSPDCVEmQuZrd/a32CI7FYKoJ7qJjJL/XILGYFAPDunjlDdH1k/UTo\n+HyfZeBczJLdjF9gg/H7gXO85blEg8Kedw0FjxkuCXxVUyO4fqMMPufxXJNx\ngxsvt5l/NiU5mkyuPNUVaNuBpvoZfTpAM7m3yeOa/NU5ePsp1Q5jjzdfkrrW\nalh6O+2BZsKt+7sCCAczAH58anTRsJA9ePtFzugAXEXTa3lD/11xmdxutMFJ\neL1UKWjH5V5IaK705+nPwfXDiaY7VezY17lTiIqhF10lbz+tCnRswgoZfiVY\n2NYK25plqW6DkS6PUBX8KUcNBHWvSi+7N3w63OIkQ/YwiIWiwFemRP9JJRli\nLJdLvSeXlwnDSGppRmA7nJxHwgGKJ3xAm+sDbDOqPVM1elAeIFmbq/tiNabZ\ntPeEH7SKJFWqHp4HpaWDina/VHVKKUdRigBM8gZ77IYBu3V+EoTksrLLfEvI\nwYBxc34z3DZMjiS8VICcU/RogLWs3ePuzZJWJ7/aUuI9Bc4vlQWep2LwfrYc\nbN2079xYfXEZjCaQdCKVvsbOS1lEf75F2hlmvwHqlWAz8Gfmrvl3c/MzRUCL\nwI+Q\r\n=FTUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/list":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/menu-surface":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.199aecdfb.0_1601049172241_0.8188820378938595","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/menu","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eca3005930ee33e39ef3f24d1d24bb6f22e5f7e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.38ef4501f.0.tgz","fileCount":37,"integrity":"sha512-mJYHPIzUd6uuVbV9dY7j9VYmVu9irmsupGUGj3+k/LaXx/3MXUgm4/ymZtUjxVuAvrJQ/VQDB+tHddeC9ziTfA==","signatures":[{"sig":"MEUCIQDGSaEHNuHAEk+qc4VI7ezrah297sR4lOkIUa1o3mS8gQIgWUrd/FYmBZ+Pww4geSzxHlqtED84qki86NBdo/f2cvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM3QCRA9TVsSAnZWagAATZAP/j40efglaePSszpEus74\nrjQWWdKnCYYbDhNO/usTeWsXdJAV+99LZKocz6gGxJP1IhuMozj1+ZNOUX3D\nELGxgZ6rxe4MsmN5m7+eJmPMBNE9RK47Cr/t0m2GZRKUdadqvhXoJNr2/g1r\ncfmeZu5QB0Ni1kbT2SgoHFWET5ij+ySSf4DCafNyFkeAzSNO2hOxt0FkoZ4i\ntTrGt8yExreqZWnGkW3uFhIgH0WKIdp3cQyLm8zggTiA1jU1WNaoIUyGqvHH\nSLAkzhlHru6ho+E60S9Xiq6K3t4T27Xxk4PUWBWs5kfm+aYw6Wi1tDAfdLBw\n+xD6G46/HvJDNXU/6VFDHgoEq1g6C8ccBe/IOpIFzKzfadqeMF7FFqZx3vnq\nSl43rFTM/9L4iIsKVnfXG1yiwGxtfYG5/KAWrkpIe49NwxvdZxZS1Qu8m/SJ\n+yenJb4yfSP7Uk2Mt7i7y//xtjPZpADQUu9iVXTBROkfHAF91jX6/13aa2ha\nGNfnkgkFpJytQby1TEhhggu3TvSMeGBxVO2YPrujYn4knqXQ2wIZW+JYunOX\nELb5UzG2EinB5qTGg4RULPv9eOCdf9yio4Pxp8+ahmMFM0ckn+8fqmCCs7AJ\nXlIE7xF+xAm8Hsew+IiJ3bq/ioQmB7AVLg63iwjGYzGjYLUhBiUGFGo3kTuY\nTRbq\r\n=TB9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/list":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/menu-surface":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.38ef4501f.0_1601490383868_0.9699966930109933","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/menu","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7131f58d84acc1703be3d7205017dbfa1e7dc112","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.774dcfc8e.0.tgz","fileCount":37,"integrity":"sha512-8LijUyxtAf7eVluydur93xrHFa2YcSOt08F08bbxt0r5GW5fp3CNQDPqTJEzi61Y5n4YvlkCqUwIsVYNxp2RfQ==","signatures":[{"sig":"MEUCIQDKQHyGSBcM9+fL4xrvshxfn2yVhYm7lxL7ZCWGIbIVnwIgEGtN2YL+662FG0HPPVKA59u8fFY44lq2zMXrdfBavB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaemCRA9TVsSAnZWagAAeT8P/3UinkKrUYOKtS6XAIxq\nQ6LZz7T7PM7WD5Lczv/Lk/Y11qqbNhWf8lpDw+YLHqwA0oFm1AG59RGhbZKu\nvzM9zMEnmaFoZLxn76oo8PYlCAAkMVFCPhac8qttSw5G2pNneKhSa8uBtLzT\na/9OsgQ3yjA/I5gVir5o/eMuzu88h2o0gPQWce8KCLM0/w6YmUHcIfIeo+PZ\n3ciA3ydH5eBoetXpQ8ZUtjK/lsZGe5UjuC/AIhi1v1ipFhk5Mk/Zy6foOeOJ\nln1xnbe2WsNSMyLiauPWmlZj+32pEhN8clT6+dxqDPkhWYbDBn+3iFzajDyn\npfnyhUxSvlcUZ7Wat4oiiiL1LIqOaKT6s3B4z5YDTRalA1r/FysyzGgnrWUa\ncxSy1LKxQllC0N4tJrCZAOl+ciqjz0AjUBVJA9ZaH46wBaUFcA29zfXR4nTt\nfChhWqf2kGxOFccRjgCsIreT/KoerBtCvLWoyF8m24b5fch66hFwehxYPK4x\nk4C/p/XoKKgAsWHak4PsRMK8LDLrGuNT6kM0fvMs2YdwUGaZL4NoEBgg6mGj\nXi1k1HTJl3XXuxoXAUytlVXyQ0DzMi0Jj49gyP99FSYqBaYPzBdbEPWv/aWy\ncSsJrOSgNgqi8w2deRPt2nMa3dqlHEJpohNBZr2lyUtHzv/yHWY1jMtP2If7\nixBl\r\n=UaQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/list":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/menu-surface":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.774dcfc8e.0_1601546150422_0.5288649259013254","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/menu","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230e8af22d22322e60e6082c1529538fb74b3317","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.0f60323a8.0.tgz","fileCount":37,"integrity":"sha512-/byjPkVz2B1/w7yQumkgJYZeD7sb0cP8AFEC9/PUe+ZzDV+PLc4GZtvtPwM9eWOBFpGEVGQgip9yJu9j+Hzg+A==","signatures":[{"sig":"MEYCIQDlrQBwEdfu/1lcFpW2sMQzyxiPEdm6f5sR6cNCnbQ4mAIhAKKolvOOWlnk8SRfe3ZddHpTz/R37W/7cH6mzuP0skod","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4COCRA9TVsSAnZWagAAeuwP/iaGysYHueTnzSQ4yf42\nHEJByw7kmAeFNYHPgUkn8RFgYf4kpvK2rnoN6pjQuRDXQQtZyO2NcgCu0/mD\nP+TwQ7nrgfkEuHA8aPbamXTd328Y4pv+y0li1hBQSs12S08IYLGOzY6RwAoJ\nVwHXiP6ubUsruVmESuZs8fJYoBUHusnzrtxyLLteeS/z/GBIv05Ecedi8gtD\nPOU9pc3UKxVEwHATn0sxXD0F1qUapwfkaZsKuU7VpQjsM/twgRbo6KcicmeO\n1CYu5HKPCF4sANSmfat8qmAirfo8X7CXzgJNGNLBUg14m8TJQPG6PFSUrM4J\n3IYT6m9xF1VlnrgzEQtnuqBWKedoPkovFlrW/zlwTk8h7iFNwTX6Z/cuPqcO\nI1XrgAsKwqkDLFtLPqzlhU/AvQOrClilCPupN9JhoTFUCsOb6X20hWkPHf7d\n9PMkNUFtqqcf0mNGr0fCAdXIXsV48ZAnWGvsSjQe5YAK/Ag5IMupQEnGcr5a\nsVLVu8GYDNXDW30WG2ggnrFDTXWIh7jx4roiHTkd1+E1NtXwBVPAe1RIJq0H\nKKwATmjOON4AhWI+6l+UI5TPIkVAzx7avVIw2B8Zt7ec+5q2/upnF1yZY3E0\ne+FOObHhiXHadEQATKSTuNIpwxhhIhxOR/Izy0Xzhl65ok7nU2SQkpSykrlx\nGQuj\r\n=wpQh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/list":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/menu-surface":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.0f60323a8.0_1602191502395_0.4139269953564342","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/menu","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f829d026b7e1f9d21905509628bdcce9dc7dd3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.d71622574.0.tgz","fileCount":37,"integrity":"sha512-Vkw2+l0FPZCAuQcgaotXRpdIUcA8sbn2HwwnHigGssFW4vq4hCNwOU1/5WWSTxJ+tw2ql6OwzLE4E0hKo5+0tQ==","signatures":[{"sig":"MEUCICVPm0ZdRnBLoRHO3IuQFSFWKhaZuTf34ApnTObg+yeoAiEA8O1oJzGayEIW7hgRXqmt8Fp0NL/GLPghXqAGL6NEkFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJDSCRA9TVsSAnZWagAAqYwQAI4F3I5MeooWvBYw7Q04\nYmHPF586dJb4CBBT8IHV96Jt+XzTPunw5G3ip4nMungqL7mA5bq/lVJcMQ0m\nFCsuZTQVnXAEPPwdaIJ6jbiz452gRzGjsH9fp/kZB6/VqPY8T8wpUf6EzTty\nchRc1PQ86Q1G6ZSGx70G+qGMLucUHTmC2cERFCNJiZIyU2Y1/OApVYCoc+qP\nDjUgjnSBagRlHBL07QatA6qZOwuYeQMly9TznhoW0LjEZ2nBRzAlKc34hFw5\nPD5VMsNVwCppxquI7Cmm+uCyVJGwJDN76riA2OUJQcvx+HIy4l4gPWT4P5h9\nQWUfzyCETWMgdOpiC1FF+fEUsPEsKevGvT84EcIWRW2jD8ODhzxRPkb8ZJyE\n5w3G402JW332+XbaHTxyxBKQ7r5SUgz+qNphVB/A2T/ail5Dcyysb9lXqqLH\nKdM9h6V4fqnfbtyJqezfDVOLkS5Dk59YzxeXysCcs2/Q+c8QiaB8squ3ngAJ\nuEG/fi7/TYalZy9hKDnp3iMxu3k7CeUSI9cpycsfx1DzpGGqC2qMItmQh8WM\nPBknmMCLbSwtuTGFq/h3Ix+er/l0zgrUm1FTzcjWVwuBIoR9osp/Wc8y3a8G\naiirSV9Cf4VpBh+KULIUrrfwtO+q7r3DU1ykRnZDjfP4a5OM/to2NT0PWb4T\n7YRd\r\n=Osuu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/list":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/menu-surface":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.d71622574.0_1602261202137_0.9960874523430632","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/menu","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54688f10e2fe41fbe7fe1a1b3e5f1b655870fa34","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":37,"integrity":"sha512-jNXSFtKJf8UO1Df8e6eVFOD1KcYmdJ31WSndOw/boJLTJt0U28vH+i1SvWkOhILGZTYM/SwDyqLWhi8GY3gYmA==","signatures":[{"sig":"MEYCIQD7UNrxOHL9pkKZ1jxdlkUCoBe6x330+su06+ZxhymjwAIhAMRa+aGqiFgQ+TtCD0DPjE9XfSKPUwCdzJ/lUxi0a6tA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOppCRA9TVsSAnZWagAAhCsP/jEE/f+uHcYZkeFMgiu2\nzNY9Q8BJljmCqkznVhhpGacBwnaRcq5bh6BlzYALZCnwYiK/KAlQB3Gk6XO7\n9rJQtnD1vZD9m4VGheSZoukyJGgu4/21dk77OjGvMewHjBSMgvvWkzBAxEba\nfHVb9Id9I3I4LLwtzK0r1F+14FR4wDxRtfYhnKoX/BgR7uV0L904CYTmf8OL\n1J165OqN1RpH5PAYSdOWpTmMbhUOLRfgUhO7J6pCuTDgdZN09NvdHkelcr52\nixbrAH7CnG/Pubu371RyhpH3Zdcd62slMzQ7jpJfT+jvNQjlZGYBD+xmlXlC\nTEea5ic6m1YsAD2GBXTBu9BWTj4sBE/ORhi3CGmew6XssTcBkPzrjRTPdDmK\nKIDA6AvgduJwdB2jbWs10qLoi8a0yiCqvIJ+Y0qeosHbK5X1uZl1uc/XryRk\nMV4w3mqAlz7ioplzSBvSbOgidukFNZp12qkI+oN56nHgpB3eRC9o+B4X2Tnq\nsMylAtTkui+TnnqZT8lGxg2Tn7NSCu6FUBoGKF/gOR6YGcxAuiHr+UZMABcl\nVgaDidmzL18Q4RMXnxX/FKLp5VcqAImoAeY4L9EAr7hKvAjgFYcMhtaT9VjE\nHkNuYdL8Qk1XlUGsiHHwSS0vY+sZbSEjZDoCQfpwVdec/i/l26VQu7Fd1iJc\nMA0S\r\n=oCGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/list":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/menu-surface":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.7a9afaf4b.0_1602284136647_0.9307963136164241","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/menu","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d99f13a6cf04623fdba16fbcb800ebd304827b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.8a39352c8.0.tgz","fileCount":37,"integrity":"sha512-7MFMOCiWrmxNS9BE3aHoDnDz6voy6Q92xr5GuT13fGENZtcn5YZbD8L7mC9z7ynakowbjzi43X/kBVbMfkpmzA==","signatures":[{"sig":"MEYCIQCxR9ofFC/zvDsbh08tncv/SmJFga/Dp4P6aAEcyXZaAgIhAOu+iZugLk0Nhb0Oko0znN4h7uzi6e2m4PNrbxUmjwVX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbbCRA9TVsSAnZWagAAMv4P/jtq6yOaMh/Kwy8NnsrK\nVpwPibv/u5K/QUMLIS5ea5aWqOmVOn+hgHeVUdg1lxme58ieV52UtZcTvNuZ\nJ6JObx8qHueIf8HKwD9kLCohs74kf6YiGM/GSsq8vnDWZAPc7oVfo8beHGyJ\n12zw41f6Jm5dbpyYyu4YzjmYaNzsmtp9GFiUswghMHKFzaRTCMXBVGTE65Dq\nzMz8xN6otlmsgQefktfLUqOUQ3h6ji9s8TpTVR0wp6eXoZUFsKTWZygdFCZm\nNAFTa6oPDI2vZczIRaZNbe9A1chVR+FaEIpl1PLXRWJg+XleSxV+wEw1MTrK\n9iSLfkZhA8IsOAamupc01hbwpNXuLVBssoUgUGH12tavEv48bHouhD/ExoH9\nxpgxxLPUpWmLL0Jn77fwyMpI6DncEDeJuU+xo1QNSeZdtFLpPbI9Gn1mgNg3\ni7mqGFgfrLshaKxp75PMxII+PPBo26tsO0aiakioKNbYEfAH9CmfOqGAGWYf\nstCQrF1XT13HRuCd6XkugatHQslQFT2YLdaGUmCL7DiOX+cxLWOKx9+3nFrd\nnpficPQIslz21r5/gCzZoUuNHOcw0aILQAsYEK5bDRbkVn8cdotAqLgzeOQT\nL8jzw+1dWwKnSL9eWdsY+VfIQzvyU/CCtYSbSoC5qQl8BH51oll2BAM4UL/F\naA5R\r\n=IKFT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/list":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/menu-surface":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.8a39352c8.0_1602524890772_0.5172450487788516","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/menu","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75b14aa4ffc7c7d86f51f289917bfc4f4ec0bed3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.790ca85fd.0.tgz","fileCount":37,"integrity":"sha512-xwlDDtwhvIU5kn7O3FWpoUhuWPNEjDWeMDFwxQArfsO4/M4mBcuavlkVl/f9EIQvMg9MGprtkxN7PGmLY9v3jw==","signatures":[{"sig":"MEYCIQDhNl3zECkn8G/KFUZ641Cu121aiQpcDMudFl4cQ36crAIhAPdoNWUtaNFJXopmOy8KGmjgDeCsDxAbt0VayN56KjBH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNF3CRA9TVsSAnZWagAAWEEQAItje7yXwDpTuhM4GFHz\njVaNPB9QFR5I6fbCvkPGR/TgrANgsUgRZHkWvW0oilpOFlfEMlJ5xI1LXk/x\ngVZ9VtZPFhrB/61FuwYVhSvJ8vL1RC9fqoO9iXHt14GuFGXfD9ee8M8c33PS\nq3VFu2I2BpkdaAxMrb/f+G8Oa8HVDTVbhKnCjdpf7L/bWt4Wx22s6eMLX4Tc\nEE4Y6ALPKip5eFNLHv7TjmPWlgPROyS5TX7Y1pq/QQR41rtn3wRTW0+fPhtf\nJWSrTSU/gDREAOSV+pnjLhAtmqT4SE2WFD3xQ8lzLi7h98v7E2av7Ozuwk7M\nW5MEAIjrEd7ULhb5zJ3r8iXQYQ6zKSlvCtMqYpSZbsOTpBb4zITOS2RAi789\nLwEZKRtVsmQZKH816NS4hgTY6IZUxhvz7Er8te0vrBtkEWkx3I29U9Ka8DNF\nYeTL/qZ3XPRlyN8yZuT1zjHPPbBbB+zSznxQ313awqnGtASS+H4OhSIjiaSi\nwyyqiKmsOZrjJf7WSK3fQ3qWEiLG1ZGvg6S331gnFpj56J5PQ486wxC92ImZ\nB0uv8BP63gHCt1ntzSaS8tnmFn0NG9yW1C70Idz/Inyw344dW9Nea6T3cXyb\nSqKhgBB/jEYJqlPcFDEZCjk35QhcS628tCaFFB5lDMafba9rFaaldwftKno2\nlEtq\r\n=F97o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/list":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/menu-surface":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.790ca85fd.0_1602539894248_0.4251451916036013","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/menu","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9e615ed5846d2da1bf16bcab7711c5f1a9a4ade","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.174c0becf.0.tgz","fileCount":37,"integrity":"sha512-DiMrulPdtblJO5liivtdT0BOnYNh7q8lYdZgDt8CLeoImDdCHhaHxlLZRjklRoO7gPlmWFODN0l/++Rm6N/PRg==","signatures":[{"sig":"MEQCIC9Kn7MsVqq1Ss/ADt6tFU0MoFMhHZDClRoEBb5TAKbjAiBKgH3STrk1B96YQYCxgQBWnu11Cs2aXVkHatXE4Dekcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+oCRA9TVsSAnZWagAAFF0P/07bt5IVP+wJ5So367zo\nHxL4QphBcROknahskO+z+74vbtnQ7lg70lqNZD7/YKFvJYGRA3wut+ITTeDA\n8LWtk5irTKGAEIgYqiZqyjBoZApoYZa/DkwVkBv+vGUX9CF9cn+O3/FjdIwB\n98XKNB4Mqwg+Skpn9IGmMY5QpNFh7zcmEvBKE1dXnZMyDy9aawmN+Al3lsZn\nRNIzekU5/w1hlmALiScisseryfzVlmRNJCblb2OMlu0ha62fy2tHMfaNlUz0\nTgI4b3ll8Hbs3VH4Wbo5jX8wbfpu4GE2dnqMmcs3XPwmnKQKeOLj3dUggYfC\ncLhREZgT3P5yUG/WGHtxON8FJ7QfggLxGBX8blsIIJn71ey6MZ8I+DMfpIU2\nB18/Mr0xVxcuGTlQle9G9XICJk3gTdEcQW/u8UCYkaxEQtRI1cCygHb0IWGo\n7QIroWiAg6FXeppQHaa+ZWXFIqvlkVj2me72KF9yD+ci/apslhWqs54ASIuX\nZ8s6AoW/DFIfcKbqBFBl6LkUC3+1NMEzkD35LYsT94fq+78JuDe3WQal5dmJ\nKYosyNIGA9N3TjtiIh8kmadbCzLE2mIRndVHzKPiSoJfHTKA3XBKgpAcLHMY\n/NY7llpM6oUjMfjXfBey1vWJjLgSoZcJvqIQecN8dEQsHG1llYOtoujClG1v\n5nSl\r\n=ECn4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/list":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/menu-surface":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.174c0becf.0_1602641832532_0.21748269097170692","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/menu","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4724136067d48480fcbdf0f06d39bd9b04d383c6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c71ebfa02.0.tgz","fileCount":37,"integrity":"sha512-e1K1k23SCL0jXs0JI8L8T6jZwPh31Mn+26cHK/lZFxdexvJpLV+xjuSG8zwe9mGX+E+gSqYGkdDGDjZ3tHnCcw==","signatures":[{"sig":"MEQCIG6+eZV60tn29NN3Mwg+C6xN94FTMUywr1xwsgeZJJ9xAiA1fQReR5EKDggO3DBgtrhH0rpTz5+f6pFwHIuteOOUZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnw7CRA9TVsSAnZWagAA+oMP/jAUdcK+JpUJ5HYasQAq\nF4+EF79SBAlH0+qe2xTPR6Rrnf3flBqDUKrr+sDEfrH4UYHaFJXMGtAtlU6e\nxqjhFIvaJWgdMctk4qdnQjonuGzCzWq+fDOkRQB1+CjkFpmgFSlOx1s9HtZI\nf82ctNGpDi51MOnWDnItUGWsEiJNI6Y4rgsCuIngIM+5waaFGrH/EAzMrqMA\neguEQg8slo8oCN78xrQSXXem/Qq+I7gViUZS32nMriosptq9lp8QkJWZSxxQ\nQIAZy+tXSoHWVExl2aSdPzEho1eu+euF1pKqWlgRz+A6p2XAheo4qGqyGT+A\nmyt2HW8qIZI/DjKM/UN8DOBP9HGzG99REEB+u3S8rh9UEkPun0GqDeHCkzNP\nHdhCCwcw4nQs0JXTlFNZ13tw7zGT1ILiGmxzE7N4ZUpnhlhRm4OPwHpci8yp\nKacLMQX61xCS2jKPQYp0VFdOkIadaysy34g3b4Daoo1Ed9LjLxZLGf9dhFAt\nqYeqbjGQBauEuKkX5RHbgsXm3jN2QgTuls4vvAzvK2DfEz/Z7y5BunqIvaJg\nD8QQ89g0mG0x1QgV0bT2cb6n0DubVChHSCsR1e3+O2ZLmYgvzECJBefpaWbG\n871LNarSIqKs5v21jbYsKhXAIkaPlqia99KsGf9sNpvo6LwwWhzRJM9KpHf/\nXrFf\r\n=a25m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/list":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/menu-surface":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c71ebfa02.0_1602649146952_0.4991006700333869","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/menu","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bf6a3d8fb280158b36e1032e4b3869474d8800c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.2ab716cbd.0.tgz","fileCount":37,"integrity":"sha512-YX98AOln06mWKdScvbIgujwT0Tnbm/rJ4EUCNrKRQH6pgAIP+gmmpNhA65snX/zB9e3mO06TXJEnNY5HDXPYTw==","signatures":[{"sig":"MEUCIQDApyLoAOsosGXMvRsRk99xW8EXg+Ynt5kVTSwdPdCsMgIgVOdTOTwxytz3Y+87sD8dqL9QR5Gog1Lf//kALumGqRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPfCRA9TVsSAnZWagAANnMP/0pUe7AJjZLZ37J/u+vZ\nex0xbH6bquWh8VgTaRO/QZoOwYkbC82vDsU5FwhHDv0KRdcy60L9/BjbitnK\nkm8wrS6b+GLw4OKz97zJu5Ny1BZFYmEqjq+osY/Csfj+t9J9kd/775mK1Yoa\n7l1VoPbeZ8NZ5sbIG5eYENGiptnks9jv+n/TfkS00tJgI2ph9lF8hnaz2Mhw\n5k4UGk2r2Xiuf6BhK8om/BNDUc5AmeEw0OP+V4e2QpP/vT1mUZllAFC6r8Y0\nrZKhIw45AWZPrE+KbnyAC18XTEsSVUlaDjWHxg2EEdGjkYUJ8EddFKeHSi6l\n4kTyRAm0VSa1CqmJ6w0ujg5+8+2sqSKQU2TAPF9V1qK3z4Xu9AlliDADaE2H\nRMIKC7dbvkiNLQIGaOxyMWUmyBtGqqOOdD3MNSt8rrsf0CZ3LOsE7FnJ5HE1\nx1GkP/Q8+zRKyboVcp/fz84380Boy5U7rHeCFvbzA9j2rUBxFzDVIz+1g6kV\n+Eewychg9KxA5VbCPf/JdOlRaE4+o5MgeT5Hx7RwpGcc/wY/b0gvbI1EctjB\nRNUJ+b9pL9mcCfLKseLFYjAjQZra/PTMKDtMFKbm2JJC/3kpDWx3ynyC5uuS\n5t5REdh6uk0AfpUTahXOAM7qIxdSpOLbcEVtygHVCSP7BGFuTQc/vk5rhZil\nIKAZ\r\n=JhB3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/list":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/menu-surface":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.2ab716cbd.0_1602806751238_0.9809978402213368","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/menu","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa411109b2c9ab93dc532120b7c9832f5c41cdf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":37,"integrity":"sha512-yrHqRDDDqWTrHF71Y37Xa4AWVKzbm2meXiUt1EmgPIV30+OKrFDoSM9mIEq0MSgJniZz2GxRk06Q/vSqvxundQ==","signatures":[{"sig":"MEUCICsYMC1jZNX091BcvQjHpXGc43k7teLPNlzIVTBm7iE+AiEA/tVi3WYyEihSLM+vmwRoMkJRIKcUKH7BiPc9smHFECw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ40CRA9TVsSAnZWagAARccP/2KQmAgkujx3+rMa1Qgp\nj3bqqJiioQfvVK8VTGQCwZiWRiQzVI+S5C3/te9cUqpolZGNCFyD/dCHPkBl\nis5+eTyBAt8ZZJGqTcd//4yMHS915aN6HyaNQ84Ag6Qb8wgPWDXkpEySUa2P\nFZ/ygBeO735J4ja5v3pyYxja5B/kBhzNwfXfccEdoE50Ri+K8DxMZAImSjck\nzcVQuQKfAXEGzpdc+YD7YdaacOlokd8Y1SwsoNPKO4GoWcwK/7FsC3Ipmhue\nPCDYwUNlZkGv84+Bdssc9+d1nSndaCTKL5jbxSZICI14rKkIPydxAUjWXFXR\nPtdkG0oqWe8uscrgI44hGBUA4IlDDd866LXrbEMTAM1mYfkf+gMmuwqK39xF\nKdMjYHqeHGjJnhMWIY6b8PLQjFZsdth1rROaVNK3bty1CmlSZ5GTr2JBOdqh\n6R7cZGaQNvSO9/ptOCIkie9bTzGALZ3BoXyZ18zE6/TTfKhIogR6iebRvsBG\nrQiG6LGt1c3yCtGlakRKKMHn+Y+qSAf/oEU9YJflUZ0OZ6jz3VRMRcf6PYlw\nbT0ucac5j5rRwPGhhwXlBLDwI4dWhu27d0b3dQ7LkqEk8wlBNHmOhKETWcBS\n5CrmCxHAj3QoWxd1bl3ybA1gp3SvqoJsixLsvFZstd/+P0/Q/efuBWLmHVMU\nuCWV\r\n=jwt7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/list":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/menu-surface":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.43c1c5e2f.0_1603116595770_0.3633959765967545","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/menu","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4033340fa9ec67418bd00922a78b3f4e168da570","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.ccc64eea3.0.tgz","fileCount":37,"integrity":"sha512-V3Clsel7oa8Xm5mG9mdhKLwg4MgXU53jU8s+IRgzDVcC7h9nvSB2TOibAu5pbS55yzOWrRvVEHkXi6VM5uqtxQ==","signatures":[{"sig":"MEYCIQCCtFYfvFy4u1nD/GOtOMt3jaM78fsuQ3xsJhoLJ6cGbwIhAKxe45BDggia+PH/IcQoiy9tN7AWgNsSAVEsjTk7Uk2m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NWCRA9TVsSAnZWagAAHQEP/3eei/BmCx4QwX88LRPW\n6qLku8fhAve7IbVUuF1UwhdJXmozMvDH4QXm1X6weFGFh0RkWKiCTY995Zzi\nlTR4tXvTLBjK1GAXqqkKI/uyle62kgBv5XZ6Wewq+Ad1RCLydretHswPZZGw\nvufY8c7tmUev3Wh0aSZlHyDRA4RfhoIXTrLsnEhZc4kSvglGjrYVYSqzKn6r\nGwnc9184HSBXx1Lv8aXjXR5Tfy4VlMCaCxf052DbWSyJIzUJfHwWP/dT3RGb\ntnP4N1b802jshrsq3SyAannHNrClIPQb2rSDaOBVgbzjsBLqmeytJrOek+Hi\nVx4BN9fF03AwMB4r3SZVCBf0K5QzATKsbsV2VeSj+8jmWOshxps19N6rX2mO\n5dgG61MO34BZbnOLoawSrtqrd8FtZ+fgkBLWJdbBhOmxzi8+POerWp2PKluc\n6kGk8dgO9BOlK7gmOxsJoFqkY3gZXb9mHecvdNecoqHL/cmpoizXB16KgIwZ\nrpJljCNLry2YGF1mR8XvHFlyFCVbbyj8td63rSxCpZ1a++1s4lLtQqbUbFxo\nqPgYNYMVJgoYYCgcMZiJQ03DWQRnLMBYKTNszEjDyxIrLyYgR90b1XRU3ypi\nYR9DLKXfauQiL2aJ4vNXV6KwDvEnSzGYn+ddWyzKZW+JA9dzN0bDqwG4ggPc\nI9X+\r\n=BEUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/list":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/menu-surface":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.ccc64eea3.0_1603752789734_0.8771255037826275","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/menu","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eee360076d6ee06338482f1916694de1fb9b28d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.a79cdd019.0.tgz","fileCount":37,"integrity":"sha512-9mCG2JIvbnoc/0nF3/58ptvb1AAECaCwwYIwqLmKRAq7NW1Gikr1qZawm3oOwKF2VKbexlND5DlAWaEUhbVwEQ==","signatures":[{"sig":"MEQCIAd94M8x3lkgyPv9DcnnA5UfebnT9wM9Ec+r0Y8FaSTwAiAObnZRLhZ3wRGWfr0dyelzFmnrHzbMa4GQY+2Bb4vHTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEvTCRA9TVsSAnZWagAAoS0P/0M1fVPbi7CGWloiynS5\nHLuxOXo24WYD4MGrTA1PmvPUW87beel7WrBnAFDzfvMb+2fzsY/RJyDzbnMP\nIgm2ENN8AihqhnvCkaUhe+1/S0s/hD23LPnj2MnVdq/0txfuyWl1RdE9pE68\n4gHnOMMAqTWIJTnr2uEuSYpY/dGRaN1A/ypUX2fF3Q/82RgaUhis3jhYbftm\nqF7TzvUF5HGZlQjYimZqNgTsfWMCkf7UaYnmUOI91Q0nuuoruikT0O9vQIex\nm4s8i2gQuzDmhnCWhqkpA1h5Yqe+/PCW11ygZ5BeCwbw2vU37GvrLNXfsCps\n50ZFgM6r9aHxR9r+fPIL5DhV7OOLdnMx025gHgNHlqp91Rk9nCi2CcQvx7ie\ncDSJa8p1+I0ODm/klW1VPcpUFtm/8oT39Xi+gyamqwAJKtFwX4CkW/OUQSCH\nnQHJ3z2flG+gpZawU94h2X1+uv2anTEATCUNTQSbXi8z7P9y2wuLE9HWoRA3\n0dVBSa+5k+jToRpjJ6tvARs2B6G/Ax83SOVq8EQs5l3rZNBHjUZOT2oRMqqK\nuC54HdzUV9aqLsrBCcyk1YlAlUnPYH96p8gJ5QV3NKjEZ0/w+NNUZo37WCHH\n0gIi3+IBJKgWsyVW98ojGXIZZsN54rhFAoZeRsZjobQ/Lf1H7sndttn0sPc3\nMoyb\r\n=BdXB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/list":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/menu-surface":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.a79cdd019.0_1603816403219_0.5806295494455709","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/menu","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08bc2345a2832def06f93adb1b274c9b0a2b9916","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.596e98424.0.tgz","fileCount":37,"integrity":"sha512-vq7rcmAk+d5D7zhgINeQpZ+egrgpobDcspfBQHMTPSCN2JXxt/rJoLn60le26vZsTlf6fC0I9OHj4fM8quSsZQ==","signatures":[{"sig":"MEUCIENhibRgjAmIgXkypq3PUdksyu/VUQVnYuMFcQqIvTnwAiEA4Y0F0Yc8Wj4uZcklj2/Dga54+CQ4nYmY2zeAsrtDO20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZbLCRA9TVsSAnZWagAAwToP/2p3wcB6JcxVCx6XTXD1\nNefx36hh5qVIJZkcMuNfQaYoQrTI3KNTu/fcSVXeCs33OYWZROJLBpp66kK7\nhwNCyCGGvxGpCbh1oBDY2JfEGgbFMsI5M6+EaJbY/7OW9mv8XT2p+USjvb2U\nTWplaeVnbuRbweSsca2ylMugZbAl99uOwPD6BHXOZWiihTMDPFMx/6m0/q4a\niWTtki1QMK+sh2r1L/cIqJkbEv21U2ToeTWzt+IIDY4+n+XLIVTHpDgp8g4Z\nWWFxeRj9COLR5mkcl0Ws05SOF503RvtmvlkVFXfhh2w2+OsJsnvu9TLbTcrj\nErhP0iwpQqmR8QKaKSiF74jWN7e8pmk2+8fazif3JVFsoUlKMRKc1mbnCT4U\nmeyhEiJN+hhgmSgNfhn0GQd0rQDthoof9yjzSsIsqTVQTm04ujbF7ltnwElm\ndVXbcTG0pQhxz6us48we7sd8YB9GqZTSzD/agRsNfcvKnHfS1UO7D/udejvM\n+9W4DMsV2b0fGdQ56wdOuY7cNmwpHV8eQVEhm5DIES8MY8ZLPLX4fTT7Mo5J\niUwhDrEyJf0xrPRTLzJyYMMBScxvha40TeMWZdlXxl02ucCkfE6KJ0y6nmQJ\nkNIARoV+lquw4IwPtp/hXFMv/h5AMQlqmhbVA24XWmVp8VddY4vZBE7OfauC\nKzKJ\r\n=ZQFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/list":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/menu-surface":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.596e98424.0_1603901130716_0.23469547227256649","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/menu","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f4a10a8e9fdcbfc9909a5b6faa4338fd6225d56","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.05d5facc2.0.tgz","fileCount":37,"integrity":"sha512-a2bfTnhrzK/ACAIwOjyRD9A9AzaCRDMNOghdos73EzNtVNhNt4MXSgsdV2GpPMgT8v1kioXE/VWJb9Bldd3BiA==","signatures":[{"sig":"MEUCIQC6PcEepZPLoy5pt4B/ri3KhWbh8d3e9qg2uN0QesJZHQIgEd6g17pmeTFT7XI/JGMlAP+J5ul5zDTbjT+hFvu0p6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZjFCRA9TVsSAnZWagAASLkQAJUtcYSDjOASMuvFb4o/\nY8VPROCympExP59eX98337Bi1fFdbNYYSgVcENt2ZUD2tXiz9eCgv4pELTO0\nJuAjKlYvWMSS/T7rND3a511WPq6z3Rdlkeh/iOUXluVLpsG2CKGokLw1hL4c\ncP4TDi5/UN1bP1Ru/yxwwwo82QPKCjboZ23zlhfMNVDoQTQ+OsTbBe1Z+1l9\ngMs/MMfsKhYQsEY8h/uTzJ6FJaE+vHYEHAwCfei49E9XCgIZ23oEOJVy1Gnt\nTeVc7Hg0ef38mKuZ8oIhbO0+XFBuWaaZtHsKnJTxQ8IGQRXGWYG1ORjhSCX+\nC85Kr8u5ZI5d3uvajWF9dbKhmthgKkD1zXa1BV+yUxrpqQMoTYOdDeiIhrtU\nM7wbTYFhGYTpnp7Wp0WG7WNJmkgZ6Fr/yX1gOMzO/vzhgTMRYYCeTQmFiwsh\nl3zSpoU1/Fd4Vs0x65zELH0+G5L6Kw2ShrruKm5olx3nddfsX0Sme4bGRO9q\ndh2pxsXBMhbeK9H7WdbtkMi4IFrlFdSFgDljXYNbn9EmMNs0vq2+768r17up\nZFHgVPSb1orsMOhZO7lubLSERrwQosyYS1y2ZGDEE9w+r//LTcKRQwoITDo5\njWFtQ2O1u6eyyktE8K0ztteCRu9+zk4JzsdI+ZHqakqHB8UrySLfwI+v4QOS\n2F9q\r\n=/Aje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/list":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/menu-surface":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.05d5facc2.0_1603901636895_0.6807301784742996","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/menu","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ffccb0ad67b9f791bcdc1147493fbdc657201ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.291b3553d.0.tgz","fileCount":37,"integrity":"sha512-HzrJlpHnFUL4Faqu6uwphGy3I2nfQxwkomil05vamuU4YUGXqFfuCEn2zXUeF1YjJ8WDolYHZOq0sK0+kpXItw==","signatures":[{"sig":"MEYCIQCKIoISFEzlss9UleXLO5o+0rSojrj0ysSG3l9ASF5XjAIhAKvEN1ZBLwW660Ys/7vGmjGhMsMmNFPkGHV0SzTdEr+E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma6FCRA9TVsSAnZWagAAQM4P/io2Ai9akj4uuXPLN7Wp\ncWVaeCMXX2UTFjTbmgumoDKDkQ77r19HYyHtk96dQcY0/wxPM1af7f4CmS9Q\n/5KHr60TIEKpkEkNvkgA+01QNqwb8uRa0J62AFTr4U8KS3TUk+nLYsRztA8y\ndcIYB1XRaEpvtYHOOTSM6TVpWkau8ygo48af8h26Bw6pOOKrtdMgI2Mg5hmy\nXl1HORNuSRAkQcu+5YIPjxtZplwm8JMVFpwONM9vu0KD1gXuimmphwB1+eoP\nFjKvPpq5j83aNfHKULu3Rttx5k1QD8j3P8vDfhp//JUhLq8QTugXqKoJBMay\n6YsJOzqnLyiR2rzYpWg056TNg++WGqeWdbIhZUqL/enDxksizgcGlxz5fF/z\nCv7hpSgHWyHJv36OBN4RlKszwYyjl/1R1QfD77yNa7X1/MF7dB6Ai5/iR5iZ\naaPJ9CWq2+qBCxLbx4XR8LndqcG6UjEuEzMh+R/LDli657DsehjmiDuScKdW\ntYTMCEqr9tDaQ/tPVklO1BYu78X+TKd65hfuS+93hlwkuawNQxvq5cpNa5hY\nbKgHHPtdbrATiSyWT91uBHmi8aqe/pOrPcn7FTasdtdI7SY7bxcp37wQkdiy\n03POT4nMO01fdwSi50OYjFlEfkx95nrgVirTy3h7128YHGchLvMPOQM9KnHj\n69ld\r\n=yND6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/list":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/menu-surface":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.291b3553d.0_1603907205092_0.9047412764079186","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/menu","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bd2678b13d63a0e2e2dabf685dfebc52d11cd00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.dbc449b09.0.tgz","fileCount":37,"integrity":"sha512-liDozrTQ3lUebHIaj+vBbGivCYJgqE6axfdTqN/Qcqo5isL54sn6Eo9vNhvTwIoo4MWNJxHKOUY7hhAwAT79ag==","signatures":[{"sig":"MEQCIFOX2WXui+jXHkw94KtIYxJ1vs5ETZTZ69Iaz91vjQWCAiAICkLnyT7adq6/HshcORjs4DqY3/aQFlyTQ4RPd01ZXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbUBCRA9TVsSAnZWagAAAsoQAJ3L/6kJIKzPQU5VELEk\ncDCtfpzZhAZO+/Uf/l1+0VB5UQ9vVU9dJu1NrorrQefK3YPcVgOJbGIFfRE6\nd6jh9xgAult2I8qyTv/pw3nH6S8mMa6pZBcPy4PI71ZzYf62Fq+MyIfDqKln\nPgmKTn4E+hH0TvsksbYluUCHf0sEKydz6EoXAMpovmqi2Lm8YqrAJC+Sqk2n\ncQfKsC7T4BHVx2Lb6589uyVYKeyU9ry/1O1IeZmuLP/VJKyK55sF51Hw029L\n41B2wvmU4BLN8Ag0e9ujFHyyrxdPOodgKMkuf4/Xb9J/mWIjFSC5GcBETw9T\ntJE4GK+OiLm/svQepjQD5nGswEjj692SoHpVQ7m12KMaxjwMlWVors0eFKvo\nKe4mTGDTLWnKcjCAT8biP9zo5G4ApZtPWbHax/+v805fNWkQZ0OOjhHKAkHy\nPUTaO6jmBvswZU8H13memSrAP+l7wt6gbyqvYxLxPyZKzRauG+vDaCu7KaFK\nEzWOzX1cKHofp35+LOZOa5NcaHjadsUjAauybRvKYQe3QP4MUXPssJyEkpN4\nMig+zIIoCeeq7N5Iikq/ABbRzuRKh+Bpsb+9YrT7vOQPfylHNiH80rJAwtpp\nn0pcg+OkGgYhA2KIyHR9bWb9cxbNQ+GGON+jIWJIZuYyQPqnU89CJXAtJXf7\nCE5B\r\n=xQ6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/list":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/menu-surface":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.dbc449b09.0_1603908865153_0.8810932665378466","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/menu","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"688ceb77e3d295ea4fa723949cb107cc70ab1a08","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.4794b25da.0.tgz","fileCount":37,"integrity":"sha512-w+llN8R1qPWuCphZWrPRZGespv4zsrM0K9K1AR1imgUeoS+nimx+OkKfnJyphha2ZvbdKGJvriYliJnoQDog+g==","signatures":[{"sig":"MEYCIQDG8LCKcWr2OLyTawq67JZ2XsVBzIOuhwE1yJU6wC18QwIhAIXex6B8ajJJd2mEenFW2efbX4Dj19GG2mBE3hETJ8Fr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbulCRA9TVsSAnZWagAAf4UQAKHOznC3RfaiAYtEKozH\nu4Y8ZxWorFJpDV0prLzDLvl1O5YbM2UE65kpqJmUNrYxOgXvPTiH9JgUuL80\nEDpRoaoTSNMFEPfHXFO4jd0iupuCfiY89GZx09zCzl4aJnvqS00yS1NvdCXh\neAFgCyfyi8s9tkDaB9M6oAGEKLNSEG3Ehj6Pfs+obIpHHDeQEyrON75njkMO\nVa3vB5MaGfVkYl0ppZjzt/AZAL4rB8x8j6SW0jfO6v0W7FsRnAuWAOn06zrj\nB/jh7VKRig1r7JnmH471T4plsHYQvcqSqusTmlhQfpfoI0w0X/x+JhIWu4tc\n6Ua3G43w/Os7ZNpZ3kohs2kIYvUEBnQoGwJq9roKAFMDNj6ylC3vavigRqe8\n3q6MHIELbY/MEcAJSfD8q6mo35ZwBkmImYB8kr/JJP6JSUIXRC+Rey3uegLJ\nX8wuyEfGvxuwJbohvAvkoflG/RgLFFlnxepJnLODuS34rCCuEzV7YSKqUL8l\ni+D1vEbI/+J9j9aj6QSVzdtSByQyka2x2nLhR0P4Df59a2CQvlggcqbV7peY\nvAsEoR8AULS6+AJ/Qs7AuFFECAmWY70Y1Rtdi9ppKOcLOzoaRKz+zY+8sb2s\nP7t3QjW6R89naUev5LtqUW3Kc6XSiPvWfpq/lMauu6SKjr8t2Pr27GM8I6vO\nthBW\r\n=cagW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/list":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/menu-surface":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.4794b25da.0_1603910564986_0.5224460183536515","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/menu","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ddaa5cd6273a3aa6907390a350b72b1b2a9d3a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.c61db90a5.0.tgz","fileCount":37,"integrity":"sha512-YI7O80Fn2O/v20w2NUOqZGYBnJfEyk+eQaJ5xZbcekfBcAvLCgksnq8SxN1n/d2esPP8yTihCSRRsZpqvE/4kw==","signatures":[{"sig":"MEUCIFbZ/YL588K0+mYaBjuoprAf8apEII5Srux+8K6JgkGdAiEAhgJJLSqnUqO136frdSW+kw4ob7dOTArF3utrUyZbFIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcAZCRA9TVsSAnZWagAA0KMQAJDboTKBGQI2rZBnO3Vl\nOfyMeqf88eOcAVl4NczC0oxp29oBNZ7xBJR33eEGbl/gRCEi5dVKEqaJ+Teh\nYdEIsRAz/zjiu00RW4SVLbV+LnHRoFvAXKPcFfULHKiAb/7T19r2OJvV7I5D\nsIH1sUOKSLYkY70L5Yz8u8FTJeIYxtY+16D1yPH6yxeAUCLj4A3Yw37B+MZK\nYhePtKUFj9xd03LqAsqIr7ydHWfIqC2cXKYpET81g/BOtbUKuM2vPYGWf4hF\nP9J7fmAmt0G//z3Gg860DeRjUIr+of91UKe1mzclyXfTKxtxnt7Z04Ly+c94\nK6NHzBNyoHFQULHLiZgBa91KCGIBNeRnYexISTXfUjOkrmtSjRiYSjPiiJ8K\nXc08ZkV8K1KPp8mAn1qT22BsBjz+oXfiXxnApQzohm/rGmnl4FL4ztHnDKXw\ng7tvhzpPxpBrfUm3ht6AnwiW1Xkg1dftpNbfktLl8jk6BAflpwzb+uNgr6rD\njg+w+/SXzQnobueDqyFLe+bIJxN/t9sJtMO+k3+yx22gQRCc6wHpn9/cnAQW\n6bL3y8pXn5QPluGgvjhoc1b55YuzgC/pHVxO+UBOjanpPwR5t+pyebDdwUPx\n+84Rj02kJ1e8zyijtyW0d4pnL6tJMy/FsIOD8sBTPYAvEC1pO0UD8TR5xS8H\nW5lf\r\n=7ngB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/list":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/menu-surface":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.c61db90a5.0_1603911704887_0.2198787895182639","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/menu","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91b56e468d404875176255311d7e29b927bc03d4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.6d9648ab2.0.tgz","fileCount":37,"integrity":"sha512-dwAjtoeEr9fykUm+EdsV0SN3YHFLlQ4utTl3YWJ22dFQ3ARyL5hoPrR9qXfzF5uVCYhrsBLZ70I6bM+//vXqQA==","signatures":[{"sig":"MEYCIQDv6iT1E0XP5QafYFfNqlvEZi/UuNX+WeEhsi09NDE+agIhAI1ZdSUi56rYx5xaiz2xZaM1XT0P//PzE9LWPXNjYzec","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmydJCRA9TVsSAnZWagAAOdwP/2VRw0WmzYeGqVr2Lh+l\nDuat762pt7UsifL/BdkXi16Jl1j37HTF9ff9hsX3rfTlUSHLRSNI29pRX/R+\nizd9lJ7H9nDDzHZZqhwIL5o8httM0CUttldOEoQS39ZPOsYkgiF2LXRTZJ88\nY5Rv1rwwOsrcKzX83kSydVuqPIYM0KKzIPbPzDCJ+o+kBJyu+dJLnKo/k1d+\nPUlP19I6cdpdpmh0k8LeNjiRFhWFDm8XsCdM/z5DD8RnzVJAsiAOZwaWVyS1\nYbpYU2JNunNP9PUMo4EbaseD+MaUf6m/xclD//IAJCGAjgJ2OvvY7xk9PElJ\nFtJMDNtRcwUXy4dxgxSVU58KQhVVjmvwG2MqeNCFYiwTgaKUZJkdjaStncDO\nJRq0yyC/vL2gi5KTb+OstOFP8N9U2uiZL0zKHCKXYvuMPKRQtP7UsMBmk/TG\ntZnHDKmNQqJf4LWQ/RgTZc+NJSxJ5VfundNYGJuJIyBQeQZC3K+RutAwY6dZ\nzcOKEWF+uS+687TK/BGe0+ut5ELxubc7wx4mw88IMS474mdwOFA8uwTKRthF\nl/1TrIEZIDZRmRbEa0WEoKZNWZy08fbXLjEL7oLEYdVSBqS+sk5W0OAc2R7d\nxQUPrrIrVdMhPdqhVG4aa4Vfk6sGLTSvBR0tdITxOCunx+Q295mQhFgdZXq7\na5cD\r\n=WSlc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/list":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/menu-surface":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.6d9648ab2.0_1604003657051_0.9582964057004324","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/menu","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e4ca9df72950efcbf690626f3467bb017c96154","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.5511c5254.0.tgz","fileCount":37,"integrity":"sha512-XKO0ZwLU67f+KpidVh268eVGTfGsyYkOH0PSPre0iqGN0jTKEwqfLE7q2UCU8Ipt4TjwdSomnAIHonwmw2Mq0g==","signatures":[{"sig":"MEUCIHoI4BSzSiEupDbR1NKhEVw/EzsWY0CqaOH525Vd4/iDAiEA1vIgFGk6dhd1q4uyVa9zY3vJcsmwj1NNX/BC05hePpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFUMCRA9TVsSAnZWagAAewAP/A/5AyyRBjYRB9fN1FbJ\nzgr7APssOfymtBa+hs1WwFCikg3kbLovo/RiGw3oKWI1DAAT6Noy8xq0irBh\nonKJ+uBJm5mSMVl1zCHXF55BwxoYMNipQTcauXH3BcqUR+EtcciPzVCiCBDr\nmDj/iGmD5ThpVBYai1vRvpsgrKs5F0NogzNJWsxeStkFBiasxjzIjH7AgFLw\n9mnNBErbrq93+cIY8JW9mMNVr78NYzHHI9Tp/mwmhrQ7q0mz596NGR9b+/ca\nBxzZJQZQ4EJaNffkgyyQIEPYWaa4qRuRVm3dxKApSlb/r6ufV0lxGtVc5yU7\nUPm+E9k0N2Gl/bAFVEAGkvORTIuAx76UarSyBXGkIV+1NjrivUYt7VYML9Wq\n56uehpwZc/JLIoSW+ynzhFHJaNm4/4RjqYxYDkagOKxTF/tjJFbJsIOmBnxm\nGXa5L0dDYmzP05T/n5tOPcNLkoFWHufy22bDehUR95uoGkPgDgjIbJ5B/uo2\nu5TuVUqgKuLLgY04K3teZuh11b+BnB1eFwujHARwBPtVMv9Jvanyq46rw1CF\nOceItSOrNm1+M3CutbMxd9qEL0ounlqHoKI1tDOkbgsYCksl8fqUkM3Fokxa\nqdxbkECGpiZAwTGGEqJsHdXhI0HXkkZYs3vZcn2AHUoaViNndRGwo0tuiXpA\nVhkl\r\n=pmgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/list":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/menu-surface":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.5511c5254.0_1604080908196_0.4034666319841962","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/menu","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e86aea43c0867b6482ed498b9ba733f360f3ad31","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0-canary.bd6e302a4.0.tgz","fileCount":37,"integrity":"sha512-LV5WHUcGDrWhNw+1L9YcO2NerOeiNGzjxhbBxbd2dWwYU+WObdcbrIH8Eg//dLrGYpS7F6nYSK/BUImzaAVlrQ==","signatures":[{"sig":"MEQCIB9edMUN+O64C+B5XFbePKhCERFMK5E4kW2BVb2j3BddAiAlyo66GViA1jx/6B+RRDNKS027Z7trsqs7Bc8OqP7HdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDyZCRA9TVsSAnZWagAAthoP/RzYK6rTBrVEwdIHjNn4\np0sOoB21sGpjb5zicB+l6wuhadirfRTuE+P5OAem1OqIO7Env2c7OpgMSly5\nytX2pthWrzgqJkPN5fsEhgtwF5gb7OjrM/7cw+oCFK89K9w2UU2B2rPLEpEs\nl0LtxKYWVkH35/dUIT/0Q6xVoAD2PJT8Kj16nNFBAY1GvDUa/96Hpot32UIi\nrq/lINUVlAn+d01NAlZqUBKInk8z9NQ6sTGISZ4fg9Oat4irUGi6t0ewFptY\nvyJQl8dFVqijpeVs7xjcsrTq0+eOFsaAJjxKb2yJUxNhbnt79ePnOag8AO7Q\nQXpt5akmvvoE8Uc8KB+76xyfhXYElRnQioZ806Gl1s0g0qs6VQmtreKRn5ji\ncOkdACfP5IRpkbJkAVwJe2K22cuIHZjE7GQhLxT66cREOZcAobSCEau20+Xy\nApDFPw4dP3InJDms+0YPEx6EDQaOH0rk+5XnRQ2fqVvbfXrhqBlINX6jQIRo\n2X5o0oFthHN5a0U0a44Zs0WwMpeKlxdJuj/f60Jjr9u0PTvLHuPionoJ46N/\nKdpIpWI4HnoJBiT/pqZ9lWPIC74JIcMRCyHWMX2BxofSkNHab3dLm4vmwgqP\n1o3cakS1beJI9RYKklASN00SXlibGu9ipBO6p6jULixPubhfNx8odG6ZJEFQ\nhX29\r\n=/wtC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/list":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/menu-surface":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0-canary.bd6e302a4.0_1604336792937_0.7037370109039043","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/menu","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a0f01f6145be69d3045e99c16d86e55640f04e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.d6b5cd418.0.tgz","fileCount":37,"integrity":"sha512-HRYtYBH2KAUIuVTi52mf9iBiMvq1Q6zQfj0YTXXle5Kf33txaMST85dE9uVCR7dCDMt3HalTGHctqjr1/LuQoQ==","signatures":[{"sig":"MEUCIGt7tFqWn808NJ9xJ+PzvCnwTl52PLfO8zYobTCBOz4GAiEA5CxgD/SPALJyWwAOSyWVq3ghtfIqmH7Z6GjQGTcPt8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+1CRA9TVsSAnZWagAAgHMP/iTmQFS95+t0j9W0NkIt\ng7yYU8SqK0KEj7WGyk4NU+esv8jMlxrvXFnzyimSbmBEPVXK+x/3rT9GBco4\n55kkcEKizVQNsdA1rdcgimVuqRCO97Bv+rDvKIw5ZpPOX4kZwy7Z3Ob2HjEs\nqj9ITmFVvp+zCG0/A2uRHW5M3JuVMOZyIpMe3yoEYXsvkj66fmZ1mcIUjXmW\nq/rlTrgGinCqlhhGpUB1tDaZph1W60m4ngBejOmj6o31eeKqKR3UDKLLA9Mb\neq/kbKOQ9Mk98TfOznopNejZEt1ukw+vb35LKga5Qjh5qOPUnqS3ZCWa927A\nn5BG5puJXVYEg8KT1eTvKL+qCU3tV+AO/7A2XldIB8eeTdN+TS2Ey/BjDM3j\ntZyo5og/V0meZF4rX/B1w2BfBTYNab2c9DHmXVd+XJ0uOZHeY4+Nc4eT7tRA\n0p7KZVQmKpiNpiIB/FBY9fhmUWPRDVkJzwKap/X+OhoulMLXhI6U15HjpfcU\nP1V9VS7zZG39fRPsAcDkixYiR7cXMFwDi5tt37MYPB9cLnmk2flFbEEwixD0\nBQwIc7UsKjX4fhwzqXNxi0ZjMpeijB9HmmZ8uAEcQTjqwfT3/1EExIkNIM5B\n3Nvgnj0qWc1Zl3RDU/WmBEm8V/ixmKveAhc92MfLMTHTp/WsrXut1ZGSeIJS\nwyfO\r\n=bWhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/list":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/menu-surface":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.d6b5cd418.0_1604358068933_0.04729886919462767","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/menu","version":"8.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ea6e09c2f38acf7b3375adba0b6356878e2a16","tarball":"https://registry.npmjs.org/@material/menu/-/menu-8.0.0.tgz","fileCount":36,"integrity":"sha512-ucG+j9GC8uDwkqjDxMfP21bKuvbKx4ChB/UKBZd4PZrJWCvqdfuC6AJih57UGVcu+l6r59mpmhkvfGhEjehNew==","signatures":[{"sig":"MEQCIG+XH62Heswgov4r17SodjRKyTeDtqIEqMpueGhzm6ImAiAoGLTrXO5PrN7vTb9oN+C9ba9reUNcXXZ4VEP1GDNlvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI/PCRA9TVsSAnZWagAAs8sP/14up11+4Cb8a8RqZ2zh\nV63YS/5t8TM/R8eWkyM9ebwWk5RCBVlGH7ycO9d0rv7NU+x5zfZCKAPDlZnH\nIFkBhXPMFsTqljegwGOYpuRdHu8FV38C8RSi8DMkvMmvqYBRtoTED8tZqnUq\n1SCiLjQqJEhtDhOkOo8Akvzknwm2smjq+/oH7nLoVx3a2CEu30z0e9FHE8XS\n+RRRwThZAqE635vLTi9MUxNAHRgGaohk9UudxGgfSQOjWvsQo/FjiyE5/0M+\nUCV/0x0TxrkYm11s7F2xCWFLmUIUMeyQbaboN3DjNanrhhkawcOp3xAjJlNM\nI2iE/+aqMggtD8nOcrTlsBoX9b1X0moLCk5UH6pY82kvTH704gnQYBEPGBys\n2G6Ao9BMauHVOyZ9hwnLSIrgh9ZfQsdePjrckrDp2DoDqw9gP+6bYy/pgzBW\ntk5S9Udz2ECmW7UE48Y+WIN4/uvObigigHFLBjLSSjC/ns4Ngog02ixclDFd\noZx+g7jWrqLU3TrQsK8HirTkLRxEjPZRjxIG20QJxsLDG3RTE4IL0LynqViU\nr5zcREbbRhb6OEW6lDBimA07MIi21vXeK5+zoE5q4qxP+S4jfHSKSAt+huHz\ncyYLPz0720Kij/ePPAFpkyME+CXHqQYQ77I+0K3Eh/gmvwfRXfwV8vTqne9s\nGH8i\r\n=55Xx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/list":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/elevation":"^8.0.0","@material/menu-surface":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_8.0.0_1604358094522_0.8712839812077473","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/menu","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad80abc6ab61089748f8bbb633ff9974a38ae8a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.fdf9a2634.0.tgz","fileCount":37,"integrity":"sha512-Xr8zqzniQ63ofOIoknkCIO1duSDYRdnLh40JsPp9VkoiMbA4pdMQElJrwYVHJBgAs7X+mUxW0XwKctwVTaLMOA==","signatures":[{"sig":"MEUCIQDSH1ZgS4QiUxfGAQeLQmMquhe4in4zJ47SwLuNbO1tZQIgWQ7cOkVBXfBU5XSNNKfrtM3kf4rB7pt3j5zALWGFniQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZRCRA9TVsSAnZWagAAW5sP/AnX6+YVwWaNz+qJT+jk\n32n1M2e5OabaIz+pgiOF0gOJJn8p8dnn0bdoR7VGNs5NeGY/oXEHGE+WNN3S\ndvpjWI1G2T3Kq7hUrwiTatT8oEz0zvYd5GD1tE1allWdbNkhGsTc3E8+ZdX4\nY054l3e07RglJJ7OrryP+rxZPfpgEJMmZo7+EYb62zfSBXcletFVwxs35HCp\nkL2D14Ig9w57jm0/finTP/Bvys/Nu3kIx7tN8EW3Sdw3VQrZb4la1QLJUdEp\nAJsXQtUQXNF8oXrpVghIJSWmexYFXMVcknmAa5DUZZxZZoCcwKHZgpd/kzNp\nRsXR6TKA+IgLqnI8gtJud6nyScSSouAY9Ztk254wbVOQTGHQ56aClyDFSwiz\ngfGnCm/zQndfsPjWC83z8DHY2gKQUYGsCCicIjiC1FFk6ZS6H9xI/g6NJRfp\nPBdewlS8whp0RjwfLWUUhCq5vUhO6gFbyaeUSulAOmdGzSp685rzA7nZx86x\nojgDZV8w3ZA4p1RWu79ll7614fPW6ZGpAzMD4R5VpZ5wX+NwUOmZdHjBmd6r\n7vjTCi+z12IjoD9FU9u4UOGNshMraqdAYnOSxuajuKNv5NPOknSyRCAJrZUp\nc8Tb9cF/2EaMKzRDkRMdVzXOyUvUAxnBuvPZtNNvT4X0/ObOwPvvYcMX6/4d\n77Wr\r\n=wsRK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/list":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/menu-surface":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.fdf9a2634.0_1604445777359_0.45852058677864016","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/menu","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a64cbe1c3a4237d4cc692ecfff3b7b36b8c071","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.4a86f30a0.0.tgz","fileCount":37,"integrity":"sha512-CbJVCLCMkwS9UegJudu1ssBDCVjIF+cPZ77VEl4sm5A/bNM5BTTztAWlZH4PGVa7heg1wVCL16ksSMW/F0FLVg==","signatures":[{"sig":"MEQCIB0TH4BVFiOxlYX4hQXamfVbJBnDKYxrpEGoQNmLmBX6AiBZV2CE8v4fwwT3Rvgs55eWpkNl9O49zzWhJ6k35KUe3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefuCRA9TVsSAnZWagAA/3oP/3Z5Nyeu6n72xzFjxbPZ\n1gNgUXY2uzNcOWSTl5UkysppCxhzMdrcJCANXmr2uO1QhywBOYZK/aNQkK7Z\nJWHsnfzfLhcvVkFhRQV13Z5iObbkCVS3d046GO6BmBMQtrxaTAFUBTVi5uFU\nNTvyjkZQTuwlWysIOfXFyGJdarsdmzXWcYHkaKI4cmC5g1L8rGTcvzanj30K\nhCE2+ssmP7800/gNx8tz3VZClXwrSpTZU4NtGvYb1CpdJ/8a0fnO5lejPFsa\nurd8OEpJm85YtJJKcxA3h3lEy9FzX0PJA6rMsvuc4QsxPBgJQJnhu2hJTCGb\n2pblKnPuVzdJD92ttuR4LKCsyk4Zu1gTIAYGcxpy6d6fj2UZ7yBOpr4SivXL\nHXnInXvhMkU0WgJz3JcbGFkamsR2DwuCb7UTvauigHwS143H/Pz7+HsoSlUS\nz2Ie4PyCw3Ig9WwWDBLAayBwUqhoDrqmbE6xBDbAmjgNJJuX9Od8F82WQDBT\nOS5VHDnzwWrw/qKW9ilhFmaQFYaIHT3iMKyyySW7TGWkAu8KQKonR5LWunFc\nmib4Rw7NdtRB1FfbC4kB6X+w7xwISIyDPtQ2QkUOjZjVFhbLHMa3WLJm+ato\naBOCteVkryMtSfz6qqda/hswUa3m8ib8ut8gffW5mSCT4Hi0AdBhWVZPwgX4\ndyal\r\n=FAeM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/list":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/menu-surface":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.4a86f30a0.0_1604446189613_0.45332826690081607","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/menu","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81959643a95d9eabeda0c7bddd4c29d5e73164d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.fc8b045f1.0.tgz","fileCount":37,"integrity":"sha512-26kkS3EY4kzGetH0ksZIZ8h3oM4IezzOj4t7QzOrQ35xjxaqXgkT27KpOZq5zZ5XFS9Azj3+mLJOTZdy07NxDg==","signatures":[{"sig":"MEQCIDMLS8ifaG8DeI5MAjm0JKRhRG7oSfW4zjXmpAM0Aq97AiAo16KcgL/8jh3BPPDAMbh8V39vkOXQRna0/jxN1AAArQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeoFCRA9TVsSAnZWagAAthkP/R1bldrh88tZ4cXDMjJ+\nOjuxDqOyCbxqDbs4OfaghyI7AmuCK7mt9n1WNHQnVIqzv3k8Im5yX/j3Ugsh\naOCalpZIpNK2uKw/4zbP4UkuV6LolQ7ZPTOyJxkpKDxkWt6cl8vaHD/JSIEx\nRQx5hE8JQAxXQgRVR0mDvoac/P1gn03O0Q3YLC3O2w2zL5GLBicE2ilpczp4\nwiuD5Owiyr99gziqs2uLOJlefkMw9aVHbqN3zSqGmx4gEcjWBf3zAIjMw4D7\nm47ExVWOMPt7hPkh8RYI/bYWbpuYutL8fGTowJysZB1O/mL/TDUHcS5nn0VH\nZXHIrtu5vtSK8QMDEEXtL1Dg6H0DQJoijmmsZK+g21/qTUrasaPIoxyUkkbR\nHhbss2CFZCGGbyS787PFHO456L94lbxSoOIOfXlmoypxOzchxY83xLC4igrb\nZ22F9inBWXkZaZfbGbx27usy+lAIzIAJ9U9f/UO+gmMT/NkRbnXA2LwXgyHI\nu0vv4YhsZDOHGzypo0rzHV7fzeZLGqi6368Cw5om8DvWEbeKy5i/JDDAM0Pt\nFl8eXOVUKHZcvXk5GiFiqY46OW5qbiPLWXyipvg7PEMyu8mi8PT3LIxYnOHB\nUK9Fx4anQ3+tPBD+nWhl+vW4TD95Mf2I1tw7DQc8PEopTTu7L07eWAstg2vi\nWHOJ\r\n=daab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/list":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/menu-surface":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.fc8b045f1.0_1604446725148_0.1757792898795505","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/menu","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7077397722f43aa1543f379b40530e65095c9894","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.a0b2db26b.0.tgz","fileCount":37,"integrity":"sha512-sPGPewS7Zqn/LEy8idyJtc1Od4HP0bLyRmTWWBKfz2ZFLr6XBPDaScQnvwonPWd8DtMDl//oQjK9iN9LmaBSLA==","signatures":[{"sig":"MEQCIFpyEuI4Ybne38UF34ceJTv6ANiEFyChfb2xy2xp1eKgAiBR2Get04LFPC2zTSvicsnQxwJqG554v0JFsCoIqyfu8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofGNCRA9TVsSAnZWagAA0PoP+QB1hPdfvwIwhytSnOnN\njNnCD9QvtYhkikJ/KjzF1h480fqcxEFJC0dzOfiWKiaXJI0uUw4keEnl8q30\nzlmvw586w9jlnzSV9nEPTKxUeWRvo/QB0YI9HJXQvddeOjLWFTLBOb0KJKfb\n0m/82wEHyIkkbqKXRy+I7l5VaMSTkIKI3rqOLXnEfs6jcIcEfRB6LthdFzmA\nLLTXQQwhJ13GHqr1q0xi8I0dGyao5DeMqPAou7WRi/JrMvlRqTcsj2I5dV9h\n8CcUjCgrHi63od8hqCHbfrXAHMgThUWc/oBW1L8httmMGG/IJpR8u8wPp0FW\nlA21UBqtZ+wgwIhBhxbprLXtbHYMHntY2OL/eRdzkl3b9j8GeqQ1263K+c2V\nGyzFNr4wkbeIwXvsj675QTdBzOvCxadb/8Gl6+wOQunlX1MzmZCOcf3BW0lr\n3akpwAPizemqS/579ZhB6z4hI6y9qW7jOzoLPwiu/d8hBf/0vRjpmpC+xREN\naDnF6uWQ1Ul/OxQeI2lGCw7ZE3BBwflHzelBfO/g4TkKnDSO5sd9MA5RyAhQ\nz1lefQWlbzqGSH2G6xT8iO5FwKan4B6z4qtuP21ze4ev3pdjzBioBuS5O9oG\n3im1j53ewfkjQySXkMYn8W5CeBsdh7ZpgSPCixHa0C6ei60Zl+9hL3U/yG0e\n+1ic\r\n=OpWA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/list":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/menu-surface":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.a0b2db26b.0_1604448653483_0.32586452780024433","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/menu","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9292bb8eb4c8114fdab0f1a4220480f0e85a4e41","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.419e03572.0.tgz","fileCount":37,"integrity":"sha512-IIElnlqrlrz3bOPQylNCb1TWTzmUnr4UITEyZ3JByuZrjm5uiqr/uJyVfAZ42tgG4W2Tf4RLBfSDOqmRaUE3EQ==","signatures":[{"sig":"MEQCICU0u3p6B1PHrTUWjC3FhYUDtqmPmWSsYERq9WLIng/CAiBEYCvVHl+7rDYE2Les1HjpJ6LRU7VuDzfT1Pv9Wu7JKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUxCRA9TVsSAnZWagAAHJIP/j8jxXILI7veD/M4ATs/\noXUGfgwfW4rytI/j3Eq2yPbiiYps9bstX0v+wDs8+qJvKtFFYZH1OI1bR1jv\nek/7rkMg1gWHUAgLuCRcOFn+bjSrHdrAHJNWx1v2J8AQe3T6plSeralfnaUj\no5PnYnoE7OMy7TOitoRX/hNZP3zqmwhXjTKoui3jIDBcjtilo8VgPV3bs09U\nEP+4HXqI+lN8K99k2sOq0miwoUKUDSXuoddpAESCi8hc3omWAKHVxiPILa/N\n6K/ozRG3Ri32qRwI35qrfkS5dNRwf/6LOVhAx7CQlwFv6LX5lHBTN8jtAXnz\nv4cr9KiXGdQDscBihZb7isoqSYFg15z//bQ3frNe4+YfE3iqFsu8zaQa3klG\naKESMfr/7gALwBh/UjAGXXJ1JtmF3L3algtGMTUX2H1KnVboRSp+Otjt/Cb+\nYIptV4et8soLOFvnKutVRb+fJqcQAfW5vK+TA5XHbkbaP2Ynj4lrCsYgSXnm\n6boxrJcq7N0qRhyQT2kvTGtTQqPn6TDlFetVjA6fWDHeaAa2ciC3QoDS2XMk\nrgVCv7KND02B/pKtWJlcVibfQXzf7bxR5udQO5yDFv76jAJW89//LrvgRg85\nPg08o2txrYGFZzsO354PASBCeS41aaOxIyP3KVJsHr3d+XFa5NwvsUVVaFno\nZdfH\r\n=pdG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/list":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/menu-surface":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.419e03572.0_1604453681351_0.09669487172395419","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/menu","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3db7124850b331f72b9bd757840fa0c0f92585b2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.a432ad542.0.tgz","fileCount":37,"integrity":"sha512-qEO8sbgwAk5TMGYfNANbIB7WxfEmVke+0Tx9+iQViXkegfHYVMbf8O4RKbTtCaym5GYlN3kHcUfG059uHkWGlg==","signatures":[{"sig":"MEYCIQC1OAtOjFKOJP1FY13/PoHEfwhXYeTvnz89l33d5Z/t6QIhAKqxQa2WlBnPJzf2A9lOEeInsET54BBk+wkFVco8beGt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKssCRA9TVsSAnZWagAAMFwP/3ByxBWKgYhU451yAKL5\np9FW4IJbZyPvFcZDlHAYi/YyBW2TOOHJXHs9o6cVFp52nRotgl574dVShjXe\nnjLflNgWcnB6k0PqkS+JTiV5yTyP4viqnG1+tSLaiWzemJ/hP+q+eQfi3k9M\nLYVY2ehceSQzUPmB2AT7uPnRW4bVkRXLo9prFe1SxFeu2amva/W5onDyMd7J\nYf4qq5bQGPeWqRIk0rw6BKz+nbJwplFBdvXufJ4yvJDQqvhH4/0IMvMh7LOs\n3mqxqqPRPkC5Rf0WMl7/t6zx1zO2ClLJe6tyG0TE4g2cyUyGJwHGvcPvjEL/\nv6AZBjGyroDUPoElwirlzuSgZa+xOpj25t60xTmi6WR3lzpsn9JGIQeFv5wa\nOJIcWsuOjVRUMMw4foC5BehDULzrAbSniJ7SQAXISCDrrKOOIRaJoUohFKxY\nr+4CZdiJF4vSiTO+/owjCo7Obaw4MmfiGYq1Sz1LUfKBP3n4bKuHcJAaF7hJ\npde40v9H/kAS09I1/BsqFzJg/yC5MUqREaG4ZEuO8PqVhggg3kgW1cNa/vDO\npTVv45Xejddg8U7zVulNOCOrz6GPeONQTe0sYrHK9pX1vsjTfDikM5puWlWk\nlyAlTB7d5P2eLgMxtASwEXf8/anfitJgu1KG9QSdlUYAw4ptNpp+vf81zkha\nBXrn\r\n=EOcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/list":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/menu-surface":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.a432ad542.0_1604627243571_0.7650806155659451","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/menu","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eca832ecbb3ae4b6f460afb9dc8f767db0750617","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":37,"integrity":"sha512-/Ejvp3L5p0CzcQbVKbqxmBUdsIFRAlHWAH8WAawe6iZbsEqqrt186XfWqTQMYEvSK8Xm1zABHxm5Pj2OZmnyXQ==","signatures":[{"sig":"MEUCIQCmuE64bqZAj3P9lWJELtyIyfSjSZ2Zyc5ljkzFHoGEVwIgDogwocDx7+0fEp+Mq+LMLNhInaS8uJIm8RWeuKmYaTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":670626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK++CRA9TVsSAnZWagAAVt8P/j7Dd4WLOfeIyyUQav1Y\ncFCZHulv1e8CHWo3mSXdfFxdMsw2643Zl11E7U6HBjLzUsIDlIC6v7vYarOR\nZ2OCIkgYqhw/GLs5g7iiY3oLmOUlssd1eHI6fNbXKNl7guCK5GR65QvCpONM\nzgJQK2XPPgOJsdaBt1GWNQdvIgh7T7SXEJ9PZzGlnZajOCen3E6qws+BOwIa\nmHHvh1tkBvnhjNzNh6LIUpGzCXTeJSPk3LcrdtTr9uKlLx8SYRP3oHNcLwqp\nF/RAdL8NsdlWs8zGaSpxcp5JSd5FI5103YWVixgyvBzn6LfGqspKJr7WdSvl\nFPHu4b8hKcm49JJ4x79mjoVL6PhuM/7Dncq3orbGKrjbT/DfI5X1y+ndSRiE\nM1kImj8e6Qjb7eUsFoEIS+ia8qp2/HjhNbxz/C+YKmL88Rqv30Kpgb2gS5xP\nwU4LQK4YQa0ML5c0aYKU4jHAz18SA6qq223ph/VbQNFAYOUo059F8kLE1DMt\nxDLbLMoc/xmX01aoRQrV/2s0WEJNY5CO7yLurVP8u2V1sD+J8Oojynkmj0Ft\n11f4TJM5jmnqsVYNLgIbmSPmV0QcWD8bLljG5m6IQtGnqZcqkWrAwlAzxuMe\n5AYQZsaqH4RzDcdPjABm/JEqRA0pgGKFZw8xNQf6zYOI5fGaUPoFKwCJ2GLv\nhxgF\r\n=sx1E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/list":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/menu-surface":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.e2e8aef1e.0_1604628414533_0.3510223269251491","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/menu","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a99f9501727589ea559a22add6e9d3ade33d4211","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.ec6b68b34.0.tgz","fileCount":37,"integrity":"sha512-pRF3vvGjB83bp4ZwUo8bpWKBeWZznSjnE2pLt1MwsCeuqzVKpoQ9EFoj+CGIAV66UsJ732Wfbr4nMAQLkbPWCw==","signatures":[{"sig":"MEUCIQCMjTEU8HVtAcPvxVZW6LR801gb+I2cmLtE+BDfMBpy5AIgfMRpMre96nek5ZvISsxUXBnYlV+FmndWstuF7ck3Hu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZy+CRA9TVsSAnZWagAAQtIP/2aIHDeXhFe3V/BJML5q\nqEpLhr5WJ2R8TPfeyEuDpjovV+DUb9Y9BXh1sgt7t5xBz3I6THaPg/wFEGT9\ndqrMYHYXNcalpryjJHRZo4phj8gWxgAQYKSH3e0ZDkqCIWygeSUso4t6nAkv\nzCrO15q3GQCSfPgzQ7QOzDhrqj9hRy8EBnwBbdf5OGoRGbK+J3n3mZwEYOvl\nEALCBwH8WSB43Rj62ZaPsVj48Xggti6UV7R5Tq4rhu3pSgnZXGOWxjI3xepi\n6WEumDr3DGz5Ml50HNazBxnJE/P6CthUJHw+6ktQrpxKhI2iZ3FytqasZ/+V\nP89OIfVXKoEYpFz1vLCUX6+HxPQ70Ypna7kLHZxCgJt0IWCtHolKTZwHh5T1\n5nJIlVmIGrLNP1KB8UXfFj5mvkusK/ouNmZ49r3UQzKzMTn6J6j6wFtxSViW\ntjAtv8kr+RM89xFh4z8gyxI6Vf81HmHkZdFiqhlSKaFw7S5INp/SQWDM26y0\nEAfaCcxvXC+YtXTZR3E3APe3lgh/UEePKB3rpwMjQwIZ0ywA9XTvt9RmeSVl\nuYA+IIMI9Rh1oQbenPmd+FTjojIXX6QxsqOA5Sg0X5xIuVsCiydxNQRZqSei\nQ4x7zCMHA4WOG66T4kmKJHMd7IxBxdw/ReQZxmFr04T3cEg6ma/HJPQLC6sU\nBid+\r\n=Ms1W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/list":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/menu-surface":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.ec6b68b34.0_1604689085948_0.5961119383236928","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/menu","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84eee406643cef24e6e0d57157a4ccc8817396b7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.b39094d14.0.tgz","fileCount":37,"integrity":"sha512-h1fKrqQo+J+N/Rk2bVlbqlacBfJbjMQZfCKlJueonoXxB1z+H2SPPXREbrYqIlWSfL2mlsAubPuxQ0AXVm27VA==","signatures":[{"sig":"MEQCIGHrobhKTzWxnnsdqGYCVwf7jsrlkE1vqgFS1iG9Er8oAiBy87S0uOAtTfoSjNG5AXQOck1rG/GEGjt79aylYTfMug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1uCRA9TVsSAnZWagAATf8P/1CV0g9Gw05KWKUZoHBk\n8NM0/az1/jmwEo/KsS7+oE4vJ6MRMuMrSKMz1V/ReMc/e5Mv5LhQdRQ6r8HT\nWevGL2fB1iVu/sJEy4SqR5NanmWrV3mGJ7btY80uH+45+FH97p5lyQVjAiFX\ncXo7x4442OQITLujEXcQlBmTD8yt4qpZmbyG6pxSjv06VHYIV1mBSPSAcvW5\nzJviSrwI144N+hhB/ZA/XzNiZHqQ1wu8qe8dvdHun0Z2uUtw3rPE9p5ER87L\noyaQYTH5pZC9bY1a7lzQUVWkqM0RJGArLUNfTv/NF70ATOfvuznN2zfJa/DK\nfvce4MNS4FDnnH+y3AHRn5xbn9/CXofZeA9hWMp7QA75giVIr2Qyf5UqQmsQ\n+ob7OqvbB9R7t3hMqkiOWDe5hjD2vp4kzABPI0E88PT/Z2SOFQ0lFM/6tgl+\nwcNikQbmaFhpfTmBW3hSu2FllW9YUyHsfBcpJJc5QlE9xbo0p4+L7/0RyVT+\njBBsriic5wo7KXqMbyKctM9kewgOcMEkdWeTAvGdOWlcaDg2h404kQSHuy7W\nROHghLpBIUd77PDQIlxX1+KxMqeWS1jwgJZXZj+1J5UOlyOxqZKqM6V6cYOC\n12UB/2tq/DANdBBR9E/AyL9+FkeOVtNl0ysrQCL0S4CChcvw7m83uNRKIlpa\nKPRX\r\n=b4iz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/list":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/menu-surface":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.b39094d14.0_1604697454091_0.718885679928096","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/menu","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6305c6f1ff7b38637084c5868f67c433a59ec1ec","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.8648b8258.0.tgz","fileCount":37,"integrity":"sha512-st+IFH/FQPOXyoGT7SKO0MCRtg7GypAgJ88MLkgarcT/KLnYcZPvb0aBQy62v0dzHohlnRqWCMqYXq1BUepXvw==","signatures":[{"sig":"MEYCIQCg2I/tB7eJJ+j+Xe+9KfINKK9oexvkFzMwrWWPTv3ePwIhAMJwxmUXtMA2XsrNigHka8ibesHs5UhcAYPIVYhmT0tp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRKDCRA9TVsSAnZWagAA5hgP/RXGqQPpOs2DuVjb2Nk6\nMV3zcQhuXEOwhKfblTJ2LEJjBeu7fkd7P5EY03BKAr9aJa/6m9s6J3zbCc8J\n4oHs1aYQrQyji02AArcBp0DIXYl4nukx4uiPavHnhWCKSrWdyfF0KAp40UWn\naUXNEBynHn87mBHRsOvIBYx3pKNozgV/HYRirX78UNu0/4BrWH3cKSwdTmwk\nAHe7WeYgzYHaMwQ58fCbmCojN4MwgM5h+/9L05thJUV4Fwjs3Yi6yOKBcbmD\nA9OFTwIOjRdk8mGkxhhZDLvkgdKRA2sVdvLku8bDKtPQA8dkOejPt8Ya+6Ra\nRkutQLDgeo8Ti5qn8aDDmeoatG6aluH7o4Kw+M/eSPbi0jsIZqYmvaQBxl/g\n2A63GdewaSv/oa/IdmaW+JI8PbsE3LoGTEaHehzKOYt+dOpGIHlIlWJ1HOzz\nZC18JilJCHxZEscC4et9kP2V2taq8p3sKxonQLG7K4A+PKtOnSFfcue0SpA4\nkqkbOKfm95HgYcDIA/xKdSlaOSE9FrcLs8OR8+nSWS+hQrL8M2tZbyGW50Q1\nAvXAc3Q+6m0Jc0OadOCMmXK56dckl2aSpwKgNdIPHFcW9HG3PLYTLiiSziTL\nZCyulfqJxTcSyzF2TT8QT8NRPu0wVRz0REOZRxElaYUghkeTd6Rzjf82ffBB\nFqLA\r\n=pJym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/list":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/menu-surface":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.8648b8258.0_1605177987032_0.4783868644809415","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/menu","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c3c03b1b766dee9a017dfe53ca42daeddef45e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.240c5f74f.0.tgz","fileCount":37,"integrity":"sha512-47azW9pnFMTaYyesXqMilBQ5n7x8phnnJt/wxupCe5YXSk4gEZ6ctZwZEHIL1IVgjyB8ydGsQt9bhr6y8MwkFA==","signatures":[{"sig":"MEQCIDqRJHoe6tfPpkHCmEHTSVcKqGvJoK7deUUhWZz7BHPAAiBwbYxWwtjlvQmE1j4GVKrW2k19nfPNc5t/1n1rEhnGmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZl9CRA9TVsSAnZWagAAsV4P/3F6odvplU5y5NDbalr3\ncDq7VbOiwOyDDtLV0lfsRbWYmaykQH9+qnukKGi04Ng/vUz83vjEDtVa1pZ0\nYR8QsQjzZVxz1W7EHsPHPnEOwgk6ivO07wdob+CuYtSCxXYiKMkwwhjUAYQ+\n/vG8g3yYHdmVEbR2ywDSYxleuFc+Z6AXjq8JPsKPnV2cljepSSqsw+O+Macr\n5w5xVL8uNpMxnVrj9a1EPV9gKoZfq7S56jQNOR54RY4iRE3pHhIUrt5NHHAO\nI5qMvg29GwWUzaW+KOmMvY6CSS12uxvDW6vRtSRUvZlJAtWK2Tm0ieNIMq9T\nq7AUyXzpcfhmliM6vTW/a5YaV9WxyEUDaKXN1lU1eQRvSVqwSkB50JvLKi6b\nnZwyzCq4a9OeTv4/ARYnU3iJLvFRWyorlBuu5tAIhhQBSMM8ynQia9isMOTa\nIetOO07Ae4puWpfwK8Ch3MnqnZfEMxg7O9OPK+YPZgH2/oUZwGU1TmcaubDs\nFaLemfe5PByjxRFAFI9VRvx5xVGLukOO56e6Gmb9O0sjF2doK2gBZa1PiTo4\nZk3d+rt7dFVI80OvctldRPtSBoIhi/KtfOburjFE4mUiaaAKA+mrFpiQZtwT\nO88tCxzLe/ka/NA05bW5Xsic06woiRVVdZChKlEysO1sg1FGVFIBt1cwKSIU\n1v+b\r\n=Kb8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/list":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/menu-surface":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.240c5f74f.0_1605212540715_0.2622440342060246","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/menu","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"687ef6b227b43dbd507f02dc7563b51b4e975edc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":37,"integrity":"sha512-PzGMKEbq96aQAVSLVXQPKZG6lifGAbRiy7eBKiewE5tV9iRKKsJafsjaxWBl66Sk0Hw8j4k1ZKcmgbGh9f5vjw==","signatures":[{"sig":"MEUCIQDM6RzXr9NhKf77+M6sTcEbLsmStw3R/0DvOI12Kpvz3wIgO32cUFlpjsAoAofzYGb8zM0dYCWD21cinUeaWxW+ssY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsso4CRA9TVsSAnZWagAAhKkP/09GcNHthfyW43J1UBqw\nhnWGCqsYJyQTvNOxXIKxqdVofNTszyC0o7vLvotlIMJvJBWadOi0uMXAvA3C\ngrZhOqbH/FnhadiY1I821VcqEDazNAJt0O0Cpn8TELlPkgb2M/eCkqh6oC80\nl4PwPAXF4TGQbJMfC8Ahckom2UoPaS/6fQXc22IqCSL4Cow6fKrl5zzL0UEQ\nHKzSBEI9OmtYYv47O1h0cCMr+lbasR9y6WaWPtYlPfnxQ5pqlDjcZV5g1CIH\nRDeW8mLr1/6ZVI/iIZoWPbLmvdmojbSi5rFKZ/NmAQftu4QQR3PSAuXJFXV/\njv+3WDsWSOpQ1IWebF8neFajUcIi84kbETgO/zEA1rcyk80D0hO80ZFEbihF\nERWbYLnwx4AGyj9UJ3kn7pDDs3aPJQLfRd/7eFX736YvbQCOl3ac/e79JM9b\nizXVsQd7/x5djHm6VJ0HaFAqvsjBp4M7BtyCrrTVuS2dyxxL39/63rlKNf9o\nHbWKStESxZmuHDp6zA5WgVmW6+81WUVNgiL06FOyvZlOrpf4dchL36jtJ7Q9\n0zAd3gsEJCYSMjpuOIPTxnx2RG35YM+hpriR6hckzR1fiyf8cZtzRw/2zPXb\ntop4ydT74w0/QbygTfZRK8iRmCaRmzstzsjsqc3wpr78wUZK9A9bhl9z0HMs\nJ3lc\r\n=43LP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/list":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/menu-surface":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.6cf6ba4f4.0_1605552696214_0.5977383458986456","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/menu","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74706348c64ddb6075cf1655d101444df8be0170","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.07f3e01b7.0.tgz","fileCount":37,"integrity":"sha512-WqNptfx1rEZpIDO1oNsz4ikKRHZAkPZqckdc63r4x6ud5Rc1O2x8CsHx0Jf/Bn6xopSv99QCLlvJE7WVYX45Sg==","signatures":[{"sig":"MEUCIBClCVoooNyHU0/3n0QAGBtTV2+qiMWmTX/9DgVYRAJ7AiEA0Qj0uykxPsEX1xKwzQRNlkGb/riYM0WpEfzYL2VzdlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNpCRA9TVsSAnZWagAAPLcP/jrWBe9RLLu4GLOXBjQ3\nCwVTGA7OMypjHfHgw/nvgsjKlfkBw8sDqTFf9vwaTWLPWxmMNMJu+EMXicU/\nOPpw1aD0IdXquXhEdBbaa5EP74T9qYOFyHSdLUAv+U8vEQHQr7+2pQU7Znz+\nF5n5ow4AZubYAPRA9Q/V+ClXPxCak8Oi0y5RDX5UtC2ed+5nST2TM1iNQJhu\nScRhDOl6TrZ8P5lQwIJDFatTRWtpAJE/QjhOwIlxfJhq8v5MnCDxj26YR9ig\nzPKgqF6qFkgFJEgykryk0SeHG8/wEq6UQSwZbAfhe5iSC8CBLgnAichvwxDO\ns47sFxNgb5qmKe6ihipSevJI3pK4gqnZc21USG33XKV78eT/WYGtJ2BqNcJM\nIFE1+yRzz+91Mynjkw3G3o4H9znBN9M/zD4BVg8VIEtuGOAsNUur/aSCC1/b\nNbztxHqxpMIAS16LVNAHoIz85aB+yPn/T5PcHpLwhRUbONuVsYBfo6m2zoYC\n3GgYz8dWiAH7f7Uy8Ii5I4qcI/1t2/2sCFIhbg8nKhH123xDAFWLLDGFAW4V\nyghu8xSRdjIOUt5U+u5j/Slz7UOBqaZE+CXd+qteQSgEPetfJKV1jLh8vVrl\nYu0NCYrQXFADIS5TtUAkkSlUyaZhS4EdjxZ3WkiLzEaFIcfQw5MLuJbt6RMV\nk1EY\r\n=MbSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/list":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/menu-surface":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.07f3e01b7.0_1605563241249_0.34548219629798305","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/menu","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8396f560ca0e01208d96793d621355a708a146be","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.23491cf85.0.tgz","fileCount":37,"integrity":"sha512-ea9/Y9uzioT1mODJKLLLoyb8kkXpEOegf10gtoxabI8HcBfnZE4ujOhvpIlFMGqbW1VC2JQhCKf4KOeq4XVHJQ==","signatures":[{"sig":"MEUCIQDLDVYWI8IcZn9gPDdV2bYGZbbooUokFXMOeZ4jFxb+ZAIgUDPV4/0jmV2FBV8kSU50++qP6HjfDt9l5VtVXsIhxRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbqCRA9TVsSAnZWagAAVl0P/2lVDV8KeYdRWeq+t+lb\nB6i/k8lDVgKXIkg5yrMs8k3ssUxyfLDnEFtFqd7WlPMr5w989UepmCa8SGKl\nH2DtczHlrHBHKSlrTrVIT4Mpr18kpvyzh6bChIxVpWpEqRqMTI/0JjeiH1x9\nJMNl+UYZ5iLpM8rwlF4xkV9iWH3BI+pLfgdAjKT2pCrB5ggIIO4+vcmqSpCN\n7o8tEelXXJwvMfCBcp/B07anxuRuQqxdSkJe3m2BxR+BvBc1zKCNS98+mc3E\nLV5fOA5WDt+01q5eYSJbglAyx5Osim2wWNSHlJeDr2QCvyuVhIlf6+iTKXAN\naSFX1ZzWbRVpk6WdRilHdst5ZdmdEb2+Qooj2F1k+Hf66DBhMeLrDwrb7KxT\njKk+XSjfS7TwmMo+60W6Vr1Dra0ll8f1Dy6OCG+5EIj+Pqud+j1RsCYwg+55\nHt9RBSCXmg6MszVnpT0FAd2j7NCOrWPRo7S8CW4jGdwk9k5gisTvKoPlbyOq\nsoOyusZW+Osy/nX3KUo8Vp3YgVV6RxqJtHaYSnIWKDTY2LySt2v1zv/1Z7qr\nJv7Hwp4APv6CPQLrUdBjjUsH3FIo08415wBMp3tPfGO4/+eA8LyFd0BHpUGF\nxmlWf3lXNu47C67YRRH+PYK3o8R0/TUv+uFUz9hEfFdbDkfHI0fEwQuKiDBn\np0B7\r\n=zjK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/list":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/menu-surface":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.23491cf85.0_1605572330184_0.8115449378193533","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/menu","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c09cb0cc63a83e53cbc5d0f8c347f73c4444f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.b659d4fc3.0.tgz","fileCount":37,"integrity":"sha512-bC74Vhmdtz/lW4l45+beRd6N4y240d4cEeKmrEyXNHYacz4bh0C1dP+U98L9DHeH37ozaVS13sYvzVJ7U41pMQ==","signatures":[{"sig":"MEQCIHsBXOWAOm80Y0dian6OzZAKjgMT512ThgkVESBCOS9jAiBTrQcV4Hu/PfHml8u1naPW+yhoUTsbzG74s4GXJPJwOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxi9CRA9TVsSAnZWagAA/B4P/2RqW3vx81qtcHwmuiQP\nYZEmFj0D/RxZFtOJPpBOXAAwublhzXpa4qHX+MhuPbtSFpKNJYe3bOZYr3KI\ntB/N3MZ7/T+9Ekp/BW7GwYyan94jjggwTv+V9hkjGTRehG1EYx8BHm63+Vrf\nUjWMZJfnQND6xkZub6yJ8DrkayLrVXaGmK36+9N0QnQEMFRhIDzRKniJOGQe\nsJE0rGkCKdBFw63pa3TzWT0UQPZc7ejtAniQmcV+rSE2WHsM4w7epr5JNTJw\n4t5KfEz9R0CyAHGK45+q3qktsFlxZTaiTe9pw4igYUgfcxDk9ig0ocFzzXYh\neTvVAcFbNUwf+LLKXsdH9XfCY8Y3IhHcP5WbgjpvxvE5Wn4R+mBK7AmQbXVA\nnbkia0TMJ4Updszt8fOAlVpA+QoU0TFlYqwXWo8fVpq6Y18avbDy09TlxosR\nTxU5ZMt+t2ttSxTsV+uLroluyfQ38a9aOTg9sAE2n06Vpl53kG6PRtWE73K1\nPypA0e71AteUrEKMzIDJ7ZTe6BMFLKXKIYSzdR0GUbXUQUFO8hVzs3IoGGrY\nonzrT3qvycKVjT0mK0Ox0Ge3qYMNygR+Vuc5hJDB2Ek+LvEW0CTOQxTrjngD\nZI5Jz/llEw6Ew0gwK59SKSJwEYNyQzFeKdewpBPBIZgaFsvzCT5MKYX/9MFQ\nRncB\r\n=MFJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/list":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/menu-surface":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.b659d4fc3.0_1605572797072_0.6341061149062885","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/menu","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c9541ae170e83a34f622268ee3a4adc2c45f22","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.d8a3aed67.0.tgz","fileCount":37,"integrity":"sha512-PmKn8e0G0ZwteGX81+mAwoK5AzE0Pl86bNHXh3UbckwFRy1g/lpID32+ECu0wgqehZ/o9yAgO6JtN7+6xGTPwA==","signatures":[{"sig":"MEUCIEn6Sj6y5NTMCeh/f5omU+Y5IVIHXAGT5Lf/QWh+o1s3AiEA3c9m9g2JG7PYcGLHgOUO1+uOteix3ccPS50aOkkl1XM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+xBCRA9TVsSAnZWagAAvtEP/0zcaLmwTfVzsZSNIq44\n+F2odssL0SdcRG8CC5sJs6dW9T+2oc4/9wRtFBp8jtPB27fEw/1KlOLnQ3yc\nREZyZTOdTQu8Yzj/RyJIX8iicvqtyfdhbXUKWWtx8mxm6u5AA14nEo5DAyBQ\n8aSGdowWEz9IH8DPeR+2Y42lroP7/e441tQNA6tLeF1KzBE8Qmxtt/FQA/er\nDWrhUWVCu8P+L2LEwe778EfqRel2LDLuFpq5gB9xayZD/M4U5yhVMIWjhg7Q\nttACgwZhr04uCtUZOhkPcIoFS7EyPQ5BpJOKcTkwyZoRl1d3WYVdeVs+/Koz\nnOXe2LcIZlAchKXK/JsFO7MKARZB0TKIRnJUabJ7Rk2u6ns9obtOQbJo4AGw\nao1Jb0eMgzQ/m3ch+qGHTk23k7nnfzX2lgvACfb5lV6Lk2FzUP8YxD8LzGsF\n+3iIBHn1PhgA9wrZK2U/xzaj5AI53KvS8F7cX1w32iIAOUKOW273XasILMe6\nwp7pPl9tr6KbMldOZCRLM3OwobnBv6tOPYIDRdR4m3WnPduh1TaorcWhf9jB\nky1alP8EI6y9ZFT20Q5+32CgvCdh4xLU9h39IA0xSkJdRyKx1j8xlsmaITuG\nwTRwyblR+I9JrQDrL/smWsxwOAkWCed2RkcZDzAQ2zT2ShdK8t0BTQMs4zu1\nBTww\r\n=An0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/list":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/menu-surface":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.d8a3aed67.0_1605626945346_0.5258166500560435","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/menu","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ad07657107cbbe0405338f8b6c2393be4d2519","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.482ff9091.0.tgz","fileCount":37,"integrity":"sha512-1Ab6inyrqjgbBanGTqvTKRNKrNoObmUwHLWkYrHbql02kpfof3yYWTbPz385Y+w4MNmYTs/7eNGuTi827cAD/g==","signatures":[{"sig":"MEUCIQDKYVBEp1qCZmlC9XHsh/51Yi/Em1+n17Ps/I0FKa6CnAIgA7un2lTqUtjmowHOYUHB0qCb1g019WpRJz9SyBNsKtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA+RCRA9TVsSAnZWagAAVOoQAJmnZal1x9FC/5E+G611\nY5SYzRJlUn1GzTutBM61F+hpANrXSLfGnkzMYZYB28NRCz+WjD36avwFRW1k\nkJLQr2XehPKVBRo7RXKvfrPxTq0DD2Oc/a7Y4oX5etxV01w3uidjRree/I5Q\nRVeaV+PxHRv6D1LOAekuL7CTSTkYmjs4dUqeIMJH3sbIEVnI8WYTyW8uYORS\n3MAY3ji2Tdo3iNQ4F0vZgc02iKNgxW9lUU5PtCrtu7tevHgxIwwHJCmslovY\nWSKkI2dF20R5MgNx6Q1u67ZToNTEj7s/IKz4Fm9A3agb7Q73G8JLdyxoecuj\nriKABy3oz8NA28SUUGmll0SxoebkdCeHcBUJm4GHFUcwMJaui5GMl9Wvoq6N\nqIzpHOb/PUGl6MDvEE6cmW+KRnBcYf74pC7zoLU39wXDO9ooyb45JMQEV9ZT\nLH5560fPslKO8HVmqfk+DmGZ5gCfXQUOfGBUznESvDM+PE50QLQzNl7sell/\nWS8/v9qa+CdrP3rHKP2Vebr65Wixz2Ca1TNYrPpRlzUxrrEppaoWaN5TvJyx\nqeGIs9h0b/v9tWIhySvuIhbOnWfzWKmBgvy9datvWrhoEuv3n0EiAt222VdD\nQJhGlMFuV0TXe5U/K55phmLElCa9dGm4cHDBOjH8iGt8CxRwhyIy14JuG13e\nFcqG\r\n=KPBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/list":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/menu-surface":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.482ff9091.0_1605635984748_0.07227328500053187","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/menu","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6baf98fdc02a8b3ac33a35d5decf1fdb55ea105","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":37,"integrity":"sha512-P4py4k1c84QATI6xmCTzPuvuXkzG7w+Rngl/bQdBW9Rp7m6XCgulcNMGbtm5jKCyaC1+Rf1vLoFfB6piTnK9kA==","signatures":[{"sig":"MEUCIQCo+9Po8BO7j8A43K33fRDTt6hEJ8SALODkaLLbZ3xhpwIgSD5hDD8jhcih85bnckbLcCmV05do8WGt/IINJDw8f+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWvcCRA9TVsSAnZWagAAJzAP/3GSI2+oYy6S6m1jWyZD\n4q3rQk/oFtk7XGEHdI2yBq5YfghmTy3cw0G0s/AJJoBbv0farufpt2QgmzmF\nS3nCucIpyOi229spGxuDMF++rfYXRCKG8uGnEgZbW4vCG6Hh6SNAdlLKmYNP\nwrT+mjwJ+Z4lEZMZzCV+tF5xZw2eIsKde/6Tso2ndP87ZwI0GUREI8Tej/+w\nguK5AQ3Q8XGDWsps03JMzisTcAeEIFAM2xeJD1mRVCrQ9fakS34qpWiyP/CF\nHq0MrFwjZ8Kb0wkr4uDjK3HPDjl5jXANPgkSFhiSYRSTkEYRNEHZlhvdPnnP\ndWs1A+nC9ZFQjYW5xaIeh/GCwPIPdCJX7igiuoER8KqqLusYZ54sxCvhcglA\ncPkVFcV129cfHk9Ojd0DnQN5WyKKKYb7Qa1cNBWCjWfcmpa4EF3NSRrGarI8\nYHiHAiOr5B1WoyCcANjZLxX3Yfu7EDBnfZXG8wFivIR1gv/SPGKWVoqpKbAP\nkWQt8Xxk2pyLEUz3OE7dfa7+7zr8tlot6gPUzAsMwWDb1V/2uAC6I3iU4CdP\ng2Vm4hFzk8LAmzlM+xtYPKac4XpHTXdJwZ0NIo8I1/Z7IjR1VwbE3Exqvk84\nDMR+W3zbZ+ld22f7BnoRXeQTqW3aojmjjW2XrlqJlwCNPOEi7TmY70r+pHiA\nzpFr\r\n=BY+Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/list":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/menu-surface":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.99cfb6bd5.0_1605725147810_0.7288457662675112","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/menu","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c38b52ba6f5b12ef1aab5b38f3b6214d4a8830a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.b98d15d90.0.tgz","fileCount":37,"integrity":"sha512-I+kbTlbQnedLqdpEmNtiBCUF7/Kgxz2HfktReXfIWVwXJGh3925ySf5AouF90iQHJ3pVB//3x2qe7YIyM5HGrA==","signatures":[{"sig":"MEUCIQDjfBCLRXBU97Ke5Aqm0/QZf0q60Kzdh+XBIBcBUU+sMQIgMt6etFC2FP6IUuGFodwhpTEIQTOkFetr7pbF3ESczt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHkCRA9TVsSAnZWagAA1yMP/2ww0ioeylRELOcVPEQp\nYrbwSw9HyS5Oi93NNdyVYozTMSus1UCRdKs3lsKoBw+Ul1K/6asz3JNckLla\nU75AojnjTjdkMYPFgTj8xFbEbovsG/R7CqSNjoOj+0V8D0Ff67NpIg7//5ct\niGbxvn8ZqOZO7xboLGcYemRaaf2h9xg2RNeUt3DOMNbru+5oVuVVmK50ZqZ4\nAQ0K4Z+RONaQMMxmmBytV4VA1GWjx24+MA0//K8+wpiLQ3Kvrtq1YLH0LELz\n+DhSRE/985MIOJtuYFFg6CR+3yaVroZdd9oK3tVnC0DhZ1vlQE4kbK5UnsHd\nj9iDi2mi4s7rUaN4WCUKzVvAX1wfMjA2pJ5VDvObJLdiA/hkNmv7BZKErGkz\n5aboJP3QnMahRl1BIauQsrgsHbaT28KZxgGvxC9ERsfI1AHj1eXDsmMT9lKy\nRtNtiXt1KWepJTtZxiCzqLqdy7M+O3rp3K8D1DZTDaskUvOtD+krRuWEgfWm\npfkSkfmTg63Ukj1CGak1+M8EY+tGWjeXZPuGMe9cXBbsT1x3lHlb5BmTDZEW\nLtZaSCCQ8hIF6I9eVEPfLEZw1OvdTbYzei73JUwMIO8Jb0AsVpdQKb2ZzoAD\nnlxCHPbPtqAK2H0XT1I02Vw4kfCFZK6r5zKmSQYKZUmPh12huETkYa9o3t8p\nYLv+\r\n=UuMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/list":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/menu-surface":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.b98d15d90.0_1605738980482_0.9579279045262377","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/menu","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a54629370d4fe5afdd7bf67a2b0bfc3b8a9529","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.30c11bfc2.0.tgz","fileCount":37,"integrity":"sha512-a9ZOcAiL5uXHuenZeHdVHvUAEsJ3pjLxMWhK9SQeSZ/zafgOsQqyz9LzX9jxNFk8MXKM1xqriBqojPLb0/D2pQ==","signatures":[{"sig":"MEYCIQDclSL/nyrjx8FlD1H8XkOsj0bJiHfw/LujRGO6zoovHgIhANN/tLF6wDYL3vnuTm3O9Prxa/ksTPJMMt7Xem/5WgOr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcoPCRA9TVsSAnZWagAAHokQAIezRtDi/ULm5v1ZQUK+\nwkTXi0rlICQNdYnxrM3kVNtqu4PsiikoFVqRy01hylf/iN0qgf3v9AOB3Y64\nE5qI3qTKxNtBwElBCFybRmGcvt1NTI0OyLceYIdFdCL6g0/C6R2hEjxucFvR\nlp/Hdh2c1RUun6z/KMGL07sQmW9qHw1KL1v54Hx32QzJ4Eg7PaxzfIwlvRp5\n25CdSdTGqJ5Noo8BCqVNqdXYur9mV8AqgdID/mGue1taPEMm9/kCKAb+Pdcb\nj+VVMikc7sqxh0/pHqj+6eSzLFFIzpWmf3OgLwtZIgFabPo7yPAP3MIQOCh9\nDFjXyzRrobJkJLx8Z/w3jUA1oservbb8oaGwUYAktgSGYWPI8xOsx38T7GR9\nyiMlAtYvom2G86x1ksBrcm5XmAXMcDgb7yr++aqlMaI2vvWD/FLBUezASEfs\nvHmI5ThjBgLmCHd4f8PIR2iy/xMiH3Qik4fWoBZX0dbHGRamQJud0tV50GUS\nDRQ0rq475Lf3AgKbpZv2qYNep47GEKgoWCpm+Krj9yHrWOWuC9DzxTaNg7j7\n+Z3NuzMC1EvQOZNSnXsGWFNV0jFgaiDeEhp09hCqZWzM9Ha9d/EfPObMpIHd\nDDGNZ5X4FpXUsNREfMNV9dqDC3MhK2GXTeBuuiJ7AO56meDQy1y7JsAv+K6/\n9wD1\r\n=qAMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/list":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/menu-surface":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.30c11bfc2.0_1605749263027_0.6925345405426377","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/menu","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a81232f9c81ed09b1c83dea8190dd6f02e275c7d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.1b731d51b.0.tgz","fileCount":37,"integrity":"sha512-cMxmVjb0fhZBkQWRIaB0RbUHpEHoVb4rqSyX4o++7u/jNW5d4Nqc105AJ4ruMAigj/qvOzGxEqRoME4eRK2LJg==","signatures":[{"sig":"MEUCIQDwDMmOnhy/VWS19uupxsdw9hPy3ejONSSF/gbwbGOk9QIgKvy8kHpFWL8yWR4w4Y6mnFSeizNqe3iUw/DXu59EWcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9ECRA9TVsSAnZWagAAWYsQAIZo8wq1iTT/ma6DmIun\nNS0NFFVGyIBR3xKSWGpVckwMdD36Ba8xpUH+B7veZlGfwZ2PuG+W0jTxb5qf\nm8yDg7zGEt6cvdW1hykcW60tDqjuAWK3qFRrvFHqdnc6dG1PHT9+xIjt5jgV\nss7edQ9uL9XY5yGUD7uzwtMEK4A8vX86g0oz5kJMjAarTu86q/7LcasXoeVk\n8wI90Oq73/K91zG3/fZx1qUqCLOa3TsnqHdycVKSBvk7aYTk+ZHATk10O6af\nzNxtDScAy7OjLh6dIjAOgx2vSdzjtz99xnHYT1E3Jbw3e9XZrzXdkH0l7OpC\n6gvwzw5G68S5Uc6U1Y6mkSLOvkYGZfsJFCf35MucmarVqWyx+WB3EgtFLT96\nubiENYjw9kCZndIqyoDesNPVyq6PVVZJGBNBIapoomz8mG0MEBRLbJxt42Fp\njBUkud3aGRblgFlvzPzrZvXeK8m0blh3rnI5apztk9SU/VqWugU1oF8f3GeU\n8XNtKiiy/g8lHFtbf9JlnsZQ8Ia9jJ/Ak1W5yMZOB+e9q/WsNb4+0D9sD7If\nZOB7FtsSSsFncuS0ZI6vtNed/AtE76LabNn9mclfApc4EbVyf4UkDc2aZy4g\nrdou2WQemGBbs2GHPBbFlGPnYeEpaRNxA5o3eRF0bITNeg3BGaai/x43zwcw\ns0oo\r\n=LDZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/list":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/menu-surface":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.1b731d51b.0_1605812035878_0.2247601154601735","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/menu","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c0ef1c0464ca9144206325fff787b907859fdf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.4ae94ff78.0.tgz","fileCount":37,"integrity":"sha512-FBdnrbe9YcrhJ4JQ1o27cvh28IqyklViWVCzZzeOzlcAK1QbgoWiJSZLqVQo9Wj6r8uFf0c9bsCdP1UbAKjtsA==","signatures":[{"sig":"MEYCIQDHXxmRiJGM6iyOyEBR3T1MMoWZmg+oZsvUecPasaNDxQIhAPDfhsi3A2AjYAXFR6l0A7nN9UP3BlGzoLWRFz6+mbG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/wCRA9TVsSAnZWagAAn8MQAI7pcNYetD5CJWtjfWDt\nbkPLXEY7leT3SfuUvQIb5APPS2ZkvXbP7WIzJAyCJiX5KJyxiSmtfBI+eX1j\nWySjHsvvQVLOCTiEPdQRksMYEqjwtEnG7KUbZUoBqeU529ayJqXDbnYSujXK\n78sao/d07jBVuiDsGGz9ssr/Maux3geMuL6xsHNlqT5oCu0PsQF1ZMYVJAHb\nY+8HXHakNcfZzUj+upDFeKuJ9Ri0q5DyjPvb31Pz/yrEVXT3Xpuxq6jN4Ks2\niU7FBqASYI2FryXXC4N/xLtbOKp/en+7eO6gI6nmsGPEMjnx7SF0AhW+F5VJ\npNakZu0i/keEE96pEy6ZftEPEMZH70L901azCBsvWe8eUgianmlt9tjybOgr\nYzhWnXCyrcucVJrZYmfZLDRyL5T287t/wQzPCn6CxsfIqiIeJc0vG68FFNn8\nB5Yh77SWHDq1XMFPdvD42hTlQEGXH6n6xpUDPy2yc1iBFK6hEmTKZ6AFz4r5\ng+I3wONEU0RPSeVLnd80x075uOB1Q+Yt+PshifL1q57XPIGGuPNT+0W2LLOw\n6YVTnYhFALK6cobv4yxjeV16W9JvLnKLtw7XYYSF1N8OTeWltheV100fr2+9\neKwohWTubxRrHrBKLbg/DS+GvmtS2pV4syhEoZgIWVkFQNzJt2CNeBly+4Fs\nBH0A\r\n=R/Wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/list":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/menu-surface":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.4ae94ff78.0_1605812207569_0.5946328411710402","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/menu","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62708bb57276fe746b225a82520d5880c60a1fd2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.7ad038e1d.0.tgz","fileCount":37,"integrity":"sha512-NewyVnHHG1bhZyc1YMGnpf3zivXFPZIPGnXHGNLB3C479v4Sojs8oe3oxy0cRoa3YyD4rJ5r3eCOuxiEt7l4JQ==","signatures":[{"sig":"MEUCIQDle8Tw9ZFnsbT+e1r2AfyQZcT6Dr9rUdq5De/v+O2w6QIgHmqc+9mTN5fcFDxUZuHQ0IC5lHmM6JMtjbqkry3/hYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVdCRA9TVsSAnZWagAAO2wP/R6Ru+5uJNpsKYoN+iqN\nSQmKTnyviVXhawDAg1b5Ut0GhTz21VKd5tw/DcNZ+WKRb9KtUw9C82ocorO4\nLIgHOFApXinRGbTbpAt4YNqT9MUaLnIlBDSmw/2+kJgFu9LLh1u/nlcfY3yn\nj9xYxwSl1+p1Dk2dHPviqEuA4YWlekOqtf4kUkOwHN4wf9VCgLZrw3tA+GnM\naJfIYNYiPXqXTZ+BOouUJUlI+vlz/fhCc4QnLWRS2AjnjHfRoXjUQ446MY/n\nyVUTUMiy7rLbNCWkHqQ8yduciYYqWYlXNarcAUGtbU2wLehn4q8Y55dzerJX\nDq8maQJiYL6PyxxC9AF4Suifvmeh3paYp4iGZVVcsl8HDqd5HAwmx07cLrVN\nh0n5iKhlPefRZoh3gnkItUZ4y+Bq1BKeB8skaU8ffUKSuvVnm1bnqKiPLHTD\nmoywmWs6sLkcG31WaOI6STzDA03u7G5FBZ9I1ScP6harq1WrVO6AUacxU9nE\ndFKkq0mDK6ETjqj1PapBqVahR+Dgloys+WI8lAw6zScTc5/iWHHvIAyAuRoa\nbcnbpP1x+bCLzygkD/ggl04ZkSTkuk4VzwW3apvO+Mfcy309pDp9DOKskMHk\nnoOdV4YTF9A16WgtYnz2YvQipCs/Q1NGRd1Ia8y8FxBpun44IEMqN/sNlz6y\nKZTk\r\n=xh4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/list":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/menu-surface":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.7ad038e1d.0_1605813597245_0.27674311975212773","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/menu","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd09dd6aadeb5701bb18db63847ffc5ed1f34e61","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.a41527604.0.tgz","fileCount":37,"integrity":"sha512-qHB9J9LXWhiqnPsTXG//6rbn/ciqX5PCBxCmdpnHxGHfwXfToabMd7cZu8MZoO+SHbyifkQT8kBiTMrkZfURSg==","signatures":[{"sig":"MEUCIQD6V0UzFm/E2gVcFG7QkcSTGiQhizF5WhmWiWeCn9+9fwIgfuz1KHltPt7+MyRwvhJRHN6h7bJTZl1JQM6t6gUwd/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9fCRA9TVsSAnZWagAAT78QAJDFxQ3pusZs4zZw3k7c\nSXRXPg0e7LD4oNnOjLmB8TdDz1hO+5zOpyLGShcjhgCkFb2Mti9yBnPmW53q\nTqN8FUyqTWWMNxzMOgCSZIzfPvL8E85JESq4BBTb6SUDjpVa0f/4Yi9+wLmi\n3PYzRl55YHKJmho5A2nTs2/deEMcUseWIZXlFdVahXrkakeBMV++NAXMeWa0\nm75BD+A+sz3Bp4LLzaipDO6lGGpvlwhpDzpzzE1Q+m8xcIe2n2P5/FMvib9E\nnW/4j83cE2uvzWMwy8nx+uOJB/24k94FGgsvpn/6nKIitGY152vmD7XtVSP0\ncDAGQa2Ej+AnJxfEvSu3jUrAs/wCExdxWV2fnbfdO9GswO/naKohx06X+kFn\n0nZlDcOM8rNQA7uvNjy/wp60ZDyG6z3KH9obAl1quUvjC3E++voklJdY8KaA\nqMC91IjfpWG8JDRcoHEANxO7KL3YkcRr6Y4vgfzvKdYMug8nHn+xB/lc29uI\n7Eg9pnSYm/VsYIpmUANotyogSZW/mGxzrWlC4p1JY2GY7TFuXFzcehTYcRtq\nHFK2B6NQkT8ee1a5G14feMXQ8qDh7nBxVXGIDfuXlpUk4CFIAMVxUxWLFKgn\naaPaZzHD+qgAVnBQHvJ2K7hNrOoQ+rJ+v0b1CFEFJ9MNn6IkFop34hBZt0b8\na0JP\r\n=saI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/list":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/menu-surface":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.a41527604.0_1605816159373_0.4757016728395307","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/menu","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d34deeba648d4676cc9c98343b275b1525e56523","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.7b0e2b377.0.tgz","fileCount":37,"integrity":"sha512-sEpZV+IG7rj0O3qmmXgCDOeaB2KdbmdpTj0Quc+0UD5B36/+0BooO1IE/3Z9eazYe/kc2+u7REeu71wlmGEZxg==","signatures":[{"sig":"MEUCIQCRkwP+WsoOCZYRjbtQsdbYIl9sUo/s79BeiZiKBBQAawIgB3opvOxJB0mKBj2eako+GCSNjTRRLRiBQ0YsLSJ+rXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnfCRA9TVsSAnZWagAAKo0P/0EH3LurW5AwWffi6oQk\nxZGJRYmgAUQggYMOkio92C020FW/7IZ8BaaqpapCixwnGdSnBfm4YT7Xrhfg\ny+zaN064UjqzclIsOhV2jlKkfzFkJgbHJcchSJzDqsrTekFIQC3wCwFi0oeB\n+arokKcm//4pAa/6x/UNkVE9BLj0nmYxrDLuX7j+ms6LDfuVM0UCZddZHPap\nC9tEEYUizVoNL66oBuUeGQjoVezVwWRObzSAdhsGSdz8PNn8fqaNLaDO5jt+\nvmCDyRKCMua7C15EcSr4tMig8xqf9Y7WhFDRWvPM5kQAQwk5KvfN0Gg7/gV2\npM7c0cKtWqx9yS7luJuqU5+45OP4LWaOxVYh2xLPQmrCGldyBO1SWg6p+kXQ\nQdcerEw2iTsEhiRpdX7MftSJAJSmwm7eLGsDP3Brsy72+PmK3DqQIhXMDGWX\nUPecM7LgHmN2qskhnGdCvq/CKhTsOSvpig8MIaoUxqxkUBoHyu00ju8DwbqA\nX/PA8hNqmYyuULBIpLOGhWWhQk7NaGP6H3lpsM15ICFXUEAalqT6UoNC5Tb4\nq4lbkto+JIlYyDn/3Qsw1+NM8AGxVCa/3i0Owpkgo9vYaZo79LbTLre5J2jL\n/S++6YDplGvhMhJMf2IRvzDVB6jnSubEaaIrzGeudammfq+8NvMay5iJojBD\n6nw+\r\n=ckMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/list":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/menu-surface":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.7b0e2b377.0_1605913055234_0.8212931757048945","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/menu","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"941a8b3e6641cdd741634434091d380a9ac5f28b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.c927a5d05.0.tgz","fileCount":37,"integrity":"sha512-0VAfjbU1nK4408w7k3HE+OqxmB+jA9TEvHOTMXqFHOoncOklyV61i2Bz2punhBpxDI6K5QbDtqyf76nSWk3vMg==","signatures":[{"sig":"MEUCIHK2zeHzP421q6BAtdO0HHJb8duLA//nVE7qoVtOUj9HAiEApLKF5TzgUzaHDaGjswuYNlHPGX6BbqyQ3w4ohXy7iYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBI6CRA9TVsSAnZWagAAGZYP/Rk25rbclArmTGwC+52S\ndanklDiieR7qewEs0560YGbaYYkVz3VSeasm1CFhAhRn+0PcO7J6RtUYlJ9V\niTA5P9t4Mus+rQSBY5jqWxd9yiiFqIVOMGegoGSUgS8ekJCp7FCe2RCDXaJs\nB65AUFVpUiK3uqqSYD0TaC8KTU+b6X73pXio78V1CQcGmKOWNuOlHpBuA8tT\nX1MOHyDCzmJEPRN7QcZiTQIH44MwdgGlK0mKIHTxdAvVfMpYOfzedZEsw6X7\nvv6BnTAK6XQhBFfmGjbr/LO2zegIBEdeLgo4qdlWQySDCdd0xrn9/9V+7WKV\nzDVgfCOJwevyxUV7Du9CNuoMDk/Zw1CxDL+8ph9ybHShoJljSUmqOt6g7S1G\nRoqduQYpr6+da4BbYKkHcNxH3DlHBwkX5WVM7l66R06M9kGRH0SzhhsbFz+P\nhUd8TWtm0HZ1tr3YvXvoorKOf1WkzyUNClhS6k4JwUpUDk5tbvvBDztI8ydK\nSyWum17Y0teMQTc4Zw2fVvaSg+78WZLE83/qudlYNzllH6SLzAQx82g0RwfG\ntA55nns/IGdHL+z1nu/H1LCMhx7CFvgtn12Yz9QC5BaKI8A4l1ohvzINehVe\nMZfq80FAyMbErxqlwP05Xdus3ttP4sRSmaWaCdQQhilfMetV75IVPcaIpwKN\nj9mV\r\n=u5Vp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/list":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/menu-surface":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.c927a5d05.0_1606160954026_0.9922159287720667","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/menu","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7a9e23f00ae7150eb599422659571aa27fb61cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.b349b5185.0.tgz","fileCount":37,"integrity":"sha512-c4w+cWU849XH2/wXsZsTWJ5SBIDertyeMsifmcxQ3Q3BenUOFQUdmHcIMHdoPYIewQeRNsN2Y+wQjG0zCqGalw==","signatures":[{"sig":"MEQCIFIcTRKlW68zkGFYlmI/fuGcjPAIgs9xHfNu6huygL6bAiAq9Ib1pA8L6ROHAUVpnXrEKmrpYB2ld4RMR8jnMExAig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT6JCRA9TVsSAnZWagAA1T8P/2FSaHzy8TRX16gNgpqf\nFWs8Sz6F5a5AZA0nFPc7jr7G8jC3SXcwk/4xpQDPoGNRHhVbsGufsBerwIxv\n0De/eiJ9oenLgM/rA1WIA/VU3QqlXYsh9MbERgTijq1Kacnf7TYqu7p+AUfW\n9IlJTgLVWrfViOC0v575NDtDuTVJ0QQiTxosVw1zXQfypgqP0lCuVtYqfpQS\nUiGQXArzWsnvcYVTpQTvh2dq8OxGS5U9yEkgdfecWyI5cHClWIaBzfpWNgO+\nEy2WJ/4rwlIj1dDrD4qBpOZbiPfwfsRtkU/CxqZnzcJp6ESEoyyLuepVc0HD\nLqioydFuBAlBLbrUUmgI3Wg143o7ToRBe9ZH6tctOwyAKv6/z3lZotHzSilv\nVj2YJ9Zh6xcNvcWBRFOZC63o3Hsuts0A+GxE33xWKuKLiL8hm8+Kfg4lK6zQ\ndiwE0GPm0rbvU7nc0PnWwnYyK+9IoYisbY46FRBLxTaK8VSRg+1WfOe77o6r\nmGQtY1t5dX6UJ5HsO6A4X9VPRe4dZNvryLSAOoob/dgCE8jKvmvcxzIab/fA\nTQitE05SUeSMndGUae/AhKB6w6yNWYV4yAhNDWWy7Ck4NrTMOJE8XPk+DpL8\nTEOQNqrVl5cEHioJ66v9iUkn2Cp4BTFJiUkTb3VrTFO4kfA0N+DWd5Gew+1N\naTBf\r\n=w8gC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/list":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/menu-surface":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.b349b5185.0_1606237833476_0.8589309922543229","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/menu","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c138fc46da3047e125d02c2ba9738fc1007aa2c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.9083b7d61.0.tgz","fileCount":37,"integrity":"sha512-HmwAsfqrwl1JE2KOV6rXy+pCNZcJYR0ePgNCELSpO5lByi81kUvGjIowGzS56xheaVoLCkGU8a+HngvxUKmMNQ==","signatures":[{"sig":"MEYCIQCCe/m9Pc6ZBxl/OuWMGtIo7CbsSiWZMH3j24iiMzQXSAIhAM8LpY/H/29DBQR+Am3XvJH+6yxicS99FYU+A3wRVdHS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhUCRA9TVsSAnZWagAAQqEP/izBdkGTdPxWHqesMIFJ\nN5v+dNh2UvW6OXHMYLONgGvo/XyFx+X7iNSVX8SmhwL40kYK9K66mTVsfTfh\nVCo26iQjAKeG8pcQI5VlTc1lZFXhbvIw2Ye0s3ZOeGy8MtnNJfOyxPrylJ8Q\nQ2K9V6a+UCRLU0lb5mgxpvmPMI1d5sew/kT0ejkbdHBEhgTfI0tYUi8KtwS0\nf39HxV3OnXLRM9QkfpGExkE+EYRz+2254YC3nAIJGgo0RZfjducjfgkvOKKa\nZk5hHcL8H5GvGvQfWW974F7rUNCdC81kn4gL5Iu+VCngPprV7Cm25IVtXi/E\n0GL8albyvNPBybi145lOFBLZOW44MpQYxrEaG1/h2zTzsYJYmsUveW4jOAjY\nfIiZrGqNyz+S+qN46VU/2O0IfG9k8S50A11DGyNeBns1QxQkv8dLpaMOrsm2\npbvKrsQm0+IPJcD1gubSQSoFRdXACZ9Y1LX6SzevSmp+y7IBBW6yftgMwvBF\n9HX1QU+ReVimk3O1DZsJ18irVjV4CIlwOfSR9+qkLJzxf17g/k2/0XEvaZ0g\n/Ssz1zGJqtpNyBwb8+S1k6hdgKLloFctPYSLg0CUVGct/FGmPbMShiC6r3uC\nrYWLytZtQNKV/t0yn8zewZX+CXM+B/sv7AjcyUQD8anXiKkkoq374xmkV9iE\nXp1a\r\n=mZzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/list":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/menu-surface":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.9083b7d61.0_1606252627927_0.9825376728359709","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/menu","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"122ad427bb1ec09f049e116358c5650c9fb5b3ff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.eff7b46ac.0.tgz","fileCount":37,"integrity":"sha512-WOzxS2HFyDoRN5seQ4ClB1F87ruV3e0NzG09g/J/g5wKcS5xUgklwc07Qb/7Q/bd2V8we7kgN463NM97+O9Lhg==","signatures":[{"sig":"MEUCIEeH8drMhZnX16TGZEd4QwbQWa20Ao3a7grVMetnYc0XAiEAgsCb2Jjry8W+I+BDbPulWyZgOke4S8p9TJVs+1deHA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgUCRA9TVsSAnZWagAAD7cP/3w7BT12TnrnNXeGWsgC\njymiCvIz7PB1gNCVLw/LqmCWTqszeUXcdHEbYKCq2dP1NYDMR7Nk3eYSrVet\nsX5JgDjWSeUswAIs4083Ne4f2Ew29z+9yQCg7flyenIcrELn5TLRIC0qUpP0\n0477cUJF/HTS1HmgYl9I1FbdHFIqV1l4yoYD/Or0sbzNXPvqyli7g3+SXzL9\n0e64dumiEIImr83o0mNhiKRPPPCEoDtRQEeNIC3G60HOguUf5GrulhDcJfuD\nDQ50uQDMKP9tk2fM2QlsIX739RHt5CrhZKo84zo7HFeK1JebVCW/cf49bTYM\ncMjjn7eOx42WmVGc9B08bfBJpUbAJPw9E+gEbAKVKqFqjrHAXx4hzRkmfPOd\nEchZvy/FfRAUwD6Z5sGw5fnLC9tHZNxjHoXw0o6yNGbUgrMwktCn1zpzvJoz\nY/iclUdJo5AVMq0+Y4fnhtL5fZ/RrvadejXq5dpF7/R/TAqfYMJ8x1MWuzm2\nl6btYByQe/4BwbTEj9GEvu1aAB1YE3UHwkmOUu6M/20aq85lDfc06MPi4RIq\nxQftytPjYyL9SafZnvfKGXMXLbNQS/MJmjpq4wWPiRdiinYrvFQvaQ1PSc7d\njzFA0BIbkOiX/LXH5fN1xx6Kt+AwSkjVPT8tQOkvZdXsiZgZIXTE60jtfg7/\nY8l1\r\n=gM7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/list":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/menu-surface":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.eff7b46ac.0_1606260755668_0.49563207614432314","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/menu","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d201302848861116a6a1033e01cd095c6867fc1a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.ae27b44b0.0.tgz","fileCount":37,"integrity":"sha512-TjuMkSChRpL4S+cgMa4jsUEw6ntHfzrqy3YTl4bM5mAvFLYW6YU5TW9JLYJXPjrVh415wkgHb/ttXNPIaUSseA==","signatures":[{"sig":"MEQCIAqynD2yaqDZuS4cXIdfxezP983bXim5hL/wZm3v9JWIAiA4V1AF6VlZmBJp+8Xic5e0vI8cTSAa8jJGz9nTjeIEvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnndCRA9TVsSAnZWagAAyd0P/1efO2PooApqs+HY1D97\nq6jnDIDcj14vPA8au/dmd56GBxsUFoDx87sY7NPga+NOBPhpkKxjtbqZ7iBU\nGHrupKNbfERK9K+av/nfMTI39h7laFzQbPZ6pNU9ebv4lfGNAdltckwiR46/\ntVAnK/D2shblsENWPnMGeQevSLEHtALRxi3GCfD/QuOFQvPAmADQPNhlfhqe\n7SGL+52+Xel4Nl3qhy7SqitWpokU07FXntLu/LhLjuBErOW2OZHTy0CllFMn\nMSOgCm1Q+T02GzRRnQ2dXH+60lrdyHp8dDOMu6/C3a2I8HbDAiyeReQLhE7d\n18TCIsMiAkE7VOiezZlWEytivgqhNBPP0ehRH8+wqTVH5OREMrhWIvbiOE6M\ndAdDZQmwowB+Vv73G1KnnIB5X+SY+2+fcrCu5AL+wv064PDtJsSL9/1lAcjv\nJ7VTvuAnkT8Z3pcTw/dn+OE7q+W88WKq3u9MrY+2aPqkzKhdNGooI3OWhJn6\nD3GgER/SeSaj3Qs9OznAQWD8UDV6EZs02xltBouQF4dtOD/2V9hSR07hAwow\nPtPPrhb5MjaPrteFHYPdC3AaxJR8OWW3oS2H9ijveq0MDfQxd74TATBlO4RE\njjsOE1CiYGPp7SdcxBBqpz1DRwLSMD7F+4/mg/XN0ScHHLjGadHYLdbST6Ki\nm3xs\r\n=Ye4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/list":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/menu-surface":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.ae27b44b0.0_1606318556824_0.393332254730387","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/menu","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a59f6ffe1c0bba93e31d5189a62a788aedc9f9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.2fbba2554.0.tgz","fileCount":37,"integrity":"sha512-CGmMmZIhzXOKLb2LyHOZOBuLyALvNLVNIhJG/wcdgZXHBPvV9zgBOZrjbZz1nQaB9I+blP7h/YA5VHROcEKwpA==","signatures":[{"sig":"MEUCIQDWKByfHrOunRRKytypOtYEo1Ho5TFRoz5k7RC97ovovgIgPU7+8r6iNuw1tZVIJMJyO4J1USqORBxF1uMc5ateOuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7lCRA9TVsSAnZWagAAh8IP/1NIJ0yXP6cOdBVUG5MW\nVgo/QFWFw8R3sriI09YIPq2+/YOUGcTjg3ob8Rze861mqQ86PbHuVXTfMEgC\nnQ1mQIarC/fBwIh5Gy95l32Ag167dUcslq1CdTyGP/x9QFsappTNKbfnqxBQ\n0qVlkYLKSdkeJcQ1HwCyoGxveSmAHx50w8ybx2SRFtLKa/zi1DjuCv8ZqN/z\ntmaDRFSuWtHTA8D2Rj1dfxw4MRp8468O53UfRJdBhN+bSNxyM2ZWo5NU7s1k\naL6KGc444a5kfbEvzNBvpnCyCOyzSajyWlORUMUv/6dRvZGUk7nRSfKCrLwL\nhZw8g72QosuG7P3MOl3P+KoFjY6mTBgAlMWgFdU/RnKz7dBIiqKNWo2mfDdz\nrEBtEc+1EFcYCdABgWODrEgtFYSIugVas8o1olCdcDXaoNQiJXJcEqe22PZs\nB6diVemVtPO/z1/H5MIz5+lRG6llxd+7V6Jo37LX0IPBoKF43FSbCo3qqJ1X\nrDqafj2ELGf/KPyHJT+PzszTBy8x8xgKelYAO1JcewOe+o042muihnaBGfnN\nt7Tn5/YPETOcRzIUJPpKoJLVprLo8O3tt7AhIMP56ptT1D7RZDBCkgwxbOQy\ndOQLz7QH4LYurc9igQ3jypPNKVWSKW1TvurOuCj6fd0V/UD45fpxtg4O338m\nLvve\r\n=4V/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/list":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/menu-surface":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.2fbba2554.0_1606758116741_0.5500261021328097","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/menu","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4139a89a4fc589dc6b10053594d24fe8d04655cd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.6d8574fe1.0.tgz","fileCount":37,"integrity":"sha512-iZ5u1DS8ed/HjGrSTMQMhLQnM/GbpL0RKbgBVIafueC7G664osskzoz3lZ+TgrtqJ1NG15GVR8vaUekx8uUAeg==","signatures":[{"sig":"MEUCICx3FugvI2Kb9Ntnb7nyOWm6GQ8W9EX+UxDgwgKNdp12AiEAjnYOs/mJeAOrObFHBxkqGuuYIYakv/6ywH3Zc94axKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFzCRA9TVsSAnZWagAAf9sP/3nFDAdLdn7RvjG/7rcZ\nacmvZ9XcCXoB6i5dyhpRLuu6psjR1ncQSV07QADOZUIm1bnuaqozzbsRPB9l\nv5nNOSziCQIQNEiTMGpr3DwRo8shxWodwVS9pRkVHlQvMizCNOCo/HiRV3t1\ng/zLHsYNWdwHfQzoOJzL01Pd3Rbx1Ugex/eqztIoNkS384hiHoUmT1UNNM6+\nhQxF1bJYbhgAy/OJwod5wGEOKhW+R5MkaX/LtCnJeAE0LQtjgT69QW20hNfD\n9vlyzKZ58dNZ5WnHJp76vYtmjUx/eZvw+GLhkLcW6sInXVwnpBVUNU+80Rtm\niVx87Fmi64thY9XkRfJBllbsAbZRwS5J2wxpkCKymsapvE4Sq947918wqCYk\n3oq5uOztW8RaWWYD5Td5kl+m/P1vzTGi9fp94y64ZoypbDK+4Sgn0y147F5G\nPRrbQo7kzdP+neo0KHf8N5cRMqyu9NeaoUJTfzGWyKtFNB2pJ/inFtFC+uL1\nfmpDfxfcu4MfvJxtYBm6pKRBeIwCo4W9bB3GxhanJAHI1sYdLkaTGvIekciy\nXzgyfNQkOquZmb9urX4WzSyl1wEW7kSfDBdOSHS035gzB0U+nPHrpunSdGvC\nwIcq5n7Xgr6mpBf/Rx/IdQtnEK65GWgj0WXLcFor3OUwfFlwhkDB0yLaOO02\ntYeM\r\n=7vy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/list":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/menu-surface":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.6d8574fe1.0_1606758771105_0.2724253099812046","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/menu","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce7f715fae4c1530001011e43914c2cf03a2df27","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.fd22355f7.0.tgz","fileCount":37,"integrity":"sha512-3+eITwpHLWbXFTd/XzIrSQx+ZgialmJyEpodoHMuSPmOxIeoQgREEbpWIGhmGj1wXgJOu8DouZ4N2F9qcjN5MQ==","signatures":[{"sig":"MEUCIQDsQoVkeeEbWKmRvoAkRPRlh6LyTdvlzMXzQ+a5CtMt1wIgbncsvoGRfMCmjCc9pNXVjv3vgBorqb+qNjtgxgWxIZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXm5CRA9TVsSAnZWagAA10AP/jEMrSnu/Pmf60tjjA8P\nnd53RoKPrGlldOzSS3JG9gb9Nq5DkV3VzCyLlwlAU72zxK+zAA/Vc19DBtbz\nn3g4duKRazbMjphcUiEY2mi6DTLhM6JNVYEvUD6Xu+nlWH6aRcAfxNtgs26Y\n9pS07Qpg8D0U+PpAZ0eBw1n+wlpx6rLfX+zJDZKhPtZ75ZT27aRim0PseVUX\ncWvLK2L/YycBM/U6QhOQ3HNdTBNRcK9G24MV5e3QX4oDXIyDnyAmupwAUn60\nPI5OzJjv9RmXrHyUcigGo5GXfxHkv5FXNl2StqfpvGwF8VXunpudy9/Wtd6D\nSokD1Z/B9QOoHHVLvQQ0CbG4VsWA1tGMpzSLGTl/jViy1B7uHYPYRZ9UPFTF\nvCcqFt862cnz938qLTnAQO7Fh06Hg1g4HEQa118jrHPoakhjhp6PmC2dz+rz\nZIDfswBa2Uhd122ZHPdSSLdEpqrja8pvQrTthR3rqdEu/G+/5L8JBhWrj20P\n30hB3oDIYnKwVJFxSaG3RYpEo0L65QkZ5DXTDwtuVK3UC+Ph6P+pjgWCIMe/\nioCp3xmMVRzp63EEglyq8NVx2Razfe99dDp3jzjx4drgMAz+E85QFUPnl5UE\neAKDc/8YT/oMM15pJzBCxFhpjZvgOSCUDYtFR2ZWNimhX2PHZOEWwCELUkQ9\nKJTS\r\n=Mv2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/list":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/menu-surface":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.fd22355f7.0_1606777273133_0.6701206552662724","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/menu","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b096baa96bc7dcf57ab553faf91d53b85e0afd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.c4ab98722.0.tgz","fileCount":37,"integrity":"sha512-wpW3YhqCegflprcwMRdfHPXM/VT6OzpdD8Db7Ful6cvMfyEtCwY5qJj2O5bw+tYbOmFBvt6d40saDvH/5X0+Ow==","signatures":[{"sig":"MEUCIQCSHc+qusq1zueGccNXGzvme/rEAaFMV5LV3j0UE5KytAIgUX0Ktteh3486z3XIokyYWylGDr5Itpt7DsUYnQw/eaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxua9CRA9TVsSAnZWagAARx8P/R7T/mFf6pDduMRlsf0Y\ntVQPJVWiCQhPMFXw4SiINrzX0Nl5+kAsiF6E3ZfWLFTGXWydnS4YdoUg9ckr\nNsfhu23NB9D7mNP99c4BfERiZ5bru5BsgYxhrW9vr7TGyCExx9FU9EmWgGaV\nPd+s/Zl62CWOzst58r9lti4iCYNvGkSkYvtad/fins25hL5Gcg2jtseM/T7w\ncukcBvWn2uySjmpWEh9XwVAZYWKSqF1BzxzZcKKWb5TqOpBUxNjjTWC0YQH/\nU+sFWv1c7F+5Or/qK078FAtJpboCZXw7CGXodd0xf/bAdJmX5iEMmpxz8FCD\ntweZx5GUforVmB5Mr10nluirVnkScAhcyr7g5SpvIMlmDdCFpx8VMo1585ws\n6+foHR4UDEV076jiN7f75OESqOdFXMzGM1+Wt5JJug9Vh2EDqR9oFz8Iotq8\n1klU4Mbd2FPDyA9Ub5NNpLZtaGhKBAiJckaqSXSju+Hmv28mr+jAm/doa7XE\nyxqHuOn5kakBRTuulygnVTepGBPtLmUci8SA9FuyIIbOEqaDcvKM7IdaY+m5\nZ7uizMELVgUghQS2/yc+ao9VPIVkFXAUx/edQp5XWY2PbQywThAmLCQwDbzO\nTb3Zn3QwAp7uCyZkXrO/9z/Pyr6Onh4aA16VM/A7xNK2rzEW30i2WpqGp3yq\n4Chl\r\n=e4xB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/list":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/menu-surface":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.c4ab98722.0_1606870716590_0.6009540384654257","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/menu","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e3068ea17616abb99dbda33ee1e950256c9d69f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.977585650.0.tgz","fileCount":37,"integrity":"sha512-YNg6zD/HC6N3gd8VeHTWn2N/cdSvFSp2FUZ3+1XmQC1Fp5pfWiKgiyFE7PntplHbk+Es5vM2zmuCImVdayxqOw==","signatures":[{"sig":"MEQCIHFI7dC6QwleHtg1vECSEySmblympXpnQxkUj+kl7jAAAiBw8jRnn6gUjQQr2QJATEzq/FsNYA1tlMuXnz4vmhSmxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gwCRA9TVsSAnZWagAAY5EQAJDrRP1WpPNux87W44G8\n+gAAntwz+6K4g9LQ7a3useqUmsi4wpNcoBLEKwD+11A3lc/3F+mHs+SBjxfc\nr1Uu1r3iZkUCsjGt4PkJSm3qiSjJmH6JCpSweGYV5pXsUEhWMHsv/E+sF8Nf\nhNL9+HuB2tMr6Ah/8P+tq60xRxawVtcLB6VtIOIVsO/wyryWKKf+ZETBkN7d\n6qAwDOPba2loNkKrFlSF8gqHeLGU408KtETS0eDupD1oCdInxPkzk7qydU1U\nL8zA36laNosBT0pKiKexHzfj+zQZxyZaUrhFZ+fm3uzmPzm5Jas2OG07KdUQ\nEWXXbM47xDTIMmLnMmavBAzGizfF/bRQ1Jdb7i7mmOEOVgz/xCvxIajUtuxG\naGE8RVkw3kJMEdyCFu5OKo/xqnm/33adMPxGUO34JraP3ywaGhIo+WGsNBWB\nOTBPih7mgliwRKulIR1SnMWLstYhu5eZNV8MoYw/VzwVNhjJoG3OF2xQMeJK\na/Dh1RBcnTmGvoF1WxXtCN+LztRYy88KcYIq2ylDHl89M++kamTk3mZ56bh5\nf1geoZ4+zJ+3DPflP5Nn4GtNNf0R3fuFx9FxGUdlGcwjnQUn2Bf94xn1xl/P\n+frj1BwjiiFEd93uaRZSYUoY9Yb6ya64t3GF3050hIe4pefq0zyuw/M/dqR7\n5uXf\r\n=e1La\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/list":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/menu-surface":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.977585650.0_1606920239747_0.5068779018707512","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/menu","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b2bfac744b604812bba2c77a6c8dd110ca7aa1b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":37,"integrity":"sha512-aX7JbsarFu/1B1H17Om9LQII0XFRs493kCobRsYxNNI1hMq4MLqTfUDbw5rjxLh9QWupLCzfhXBr/EDsD/7RjQ==","signatures":[{"sig":"MEQCIH4Tq3qTIc6HWKA0zJibZjx03LJycjU7OuYFt2WYKYa/AiAgp9RLD7B06CoSaceckm3T9eryNV0siScGSEADuaSDIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6neCRA9TVsSAnZWagAAmS8P/RCORFzP7nDqGNg1E4Eb\n/QK7QpT5mddxX5dXAuIKn26L8SKZun3WSpP1BvOvlZeUsiBMaAbrJuExUMyt\n0lWJq5DFrMX/QGoGjG07WA9YOz2QmC6A0TyRgOCfx1JIjYYbwalLVewqo+MP\nQ1Yiot4Zhm3Shaznw9qQ31ZU2NZ4PCzeq0hww26AqhnG9Pqc29VMXIxTirO1\nutdlfnMhYW1AE3kc+0feYG6jje48ZS1vcZ0ZLdDA9XmDPiujobUF8NVGKfUZ\nYY8fbNUh5N/t1xAj7EFvLP5xYtiT+V8PtTrN53/bbLVlVry+yWo0c4VF63KI\n4oA+FU3p1PDQ9pyzUvwLeJf2Dv5+ESFJwAO+bcS73CLak2l3t5UVE0IMRm/w\nR78Ho8SAcNIUOrKooVeJCXqjOCKG5vbD7WO7ux3bRs0ET3qCrznGaCCqbZfh\nR46FS+CwNC9vpwmfcKdFpjXCFOlp5VS9pZjKk2W0GtFwg57ahDo2cqaTInr2\nmnUW5Ak0A2votNawwFk3uFM43UGv1LeuyZ5gAim4+q2DepWYYO5qYj+cm4nU\nkBWcHJImvXetckHw4QwOB10s8wsofaEwSA2kz6y84QiYH8DYvfiFNFc+CPDM\nOXDdkYJ9KlaL8y6CR/7f4IlN1mcLC/wiHU3Rq6+O+BkXBVhHqz0aqHZ5imig\numx8\r\n=GMXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/list":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/menu-surface":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.c7edfc7b6.0_1606920669773_0.28196201334844084","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/menu","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc5740635d08e157e725e452ee6cb069b3a73b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.4f3347306.0.tgz","fileCount":37,"integrity":"sha512-W7JB5L7L/q8Fm8gSNljrAo5fNQc1l8LTW5u/0QLDz9Y02CmVd0r0/E1NB0SErjg+YbtIGT4lcUVpxPWsY/ZJNg==","signatures":[{"sig":"MEUCIGOEpA+Gx/iJC7nqNhkP6z0ppgugxdh9y4R7y28TGye6AiEAyN6WxH6Z/DP/bI3HU9XQFgHHl/RV6eHvNylkDFdQnKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64UCRA9TVsSAnZWagAAnb8P/0XBM5uR57ZYR0w5hvi9\niLN3slN1ej8rpdG3jKYMZ7sHRysf5uDxJAGPYoVlVL3DjjG3Evb391ZwkkIn\nww65xrW5zRLz55HRqkc7I2hcrJ9PBI1EZSASMV2aak9KCltrb6G08QVmYcw8\n1ljTigqrq1eKLH8s9nvL5VwU3qYQ/Jwl/dAOBUs9pDKeQjHyDr3shGXTEkUk\neFVqTHiBEbzYK5lsWOYLEtjjQn5DOSyjhrGKznvirnnhAg9S+3c+f55MWqH3\nT9NfEznuDsY3h8RAKsmNxBDasgHo+dDESSEdQ30oTdtaDq4UJTpibLRYL9Ti\n2IweVpkShvYUTxwxMlYIJaV/l2Ply4nkn5xRguicNW986Q50X3yM9Cb4o3P+\n1iz2UlPlpkD3LBkvURDJZCDlPhdcGd6sQgMP9M4sRByr/cG9C9d6lenFGqM+\nYjh7FFmaYqHYBR3QwKdoUaBdVzDKpR7iyxgbe3LFV1VsqPSM9odeogz2FJFe\nnB0eSuDkfcSdK7hufNl+ZsDVajoV2YXbuxvajM9sDffGoHSEOonY+nk/Xvhl\n41G/8U7mdWWJn64nZY2N76XpRF4mksbPBr1A4dPOKFRvF8OSZYZ/BHZ1yoy3\nIhuYBTAIx8USdncxACb+dUbLWn1kvJTCTwCWOAgPlFX21RBQUMrtB39sbLTV\nib3p\r\n=ZNyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/list":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/menu-surface":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.4f3347306.0_1606921748056_0.6946214848924581","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/menu","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3f8b8bd18f26cd1db984adaf37e219443e6440c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.37fbae10d.0.tgz","fileCount":37,"integrity":"sha512-a3ELrZtVC+wzd8q1zVkEHOMXS5Ti5uhUr9u75SYEdV3nqitQ4ji5aae56mguK4zjUXwSQQR0i8vIEElPpsutsQ==","signatures":[{"sig":"MEUCIQDzGWS4KNVsJba/Zdj8MBbCMBzkvxQBlcPK5sqa168WKwIgUgp9ZmwBNboweCcnV2N4EgrRoTGbrmol5bI9CGfRj1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pcCRA9TVsSAnZWagAAbOYQAI60njHGD/D22VVi8VMl\nJq9N7Um8jvvoD1SQ4F2D5X4ejbwPTbuSgiwSMHzF0fuO+DAebVYhmiQHwRAh\nveZwlfjB52jRF95gYzmwPqseF9D0nu3pKXN8RyLzCUVkr2G5v5wVdg65OiHB\nAHRiarH+E6NgcYH4TJTNM8iL8GSjTVViMzXceqyXugBxuTsicfwbQnCvG0Fx\ni06mT3/pfDDTpO93TpdLHQp7mAZFBUylXvdAthrcZzvKN5CvImEfodaI+VZN\nzDhWm7HwNL2TtmALy+VJ6hXnYDUEY0k9T+iy59XXaTm4iJExiepXGbCCJrU2\n1BMiDh1GDDDldL8TaPix8Ai8y7Pu9EXeOj291XGVVAYHwHHaTFfNjdK72UJ0\nIM7taUn7nruCheT3q8IKc9Ld82SMPioe9EOcfK/19jAyUmBtJ/Dj9vq0oKlB\nxJ5q6TgqJ+xCDHXw98HpRtMJ/nJXJHYNlYwvRbDXK7MefpAc359//yDx0uGH\nv+rpplOl9YPgVXeIb3jdg8wSLPUzgN/9TuSKzBarho2Wx3q/txqrs7w9AKsm\nsjCfEj9/2XtuMX5CTuGZ5Is2/XNtUYs4psSGnSXWyR7gYaBPDgIV7hZLhqQ9\ntUQCfscrO1bAz6U5MQlUZgGMHpWel3H0czPFDrZmqEV9ScFfTMVXfk6rpRmK\n4oGg\r\n=T0AI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/list":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/menu-surface":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.37fbae10d.0_1606933083557_0.6005178170517014","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/menu","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1d12b07d7bd844bb855fdfa4aabadc3ede7ff0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.11da3c0db.0.tgz","fileCount":37,"integrity":"sha512-vE6y55DuXnzqZLD/gvGPCrVZ6MqXtSKyQbZ1ZPwa4gDhyexcwSQFU2db+F4lF+qIMZ24FAKzhkJRTdq0W+uOkw==","signatures":[{"sig":"MEUCIQCVfFsMabBmSXcPQi95b0FLn3uCmHl4EUZPQMXUD6pyKQIgNFrTyviBw6Y26GBtKZgewqfv51jgjSX/NStjzUBkfEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fjCRA9TVsSAnZWagAA+7EP/jpg3GiTAivJLNVn/aF1\ncgWiytOr7A5OfJYUA+ek5Rxd7RgenVc0KpMEXCHKQ+XSfWVJQQxEB7cb96QD\n3nQ1XfTHwtHMakjbbSju39i+7X78s8J8OZvYikOoW9PdYDY2njA40V6oL2+Z\napzlM7bWIuHLRxKPNvjKkyEgwS/0dx001lUasDXab+a7eo1ezKBIc7yUhI9T\n+GHZGG6pXEYXA5q+PWlpaKCIWj5nB9rKfPT3pyH5sP2FoRYQd/k2CK61Tibd\nzs6XPFv1O/VT45fXQ8LH5dDMMNy9jMRXeNfOmgPLQ2L7es9oYlib88M76yLK\nRLu7l4z3dRB+/LzxYGGy18E59TGURrgAgwVlrzwoxz0gXV1z4SeVrBGUv+Bf\nAOdsNg2p/bViwsPIi0CTXT8WPN4/eock9Jmh2EqdObL4OfE+9ZweCjhD08NB\nI8RoQnGfEPpjM4JOiI77Gx8iLiO1KodECFPshzOTzVl/6xOE8RgjTYhfN1Tu\nzeyWW0ehTr7IRT0ZPfx110X2vZ9XYHO3t0XjJOjg7153y1SLDql0YWh1vZLS\nrMtLgyb1UYEzssYjGw7YvzQxVMbZa5UNp12KQo2ZZYmAOIijNCONERNlYrym\neaTxKQMZIoNZdMdLgLmO8BaCdDHSQ8qDM3bRN/0/3U0Am5oICQK4Vq5QXshi\n2T7F\r\n=i34n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/list":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/menu-surface":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.11da3c0db.0_1606940643370_0.9609005870618048","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/menu","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ee9d4070a4bc6f801c0b2f3e107a84f7b637b7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.489d4c219.0.tgz","fileCount":37,"integrity":"sha512-OQowy5BQ2hJ9lJ6MfgLDTXiaJSMJ9L1eMgTHS6J0tXtXdbNvXurTbZKOI6Nuyw4Fzxe0vYZHnTDdjWN7/VT/DA==","signatures":[{"sig":"MEYCIQC3HeZjSV+gMM6iVoVak2spybxbGKsEfvgIJcyMdGDRfQIhAPi/t2ZHVj4WKnHDZHNIm/Vaqf4Ge4e+myD1oDJv1dUZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQTKCRA9TVsSAnZWagAAWv0P/2F7fIdmBgUts7zAuLfd\nJJev+ADPzDUMhxTJqso4RFF/ji3+rl9j7mWTRrM/ir5hKP11/eGfH18D1DJH\nXm/xLep3/WHYnzge3XbiMDeXHz8eGcaH4j1KLNhN74FC3KeCCVyEStdEW79K\n2EwzlTRxlJPc72hexVUxJkWQY7iUyiLCKVXYchRZUNN6Jw7t2eb+x5kkigIN\nyG7PS8RzGqE/FgW9DklDNt7L7iLfDBUPKdut+21Bt4C2JqmGqANNsNTLUsUo\nUTQECGysStxeKYUXhKTiwU8G2tk3Ud79Klb5U0Khp0wGNVB1d5zVA77XpvJ9\nVgO9+KKE+qm4r+7naBH1WO9CGw68B9TRCEaxgRygAWSgv5Gq5kKlTgq477tL\neamf/8mHNwX2+nJbFcblqgptx0A1GLRvHm5nxJvB3XXGGeJpDBOEkYOmmli3\neqpSDDOYzJ2Scetr4qvk9Mt9O49v8Dm9lfFY46zy0fCmIdzgVrFUrH0wZsu1\npNV7+g5BJJxFp2YPz5YHV9qgnkaFkcq53dvTgAMPHazQKmupgJKiWaWW4oOj\ngtQwZ1HZyZ1+z2XPiJBrGZ0C+vfKVOWxwZjEXiszJnZLjdVPMWvPDmxpe6Tp\n2FwwqWnV/JVlBsINqag5sFNtombHRXRT4abNiK1/2sLRYXHSdsAWCzxFV3jD\n5fAH\r\n=m6by\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/list":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/menu-surface":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.489d4c219.0_1607009482013_0.9621037343877794","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/menu","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d4b5756cc064bdb1ba787591b60aa0cc2bffe0c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.6557a69d9.0.tgz","fileCount":37,"integrity":"sha512-RVrvhjY9TW+THlQyW9m1YkhbuXA8WXnw86tpXaiafEEHWeTPQJVoD6U2K13+m6y0LlxsD00eLr4XQY4tg0IeXw==","signatures":[{"sig":"MEUCIQDDRhYex0aTlk1zacTlvIzYN2GAQIIAnXe8UuPOOXo60gIge9LOAtdiN5NeH/q6dRFeZIPa7h85mvQ3Bb/MDqG3i2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQeVCRA9TVsSAnZWagAAQSIQAItINfqMAeZJ3F5iXJ4i\ndA8fqiKIf3m1ad1iO5Dss9iwov6B4fRr4pHCUji59Gg/7QftpKNto+649lZN\n3YqH1M8p4yU7t0cFwZfn5scUhI3n7eKAjNOtbg/OpGflEMaUykzKMhNmKmxG\nuRA4sr9C6iI2HC5T+Zn3cwYGfIlKMZu5Epgg2ppMG/iqK7K/aPmjNQ34z9ik\nF7t/kpLxBFMcJUXvBH/XLqronZvrhw4oTq67QjPWaw36r54Zt1q00aHi/Jyv\nOM5seaIGJ40p47GArMiOJZv36TLlnkKJw4bRgPoBNVax1VLAfAbUrWfdXUmr\n8QkZZMYZdZRz0mLj5ErmZ4bv2/rTsQkEgleG+8hlEax72G5T/67B5CMGWzc7\n4FuCoMas/k13h2dz+LnA9PTRMv7MMtpuzLSmqH7LfGSNqK25QTtRXniWz54u\nNTukd3/0qyKaCILnQd6zonltYuHvuv9GSPDPw+kpzd/6zsy62xkIfA2MjFe6\nF3wyTBAwzeDQYwda/nlwQIGnl5crSra7+PySzJq02oCT0iJmFrNbgurrI0SB\nrvkhYGSHuRcR8tpC64iwQaGRi0Ixx4fqt+4HrqlbTQBScR7yeOFSLg+brPTD\ny0kU8+PpNLh/2zEGYuPk0l+YYrl6W25sJw1XQR6T1Mc2VirZDpKhMu8r0WR4\nagyP\r\n=qrhF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/list":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/menu-surface":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.6557a69d9.0_1607010196194_0.12149759847925945","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/menu","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b61f58ade9f8af85becda7fa6f3caeed2143f8e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":37,"integrity":"sha512-cl8eo8t3cLA7/2zPrSNZQDJuWh2LdM0QRHUcegJHVMOnw85X4nrFR6Uyswnc9oOEHwR5RTGh9/OsEcU3j0FRAg==","signatures":[{"sig":"MEYCIQC2vwxp+pe6jaizTgHNS/WSlReMxcVwmhFKx8vJVVMx0QIhAP4Hi46ESm6C/7wgZjMcWSpAvP1ewtOEekM2pUh7SZ1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQujCRA9TVsSAnZWagAAJgcP+wS50+1qgdj1378yXCcE\nPWZ7WRWuWk6IG0WwBicy50C6tIL4Oi5KMYUKshs7DqIqjaBI6eDeupksS4bM\nYTO9dmCH1bSCqUDjA7XEBKfnU+jRtz9xcbQ/qWsE5+uY66TXFy0lmC+5LGtM\nVLP5Rj6eYiomjiVkjwFkFFcbiRvSl27zBs6y7Ts8EyrGfcfgF9n/1VcjcYu3\n9DsKzAL9WamQ7kUUsD2ZKN4qHDlT66Eo1ikk10y+dDOHwZF0TKdqzCAR9/Lt\npSUSeV0CzvYbA2JT7H01bIkD+i9SuqQ5ewZkf4D9DNGVTy11Urc7OSvE4dNW\nCXPa+/0I41xmJEjiSdRPJirYPXkGznmxU7UAPviMApZNK23oIT0u50BHk58r\nGQxK+w+AmXsTyPv3R0nHuaTIqeVFEM3ufUkBKLkqLZQ6Rw6APWNmTJk5VBea\nIlq3ofZhjYI/vjCw5fSbOzSzASjKIKcIeAW99Urhj5YAWzwk+OlaFsU2OkIX\nauahh9kUVrs6FBIwRH5UNAOQaDlCIHDj4BxMMR/Gi7OLRqi+h2SdYyMPIjik\n0AIcfJRH/v7Qicz9xk5b7KqoD0gAPh62w//i2pMxhGVeDNYmKBGm47nPbq6C\nXMODsqfOLrdayueQbFHF5NQ2/wIiSS7VICu5ROGIeRGb9EnsLmULnoWTloMg\nlr6r\r\n=NWAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/list":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/menu-surface":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.4ea1b7c69.0_1607011235180_0.08474869497128656","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/menu","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a9243dd29909c33df224f92189fed9b59441f74","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":37,"integrity":"sha512-JY3TngCPe2BepG7gbcMh4/5Rh3bPxjxwd9CvEmeCrIVFzRRJY2jFIwXEXRrjQ1KAooPKu1A/FGw+LvZjrn0xrQ==","signatures":[{"sig":"MEQCIGLtBoVh8tFFCX2+amR7yLE5ciY9cjVW81Y/KgD1kC/zAiAI23Z0B5/NpFieL4bGsTqNe0qXRe2ORYAdOdtT5CnVrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRpGCRA9TVsSAnZWagAApjUP/3FKNnP7IimkZ45SCYDe\nKQ3MYVFHeCOxO6JWv+0MiS4zbDCPPm7GdZ8siMHaYOoHHA1w1+eunbCF8i7K\nLUTmf/9sh6MPaEDIS192Vw7BxFy+QXA2LofCom9jLPsVhnb+pWE7SgKX4wAg\nGpEbeUqFsu56Af+v3ad8E43UM0BB580xUS+7acPjGvuAAEt6I88xB1gY+WgK\nd3ur48lMYdesSKqYRjMdfX1Bjpko8vL+6MUDQ7KqNsKg86P+sbvuwlL1FNPz\nboO5tFZxRBr+Uk1q/gm54R2ZeIaK0JjiPm1X6lN0zyGg2SV8aN2l+A1Y2fVy\nF5HdBEKTscbMq47zBGqlcRiXMCHrU3CbE7LcmImrC4G3rPlTYmab5kEO+UYE\ny68FJ/eJdhALcTYpJtFcJxInRUy45Ny80E17R7jIPzatJ0vr4ZjzeQyLwUBT\nCp0PLepaEkEHdF4J9d7AItQLiROJA87lb9PZW0plfshZ2YCNjrq2GGV6f/Sp\nhfatuYno0lUqFgejbCle24lxBgUfcpQVjFEkQsYHd7s/1QI0cPbsO2PLI3Vr\nMd2WLZSz1ewb4Dv4WfEwZL6h8Cx9bunn01aPJxIxyfUAkcGGPB1G5n6VOTbi\ngizKGmataWs66tlpVHUCB6HFJpVDx1PVKpxrggrBQinrKccM6LDZhr1VW64f\nLI5G\r\n=jMjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/list":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/menu-surface":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.eaeb78ce3.0_1607014981476_0.04854998012304068","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/menu","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"641c020acaa1a92a254f8366e6a5762137483757","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.1c156d69d.0.tgz","fileCount":37,"integrity":"sha512-opUKKT40E3aDY9wMUIKQtUoxB2gD6Ry633vb2sOHHkf7YA7Ad/F8HnByhLqeq7tB2Gg1N0PKfSGOk/OMjJ1l9w==","signatures":[{"sig":"MEUCIDVp5qtGd3a+JpArsN1N5usAtm/LhcP0BYEGon4oRc5xAiEAlkPN7puVsYWYMH8zI8OLCeTY0fSHMk42vnGJY+92UGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6/CRA9TVsSAnZWagAAhUoP/3TDHgbHVPJfsbZ4Kdiz\ndWOu596dwiVZ2l1+euMxeJAzbKh3DiKLj9NBR6iRVBnGy7/sb/PJw6VRCgvQ\n+C2nTdG8TTNegBIO2O2o0KFSCO981SwPkgHZ+B+AquwlyJtRPFWbEb7v06kL\nnrkL/2FQh9IUm8Ze7Jb9qeKSpZqVqamqqz/0aNVO3NwwjPE2vmBe/HnF8sYB\n2G1+V0lyEHpjGdevQtnuwV+sO9jrqTTKgexH/wg797uejWj3K0HI9barDmF2\n6fdVGMEuWrbDQ7zOexchWVpky15SSag/lIlTxyr+X0+xTVNf6V+w84+IX+KD\np2EgzRw79B9XjvICPMNc+qGDMbiZokfwOeASdhKlnSwXFIUVGyFZ/SdbOh17\n6GIDLgEt8GPz3t0+N9S5Dl1cBbwsl0DdAUv2MeUxMk124ZsgxrZsqdToKjxV\nOwKmjNg369vTV06GUdYQywdzn2pSIng9yGkMdFCGSysOTsy7DPKoaDi2XfCo\nUkm2PVbARyhMYYabKrZ6XyD3S1e01TM5ruwug4qe0Ntrah9CTWU30H6vxSX+\nCbZuQLFfODGAlzuYhrQAqeLDmOpXc74DNMKHOfc6OKHc85gNphmu8WQCFwWx\nujmoTi7Z0pDu3vBw3fBFpEXPTKBOTxq/zod0AjoGzTV/+mEdgcCKMV2BpMvp\nV9Cx\r\n=kyfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/list":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/menu-surface":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.1c156d69d.0_1607028414457_0.3530188845692177","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/menu","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"320ab548fe13cb460f7699c6f3a12f21442f328e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.832668d33.0.tgz","fileCount":37,"integrity":"sha512-Rl1squx1pCBKcIHHjIPHI7KqnJlSySehTNLAjwKJBOGmDF4pFdeP09aOz92WKZStGpXdLSfpM+/0j+O5bLLrBA==","signatures":[{"sig":"MEUCIAZ4F0OKvgYmC565c2YxQmpMtAqEMlEPCGb4Sq0acD9oAiEAwlTbVMowf1/a3FLIy7BBDzY7jak6lrYfPD4uUCz2Pzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrlCRA9TVsSAnZWagAAWLEP/Rv0/39HeK+40lQg4otb\n8oXhOJauEn0dLYr+/qv9lm3j3inK3fl4LZq/aXb3mkInbzKFiA5+MOKmjrKP\nEUsyD1r4kxLg4/4wsZF5Q5yHjPaxQb9KXrxmFrwXKdD/KKT4G/oUIO9ACdBo\neaoJ9aV693Mbc67aYBXMaK2EzvF2nZuVbHvtuyraKDjAJ32oLGWg6I3MC8WG\n6uGjimZy/UJQqgI3z/C6kiR7NgTeLN++5RzcwCCwMH9BKQjWf8N/BkuXywpJ\nvY0VluxkeUFqXYbFGY087u5WUxQCWHVDwekGNKg3WmETR1z0JltjDBIOHffi\nlSL1kvndIJXtRLN7ccwRYHrS/mm7r+gKdNXikTKE4UYqvKObdUVxbXZTr0fa\naZP3N3J09nrM1TcWoIbR3Y4CCC29mmDBVGSVsc003+Y0HYVua/oSsSVu3jU0\na8df8dpAJWoMhJTBJBmUBZCugMm3aZRxLwy9r3bXI2pq9N+AKh3BPJqIVmbw\nWvz0l01lKdZw6eAh/9JLcKj+iSu146suY5uUkffQ7lFDcAnBSyn+c754OwoF\nRE82+ipCjCZWRQhGNV4nhXIzepxYMYg5DUJEa/ljkSUQLfd35TTnv6VN0w4N\nyP0CUOMyu7EcKIK/R2vbXmAgdPVUxF1isjykCLw+6TsnhtTaHdZ+46esx95C\nQ2Fc\r\n=7PKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/list":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/menu-surface":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.832668d33.0_1607105253387_0.8920758867881018","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/menu","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3374e21a5d13869fb4148766b68bd0d41fbe87f0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.4321323e4.0.tgz","fileCount":37,"integrity":"sha512-OT//TApMVVRvJXhfbm+qU0CM/Cbza7mWg+abeF58fK/7J2SmZ0euYf/JXMTnL99xS2mnuv8KBn2V0+z9QnXHkg==","signatures":[{"sig":"MEQCIDvBhk69j6U1gResa+9mYlPxi4MASW6f7t/3OhjbllCkAiB4TeTUkQzS1zeDGvnsitv9u4iQ38vQWPahJLgVgKAcLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJWCRA9TVsSAnZWagAA6LEQAJ+ujzFhLAShjaNIivOq\ncLzMduGxQ7YK/aibppnD1ONTx9Z+vSkH3fU5PXHOJZ+HQmp7fg62ilCJCRRy\nu/XzzhsAa3V6WdNJe0q4EtG8v9kvnaG9IBl7+4fkulgq2QGE9C6swtCEczgB\ni97F3XuAibjGoFw4MSYRxcoqFiXtlWKH9Ecn8j0ZpRuA5hT28l9W2EC3KIcy\nN1MpA0D+FApPgqnDK5vbwOEuT67kNmsPnIoILSaKxFBUyHgoayvKPzcsAsJ5\noSmo86Rj4MhC1qMoTQpDM03tqBF3ltX0ryPpNnUC9D8woDGsgicL+Kai57oY\n0lu7VjALuyhezxamw7yz/BA/F+p+cgwLdQJnxDHuxv/74779VkU0qB2xY5ty\nkLDoaLZR6BQx5LIIY8F4WbexkxAFT5E9MNiy9bl4HM6R8+X9VGnrqcFpLOxH\nPTudfJ+kDacwfvf9HCbLecLL6PYBBUGiW5we8YMqF563eGLiQSJuoxZf4roD\nahTGpnYkTiln73vK3+HW8YuNZvty3UPx9fMOZ4jvwyo/yExYR8hYJxk+gCSv\nTLTeWZtB6HykRQY7Hs9SA5+TGQwF//adgB+N/WWk0SP0U0JwooDMiPBk/Thb\nAV3OijNJf3xZB3zceXa1Z/Nb33mvR5NIWJkSuJd+NIb+kzZFR+0H03LlAOua\ng1Wu\r\n=TeSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/list":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/menu-surface":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.4321323e4.0_1607340630308_0.8415824350192576","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/menu","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d517ad11f87aac40ef558783fa8d6debe1233d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.2d5f32d41.0.tgz","fileCount":37,"integrity":"sha512-DHLFQfJdXwkf5vpLaPQVdGSbaSdk6SnBV0x+rrBoT/6qelOP/61viHy7vbdl5E3196oPOk/DD6VRT/PRVGtIuA==","signatures":[{"sig":"MEYCIQDvY+48/VwolUyj7y9wrRIBBet4xelHNd3JRHBbqGP7PAIhAILFvt9VpJo/AglC/kjEAYf4oYZU+FLu7iwX6KAzKB4p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlu7CRA9TVsSAnZWagAAoRoP/3A296zI39KDMpKfM8zH\nyhZPyVT4qYC1pV4Z652UANWwyvDy3VsbAy8x3W4JQ2W51D1zK1Yy/2LqOmkC\nc6de4QhuuUDGJ2G4ZyMEeJ+YSeMdVtol4tJZHyLq462/oFA8BQtzT6ZKh9+2\n1SLw+ABk+1GXj75xMkCpnMLuBYByp6O8A6W0boUyRptBrRozqVQRt7LPp7NE\nyml7OafnjcgGr7zt+pBSZ/xX5uq3PW4k0hZ8UVIZgEgGvyIIo738qEdp4auW\nxZHU1BmaiZbUkHRsvXkcZW0zj2lO7DdhvhQRyJkEpOYBPeYmDbxtx1pKAlOC\n1M90i44E2nqTxUVOrJssXkTwLtnMLDObTFnkwVxhiyXH+297mKaOk/+rl5Jv\nopHzcba+YgpCcudoYidXWq0vj11q7LuvTCmQTTwOdkyzKDLD2w/fhzBrV2v/\nmTWdmjP/H2Ex6joVtHTFUTS/Ln8UP+LI99bLOfqhs7Snbpn1RBIsTg9QvxAi\njZQtOLjHT71zEUsrgcu6R6AWxVtLsGj3DIS4lQZOFI/X2QFK6ZAmoRUjEz12\novp6VkXW97eMNAjLljzIW1lW2Kp6hufeQuMDdXZ3pNfDpLlfWc9hBmSh1WKP\nqq/dG2Q0xihNhg+QcjESRPnc/+w/3wMSQOwoijmEJSoHk8SAOSaebiy/MYal\nj5hI\r\n=gKwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/list":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/menu-surface":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.2d5f32d41.0_1607359418989_0.44211057525905595","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/menu","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ef69bdb5d365e0bb9fa33114a694265c815c3a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.8239afc64.0.tgz","fileCount":37,"integrity":"sha512-2uWnaiFmjvVU3+Or+Ca/ILErjf5FO2FRrELIEwAcrfkCNNnR95FpPCdlE2Gjj1pvrDrAH/uxU4RQCjLmIfxZ3A==","signatures":[{"sig":"MEUCIQCOybQ2jsHSm34UJ0B8Do79eq7TqoDT8OdVosNJv8agjwIgBj5fJJiuyHDIqEfGs7008UipMfjKS+HPrfJ4+2y0kw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoerCRA9TVsSAnZWagAAwisP/jlKb7d/9bKoMTBkKK9C\nsv6njPXtZpVclj7nkmSVDDAW3P4dDRYesonCCMaGLrZrjEvRWOmUUgyFYNHN\nTjSqSQihYdHlvGRp+zyxVwuqRIsFD4M9r8KgGRgizSDW4RWA/Obz7L6x+wWI\nhp73m6N2sCAsoo2uRPWvqw4yNQo/c0nOod6rkruQFpV5jc3YuOMuj0Mco8Xo\ne+RVpK8Wn5mkOGfs9oBAHrOo33k5vlxwFwWKdVa8B13dDNsUCRoCj5ym85yN\nNQeGTiZztE1zrnBSLxIPzZ9yfwdfSDgim/bO5Ij3m8cu+L1Xe4Rfh/lYCZjT\n8T/9gdYtS/rIr/HFkEO3n0H6WDuVVEq8G48RgZt+yCpClHXyVlnl10WWZ0Bt\nTr5RQkzxDrh2a4rPqxTuo1VYGhVe87VoWdJOKFCiuDqrxzzAWsPMhy2agtjZ\njDvKIpMS9TT0MLa//c9yp8A0Mu+tkbjMcSh5vP5sOj4tkrTx6r4thPRy/I8a\nK/9owDBVB+A/2nY7A+Rf4dOIZT32x1v6C3NjI20UMhkgiAs+JWSm/dZPlErB\nYpMWedjYK5ORTJlmSzwGaUzLlLtS+BJx+OrfMLzJ6uW3pUFZd5MpwJGrA4jk\nfBVhpVn5A8O5dsLZmTZpqn0UUhTEHBgWIWbvRGQoBps2skiqjL5rvMJ2jbHk\nj1ml\r\n=2VEv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/list":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/menu-surface":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.8239afc64.0_1607370667600_0.8282558517643741","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/menu","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"148017b5b001331d2bb0d600cdf46ff670f56062","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.6871336f1.0.tgz","fileCount":37,"integrity":"sha512-d1SyS4Mz9GgK0whPuVQYgSuIAW0q+99e6lxeqdJoaFB5ND7/QhN+12ojUBMhD/0+Dd5bWi74y6qhpVxo3AQtpQ==","signatures":[{"sig":"MEUCIQCYdZf4p5NRKI8JoeXRUJqlWFi+3Ji7njzV2H1adjjecgIgOTLCtHcOObxMblAogK+yTpTjM1ftIsMY57EeRb8ocyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6O/CRA9TVsSAnZWagAAWkYQAIlMl+JoXsPy/BcPyPh/\nannepB0aW2jc76ISW6uquRg/GeU9MDr9ejr9AyUZA/fFP/dfiV6C0MRs2Gkz\nPvcv60//5IR3pRn1Pv1yJxj3z8SDznVuVJrM2J3fWoxmIbxhX3yFhu9XqSrE\navVkFAgOEbkvraR1pLImyXru9Pa/5rQCgg/BSLLJ1jxyrQrXObCZ7cpHn5Hs\n/cWn5zgCu47HrGweUXu1lGhCYNjCI9H+FkWWogDDx1teag0CtaXBP+Jn5sd1\nYzWaVoQi87fe9naKHULmyc/UX3nUjmH6KJW4CIqNVhTWc5ldpR9IFDeaB0Q0\nVXM22QnBZynZcn+LL533VmzYqQXOdouReaCACNIaA7rILFzQdP2Uk3Gr6Q/e\nBaXjwBtJr0YNqVgCYPTAlT/UCjnA6i12uma4o92BZCCtcMjm1isj/NXhqVzG\nlfKrIhaVVmg9p6faVaYU+1S0W7swCS04IFVtY8Wu/6OF2i+6IZwhncSSztZn\nmWR1vIxOBp2vBg62yAwzSii09Ic0FQ+A+iro5GPwSmjrZ7tZ5Ps+bqINzsnt\nL74XHEfgSs1KVNmrXfR1LOMyZeebhwuM6btG/dzvDNednPZMx+3EYuZDEXh/\n2ShfrDGsObFST2I/rggG8T9RvMJ3TyJR5uSixxkkZni7B5maHLWq3dNHBdzX\nWu8+\r\n=3GkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/list":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/menu-surface":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.6871336f1.0_1607443391075_0.6059739112264946","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/menu","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9e35ff7b301cce02ace288459c23d234e22cb0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.9f718da94.0.tgz","fileCount":37,"integrity":"sha512-05gX7gP64srTQeAdILcOjM295sD7ZubAnqWqQJLWCEgKH6yVT7d7UoJbhkcXF90UlBhu35KhbqCJSPe5BceBWw==","signatures":[{"sig":"MEUCIQC/SgkPZ0KN4LjbOFFaypbYXVjcwtOX510kOXSwfRNwgAIgYzpHUAlRynAwF/xyl9nTpaAQsx9JUyDBaAQQZJzAhZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6aCCRA9TVsSAnZWagAAFFQP/1tWyRhOjcj5UyHLcZX1\nwSRGwfaI1u6YMtyGg/3pVO0mZyQkDAtBhIG+8UDA6Hsko+8y5HqI/8hUslZ3\nL5zqxCHyH8F0AVAtuNAZsT6TtpuoJB55ob94wuGTMNtY8Xb85zAelNoBXVGP\nRekTO95jnSs+XBTVYMRAjDgeg9JVOOtdmtHU8/k4fsbFabGOoziHlZqNY3br\n96EJc7VvesbV0uq6zpuy1XizPAfbP6viHyNTHtqnfiVhvfRa/ZIHg2qJsHJm\n7ej0OkNCyFpEgYxxGeMfq3C+rbf1vp2QZIP2o93aD3S5ybo0ccm50Kuqr2RG\nHnOJCAKOqAkWfsmADAFh9V+7PIug/FEcar7Ie1PJAWVvMyvjgZnq9pi2H5K3\n+WvjKm9HlaBOLkcchPmNsn2JvcWivG7+FITZtt6JMofY+KYG6ehJwZ55AgXS\nU4XudmqrSKT2dygFtpq9pxZVqNjDCRCHphE/Q0mM3YbHkSkXIa0CcX9O6GlN\n6R430sBJGWK/U/NHfRyube3Akqb1gsOKVdS9VirsNRD9ScACHq6kPwVfhNZY\nE/Jyc/toEqOLlij41qsUi6plDiFRy50TrTsmz8BHhKwTAoMXgHh0wC9soI5m\nIe5DzM5YokPsDBiEkDL8455Cz4BiLjabJkWcvBXDxnukctwfuaT0k6e9Y/ON\neqdL\r\n=BZF5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/list":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/menu-surface":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.9f718da94.0_1607444098008_0.20721686368439274","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/menu","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70feed3620763bc9360df368b80ba810cbc18aa3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.1fccb1418.0.tgz","fileCount":37,"integrity":"sha512-5KLiCzh7GjMOvJiArc4dbLrRK4on7vsV/rDgolM+4mNVEC1nREt0PIpENj5JUosKQaX7lGEdGnuirtOOZbJhlQ==","signatures":[{"sig":"MEYCIQDI/4AE7Ny0oLyAidhkb3rDEvYy+Vh0uf2CIaWqBxEKAgIhAP0G5h/syPXb9Uu9YGYKYnxoMWf//bxG03FET28L1mGf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6oDCRA9TVsSAnZWagAAWcgQAJD4hSGF5dpflbOOUVVf\nDs03BDQnXpZGxxDI1WPLU+EPksCmtYqI5JaJk9IGkoKlD9Dj6b7Jzi2qlxld\nZnF9lsr+1Z0cZvLXmFHjmFGAG9t2fZiVmwBE0jIjROi+Ko5HNACE33KCSwzI\npQzOFjUCmt6SpWlU7K8TKDSXHw3gKsCVpvXjBkRrXvXxYjPCdQxDt3p5QI1T\nQVRZzasTwhn7trSAC2oh888xSOVYqhz7E+9Dn2+6BYtDZaGtGtFXNZonLaNc\nLZ5zBC0dK3/HM24yKY+XgiiFIuA7atJoxua1OaSIuAp29myrE+ZhNYSfMtmA\nAEVQgSDLj4/OgqdYA2o0caXIRq+D2kW4oHaOyo2Jsl7z3bbyk7Xw77h6TJMp\n4VvTfoICM+CwdWrBigNfjlFzmOF9lxVIRyXoB70g4j3h6ejSOWDR6l9Rus/X\nAVOTRrHNQ0yAsQ/sYeuR4/3ZkQeTmZ6B7UP9pUkzn0cm9ieMhAvqdfXPvkOf\n7myqCPRC7C5xRihM60+gWbeBEtLAIwPYDUTBPUDXOcwoP8yXsJXs9ZLHFbQr\nezc9r+8yoSFYoYtuN78fGkBJW5PXRqqWWtkGJZvyjOxk9N+3B7sLRFnuDXqU\n4wKtVOJDAKdMM9pr389jpEhWY5zXVZWj3iEs2XSUEy5LeH5ceGxg6J0fjE85\n1TNw\r\n=2qF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/list":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/menu-surface":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.1fccb1418.0_1607444995391_0.35382992477205977","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/menu","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c65435af5d6718ee9762d6cedc990d3a5997bde5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.afb68894e.0.tgz","fileCount":37,"integrity":"sha512-zc8wh/J7hxw4AIH/iVWnULKoeIL0C8GEtPyO9gqOtwce166BUnBvo9EIgjEzEZVYcoNuAfqQ/1AvXuoGEHeP+A==","signatures":[{"sig":"MEQCIFERY4VDtCbFrbGWhvJecMHHU36LjLaP1v5wJNcZJIdjAiBzAp4FfAiANFcHW6JISG6ni4gvSht7z6qTM6FIt5HdmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6r2CRA9TVsSAnZWagAAYYUP/jl07FZQ6a3vhuw5E6FI\nVMiCofdo5GcS4z1R7GvlihZgRQOaqtS3uql3ALJVs56WuXLhLMBvzlpOoz3n\nS7revkrtK4gxd5xe49FIx9VPiFLxq9kocKZjyPN98cTT/zeP+Vtt13/KUf9F\nyNTQ2NGB5dQgjB/1jAiZb6GinOhqvBbvzowsBy666ZHgW6otPUFBB9FKyaqE\n4hzQ3sN3aIgmZf/U39owMuKiFTr4LY643PiBUvyEpaZQFg3J/2iggFjuWRxi\nY6+YSPW1uuO4KO0MWgGlmAPnj1I8iaCstHifTvk/wgBQKq2aCh0iaMb8EZv3\nfd7SXiKiuAqw0YgOAu3w1MN6HKthMbf7wV/mluoEGnNyOL8C6zsoJIcmX/N5\nHUDds2jA3e5l4LiYXZSz53Y0O31e247wG7Ecu5HnQ43D2+ZDyF2Pve7chsIg\nkLnjZWJFvHcBkxLYJ/7rYWzgtHf3PPuyPCp+jyLyXIB13nwlSxOzK0mBu6J/\nRDQVzaqndr0Kctu8xl+/VOEXru0leKbMkTvmdVsrfpTo3QI9v1d+UEoAaqBL\nYZxWhlQ2S6mEQA8Xx4F1920cZpIsGKy9AmOC7GxDdm0bGPwz2+CdbLz55fAV\nSDq1ZLoXiI9EgN+LASD2J1/6wVMukBowm+9Ghp5z2EGgs3fc9FBpyJ1Ww/t+\n3u1d\r\n=3Rie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/list":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/menu-surface":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.afb68894e.0_1607445238071_0.8863502639001108","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/menu","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"406a749aa297800d3b04dd3bd2de7a015729f6f3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.fd88d40c2.0.tgz","fileCount":37,"integrity":"sha512-ILr9FKU8JetEd7cR9LYrCow7zah7Juv34ZeF7BuLDyjyfbwgJUIEbykugYp8Z09CiKn5hqQLwwNEnZZM+jy8+g==","signatures":[{"sig":"MEQCIE5qcDzFZ0xQNnSVJljzFhcb7lCjRbB5jFXI6qEasiAQAiBQLv54GMelOMs505c512ylqGmFvp98n1GQ6u2eJ12RWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64nCRA9TVsSAnZWagAArcgP/RNI0XJ8D/915C8m3yFX\nEQWh8KV+iGKI/Lx4+x4V7HQIq8V6JFc1kBWkJGnUOmMTC5DOSnGCKI8mWd36\nSekgSQ2SxX5LM2l6PGLOWpvyjHhSdBUx0uxG/p4Oa3JJp50UB7Jw6seRByc+\n79Uw0b7BlJfSotSWGYNaeTqudoCRuRSqOEgvXlDuwuGub+mznFM/qWejw9O6\nc2OHjlIzrep2LfssalyxwFhg+aVE9z5kiG0iBLdHqlma/l54zzkBNtUMCPIw\n3KgSLQJJ7nRjqs2pZTegiDJr8COEOLLhpBEnLVkdtnQWs05MqFa+aR1BQvcG\nxSD/u/Aco04ZsXtvo36tCANIzzGPSX/hkybmJ4eaY2HnAwkX2MvNhhLIMdeV\nY1HQuLxYeZCAtBd65RuMfed3m4xrzQz4aY0soZEyrOYJIDV3ygc6CZ92eQ2u\nJYAgfefleYmUmyOfl48rqaJyaAbu8lOeCdf3DYLQUl6IjqC0M6PD7Pjjhw1X\nuhXh+gBQIzt4ZTQqfsnutP66GTCjuyd5asauL7Wy8jt09UYvIQz5p8cbEVCP\n1kibTMCIYaioPOlZSoclc83rm8zIbDaEBQorOU+Qczvw12CCBOIDa9AggEYr\nOEb0fHzFHpRGzxqYEbSe+75AAJTOBNSwCgpTjFLEUIqktdlwOyyyW7I46ebF\npawv\r\n=vbj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/list":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/menu-surface":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.fd88d40c2.0_1607446055319_0.6776673103109931","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/menu","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4662875df808fa877b166ab61e996092f438048e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.ba9e3109c.0.tgz","fileCount":37,"integrity":"sha512-ujwKTB5MwvGc6YuyLS4xZr3hBe4veaHunnybyzuvMDbUVE137FRfyBDiz1gITcPbdVbsh1WH7f0DXLrfr7B9/w==","signatures":[{"sig":"MEYCIQDTVwouLvFtIldOGyEsGqGS+5r9I5Np0MzPF9AQteDY1gIhAK6QcmjCEuSVwY4JrilJ8L+GUOyKEppuSq0uGt9DPt9k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87XCRA9TVsSAnZWagAAQboP/2wDj/RYi+dGAholzIE9\nyqDx2vg08vzrEUGXcgktl9aj+xaqoNaXKh1QvihdqYIVs73gGzdbs4RGagVB\n2xJWs3gQ77eFGK1bqPGBFQfdsa0n+b8qnTsX3CsM+miEE88cXaC+NekMCjOT\nEdy0mcfR1ptHmCDRzM5BBgZt0qC0iF7Qe5+lVypjHX2S8ka3dGGa2jwFrPqY\ny57x3J/EsYZGJd7Bd1fFUQKagsjNYjLx4cT3ZuZxr5puv9TDqynt5YnoXKwT\nXCvamQQAADBA8/c7CZvXi79C3/SZN8HGkWbGMhkq5yin4HmtnDkL+W/YrQPC\n7MfVlHLOq9E+QJi8P9Xb7T/zwd/YX5jFOKXpeF/UmQt/9dB6hPIrAvhJFpDX\njqdOIg0F4cqMwLrL6nWRjrRC9FS2od1olZWSch4aX3LUuyYlcuWjRKWZb8gR\n2mRFJ63j0ne07K1bow1azRqkg/n4YMyYzunqqWI2am8kq7Oatvk9GBiC3dEt\nMhEU5rPIOiAGqx13ueC2r5D2YtNXyuuPON6eBzRMuqtqgaTVXDGjTD43/4Oz\nZ+oO/JydRl62K+VPuzmTI7/DptrRFGQkhwZ4H/MTVjSZgjM/e2aXbBAKf405\nyi3Y7wKTjpt8+LbRBfA/+5eYBkAyU8OqnaiTDs2UQtLPvTOAEfWowN01JJOD\nkVCv\r\n=a/8I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/list":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/menu-surface":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.ba9e3109c.0_1607454423109_0.2422387134855719","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/menu","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a54daebe46b8d84508facf868492f7cfaab226","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.1085c3b2d.0.tgz","fileCount":37,"integrity":"sha512-g/Wx+c3InUi3LmFHdsb03l24IdU1/Ft8d8bwCNNOdqxC9eQ1Ps2498KuCdLRApIf4XWz4rAboIQnrw2dq02vcA==","signatures":[{"sig":"MEQCICd3lb6aT1ort/k432TThPt5X2pVzpN3J0XH7zb2g3WJAiBYV4obs74+kHyNv0ChWVkioUdVuRvx1qooSDBuuQBmzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGmCRA9TVsSAnZWagAAB7QP/0INSag7WXN/6G6gH186\nTCxBLJjbEEiynD2wpw1tHRPLu6hHEKKzVaPlYPTQavLK7q78dn5wvJa6VTTQ\ntJXjSJ6pkL70e3d5o6iToMX/GhL2LnsJbyclpK44/IoyFkx1wvQ2WJXH0PQH\nNoJRdcD25NpfQ3RW7JbntxwS3iOK1tNHBNZ1SkutV5YJFxkRLZxfbF3ZuQvT\npTaMqzcl/qtq8E+dQynrZJXCwAX3iGF30kU4+IfLdDV7KtE/rzLonPmwwd5c\nbmP8iih8VDekixAuM9fmSfSknCNCrj35xB1sKZycghX/azlierMwVAyhS9tr\nWOxFEaZvoBo5Pwkc0XkZD/u/lxAFbgKnjsqHGhTMC6Q9lIDMgUrHOG5CIY1Y\nrjvuFOPFWqmBZFSMkwkpjbY9urzSkTudKRfnmQrKceTw/5xHCtHgoYQpy1eD\nQ1Z/G1fvkgcXlJ72lb6pdyZ7k9thM/HOQ+5mrGOqrKo2snsEDJMKYg8I9btd\nxlhxW1IxmRW5CJNi8fF2HcNUrCa++kk2GbGAhB1GXF5pPJ+OYjZLeT6ch33X\nM93WKEZP7KTCNIDpukXT+n1J2gBbIxquBcmkOu6vHu/Dp9cA7j1moyz3jZxy\nu2UAuI7Y2J9OruH53gwoQEdSc9s8KOY17UKKR93avkKX+OZ0+hnBsPhUettb\nYH3s\r\n=2YN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/list":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/menu-surface":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.1085c3b2d.0_1607541157917_0.15510218683801158","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/menu","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26caa53d2c8d5b1b929fc9af7d49cd39be00ca7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.c5dda809d.0.tgz","fileCount":37,"integrity":"sha512-fN9fQ/+rObMTFCnn2o0deRtRYiQ0KGV/FvH+wwIr0Z73x7Mr3oh7YG9Fq8XRzS/Ki5DkIp46YUfQXmtxw+nkow==","signatures":[{"sig":"MEUCIQD5XalPj/iVJ/naBqIpo9U9GDJ1ttoJ45csM10T5UHHtgIgWGBw0jjZ+JDw6L0MtPsK5JY+J9MRFpYSyb8TipLMyWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjhCRA9TVsSAnZWagAAPgMP/3r7p5uGuVV+HStFiOV+\nyZtXeKd4vJuYdGfZV5ONUDQaYDO4BLqn4fI6h4e2Bc1oAsRljh7EipEYsmLv\nx6QBvTbJlxQGF9ASX2Z1Hi4h5aVgV1cvKdfU1gYo4sHD41fI1BzVdzeSeFH+\nMRba34IcCtYi7qdsYqwfFx6fFeawerfV0klwIxU5fhFB6zxdJUedO5Kv1MUT\n97omQxY67p36xmTvUYayEVbj6Q2jdpHiRJxyVjy+sU/+37CUl3oiuNqb0gYi\nVZs2Rv07D1paeTQMCDphUMRmA5tus1d4C8RnNn889tawxmx7U+TzZ4Fmikmj\nLgcMwt2qG+id0ZDTRDDWOfN+jYED17cZ8TOXbdX2N/XLbOgrQXp3/AhJdINg\nai1fRaKZr+eMEPa17I8pWuoU4BAcLlVKsR3JlkucRlEmRoSWfaHLplVhVT6i\nyz5YpRLUxjZxUigoEi/ADgxPdCL7iC9RKg6+kjbl+I5GQ9Ob7mzkkMG3+7Iy\ndmmF2SiP3WZ23wTN0mT+jqJktRsrEHtswESvXdjfgLDvvcL5UFgzQ3l0xI6A\n6EOmklfx/bun7ArKAvdlJA2PSimfHMEtGn4zd5Lr3KFVlYbMFeIagiTfi/nX\nWRWWT6UgC+IOCf+wvxfEJgtLPLfqUft44hx1iArVydGH7apmxzy5toUIz0Tn\nf8Hb\r\n=soV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/list":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/menu-surface":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.c5dda809d.0_1607547105161_0.7883200525538163","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/menu","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfee0e61672487909c9a565f598f16e679f9392f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":37,"integrity":"sha512-u8Bt0u9GyeDnxpbTjt776UYK5yTFJgzX4r2eJ3XB+hC9V8fuJLaB0urUZUcqSnY3CEz7u3v8d8JIdkEiKRITpQ==","signatures":[{"sig":"MEUCIFqAHQgqTfa64qHiwOXvReVVHrYlj522z3nDRwFiOICfAiEAos8eakAvIhwtTUFYUoG4fpRnXv8fRBwlHawrfnXiarQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0T0DCRA9TVsSAnZWagAA4XsP/2L3Blc0I/7o6enW4MkO\nMwKkAwBR5VsXtEGm9TJb86VVPpXQ/MNvYctUUClcFqYAKV1VMq1LT8UkCveO\nkj3jkT3Uh4j58cqcHP1HOC5vWFLe1QNV0ON5+UW1UtlBPtXa2Ihcl0v6TS3H\ngwIgVelGQ8+NZJke5EvP8DbgNqqLUk2NP04vsEbOGjo/64x0MJfGimzY/WaI\n7Im2mNsaNDUvVs0a3TPzBw1lfdgo6bnYoHw1Cyyii/2gQ8KaIWQ8+NNVrjt8\nDcjygtx7/XUMVamZpjRL/9bdGz246xrcsSyzxXHHNFtnEWyfn1uB/9tfKSGH\nSTSnXz1iRuBnTEl2ZqiVWlLpS2J8UhIVyx0JyyiQr4Cfb5Y2CH2hBFVMQZPU\n88iJZgJ5ynRQaMMv01L+3rOUzypFJ/k56zRwo1MzVLFgX1wS08sJAjccgwfU\np5S/8ofj4kkIsXC8CQJndj+ZyO2MLBhBS/re77Qq9B0NUYypXJjOIrczjrzH\nr59WYnej27YiNOCw+LxCKTRESi7wIMM3IDhNo6VDQg4pxP/S9ZZs8Zb/vjyU\nkiQUhkxbOYPLZRM+R8rbH0B7A1cQKWOWWTiBwaSFy93WOXB8vZWOWnJWmLnc\nuD+hg0mYvgg9I3hDiI2VnHmomLrniz7nFQaq5lmtuiv5uRmkSiCgszbOAWI6\ndwcS\r\n=xFWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/list":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/menu-surface":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.f5f1bd86a.0_1607548163519_0.7721229429727123","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/menu","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42d444a4980db82d919f67cdb76d91b6d7e890f9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.00f38200f.0.tgz","fileCount":37,"integrity":"sha512-HXaF1iRxX8xDko0JPx82mAQYmqCJ3rkvhoOH0WC6Pbns6fPH3FdK6+E6QXnz4KiGTEf1N99b3T3FI3x22dw0yQ==","signatures":[{"sig":"MEQCIDY8a1iVZb7cMk36FiPJS457vqBUpnh6SgZJzRiimczNAiB+pEzn63qtw2+uqM5g+FW9TwSeZbMCAOkvJS/rwltqYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05StCRA9TVsSAnZWagAAWxAP+QE3cwSoKq5HcO8dBF5N\n8/H6v61ZlCGSEXhdxps6O13NjMOp6hCkAwRnRfhs3cQQmP6UxKDuaFm71P37\nUVWeTVFXAki7NST4kpgQKEJBrLloNwSOYBqfT+flLsnsm+nkU1UgomTvz6LR\nJoyJPaPSkzQas38zMzIFlmUmz7xUFH1f4CIVyfxX1AZHVd85gnMqljuY/qqK\nHBw6WgcgiVsaahD0T4YPzB1aGcnRjEiaT2khaudOfMLuL9Jc/SBsxHt2MOFF\nrZQkLEFf014LMsE5IroVgfq0mbeUM6uG/Nub29QAGlXsQt849UvTnbSguGgh\ncQNp/V2Om1VQAkTNexKO66OVssh0AaWJ4tup7LJEionBsLeJCKnfQAeikwu7\na9Ap1DOJubEuT75I6H+Poj0jRzzU4ETj0pZBZQb1vfMUP+qkFuTzPJtJJ8OT\npcynXmyujvtr16ZuhBuMyKDXtf3PH76MMJ3gM+Zrdgsuk7VGFCgVUfC87qnK\nSqHySBbWDMf0dXbxQq4C5NHfIufmMSuWX5F1ooFqKeCkiF/7GKQ0hgHCkepm\neC8+HlzNOCg35w3H4mu9M1kIIwq1/Uk17lQL2rCH6rJlfVHwcnVMOj9Q0Grf\nn9i++UGXfhLPsTyKMmjQI+Co03wD4NXDKBM+PEO2YJ6vlhB/SQ7Ziki/h+z5\nrNFC\r\n=wCfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/list":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/menu-surface":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.00f38200f.0_1607701677225_0.7310299073981679","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/menu","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"259a6681e7aa47d7624bc21b59e7083138cbf640","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.ac41a5729.0.tgz","fileCount":37,"integrity":"sha512-xLdhfoOcWcQ9XwTNJDvF6SeklxVeFYXQ2tK4F/fsbaIIjihlrPBleqglgrPfk+svvJMV9AaaYeZymoBlYCRt8A==","signatures":[{"sig":"MEUCICTq1ZS9eABLmwGA/3eHscd8g04uPamsPPkbBBIQmEPmAiEAstomgO8gOFNmliyqDJR47lMCZLg9EpS2TuOiUxdHY90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf056LCRA9TVsSAnZWagAA+S8QAIXq1J/lqzgUFupOOnvZ\nOs/yBc2tKw4zNH5AknsHITyHHW4zkwoGeSA0O2q1LJww/Thgr+inuPAX+Uok\nEqJPqquyH4hlZe2xZGuwiQzZqumBTHIOuUq2LiledjG6tTIfxNXyDO1mhEHl\ngHb/jbW7KcQDdO84goqRScreAeJHweZ1iVHEr6T355OwQbXa8N0UBHjyC5zI\nQH8Nl2MW9L9wdn+oTirQ58JN50bPt5tUyH0Xh8Mymcp6edN/lkw9JfPkeoHh\nFD3k/GVKlwrKSk0ey4uZekYNdw16CiIbuilXuoIRieZwPpvB9mf6jjGLqKiU\n1nFCoypCqBXbqsEPxHuX6OnZSJgQho72EQ3ujuN7ErpXd+rxkplVeKHCaSPC\nrWnOcanKRc8cagEKWMsEnJBc5pZVSBgYPSfEmV3Us8eQiw6tqQrao0s08GI2\n+buhFxWNejonOvvT8uJSMHCQUuTqsuGiHKl5SkTIFIvShwd0p0PibOiW+NTj\nP/SSUK4wcqpLGea/EnoG2hdebluN770WE2cNt5W040H6wslfm3CF/agD6Ajb\ncJX98MONGueDAuGn1i1DxpJvE+aBD4ZsdnLImkRpqRbQzaB4PiSEItfQLi71\nIJTpTsUhBcu2wZasGPg/zaV9GqHB8V2PNA2s4nPQgCA99VbonQ0NjGv1dHTc\nl+JY\r\n=Ymla\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/list":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/menu-surface":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.ac41a5729.0_1607704202907_0.3066235464959417","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/menu","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cea4076a29cac7f98a826c150af47d5edcc5f4e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":37,"integrity":"sha512-uQxDOuaNLs0C8s5xLR/rOOcuybq0iVf1wXjm89uEuCvajhnjsyqH8jl/CvXhkDhLzcHtnSiPB42t9p/GEJgyOQ==","signatures":[{"sig":"MEUCIBz9WfZis6YaSERTrvRUlJR5PEmiyUDXOqYUdcuIyh33AiEA8LIi3woH2agxW34yDYcE90eATGyBEQ0rBYYgx6y1o8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06c5CRA9TVsSAnZWagAAICEQAKK5KinvY43qtfbf8sh2\nx/gQTfPlVM8hvbuKSxFpOvs5gmcySRWdbeGV1ZE/pmrDogSJs8a6Jdf2dp23\n9zRp3RFwKCKrFCESgw2HN05V4fr0zHWRQ94yc+mljnNvQYP0QqabkDF9mi39\nEGBQM1yGoRUqqsca3aiP+TMuBbodUeQIYmC6qhGWPsas6d37TrL4lrMBjCJT\n9VtB0CfKlkbz2XMcUCFcFBHqvxbGNLmPZpny91e6QnULg9rsyGiSWRKVqIeT\nWxglxa6gK75937e+AW46Kr8qompczmBMrJv8VRqJrBezHThXblKpCN7pL9X6\njPGCqqwdIoCKfQh0pCeZekeHc0+mCFSzHf0lhqhqmity1nkHd/7S4C4KPDcQ\n1J8U1H1sZP7K8FO5+7U2d+dUK2ir19Zen2KTzI5qmu4/kyRr5jtGaVnNcDoP\ncer1b9R+hE/bdXrcexOZ8bj2CJ4Yk6xBXM++MeY4h32iaBDjLzoYRmGP1QJX\nTJUsGLroBvHkfabdosu6ulq6va59MU/fBTKEfWEjMACboRR4+xI+KjJ5UdnQ\npabhUTuRD3XIjO2y08Z+dadYH21jtqViFk8VWb4561u2zHzJyyKziiyDgpPk\nmakm63sse6NzS74Zh+vp5b4ZBDFJRDRVkGFCEBwP0WxYTTPjaU1Cv04M0mtg\nZ2oW\r\n=eKpd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/list":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/menu-surface":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.7fe0e4f05.0_1607706425084_0.3121525823962066","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/menu","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e504a4989c86b366d8523fd68bb2659b9d4e9f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.9244508bd.0.tgz","fileCount":37,"integrity":"sha512-LdXbnw49v2C2GIsxuVQHnfrL2ShQTDycIfr8OP11pY71z0bkh1KzjjeG1ilX4vASgniGj0h2zItzpmQYz7UHog==","signatures":[{"sig":"MEUCIQDSrwuaVD3RKWwfgX+0GodlLOdOuWngHQkrWgOMrAyYWQIgec+nMOzShG+P8x4JowtaoBbVHWjR+fea4fzsUb8auyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08PKCRA9TVsSAnZWagAAIQ8P/jJbsgRW6N2/NQMUUncz\nxIdIYe8+gH2lc6db0pSSK1pD9R368OM921MoOk2d1JS0UsrZB1o9EL4db4nE\nhC3CJ0korn+KP309JIfIIlGLCpBlz4i8ZgdPXT8jtIjWoUqlwHKcoRhu+VHJ\nNsQASSh7fqsvP3JPD94UWrjM+ZWUeHHd74XEv4w+v6fsTYGgQIGcymdxt2Mp\nVCiOg+NkeRQRu23s1ezbXylkSzW1dwH/qejv3YSI4XzJpfFNxAy5JJZt8CDL\nC7riIlc9Di454Q7Ho5Aw1NKj7i5vEjDbJYiPi9fXDfcals2DQRJAIAc999Nx\nUWDw5LQg7YUT7G2HU7xd9c3wZ1KZlvvK2ZQfintryyRi2iYLSwog1V7NJ2sZ\nTmkZgIsT7XAMlTilTsXn+HGCa2Y9NdEBivYCO65zXEzVNlmM/ckNrdtpQCa5\n+ARZlX0HQRdY3Trq/jlwVQYT9vLzNpScWfEOStOnO7l56jgBiRq5QbmtTwgU\ntiQrcUovR3u2T8KbwF8N2iF1RW739qXk7Bd06SA7VT9oO4tnyEhRhETs2VhD\njruzvUc1dSSEYml+BVKxX2WNBfHr3rlAxvfObDU1Kvs5s8xm3Cv0ykLIt39Z\nuxBH0vMZ9NHtXaIMgqUbITvPDT//aLIAqzIffTPdEquDYxuiYmr5OsKqN0yr\nMOHV\r\n=Sw5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/list":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/menu-surface":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.9244508bd.0_1607713737814_0.736499184088973","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/menu","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12038054a262c5d6e468d5dac204585267fff560","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.384a8eeb1.0.tgz","fileCount":37,"integrity":"sha512-NqkF+ttzzwG6AQW9kJCZBy3MrjamWvOfH1Rhe+nykOL/0jpnm+0SJqIybd7EACeVO6dUOUlOU/HAuJpn9zTY9g==","signatures":[{"sig":"MEQCIB5NaBLVkXYRwRib4VmqCf7vZ+QHfmS/D0smYKv7KKLHAiAgKkaJ0ehQc/rDQ8PZr8My5wI+g+eWtn9Y6ZOtrnYp8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3YCRA9TVsSAnZWagAAJTEP/iWWsqMHH04vBQNaqC/L\nSZuunEYdXuYcMv065vxp0k9MbVzIADX/7oO8UeDxeNVM1wzElCzlffeSvVuQ\n+alnaBeUC8czwZfle9b0ZGt4XlExHOv5MawqfmBGQQADtftB1ufKCuFv4DTO\nyJTxUodyJeOUWjFlHJ3Wl6bYQWRIzNik6qD18iDP70neBhlfIK5LU+LU0aV1\n3L/5FjbPLeUVCKCCEGprcEinrSts3Y9yeGNVcZuMO54pcwTh/DNkWgk3X8k0\nOVEF86Z8C7zsoYmqmR2Bpf86g0skSAy3PAujpzyoPm2C61f/Z64S320QLiK2\nmjod/YO+mZNZhvPA3DVKLM/PHAQrCZWMN+885TbGmShAlcVXPHa+5LOGZi1p\nDhnQFI7KVM6BIDhaHJh6iBrM4YwHxyjV8FAI3iUns9gr941G9r2iAl+45UmT\nN12vYHIvs+B46jy0JFvf1QjzlUNVYcJpOCDI6SZc5N6Kzn2JMWEPSjIyFh5N\n4/qPuuyUr7WAw0egvCj5AorhDLjQc2jZNMR8xYnPMu82jYMDNxnU+/gpVfHc\ncjkAEzh1fx1k030xR8Y42qaNgxPG6STGs4n30xucOLLQTb0iwqKSKGBB1U7q\na0HSmIcsn5HQ8jEkAopBgQ3x43fZ3g7zqy1Pa4VcAq+MPC/RTH6ZclPPbb6S\nwyU5\r\n=Zgzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/list":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/menu-surface":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.384a8eeb1.0_1608138199497_0.6333493281774281","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/menu","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5efd35a173764e9d71c490c1657c1f971df2aced","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":37,"integrity":"sha512-sCkKibzO1SEfGmBD2CNKzTsPkKVWx847P4hPe4jqIv5f/xfDA1W9kG7HcuxTAfFNz8Jbbabolv8QAMwfOp9PLg==","signatures":[{"sig":"MEQCICXnxmIscbIGl9ZIk8o+t9KGOiGOZW/ngCwoh8yRfemLAiACoOu+Y+3bOzbj2Ql0qh/IL1zC8yl3/zenid8Mqz+eKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lH0CRA9TVsSAnZWagAAlagP/1EW0hWhkQWfzaN3eUvC\nUy586pKdJOrTfFoHwtQ1STjVzVidDQDbBWoPezEiWEHIGZM7KVi4BD0cGzSW\nKhrI4W+A28lsuli4Ndq0Rp3eS1A6UmxCq6od7a5/LmDjSazLCNBSLxJ7jNAH\nkc0+V7UyVr+ehBy5IwZ1memS7RZzz9axQgLLyHWNgcy+oelqPbbGjJnGBFFF\nlPJpD8nqoTnwupU0+DlEXINSmAAktNnX1XPVFAmxM+L9fjPH4Nxoaa2cII1j\n5WdIpICCx2XWnhuvZtFYTrJjfjO7xViHCfZAz2lgKK+NAnCan6I9rJhegCTW\nJmHBvUnTb5Awo1THjBOVkvONTPuauqdkVAasZRS+QXavgvnUEkCf+3aMOI0c\n7AnVNiD1eZLT1HnorMfmDH17VYMDmBwa+/3jN8wrMBm0UbEFMBvG8BuwOdWt\nqOAwvPGKWyNoAuxdUTSeyFXAj/b/itfxp7YPjKd9EvrKlKIn6GeRWmDDyU/1\nqlEMBxuvzhG+KV3eLvytN2WS5VKDFHXpF3b12ZLGY3+IeY3kc4ErsbGh6Dzn\n5axngiSBmP1RZsllGzPuJsdNaRly5lxU3JlgoYYM8BNs/9i6qrRPBZY16wkN\ngSpMMZL432rNGIKtTXSIgAAIyJkXoEXr9H9H2jO4eWizLFhtho43S0k1zOI6\nKk4G\r\n=kfDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/list":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/menu-surface":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.eabf9d5c2.0_1608143348208_0.09331231715120447","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/menu","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f3bf19e42cce5b9762fb02c6f9eddf381a9790","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.30fdfd06e.0.tgz","fileCount":37,"integrity":"sha512-+PI57N7cuY+455kEDJQWGn4HvvfNSkcVRDPUn7CnAglm6al1PRYG/2xQp5qJuKUoW4fJ2VVQEUUymXhmNEaX4w==","signatures":[{"sig":"MEYCIQDSOnZdqoN55xNxZAwmIvhaBJkDkCH9wGtoxjORhPz3BgIhAJthMLKgvTBq2f1M33bo5aBcQT9hEAlm2MW3Kf2W3HT0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ltRCRA9TVsSAnZWagAArKIP/3akesBSIpk07iLhbcWG\nlabFyld4xN6bCWbj0nrgzbJ1HVQBTjeDApol6sZqsx3DsssoA2oIwobfytNs\nAzODUlHkyFxng26GJkgjxL15PZ9I7JnkUnRWt9gzkliR5e/ZBjZ9v8PqJOjc\nl2AQqNMq0ZndB5baDBJWaLFG0zekVjiW/PIAFxZG0NMCrM815Z4Vt7HgnAJQ\nrJprZhasx6GPErKwUSs9rOIOPxNJzallVlexcWx0TS8NpAWfdZb/dgwZvQlU\n+mTjncfr+Vorpt4VCD0o442woyNuhLTut+IkXy2XDRMUBKshRvJ/eYMAWPUb\nRIzCaYsQqH+o8B2yStgBmXR3eju/DfKgXRw3gGmjSLQ/5f2pmi+4rKX8Mz3/\nhwNVN2/wHcUMsM1AjKr73Go+6ofIyBMA8yKYr00dpUugEB2HD4mCIcNIIv/m\nGiVtTSmrKU9jZMKjDG18yoHGFyylWcNhRDfXMrbZnnSJteNWoYFOA49lO8he\njKmuNRQmjEZi0H0FCHWymo1D/pxesqXJ7WuIY7hu2BVuSEKRirNHAr6O5+TA\nVkSQxd6uHy3pnWSE/jg94KAW093h+jPIbgwpnTp/U2TVqrVBIo3sPVdkHLJX\ngh/2S4LZ89Wi0UsfPuaQXvOLIvV+ni1FSiuI2sUzNeMwg6z3xveSfLmJLNff\nPtKo\r\n=KBVi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/list":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/menu-surface":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.30fdfd06e.0_1608145745260_0.037135228097226136","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/menu","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f551e3f4bc24b826083eb9bf7c62367f528df69","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.9590a8f90.0.tgz","fileCount":37,"integrity":"sha512-lQ4eiCeeNgokRrwB4gX2hLQW25r453x2fHO/q+yG8EhqbVad4a+DQUGdiM7wqppEgqj9/hsdYUiUwLNIZNc+Wg==","signatures":[{"sig":"MEUCIQDVUQRRsjTYegd6UpukNIklDGsJTt/rpysbOtSjJNSdbAIgc0bM/ydYfwrBg09MqnrcHW+DseSWSOPRMsV+l+I4zD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jBKCRA9TVsSAnZWagAAOJcQAJiejxVRkx1CECJM7Hhf\n0aT0MDW4uje4geFAMYjXkDcsQTTeWK6GgAAjozY3M0iJuSNvR4HTYQyjMef9\ndZN5EcmJywot9Hn4ZbTUQaCI/P9dZxCokKfmuEYTsOk7VKJ6ZipglSYUefYX\na+eCAVt7qIblrw0RRrIrrrVGHyyF9VS/22XDfXjFMb51fGLgSW4ZY7eV46Jh\nUFwQjGSwBGvdTVhCLgdpAjmEtQj3WuX1oFCCxJ2L0OYu6+ds1CMU2PZKK+fF\nMGTk+kGC2nmNfZIu76Oy3J8bqIURlceb8B4AFI+2XMJf9SCVJEh7GRHDZvMS\nWERCofuR+LcuxM4jay6xXZig2lphxFCE2OdW1xxhmBqXyN9X8MdXAZBSm7kq\nARX2YUXe8ot0hitsmd6Dd+38WZjdh07ZA0xDDdwmvOXqLGWb4UN85UlJ7oWj\nj3rfNOrpTeOpbY+qHatGUZyuGl14ct+CjkdNqZsV0Hzi/ZxaBetCanW8raYg\nLo6zDXetcBwYeexVp3Y+5zSfO/npxB42owi1xSFb5+Gg2ilAf4/WWSBUTwb2\nvIubu7FMpjpyBuRbwGej3Tk9AiSKFFAXa7IcmL75KEPsam4tgw8DHv12cdOW\nrVTxsfLMEf0b3J4zdoh1yY1+BKmF+PM2I+6OlbWpOPrg1CbSWH8pEfGq0c52\nckCg\r\n=Gv0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/list":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/menu-surface":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.9590a8f90.0_1608659017737_0.7010011349766887","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/menu","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ed70b29c784b009ef94e0e6564f569a8a4d8a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":37,"integrity":"sha512-qzVvma979D5DklfnBduej9g+T3kd4TQYZ71KcoBCH2bi5CQxdZWvO/FFGhCKfqrq2mnTPk+JPOlz5cHGvlyx5A==","signatures":[{"sig":"MEYCIQCoYRpyoty/shi6alipKtk+nUDs29fMmVJsuhJNM8UcOwIhAKL8Ejg6wvLRHwGNhbi1WdWlPSw1K4gQ5wskbD0ERrSK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nwGCRA9TVsSAnZWagAAw8cQAI9gIHQISTNZkzzUXjI9\nAeq0N3VBJu0DyEEixtIN8oFKVKMizs+g2aF1K8jD5RZudo0IHolPXqaYb/eN\n5k8l62dFj0wZ7D6zXqVodWrsTDeJe1BlSSf0L0IKMpUD57bkj8Km4vI6Ehyi\ns5N7yi/fTD889xzwuJDX5f/5xJDHibW9nVFxpdzGak6tj3YXGPpKWDFTBGKI\nD8rTEfa4yee7+LgQq5bn4CINZm+04zM6w/FzsjuPX6SZwwPCxd0Dy4o0CpLS\nBHOdFHdOqdDEyxJdfRhxC2d8wrAaibBcA3KnulO8R+n6l8jkBW2tVH423KOD\n9Gl1r5+ExJgsWmyJ/PFfpSpFP7kmgwN0aRVL7cGi50tZR5Pu8zfi338WrE70\nN4XJHkuDLTv1HZRT+DkE6rULYF0FKg2Q/xSKCs+4tN6Fb9gJbMug9odrRH71\nEy1sX3G0I0qmS61qwhHZBcjqD9G2UDKcnk1HELSpYoY5WhGsNBnhFuq3O5e0\nI1ctAyBCyiKR5ncG/xhusrty36WFsmU06ApZnsdRmz/fwDf4e2Exml1c2o+q\nITg4V+zbpS6YGQ7nVFO7AzFAMD7q/TF+NpfukZPYROIMfM9hXvGs9RZB0JS9\nQRTGZMQE1QWcvZfLE5etvSIihhdLnUIny5IgR00djvbNPVqVTZK58vYA5hvi\nMcGf\r\n=XZsY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/list":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/menu-surface":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.f89d8b8f2.0_1608678406274_0.4654148443567514","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/menu","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eac9ee3603e6e14bd84927631bd92c282aa8cd46","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.fb194dd35.0.tgz","fileCount":37,"integrity":"sha512-TG5RpMc5L1Yoa+1rt2WeP09OUvVrqI1m0+15ZKjPOTy1wiPJdaKgsHikv61+wyNzFVx6MF+m9iayfr1JGNQ2rw==","signatures":[{"sig":"MEUCIFqA2Tgr1Cnrgrm6D4bKeGd1f+jn/eeu7UM57WtJS8rzAiEAiXQGLqnNLgoxK/R6oEsAT9isjeFmjK8LLdTG//jFeHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kRICRA9TVsSAnZWagAArx4P/09On9vrKkBg+HEmDzwa\nVE3b2s0/pkrYK4rzyQCPhHNwQfBdfj57OhJ0AKTgPIdWr4xKJLtq6TbzhUoa\nkadV9+2NYqbs5CTyTI/MnmkV0R4ntrmSSk/DJTO0cOIbcBi+7+zEodTeSd+c\n85QKztblwXGZq9lHUZkZXGVr43FxXfDVcKGeSlIwTHSmZ3Fo56RG8Ne4rWKc\nusE6G9K+PvILPkvVljY9DML0K9G9dAmEK5ElJCoBPUKTV0dedcY7IQnwZRYF\nQIhFc/FxaT76k966IFw7M0bi+hLtuqEpflhVeS2QLexhH+rR8MhjYHV6PeZY\n8ShlbM3r+C5BaFB/lV6vmMqWbhhpVqNIOJ1XknK+SoA4gD7szRPtc5fGF178\nJdQAhxxq3xhDBCQbgK9JVfOYB2afLAo+RdZNteAIyBWu0e8unyUcvlYvJTNW\nUxd60BYcRs8zyKjiBMjO6pTywkAQmhxyYsr5nHgz6eiflQk5dCmKxwF7vXcI\nxUmLkJMbou0X8V3mYDnzvNWBQoFnWeKp++3d2HzeGIHvgM8605MN7SyIXMsi\nfpKoCqPydPvObzaQC/rchhOoPoL+cVEj4/Q1ozcZv1ZYb/WZE56OaJkSHzh6\nTnFkWPN92LDNwiI7RluaCIJksG/wHmqbGcpCkiYJuKlIQmtgtSNXrHBJeebI\nEvJn\r\n=n9vt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/list":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/menu-surface":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.fb194dd35.0_1609188423788_0.05695745839808675","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/menu","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c76fb3b870ac46c1106b85b9e1685135044d1b8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.64f36e287.0.tgz","fileCount":37,"integrity":"sha512-FkbpWjcHOUg7DbL//yyaEMEFkpQfrUFhxGjs8j9oB8ojXXB71fO+QgG1n9ybF+6S5aujB8GFWsAPaSlgABotHg==","signatures":[{"sig":"MEUCIH2DQKAK0PxNLInY2y/Af4WibkfKf5xbBie+9r896h39AiEA7h193oSTwAEe1Db9jm9PwNbzHa6cta7tWAE6LAi0VAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmoCRA9TVsSAnZWagAAD18P/1nly+k+Z1WEK1kHRd1t\naTbUZfIsjGj41bRspPFxSntKkbCw0vpEMP07yOCvWVXO1mK3KiHveZoakaYV\nfVZaKaKBULoXFC6hMIa2zcd8nt+JnVYru181Zp4FqyyY3Mu00VggQGlDf+Kj\nosis1Nlqf5cpjVR/emjuBOeh0sXNuGvfPdWSWzXp0f1YEZC08jA5eMCnwqec\nELfYXOZDTMROPRkCmL4nxWPx2kJ2USRzheFyEgBfXUFBz88v4g/4r0YL199s\nbPmGfNuUScMY5z+zHHNnED1Bn40j09Qdv8RtzdLuCNxwKEno6p1StHeEYQQK\n1jRZj8lzGQOkunMizCEH0eetvXkHTTz1XyC1+/Ms8T/d7nGAzs0w1mrOyj37\nsUxn3UG3CneoSkLysxizCAkMUKO7gcXTzr/5rKWpcaa3o3Ra6/XTno2IQxlk\n1rKBDuijLmIzSBkvMk+atuJ/Us+Kbx8cO6JEsa8YwnrrDeCOuE2GJzdOums3\neglSKG+a/sq8VckrqDWzBIBy8BiWna630WRaRYtEq/tFN38yJbfy73u3EvJC\no1Cb0/cDFWkgt5zGiAGGENjoZ64c1Cuam2i+RQuGO34ui54TKVfKOx+MoUFz\nR/QrJ2mZNH7CDtxav9s7hxE4JWHRSDX9HaYM6l7pGciuP2wjFuOzBQ75TRyb\nu7a2\r\n=naNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/list":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/menu-surface":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.64f36e287.0_1609189799513_0.9886029063093027","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/menu","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae14c7cdbe5c6cb13a8c8cfcad3e9f5c2ce8b02","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0-canary.b7bbe7022.0.tgz","fileCount":37,"integrity":"sha512-EBsF1RrORcbgjKIRDgsHLcSZWHcyLW2rPHpxkJsmgXtaZx++59KCig23tJgi3H9/4S2QBzCfgJuTvKV6g83Tyw==","signatures":[{"sig":"MEUCIH3rHmB389MTjab9LLBsfuGhFecC75Z/Ox6GTn2QSr1tAiEA0SpMs3WQePNddXOx9Ciqjjga+zCzBcOdiEoEtyxw2+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63o3CRA9TVsSAnZWagAA8g8P/ie6KRZPv84aWUF7sXtZ\nW4hpK8HPW//UTI/fb3qtBgeZfWE9v28emHnIK7t3PekX27VRXwDNF2vesypK\nBEnHQAYw7ynYB5v+VawFCIZicdQ9LlLrgBPFMkXGVLrs/mN/OmTuoVXLeVuF\n7qgjQw6Ubdvp9YoFew3wntYYYp3muEJkKB+oT2IItpwmD7Ygs3yennKLU9me\nWiZKbWJbSdpHx/V92OS/IjZkDBhURUrgPFLlGJ5YIfhOSVNLQ2Tr8FC352ES\n97EknTygphv5CTVvr+6Hr8n/+CvFQZyUv6XVWH0QkFfdFNOtYORZ0ypUEixH\nkLheGILPQMlGc7hNCYbf0I2oDwfuaNnXTqvTC9LUByl+yiazqlVeWb3Sq/C6\nsJTDtRrjGg1VRS5SzvFxKc0umOIIPk8QzeEqM1F8/DzcG5FZEq6HmN6+NNHy\ngFhIcgfR1PxtRPxusDjJCPHX2v+TCQUbl3oz7pMQnqyX0MQ4BqRI2PSRN5UA\noYMBHKyfJjY1L1WIaYF5K4qyBXTCUItapi4TuZkkAFEl1QFrBGD8zdPQH0Cc\n7U+/k/Whvf7WqMiajtLzAuMtc6+ADdIvFFH9vBhLbMXLRUV/i1US8tw6i8JU\nc3RHnmo1wMYa4QIpQ3/CHCYun1dbssR+kRw+rmover2G3s0br4kuQghO1HZV\n+ZSn\r\n=miuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/list":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/menu-surface":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0-canary.b7bbe7022.0_1609267766840_0.3063686997690729","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/menu","version":"9.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c15d85f2ca9f3d70dac4f29eafa6596c5be05051","tarball":"https://registry.npmjs.org/@material/menu/-/menu-9.0.0.tgz","fileCount":36,"integrity":"sha512-tvyFVa3lqjonHJf326Q1j7VMN+Du3guIvrhm72QwXjwVPHJBIkEysI2+ZW5IgjHKC2KkP4WzOP5+uVbqnlitlw==","signatures":[{"sig":"MEUCIHo1PARnX5uDqZ0NHAddTuEChupEZ68S9LKRL8qbzm7YAiEAqdjPHGJliLLV6/iGC6c4W8QAyX7lwmcrmVX164Qgqtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":674837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fWCRA9TVsSAnZWagAAWCsP/0wjuL5hELsWpqB5sG0i\nsJ/HoLWXLfQoYLP8TWQKFly5SV2HB/aaqbcRHBwFcWmS3me0bmg/JfyuMSr2\nvCiRQ2uWOjogNe1t7V0Xnr0Jm2LsZNb4jliJC0nAmnDrackN56S0Cg10qrHe\nH4tnG65/YBig4o7yNBDlW4nxqB6X07R3op6yUq81PGZTgJea93TZ0Z3f5dVj\nyIJbSjZTzyYs5rlEIIjSkYG9VdpLkByex/5DJh+PjxuRxk4Bquyp0PEFga8+\nfgtvqrNfISKGh9zH5PfqtKlbT4gDgDuR+PtJWvm8TAbxeB8ymlDTtZVicxbv\nYJgYbXGafGXduOIo2+kubhkFK9ku8/qYRJjVlMmsgPkpFSObfHu6xJYXk0/b\niphaVKkgC48N/wZbUX0uKe2/nA7CEXJUD7/ptuyg1sOgjkKduwAczFWJr0Wn\nI7hLjSk+nQwc9VQUVF1+Tg1BaLjJhdeYP6Bv6gdlbBg2THcck/KwBtwM0/Hm\n3ubxbtjdx8bTaNmpJh1kRZCkS+ADLsgTnfI9Wx9QKU7Jeg2KIJ1f5v2fMBu/\nNtXQ1S6DBz4TgiGu71EmylbZTOoCsHV8Q7p+u0dsd/fW4NWcox+7eQJ4nDR5\n3bPWq2cAsjLe31baQk7YoeScyDYmTxe/wY8bWiAQA1U9Jd52GgaZDj9LjyY1\n5l+L\r\n=54SN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/list":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/elevation":"^9.0.0","@material/menu-surface":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_9.0.0_1609271254397_0.10767545383589083","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/menu","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1007af45540c51fd49004ec48bf66a649ab520","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.776c18681.0.tgz","fileCount":37,"integrity":"sha512-G0fzQdcF0Pt5XaDknBjzUYbzPU47azlKK2OQNy+6jt4fDBnpTLdzJ9SXUzgaEmu/rH/vzZG86kzO41lteOooyA==","signatures":[{"sig":"MEUCIEIr35G5GfhSsHnGk7KGVXj59bXSNED5Pp0gYh+HJ9ZWAiEAlU3fJLc/iIpLcgtYylHFBrdOXm8HqHyRF5EzaL3IsmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68zFCRA9TVsSAnZWagAADVUP/RA/tk++2t/C93FWnMYJ\nLr+iiVLXFwKMignF+ln3CAFyovk4lTwYifZGrU/Q2RX8/SZZr2j5DtPJaetT\nIbv+emg6QJ6oXupMM1RakBnNDcsXaP3wmKQF9rL+yvd13QDOtWGEP0tKMm25\nM6iXs5nDOL6GSUOe/6prOblcRIBI1eqbJKUYf2NEDbh60s411C7ckZ2Gh5YD\n+qmZH5679r3ih7isiJNKxlkSXRGrv5465uAT/h5YcETFy6Bx+Qy7Yeg6lzxi\new3HIz6vn2LZClXZlayi5T1UlBDOl6mrRq/avk/PO5xWINtCgP61qSIaJD6c\nop6YUR669kbcDpKooGeFbKZxwOsd/xSSSDvtq/H44T70TEvTCO4utZT4NrLN\nP4fG9js+ALGfc9M+NcuhFPfHdx4JuTqoWTFRZi4WqEIlK0NZ4hdyNcOV4cO0\n20ISA+GaahBeaMABjFouCAs6uxWYvOIZv2Dd4l5xUTvO/gfI8+S1ioGe5/og\nf3l7WYg83suUxdbu/wKo5tE5upatETfGcRqyDScRZyYVYPpbU6UREzb7y2+y\nSE8L5EaF3nr44nAKzKZSL3cG2OQ/58z8/QqdQ5LNA0ptFi5aRELO1I44qfDM\nbY057E2yuLUiiadMmSoV7sFSMCRqTfs4meNhp+RM9iNlzO/Fc628BGbUPGjl\n9nX+\r\n=SB1x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/list":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/menu-surface":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.776c18681.0_1609288901015_0.1731884406705888","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/menu","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0942ca079d4a87c606abc31bd2df10901c2bd6e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.671d72d95.0.tgz","fileCount":37,"integrity":"sha512-jVORSxy59+tKIQluRHXXcZnXSI7txPv6kKdxJIJ4gRF1QIsqn1poUoFsPnnOh5cQG3CfMCY3c5K4QyszjJpKoA==","signatures":[{"sig":"MEUCIGTpwi17WF/ddgmQ5G8ScCofeQcyahiSr/SYQXMWdfpvAiEAxQs7kIHmmhDwOV2khh8OgNuKJ1W5DHvQucW8xeAgzYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9qCRA9TVsSAnZWagAAzr0P/127pm0Pl2mVbXZOoWVV\nJPP+xFckZmmegnBk9KPbi6yr0UzOy0w9InYzYFtUq5Q4TZm6H9d4+42vNwTT\nThdHdTXdG0zMFcB7bekAL/KFnMzkiFImLv8FS86npsGrE2wouYuf8CUrOBsE\n7fW8n4r/X7dxZQqjh2/j2QvBsnjkuAhuCARQJALdizXxVLG9Mkrb+lgzmPfu\nvMZn3hFh/ZKaHXhD+/HAloueO6T/1OMTRqvNvkR/lE9TYne3+vK/k5ILowxF\noyiiXcVY6sbQAPkVLz31zbUnGZi16mpEFilA+FCY1xX7hIS8iQ88IF5Rl8Le\n37LGVIE7zYELA9618CPkJwykXqyDH2Twp6/Ce/IEiHKja4KZ2dcMOl35D0qX\nHoTgfoXSWkANeGuYB+qbDpaY/1NlYX8I0xXDm+iuZnwYAV/uBm5+Bty+e49+\n1SauvHmmHi5ylapAf0k/PdPV347SSaqw7Ws8IVWw5xrIehEq0OeI5mVRnXhz\nKDfNXanyMffw77QlwRFnWJ+ZBFhqQY4A0UfdxyO5CrYRSt+ztXcI0ytfIt7M\n7G1TtFdHj5SVsetBV+OGkpzMcwIFNtQ6Q/HOC8JQFluwgbuRn6kKowVG2Grz\nyhZdIK7XOnsUvkh8r/v+Ak0HdLi3hQY0fdF32g6GUGeLXejyXa7BaraZy3Ph\nnh/K\r\n=C+zE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/list":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/menu-surface":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.671d72d95.0_1609359209849_0.010048771122535216","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/menu","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a623548cc8a0b9e9c70ef80d56e93bbc98f663d6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":37,"integrity":"sha512-oQ9MEqEx+m9VNM+M1uXY8+xP/PkUQrpDiDH8cIGZ+5Vub6TIdl0TKvtG+zUV3N8VWkPLEiJ6bIOwyI2XLdjuwg==","signatures":[{"sig":"MEUCIBkxreojAaICDJ/vQ5llhPtaWrbc/Ag3go2F33q+qYnFAiEArTdHupZGfIOAsk5rNVaQaAjYkGg+m2KJexdEYyanpoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PWRCRA9TVsSAnZWagAAgkAP/iH1gv+kDLh+zLHqU9rh\n4PDnyF3qTeDTTDyPLJeBrj/9EkoscfgTErQmeE94rBoQuT1xoWo3q4G8MgpV\nb4QWyBtsD7Zb+6edQDY7Fm465ohCNMi28g8IBTU7VDrmHZwV6cNuxvHn1IFs\nuNEf17RfipXJK1NUM2bnRN6VDe/ECWnSgp4AlfZPJ8fOz5Ek1yTL1aSQePBR\ntLvCEUHF46iiIhXGVVmm50tGKeZtzbMrVHapxE/DtKwSLJtKNmhXsAh/l6wT\nqnc+VrMd5ng4eEtWDTINzPxkD7FIlHnG3WJFEURa6heVvnUlzYAf+bAKOw8N\npyV51+AbsRtZP0wS4i4dDu4Bdjtn45bzi6XzHhBglcWi7Sta/oafyGj6m0Vg\neYjZwWIK9ex9qz1tAmqXCnxRNrdQ9QyYRkE/lR4VSBpJLZ4FcgPAV05/2edo\nqXuO6k+xyys4KvDpouKgX3WEaee3igi+22DVWvugBpKJlMOxXAaNU6FNB1Ba\n1b799CqiwUlKIXUuBzS33KwbkXJkeHR0lZTH6pmnP3qFEMiO9bcnBd+qT8Bi\nJxLPUJXml6c3STbBS73NaV7K0F2mOngM2Xmc6w8IsiHaIE4oS/U7ZSvQ2UGI\nwCsxsCz3R4WRGVPWxlLaRGWPlhBzmsGO8qs7f2oA+rwexNtK3yxZW5gl/BmR\nFDSS\r\n=N8bF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/list":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/menu-surface":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b4f5a1c9e.0_1609364881183_0.00203408798749094","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/menu","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5ba0f281e0f80d3242b9db0454e3bf3cd30f7c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.a94bd8deb.0.tgz","fileCount":37,"integrity":"sha512-k1fPzzQsXfSZG+QFkPM1nfxwujckUDjwqBT+qh2y2qozS9F0l3jJ/zH2pkgKxk3CF62w+F35LfnIK6v1KkcWUg==","signatures":[{"sig":"MEYCIQDYYmvSM95X2p4NADhcfoh5/CLeb8X97Ri4mtUG5QKW5wIhAKvarjPbUceTJPwRt2Zyw172zyBForf0sbYSXuVO7lFv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PnHCRA9TVsSAnZWagAAcIcP/02B+D/xVpEKf73Kia8S\nozsOidcGjrEXr6e9SjkdGOnNKyFd6HWBjQX42reIl9ARAofeVFfqcStN//2U\nZNAT/o1iyfBErSzzdbC3qoia0wlJOt1I2Tm53RgWY/8nmqD0oOJwSzydj9Vn\naCKGDZeX5d60GdY8vVqul92/UZpkWL/VeFzbtKnVjq0Vp/wHEqWWgdyuTvCV\n2qMIZ+Ul7ZY+UAUJcodKyuMSsimdg4EwaRTqVFkY80Xevr18kl9UYXig9//A\n8M2LklzLAuPVrDH6pdZzTHsBxOgHL6lkiEMyb+9SrCOAAYazBGGXR4Nny093\naHZd6rhkQUfGDq0bLDLgCHBQbO7NEVhytr0wcG5HjOf6159mNwgV/3b8prbf\nb/fr5x5PuK2gYOlP/Q+ta5l1cfGZUBU8V/jRGjEy6NWtvZ/tST/Rn+k2tFsZ\nLbZjIOWNishA9bVc5RoEY7i2JgORLaOWBZ+YHBsv4QONWXN4p2tcczK+7z8m\nvb7k4Qc00vGFP5leOX7Ak2pq09T7QLIKC1XQ+xN9WqVAXrESpQLVF57unyXn\n7pcNKvZjdI0UYgQGLtNc7i+cd6eq2LZhcrojtA/GGrm/kWa/6WC4LCAa0ddy\nzgqwWntw4lx+CM7MJbrggOhiMQ7ao6+/wzmClGl2c8CxflQnVYVOvdrsNU0c\nWXen\r\n=dJPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/list":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/menu-surface":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.a94bd8deb.0_1609365959334_0.5559812034616318","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/menu","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae361e91771455351dc9e71eaaa7705836788559","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.5d128511b.0.tgz","fileCount":37,"integrity":"sha512-alwP5wMAdTE/Rud5pXDBP9EQLKxHSNpLBHN7dZDfBs9QrDb0gmjQauXkcJ+86asxcyI/Q8iZKbr9BZt5ASN3Tg==","signatures":[{"sig":"MEYCIQDUEUZNZ1POfOCufULUFffk2ugBQaoS/iqq0OCmFGv38AIhANWLUc7Mku9Tf807yQ074VTFcsIFB+fEwgwBH/lZ+LLC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pr9CRA9TVsSAnZWagAAJngQAIsm+1IVqynHsFpyaZ3Q\nIYve/jy8cJsVpevlaLPb+Uft4AKVX+CGPrkTpLKytnP40F3ZRAejXfeHFOOA\nXf6QFv+NzgQ4XU7UvvSlkJLp7//WfaKHgtY3S70dkQW3ZVrLByNE/Hbczbxp\nGEgrdMqRtiV03eOEWzPAC+Lt9OdegBPRqe3YSFmT9w1tlljAnVRWbxXlNc5H\nhX6Ina64nzzbjvz29hHYMT218hP/O4Bchq/9j0jVFmqiK94/ckosiXdCojL3\nrKgciDZ9FfkBAvUs/nu9kivmRb5kJ74N39e16A4og39ayc8XrdjzNrIxWLKA\nW1EHgtqhW6nrYvSV7TGwDpAanV2bX2jG2zC/fj2aGh7hl3OgEv7KblJdZ5WY\nqhVbN963DNVLRotAPYSR31raUjXmjpHfH4YHSjrN5/gjAmI9LwBQbcwfw/Ez\nReXLpQIs3VIHLMvv3tP0Ua9lMJu3vry73nFlFdLUYxdzLhAUlCCxj0OfOsE2\nVRh80dlMnpC04o1KjzxDoNWHqanxEvV8TmHlhrMMHKbQ11RZCo3bwCiPEwK5\ntbALriGlu1K7DYhd6GnDk3BBPzZDQEDsjvCabfysCI5h5u3XZQO6apQVuIec\nUfdTz5u71sRzCMtASz1sVxEY6TXi4RuSk5gkTXGPzNJoPSSglbjXHA2lrlZS\nG+Xh\r\n=k0Vq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/list":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/menu-surface":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.5d128511b.0_1609366269305_0.37735727234283245","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/menu","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"740163fcb3007c5afc3f48b493f1762f8d81b7ea","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.365c69360.0.tgz","fileCount":37,"integrity":"sha512-iwfLfXlbX0KPUM5iuhkI02RIU/i6GgiKp9njANOdVml1j0XoFUBPGh2fryb6MLSk5iy5AAW0vn0RQBGdTM/VYQ==","signatures":[{"sig":"MEQCIBa54GbUBodQSJN4P71w/BzJMvx39WyYfiyDMgxta92dAiB9WObO/RHHJpipbGdyVfU7x6wTgu1Gk59LjBnthzBltA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KbJCRA9TVsSAnZWagAAYQ8P/0xx/nNOhyTUW+zkezsy\nLNT44y/Ym+NI/kwOrHwPgTd++1Xr1vBLO4N2LtdrznaSlJrx7z+AFXQTfLYS\nVla5W6p0Wxh88uAtfyR1OsKtzWnLHdvV7Kn29oArBeMpVNe0iI/aNoX1IJSb\nKvdzeihCVhCKvqlOlUdZ1H+BvUWyOL6RWr1T35Qk8IYITi9vdAmcsgp5DOZz\nI7p5ybDudFlp1w9Ag7hRTEzhPtG5vhrM3u1c+Ku5pdDeM0LPhm43xqX4inpt\ndqS1jgsdwhMXfB+u3DS6JrRUAm4c4GgIPYoyldURcG9jdVGcSO836BfVNlam\nWMid7CDCIaMOrM9qUWpev+u51M6A/KQV/NLGsoxA66Hytf9hCiOh7+mhvKvt\nqVWNPaoYDjGz7juT24/LNA2ZGpvZMzp8zDRw8EDT0zQetbVxPlUTKBVj0ouj\n6uhyUTL2typ4dt8rU2UIA4/FjqsQtqDfNh55TKjATjbIwxIA1vR/hOIYMN6h\nN3kCsAC/ydw0XLbuX9v5UCHHJ6DujCZpbmEWqoMLATy5JpKucr+QIDt5Lopn\nFge6fnJ8DmkvRLEbqDBvpfgzLdxXeZRx68CMvEtztIFKNpNN9c+eNndxYh3p\n/HZrsCslUNpjdRXIm4Pt/qnSvIyi0RdcmDqUdsT3v5dg+8mrojaHy4ArmUMj\nDmwg\r\n=SiCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/list":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/menu-surface":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.365c69360.0_1609869001402_0.14436135622606594","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/menu","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b58fc17c0d8517f9f0e0bf2e9f3886f52c31358","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.700a8261a.0.tgz","fileCount":37,"integrity":"sha512-aJqh1pA9ftYtdsQ8V9wQ4XrgUssmvPNmd441yogpUVewGkJFcA0FqdJ+DrId81eNyXEYYqKQLiiowOqm0zlEAw==","signatures":[{"sig":"MEUCIQDb3BTCFQQ/AnrssNVDX9ympKjtqx9IxQswwWpUTWJA8gIgHHJObzVTDG6ko5wy2yhh9gobvKO7eEpZM20LAKAexVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPZCRA9TVsSAnZWagAA23wQAIGhbeW75D99QDbtTrlo\nP+GyVxi5FQuIo9cOt5pQUovojEoISCTbALAIrxTVESVz/2/FOLqvJIGrxpi+\nUzdCzHa90pDEkPi/Z0AAr4Qt44c0jwwzg0lOK4hLTJ3o0Gu0VbVpKL2WIeFX\nloVkc5COc6NQE+99Of6KrgOTG4V11thMYeHd+nDw58f9Vx8UQNcbBo8De3mb\nWAi+/HG35tIzql7UGr6tqT2I2V04y0CqVU0ND2Ai44IWBtbJf0RBLhELJCiT\nOW9k7j3z/jI05NJJ4UIzkuDCYhuJ/F4wCNoOot8y80/DymqLxI0LvV/jJV0m\ncZhNPhUPD9Hd365DpQ9PbO5YIE0EZtROnrLmefO5NOcjQW+hrNRhURn4e51B\nkcn/4svjzHUV/QKT9a8RHLde5GsKur8DS8jSUnDwoONzj15nLBZnVMHr8D7C\n7BXSoW1qG6kDWat3N/Foi7yMsA9m1LC6bf8iIFrPFIKMJFcHgA4nmgzRtjt2\nbJD1trUz3cdQ/VPGlNMWWXKKJQAKlYKw+McdoWdqZ39LCFG0OQYFhE2hj4u8\n6q1k8MIaLuAxmS2NFnu2/aUef/osBC5JvEuOML62Krncf/6amYXPfcUe+WgU\nsPGpXtKYKeiEFA1bHsiVlfeZOuFp5w2A2pce4IbCOcqXGGAbxNc/P2Ndk2mi\nfYfU\r\n=MhzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/list":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/menu-surface":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.700a8261a.0_1609880536678_0.8387284281784826","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/menu","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"214fcbea9b3cf8e6417719a7a0ba3e53481c97b2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.766981c15.0.tgz","fileCount":37,"integrity":"sha512-lUN8vVpfocntG0F6xgsyZ367vDhWt/dptXYgu8ONPqau2ALoVoQ+MUZsQ1iM9l+BMQ/GALeN0ArvvnNGnvJwJg==","signatures":[{"sig":"MEQCIDsUjbF//MqbwakJE78at1ZMoPTKhJ5FV2jvxO43GP9tAiBw+seXSdP3z/HnOagJs639h1k6qzos/qVjRmjDzdBaZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Os0CRA9TVsSAnZWagAAq0cP/iToAJoA9Nr7Tx+znadu\n6oOrWhhOPch7fUanuxg6n/lTWLqGFgiICiN6F45zvewWKqWRwvjct1An4xbh\nQ5wtMf5GGntqsMnZLPqizx7VEotPAo8yDUaowIdhTeciYCO0jDqbb0uUcBvd\nckbAfCVOjm7UVBXhPrI95woC1eAbYX/Uk2+zM4EioMt2/4feHa22NuXKSWSE\nnL+zpXh1GclB42C1ZPvCHwvKVJfqNvB5BOBmAHZ+JOGQKiK4TtBhduhDEFXz\nbeHHiHxY/4IYqWim2UlffKYj3kgMcdw8ub/3H1kNZzt0S2RcuIAE306T/Qhb\nUmh/+G+U3rFZ3Hd3S4h7R7LNxqvmuIV07z8IUB/H+PyFVU/gqBAHrIfVOzds\nmS9uiP5od6dEp8FNM8BjQFz6K1ClRCxlJdDAYuklKb0pzH1TNZV2rwUJO1gL\n5u/m72FlwGeAxrfodoTBDvITL9WGvRropqtFru14GJnZA0hMrJLrZi5+KI5N\nmg29bfgzfvy43DaEk4WeaxaI+/lZchb3u2pAw+PnpH/KFdK/qYRH6Y3TZHQL\nk+jbITbAbU93qlWCEcID/yrXNNd1xy9GEI3TsZ9obiGxh1O5rD+XYcqslQKd\npwx4knN3tMe5splpONsbR76yKDiA4uenVkQWHgTaVL9+onJ9hUaRbuSccaxb\nFD/4\r\n=8QFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/list":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/menu-surface":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.766981c15.0_1609886515876_0.7706861292030449","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/menu","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8169402ba0f51b3e7828a5406d5f1c3e23d474b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b28c576d9.0.tgz","fileCount":37,"integrity":"sha512-3IQ6tEa+f1nvnx3dUB5zQSi0ef24J+mbbC+7yCPT45Bar5AZRj7r9bnRhqA36mFFmoyb7TSdaXf34vqfBVnkkQ==","signatures":[{"sig":"MEYCIQC7V6x6IETCVkv6763TSwanG4V5nJzrJknYNvMizSryCwIhALyt8BOL/khhEF5XmkzhWjvFpbqCuU5ogHuIhbsmKcOq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1xCRA9TVsSAnZWagAAsDEP/1TMBV3g8+4WaWo8ooeD\nHx46UWL3kgUmquLLu8VJGG2xbbXvqiaG7TkrkN4hT8XMnTsO3+ys34ZfyU1P\nLUMoMJ6twdIeZKc3H6cPBsZS9HB7ZcQCeTobvXLuHeVwq8eiVqn9yQxhSzCY\nOe/Z295wrZMUnWc6G/z52Dg61zWd8N4NdQ0ivmTcS3+De1NLrfB1QklM9oXo\npuPeBvLmNNinb/9jPs57GKYOFqeTCd1gY9/nvKSIddbtqG3ZYO3SUk+3GARE\nKmEC8dDYCKGcoKEdnf3uwvM/9i3TIrqLQI//vNcDOAbz0sQJBuGYYL4YmKQg\ny7/8iyjqimH4Y2atmvMY0gAf25LipTDefv2u05yHhrRbZS2Hbg4Q4wUNnfLZ\nfrOrBWRdAnJUxBhiRla33wMlS3LYvMYwD6oNuV+miWttyyLIdImPUNm0cD/Y\nmBn3vfsaSxLkMsjrx/bvPJ6zOcog23wTVl3lXuqOyYFh7aHVP2fE0+mpb4Bt\ni3awTZ0pLgJFjSatZpWplsOujVcevvIIOg+fD5kJ2HS2JNdoBdmvvZ3OlJnb\nRiFqk6ycVwxnA5EID0mDJzAxbmkzOsV5gajRFdrrXeEc9G/MWwXCLtLbrBz8\nk5RmHiKGbkIO1cA9e4D25pccNq4j6FVflw/mAHOz1rG6NhbVFFpXA7GPpkXS\n4XUA\r\n=1gSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/list":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/menu-surface":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b28c576d9.0_1609887088597_0.23387754865392552","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/menu","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89ca731c126d6c297838880565a82acfce90cad5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.968735356.0.tgz","fileCount":37,"integrity":"sha512-vCwq3lggdq/juFTXe1SyqmI3LNZwwrJkwax+Fnff5g4B3TDEV6V/pDZ5Ot3b3VoLefIjc8R6/tPwXAUgHdr+og==","signatures":[{"sig":"MEUCIHPpU/55wT2VN0EsHl3l+wWfrt5dF6Mn63r3ZhKHS+GKAiEAqDD+ID71EVXt1dBXqSH2xDz7Rnrb4cmg/wVDvZGgLKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dzICRA9TVsSAnZWagAAzZkP/2M48VTLPQLPG9yckOA0\nPY1NxacBMFKsxKwUFZH4Pr6JIvw6W58BI5tPT8H95pkl+bbZM3+On4/YCePY\nXp3/AJj9xb4RSJ7AjkwO8CDuGljn420jpHnW8WbrQ59VQnrmtm1dEsYth66m\nfomY6kTqFwzmOdhcUsGPjZIFqss/tWUAsnwJvtuo+Evmmj8inRW+Lbw3GH4p\nI6sYsQDa4U1TCDcmU0hG+6HpS49wNkbM/RVxAHYLNTgFF7Pgr3ZaUoEW2SWO\nRNZjisGCD+sD5aQQp8gEuTtpYZivBeK7zIvEMsDbcQy4bt97/UomhHDT3lKZ\n8pHsNs9XoIJ9tZc3UDNATrsTfN7wDkBP08u0adD/KQg4buekXx4jbWjiSS8q\np22n2fwNiUgJROFig+D3JUwdVyWLuSNK9M5QV0HPny/cXqxU8z+qsRvU7u75\nmx1MdMBoUYZ+3Njq5/N8I6i2L8fc2oSYPoifRz3CxuZ278xx+yEh+4OqHCNz\nRPfQI5acXLd2d6c121QYYkLuiNS2b7LRgtB4tO9+Wznd5ef8hVzJHUkfuJjM\ni6eQsPNQWr0ULguvIlBiOp41oWaGDIzxgsOTR4iNwHfwyPkX+aKJ1semm3pL\nFoNhcVHvfSWhC2bJX382hGnZ6rpTmm5n8gzGlrs+HfaLcTOvKCZ2bvZdKMWX\nmutW\r\n=bpzs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/list":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/menu-surface":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.968735356.0_1609948359771_0.28133797841036867","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/menu","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f46cfb2d99d623bb4f7a6f771635fb2ed06dd6c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.c5e18b020.0.tgz","fileCount":37,"integrity":"sha512-xpYA6Dcf+EUoI1kJs4Mm5f3nlzNMx2OAcJlbHUB+Gxp0BpjuKGJxKqRHIL2GT5wOv3pLiFaxVAJeNWIL9BonwA==","signatures":[{"sig":"MEUCIQC+i6RzwNmvHwS4VqS6eSopmJgEkw0C4XBMr25xE+o65wIgAoTt1f/xRjgF55NyG6WlN7sc9DZYJosYlOJUUfFSPAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNqCRA9TVsSAnZWagAAWL8P/1kHoh4+C91e2zZdwnme\np7TY9hJenPKyKXIx2nAjC64SbNVT4V1cAa4b3NYniaJk9s5Sff8e0HU3HF6v\njfr3U7m5LKAMSueKGZ1PIR0eL28sISPu+oPNQTyNGc8pye5R2Yc6A9x8nYeA\nH/brw0T2kl2/WK4uX0qERmJzbLRZBrflrruQ5gPxNppyx+Wo8t9aeegUG9k/\nEL1WqZ6kf8xFMtqKHq01FcPez9GQ9iA99/5oTlyMQbloea/Cf28h76Wkn4Jd\nIkIfxRRGCxZpn8GkNIbhZ5YOPKEH76x17aRBWnpWJ8ExTh2hN9SOvnn6skrE\nX6wuXawdN0wWzhf/WUUt+GLwv0NGeahnx7WVoKYBBsaC0nW6NOX05HVqAUr0\nKRGciuEi4rAmHff03gjxLdh59kpgOV2GuKmeV5seNFP6R9oulAMZ5BOIvB84\nvJdBuCp8joDvTIVi8WFcKDhnGGbKOMFStqxTUjidknIsRos4XBWQfhHuzN3N\nMWtX6KExNBMfBnu8JhlU4w6MmyhBWvMnddwWBDI0DK0TqQCG3X1euzdcylZu\nXXaZa3yS6LxHQ4UVTuqwhS520zYy/RnIWDn2OLT7YwSv1eP6In5GGVE2YwHM\nBPoZtTBTY0OgQLNI361vVO83cyo7U6eBk58jNM88jt08QuY8QHmFz88Enk6r\nm8wp\r\n=tHXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/list":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/menu-surface":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.c5e18b020.0_1609962346085_0.4366319884054686","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/menu","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5307343ed2f44962e72954fcffbe19f793d92cee","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.bcff8a66a.0.tgz","fileCount":37,"integrity":"sha512-iYsR49S7zvdGD1D6Miz8TAnbC4hZjN3fsgFxW+TEDZRaxFdqtMutuQ+47w/DOm+xGbmAQYLlUkYWzlKIyL/q9A==","signatures":[{"sig":"MEQCIGXWLfDceOpk5UmejXNxRqi3OBo2QCe6WkGByjyPftw+AiAhKQRm4A1T4rhZhZ5qsOouLBQ1/KnW4L1AeanSBV1N9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h1hCRA9TVsSAnZWagAA+I0QAJZU2KwNASaeUNKBLadN\n9dc3ooF9DCRl1m2ohdo+I2iwo+bQjlJEII42nDcQHDHHoNULer1YlSNU5IHk\npS8EW+U0tfCKkR97KXjXneXtUMc+S2rrr37XzWhwkp6YGW9oHVrVWbzi+Cel\nQOAjS04J0rarEG64t/qNg61uQmEYqTi8amSxOlLdbw5xMMizM+dA5LY/VUU5\nbwLJ+xwtg6g5VVx0oS196vNaKcVXbRjPVmaiAEsUfEfJ+TuR+mVpYtiiyjv0\nG7hWeXLbX5lo0ySTe3X7wF3Qa/vHlPdb9bItoGmTCVLuToUPblpJUFbVZDW8\nJaB2hQgE1JkPYL+dZ45v6s8bxpdXhzgN7WfYWcp1tkNOUcyrqSgK7QrskOUC\nO6nlh3A5JU7xhSeFWnxfx+o3ZMR7M4CEnporAsPJFHikKc9ZnWkYT9UZBpHH\ndvrkatHAjxee04OIWaFEMSYkytLMlsgV0VfGzAtlZAX9yXGtK5dJvzeNy13h\n1XwmNi0ySIeuMRRMjdVaeC/t97OdVTzresc0ZSd19cYBtHIJaDJNgoEi3R+Z\nz5/MM17ak/Sylyq1VHm0m4NAaf9UUyVw1bFxY+4jhiOgTEY6Tq0eOaNhp5QK\nn7vxh0kceC1x+p9cWw7Zm2pBaI+RlPRYlxtpQrdgpOLfrj8IHE2S/NoiD42c\nkSJ3\r\n=z42A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/list":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/menu-surface":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.bcff8a66a.0_1609964896849_0.25740029711647616","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/menu","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2e9e0e44263271c1dcc1432abfce17c12d5efcc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.79328c9ff.0.tgz","fileCount":37,"integrity":"sha512-YtlP/yVHQWG57AUrzEjpKXLlOFC77Gd63+RDovesa3RwNtcAKv618dAojb80Nj7QnNwX6UMCS5KSSJ521QXOnw==","signatures":[{"sig":"MEYCIQDzs+VDGGDuKFExGPP93tMzTdeQKinh8Mbm5pUEsNqAcAIhAKlQ9bMhQtWBVIIEOeOU4qKsaAzNbEToiMeF4ODjio69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nODCRA9TVsSAnZWagAAXMkP/13nuEEu7eEXkjYoIb5S\nYctx2MrZ8FGdqVtDMuFHRW6bzyv+erLqx257cfunOIkR+ji1Sq5qhSveDzEI\n39X/sibtlPf9Q/IjRPPE74YcHxASHNyWUU85+fY+x4eZF8q0SXBataij0UMV\n+J5G1a1guTKoIKGy3fyAchHxUS1G+nFOFMPU//ub5Za9lbZPy0hOUeugHt/3\nzhRgoE+oaLVTbgb4t0f0jQpXu+Jal8NnzNK563YwWqiPv5x+rtO0cXSRJ/yp\nB5BrHEibgjxWOo4u5dIrImdCo+F3l8jEG81ODcqb9x69hptDOWuwRNO2V8T3\nM9DsIFR/j8IZXuaUav94oYezodTSz9+dDhs4B5oUcGkoTNobYppCBwj4ysjs\nHLx4iL9BVo/rQwXZvROSLgt/6OCWMO/3gqSmbZwXJ5jKYayjUndov9YoEhoo\n6kbCTWm1uPX2FqD9FJQnVOqqYMGhZ4+geXY8Gvbyy0kHriMu3B7tH1AX/I+D\nPmAb9SpNoAJvvWegbELFtHnV/QaaW54uULS/V9IZ3cqQHl7ZvAm59BZhH8cz\nJAWq5zpMrqTluK/ZBBcUnkuU0YHRpiSVrhmyIeqBCHNjWY2zTjnL1HH7E6gj\n43QFnde4hLwSoGFeyn28LA5bMzcsvFdZ9nSQPiQS1antP0JIdmszjlLjqBCS\nC0gU\r\n=3INy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/list":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/menu-surface":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.79328c9ff.0_1609986947321_0.20551777075838729","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/menu","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5df0c01050ec6e748865269d86c13fc9d1d91cab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.121e1f303.0.tgz","fileCount":37,"integrity":"sha512-lEOll0rK1/PY50PGa6Bx8WmbD/SflEkK6AxotcYlNqD9ydf7YLoWmB0xX+RrMG54Ka7Epil5evUc+HmMouC2BQ==","signatures":[{"sig":"MEYCIQDjA8LknVnIi4U+5xhjqoNuY1PZoGuLsK8bW4GCG+LGngIhAP6qZlnKLUGCTO9Rzl4u1MfXwxHipguWGuT9g9+M2FI6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95d0CRA9TVsSAnZWagAAjDMP+wSK6pIPAKxSmx/lqfoi\n+2kfuWA9t41mb6nHjLpRUWiunWCzlsMv9tqejSm/cOq9Tb70FDbivjigOOXm\nKVc7l2gnxnYTZZZXtHqTUVq/0ZGjlMpq+Z6HVmLvA3r/K8TK7cgJrVhXniJT\nqhQ1R66QvtlnK9ruOEtkA5a7fn6vy5Xi6kYmzYXMu65iql/EFFtFB0/vohpg\nDCbd3ZL0cLtsxUvbO9GK1QwzpUEjHWDB+0h+ZcQyk0dfJFxUcoRaJjmp/qwI\nIeCbW5qFHhsGzzKPkrTZzz++lAhtSzHONIADKoTducuyESUesKHSyDZxn01H\nd3SrjYwPNoNolmYScSrPYRl/iYl478HkuL6/Et27IpEIWjfJIc+3peYRk4G9\nXZlFFt5tuUt2FtbPcWIrcRMIyLWVKcFOkhwWb42RdI49D/g6nqvK18uyMbpb\nQrNX72Ug9jxGlM0kmdHCzs1U9MM4kIx0ZMKal1lP14o6jFdMcVfTStugwkal\nzzkg1dtLRi9uDJ/LWLJE210wQPIAZjIxXslwmHRqbR/11FgAA2FzD4CfA6dw\nhUqIyeuzlHhyI20ekbKJKMVNKJwN2IIU/OIJ40oqBHxU7r+Fwf64Ox0len/D\nRoumL3pUcT2c9uGAeeBHRhV/fgVhSWNfkir1LbkTA698YZYsS2W70bgUKQrN\nIKBy\r\n=KZDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/list":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/menu-surface":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.121e1f303.0_1610061683785_0.8525941059849429","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/menu","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f587d88d4c90abb47e4520fc12cd3c58cd4efe60","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.abdd10065.0.tgz","fileCount":37,"integrity":"sha512-sLiZLTlUlcZFbv7PNEaYwOySPoVCBUmyR3XaTudvaGRUvpWT+yrCypftTp4krOV7dDutkEjnUSfV/letsebnNA==","signatures":[{"sig":"MEUCIHCqKS6CehGQ4JIcMxjiY5UGwykTOt25Oee5RoW3Ci24AiEArQIqZ5bMdkulCj838wq1Fxt83iqY2+YjJ7AmEdgfUsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JwLCRA9TVsSAnZWagAAf78P/RGRR0OHQZQLvZ1qq2/4\nOGY1XbeGEZceuCJFIulGaXBbQbQCZIWXST76Mpkj6KLMeUKDbwHEdWoRWiWN\nUSurKvlH866R4YRnCiELQ+0ET9cYlPHh3qxYSskK0I05lTHqc4SRd7qwGmw6\n4zjWdK3WBj2peDBJt39FBppYQotm6jiG+nw6MnxVLojXAEpo+mro6iS1sSko\nvb2zhG8VB8Q7B+XKOaApKaCLISbojbpNxY5g8ESuXzbWS4umqxPkozbXr6qM\nDumNgR7yMSm0SSscLd5FLNSMd6i2Jw1FmfrOTSgajSCwgYceiUH+ZrQFNliV\nNEKn6ROQUlNNsMJ7vb9nKSio89gAtecJig4YKHsEvIYpJjxaaxFqL46liwpy\naQXG6McRk+yETg5VrUbHU0UiDz4QFtoux9eF+DPZjZrHgfo6uVih44sTXaHM\nVh5ZwYlHJSnI8/WzofZZgMPmzLoxe7cmbnWQO4uHp+KS2FIeLTPsXKcDspdX\n6XwuVT/sF8HYQnMUAoFz7/8C7XtyWJKOvZNUR3aLBS12fs1cDCEySpYRpKqR\nORstvVHrj5R7HccVvSq/fjJGdTjckglfovSwS5rZYcOas063d7jcXWnb9X4U\nHZ5AyXdVwzLpBV2fr9M3xI3Egq+MswQaUoaJRMwqOUrIEbPmJ2i1mCvbNmis\n9RSn\r\n=23yH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/list":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/menu-surface":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.abdd10065.0_1610128394996_0.3707654795727422","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/menu","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8d28d7ecf1dbe8cb889db8bcd89a470a6b9bc4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.089de519c.0.tgz","fileCount":37,"integrity":"sha512-Jg0bYGZ6MqqB0/emNwYAeYJbEQnNtKzd9myNxItkTUbuEGGhrczQHwOT3fKB5WtJgH6jb5x+5xQv9ypJJZwc3Q==","signatures":[{"sig":"MEQCIBrBh/R407AwEGiBwbPDXC+BEmyuh8F3Wx82yOXms0F1AiAlhUQw6bj27/W0zz0Ioatshi768jGk9Jg9wx3X5zyF3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NsUCRA9TVsSAnZWagAAXGkP/2MJK76MCnaXTp7KZqwd\npe+sn4SjTr6J//YcmjlcI7BhucZB0+OwxP0XyiAorwthLxF1MIQtKH6yqrC6\naoeMIbWjOm+HbaowlmBD7+/p8LCBIrCCRYwI9EDVWT0f1ZCPpZxGR4C2YLCq\nPHMTLCvJPJCYSMY/TL5BfUs8oijRxVsi5Yhounou8V3shAKWlSgT8pqLrY+a\n7LWfsE6U06MGs5cVWhald8KYZPU1Ujit64xLHlWA7CPTDDGgLLDwNSECFnA6\nPBptzgzCGEYO/4SAwJOielwtCLr7ygXo1KKgHoOgzr48MV9qFeQX4UpjvB3O\n8Hoa6Dul1/TfgmIUsSAv0Bb2Ej8jkk9ms5h9VQV+tHqWGxjYqHCMN35cS/Ph\nWPSuz/ewkMXoK/+w1BtDOYUAnm4CMRP4CCSfnmsVQjPyfDse349p4xfGmlDE\n2ehAWm6pLXn1/bOt8V7+fJWSftHRwi6zgHRQjhyooO3/XO8CwMJuY23qnue0\ncen9X7B666oyesgTrwR6Lvb4M2zG8TK9jegsacpaS/6amnUrG/W0OEJEflpt\nlx92ZfnB+4s6H6ZpyWO0+R/ViBnjCOxwY++VvxcHjzP2hrIFfhheh7WlX3Dh\n1HPtt9PBzVQ8wGE+3Wh/wYtL9YyCpfVZEI1JwYWdY2vzr8dDaI4jtNxOYTOt\njISC\r\n=w+0D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/list":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/menu-surface":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.089de519c.0_1610144531958_0.13976647668254305","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/menu","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1cafcff62bc14f21a21fbd5cc714c40412746c5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.163119837.0.tgz","fileCount":37,"integrity":"sha512-spJbxnPGkS72UBswkYSVe3SzdOSjP3Ab/NPbRPGPDATx3f/CrdeEsRfSKbY7LRLdwYBqnxEWesK4B0vXHyN1wg==","signatures":[{"sig":"MEUCIBkisIk2Zhx+G9vpp829AfmfCjQuRzjooculD3OYW7t4AiEAwkVhCFLKmiLQ4sC35yimxFDrS2FOi+rSYbsBYgOz/kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7pCRA9TVsSAnZWagAA5rEP+gJI5H6MkRkhloCa99Bt\n2smpMaldM72VrtufLnvEltHpwhdZLr/i04zeHH70it8ztFsImxblabv9otvx\njbePdiiV3Yb9ylQeOuuauGqUjs9egdMtUKeewho6IKqmPUnaPwoJLM2R8F7d\nMfl4oYbAnvouu8fozAT8XTOZ5L7vkXexJQlBAkuDPUsH6Trf7FiEc9L1fh+C\n63trVFBnUwtNAPpv7B00jOkqTmDG88pbFYBRX/ffzbwU0x80u9YjPgZqiQt/\nitdRWrvlzBEfkduqSNKa9JDeUFmBvI4nY1WIV0AduWZzqKHXkI/ojTqnmi3t\nW+M5ljw4MbsJ+yIt0XknMyYmlMI9SnFAPyywpmCsMmz5pbMHxh4NpQ5PePT8\nvujY/87sXjtgV5ldwbf3RfNs8ZHeZqLtAYqz1/+vYNluwHylpCP15bCjLR88\nWBtgwwcw8aDxvLx47VwRu9li8BDbzEtuWwqWxMCAV/F9ryHfOY856kr2TMTw\n693n8PLV/ECuteNroP0hD1Y/eLug90TyUvb4sa+nj0zAMKT8xhM0cDosb37n\nF3KekrE0Idk2HEXFdfLpcnFIsK3Nw/C0Hoa9V9fQzvhVhDGIw7LbV1NzQ5e4\nge94mc9oCVCfFXBUWs5COwRUIIahzidEU4yfpq/loleXPH/oq5A02aMj329e\ntPr9\r\n=ckIO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/list":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/menu-surface":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.163119837.0_1610149609159_0.3067118522036125","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/menu","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e2e5e957ac0476aa0efd9bf59582a6566d156a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":37,"integrity":"sha512-MwwSda9aaxsmJJORpljnik4cMWbAMEzYbAmtxh5XGwax4BgHWryIC+QS2hnTYQJYRTiTeOILCsRVYzE8IJ/XWg==","signatures":[{"sig":"MEQCIGTV0JsJnkeHR/IqRd2wGB+6jjRrWRDiN+Wn2NFAtxdsAiB5E8oaqz/2xEBOLscZYMXyUBuQoEBMIpvw8xtl/SrgHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwdCRA9TVsSAnZWagAApzgP/3nq7HbY7qv3Nh/NUUbQ\njRHRAae7JOAzXU1ChcbGfLDl58J+RW2GluysMBm9zKq7OfTXhY1M9EqBRqrj\noUCWxmukoUTpFMd/L7KHgJNBXvhndBeC0B9Svjedq5D9V1P9XtEV7qPE9CBB\nEhO913iA74fEbE4e+VdU+uH74RtUsXT4aFJWtDTPp2qQKPno5m7Q7GHoXsr0\nsfuzkGCnM6AQ77J/3DJSMISKycX14+KqNHVAHLE03exm5FiqMlRMydDClTbm\nYgLP6qhGbBxWZ/J5aQBDjTjJsmwMd2Y64GkyTKA/zD20sp3R88eEz08U+mMG\n6AuQMZuWNwtSLC7YIpP2SXG6qAdgYt6mF2ZAk1POr8MD7/osVaqQjRP6XoI+\nf8ejQC39oRnr5lNytPT6OybYFdsDlYG7BEUIEf6ASj9hHvk8/8Qax0mwkFg6\nEkZhdEIYYKA15WpurY23v1Q98DoEDwzYLvGZoDJ+In57g0BJiBsPrCBEBII9\ntkbIyto1YeO794QDb8I57EkzECYkLuiI4Gd/GQ69rsgaRJ9xwfRvNhUPdhX0\nWzmLK1Se8qkYYIliGEuxF6AdoBWa0GWX4syTvIJp6Bc4YjNqJ18SildJy8Bf\nDJWngGmvxmFckYZJeSFONrBACBYxbvgL9pdEV1fs/MllcaOKopFz22e7844g\nh2yn\r\n=xquH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/list":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/menu-surface":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b8a1a58e4.0_1610382364810_0.08821513370344913","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/menu","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"468125d4f27d4c6e188b315022a0c52dcebc7f25","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.7584267ff.0.tgz","fileCount":37,"integrity":"sha512-MkZskDmWW9yKtYtBRhqejoVhhwnILrAZxb/ie5EnaVDZJIvijl0Vz/Hlgm34AfS4PeAp5uwDSs5w5ojKqS8Eog==","signatures":[{"sig":"MEYCIQCndV/Wvv1HgiiBN+onp0F+n3cs7yBnXghLurBWR2Yn9wIhAMYdz2BBtZ7b9WHUYau0hy5VuHg0LVzsmeqwSqJJogON","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PffCRA9TVsSAnZWagAAfkgQAJXnJ/1rDqwp/uH+VkEc\ng5rOHSR5im+LdSDVAY5+yh1Rp7e0WqCO3TGyIj9twuy4LKpchbtkHXK54PoH\nmX/RWNiz2XQ12vu4l9DiQwwGIZIjASCrB6gCqqlhvHhHxPtb3e99v4LsmeO4\ncQHnxz3zCzbjasw9/4IJodWYd1pe4eXad1WG7pBrIowGcu1UKu73XcgxM7yU\nhK9dB0k1m/6ZipysHw2PEzszgyPC6y8s8UrO1FzSkSBVEy9rO4X2kaL+dAYZ\nCbdAbaN//LeNCfjjH0hzm6J8s+VqrjJ6CBWOp4YQN7wOZjZgghvUSPbP0u6g\nKPI20ZthsB1yJVIq3z2SZaG2xcWESU24B5RByOh3Mfypwt+q1YrggNDKlJSg\nvNz5kuFyAPt1YJVPAAf3phcEqs+jK5143Sx9ADMdf9w6AGA8+iGVk+epz459\nJc4tbdpdUjKOEcbJ5toISD5wfEA4YU2Jc58zhgYypacakWNqbAmOlyYdLOpy\nESeQhPwn6EoR59dVXYt0TQXBtmtJZ/yOrmFSvgPvf1MOVd/zEzXrddzdLA7b\nyhP5QkXhdSyuDOFtEanDN7xZZRYWVJjAqzZ7T9CsQUFf5/wb/qtVYhPmQItU\n6+7pGiNjpzVEm67RdCqC04GvHkRZjPg7Be1Mbq+B6B1pHsbJWpXRKwpFGz6N\nOvnS\r\n=kn+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/list":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/menu-surface":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.7584267ff.0_1610414046702_0.2856378888736799","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/menu","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38459703a4e6069c721b5819d68cd7738090b0a2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.251ac04c0.0.tgz","fileCount":37,"integrity":"sha512-2+pAxsRuGw+IOkVWwuaU8gpXcs2g6RulSvZ+eBBaLR5iFxi5qRcNAr6zHErruoDZXYVDCx7I7y0b+hK9Rsr7IA==","signatures":[{"sig":"MEUCIQDfu6cr0iwwD1ke1ahS/Ix8oZ40x/DFdMBY0w1n0tTmLAIgWsMvdqhKTwtFPBtxTSGhj3cdfmy4v8dkFSv8J8DGxb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f8ICRA9TVsSAnZWagAA80MP/2KiNbBBWEukzlFRRjNr\nZ7XTma/XCFDSZJ7woZ7q73JwhDqBpGn+7lA7lrTYqHZfK62i0KbZ5pCmp20H\nD1OKEh1HmCuRuLXVvNbDVJzkMK7AAaeQ5p+RS+6WBWemqARgnPy4rwYu3Ntx\nhaTLEOXTr7ZiTHFBisCHvjK75hHSwx3rCroUm+cdJ6gF3Tp5UMWsG2NFhqNI\nnXtJ6p2L0MJG80Qc/TVdBYfVHZ2X2HDlEoFlBwPWJYPufg9dV7YEuQSgdR4A\nZdd+Z9OCFsN7qR2/jjazRzlKppphEJb+3YWcdWf7mWVuxZF7Fp4NnUuT8ViT\nii8oC/T9B3iQo6X93UkrwV9Aq7oFbEZj7jJCMTsoYLIEJlIyogweMcwsNgcz\nkUgX1PmIgSAtttqmq0wEoSkChKeyqGPs52uulzCjTuJMbG5UJCHfawvxwjy+\nlkEVHD8bAXvMjWUAAFnaPAaZRkvFVl9WVHIewnBOLSJ9uM94kKuPSlmoK41I\nAB/vZjr0Y+EGMbeD5R+mUUO0PSz2hnKvGW/ULRurqozQyJg64Kx87YiYhrpV\nLGAsPipJZ7OUzC9YUUftvPTKF6PrJr/dhHbjIDFREh4BM8vP0u6Vfz+OD4ci\nYVh5KXE7NcJJgbK4KqWU+40ZCn1zDVYUEtQ2e7Tw6+9eV3gJzfujsilJqYjv\nxsrX\r\n=/GJB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\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\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/list":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/menu-surface":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.251ac04c0.0_1610481415234_0.8343256258964615","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/menu","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d68bd55035dd7ebc5b0b240a4d5a0b2e5ea80ab5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.772cc1068.0.tgz","fileCount":37,"integrity":"sha512-O7GJWJZUb/Rhb9WZLgRoAmu5TMX9Gi8jl8kaXzneMGBmJ7kGjOoVxBrQBsXdaB93YolmHBfC0S6E9Z9XvDETjQ==","signatures":[{"sig":"MEUCIHDmpsyHBf6EwEMyTWSAfj7d0YbjKviR2uJ5JbDEbbdLAiEAmIJ1pqCM+5OCoM4eAlze5lc8Ftj8Kcygr8OuWMzzWqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4uOCRA9TVsSAnZWagAALJsP/2VmokqdrwfvOoS9ZWEB\nXis1/vmOPzr0kEWV+mQX4PYfQLLacnmmJ8wU1pwBl0EeUdbc8C22dk4pMOZ2\nPOugI+/axgpKYXr8hFEjs8FC/+pVw4mRq20gDvImd6f3MyxFPSclfinhKrJF\nwx/IaNOuSyJ5VdDwitQsTtp8ht67VDOQ55xPFkJarVKFcfISIXohcMxAF+g5\nWd+HZvE+c2Dt8pl0YnoZQ9G0BfNQIw0rpJb5+6U7fWPkxgvcS+OvXG7iOsfJ\nbjk8ZLrJO/9JfNx+2xCmhLr5Zdl0MWNS7aGjz/N93J05xMQ+dBnayt+Kh+JP\nREUr8yL81WDXYzdGWZK0pGgEDYEKlK0wYF0ieIw/7ZcnXx6O98OhMnq51hZq\nhNZ5H5kzwJ6+l/UPbPlUIcwa6EHjbXzzhunxAxIvllPDTEU/8MHGP96Y0Z18\n7XL0wx+JLPWhtIbepBJD1OH3Jyv2BXMg2iB8L98XsZawNYwqUuz6EfMLOzrn\nOWzYYKjdZKbBcj1TWjl3gzwIy0EjTURZuplWFhCY/yGf1NPxmwGsUWW7I77g\nW/MA1iSNwOKFD00QVSVhnW+LGtzpFkAO+j8QsfBfS88MsbKFuuvupUzssVaV\n+y/lL6/96ojlJPQsRNXaY4eWJeRN9uX8E+5/JJKg4fpN43NZqvg0HJ8CRNqP\nZl29\r\n=CdxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/list":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/menu-surface":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.772cc1068.0_1610582926045_0.04135334786563849","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/menu","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf475d74ae99897f98d22a7126ce997646742fd7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.fe13dd130.0.tgz","fileCount":37,"integrity":"sha512-wxoAUoxkcivMpuvKBgtavGiZR6sGJkNzRjfa+3KhNfKusxQgYlJYAjMnhiwM6+ofytQK56Jar+da7FQpTE3YDw==","signatures":[{"sig":"MEUCIQDt7kBzRGk3aMbFOObYsRj43k7a1JwBEpRBvwOymGmZkQIgTWePnZ3ZBscWTxi+rdV5UiY5FOSHuLkfchnRTLo8vro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pVCRA9TVsSAnZWagAASQ0P/1ihsJKLkSL9EdZVfNCt\nU2bYhgqQuRdMKL4UgQZnJL9Wdq6A3PZwxNGJqIuuEneA1RnWf+WYgIoDXwn9\nRq/hZu4kV5BeO3Xk9WiCRFqdHZLI/DMo0Uc6MkDiSipP/cjWSvL/95wiJkXp\nZloAN9C/gMN705xA4uJDuIC+k6a69NQCqXfP936zRNfHVWTaueYLWdHEFm0/\n2czY3YhkZ/j216hbklY2Ph34G9kQ1fUO0fSEMAlqbrSBtkWuWl3fZMoqaiWv\nOng7uEYmurTy91DPWyKi/XzgmJX5LfbMV3IVUHmVhr86oFhAfcSsXIBeBDXd\nY5H0qD/t6bgAdvFlHw17AI2iVCuICIJCy2PGlCI4ozG9OJtz26GrdwebGvC3\nbD1setQlR2I94dbTOpSZnVGmWznsnSuwsXFekXKfYsgdQ7AhveYJbj1NktMI\n4z/AfmpyzUkLQ84c1vPHejDVmA+/mrJR8+qj3zIcF/G9g4+gKKZIe9M8JuTb\nVEZ5/8nIIZuEu2wFe269pPEyXfnVjor0iULzZa7WrVcSctnMRWqWCUYG1FXb\ncVUBiI+EkhU/h1+IJe5i6ZXgi7TkqcLn1P5zlensuGS16wRFfAbhWg7rEywA\nGLdNRn0651d0QBUS6UVdclP3YmtENVoukyG8tTHFUH0V8VmpsOfDvrO5qySP\n9WOz\r\n=cF7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/list":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/menu-surface":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.fe13dd130.0_1610586709118_0.9202362854622006","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/menu","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6180888ae83b62cb80e937b56d009f98c07587f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.c7c5da28f.0.tgz","fileCount":37,"integrity":"sha512-FSbNC9HGOapAl5GIG8YQG6npsVHqhWUt6TtR62tEwCXzn/4YS1DLvhb7UhGlVnKpEP60vgitP7lWalXq1h5Qjg==","signatures":[{"sig":"MEQCICW03i/Yq8sHZ+dfRTfT8nsWgGmvVDA2GdeeVmNL6CpEAiBu3QCNCDyNtpyQZpaj6ryL6jMLeWHYDtDO+6baqyNwsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/uCRA9TVsSAnZWagAAK2kQAI4u7AtHadXGYLk/uiSS\nNVCTJXNQ1x7rKjorMoiV9YtQOKf+gYrJU4xT8UxuFXnNVBoVbIE3vsfuE2dt\nJkaWYR6ClmeS5iRex6StiYMm4iauA4E4d4Xzpe0qIqdqOnWaiu/BleZCMwCO\nx76qKpNvbJ22O6Q0aq9H0sVZVMMrhM7wdKgnmz3/Tc3S6+j/s8AGRdQx4zFx\nhXvpfokF+w69vbvSTZwEmxrBzGvq5PW+eqikQ2gkrX7+wltLnnx9H319b+pg\noty3yl3va1XGALUPkko0YBPjIE6OZeeZtYDVczh5v4b8feQJaPNlD10ECDW1\nQBB54eP88zy8VrSXCw5yD0iUOcCLt/bO03XgHlvsc9OKEL6O9FqDblX2Cn5A\ncBEQD51TaWWgvfuTgM6YCZeyRQkIMNuyoMrpSRBmXt7Y3ePb1FIMBSQKtxPP\ng999/29yslTLmFgyXFbyhd8vfb9QNWLwt33s5SBMPPnxMrxhQquRzXb5gNJv\nzEhH+dAjUtRBUs5i7C0f3DqIUg2Z/nxg+Zod+d81d3depRQplhv4bu6Rmv3P\nfTWYUmSGRAZps+4SQv3vAo+663xi5uIQdmZzg5FVJ/d3gSZzkmqJSqFoq/9y\n+xfy26GClRZwC17V7cl1KJFclZ4WfsycpKtUlOUAkSSJVvsn64/g1Im5b8cd\nj7z6\r\n=shJm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/list":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/menu-surface":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.c7c5da28f.0_1610588142382_0.7000551115735729","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/menu","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b920f8adfc5c9b24e5ac445839ac7f00f8fddd57","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b2faa116a.0.tgz","fileCount":37,"integrity":"sha512-ONEAjYnkuHjrWslls4H2llVBNEfpdRQ3Qpmst7NIKTJm0c9T+a37vkwBqVQFrxAhwXwtQnM5eIasgvniws1EdA==","signatures":[{"sig":"MEYCIQC1dVVY8ZfjcxIU4QIqvCuNBFyB/Wpc65l9FAGrLw5EuQIhAMhWaAfbQEJFQYrxTng4ga/V6Boevzn6w2E5DaEPSj8x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzLHCRA9TVsSAnZWagAABEsQAIfK7ICr9olNNsHkLmlm\np4vZq0n0W/QOuEEYaPt46BZVa+LQ24Cbn8O//+ss39GHMi4HFwmlDO50Atve\nAmmVX5eSZaoc0LO0tCdafMwwiZmOKhLzXJlfYH1l9DkT6dG9VykKujcOqCpk\nGQh2rhn9H0FYJqEPqeeR4RCKxlS3Cj5cwWieHVeL4Hm5r762X52TKDVUaO6T\nPEvsPhHVBB5fxQ3YVDoLyb3rgGcqAkuvsm4jPD/SR6vjHU//U8f2J1YsCNM1\nrg5Yaq5Xo1cFVJOgMECTqPGEJwMSZL1KlHN8Rz4fvBFUrnVFPkzhJ+dqixTG\nR5MpanEhDw+TsTcsJez1diT49uH9Vw01eWE4Ib1x9ZK89Mpl6WO0pf8B2HJq\nn2WwmK48PVrEPpcfYr7PLa1Mbt40zlM4nXue303IKDYkW2U+MiRcGzifKhfi\nzYXmcL54jHONZTu5N9YGu5cfEvYBJSwB7JasUT2CL1UzQyqMVnqmD0caqyOR\nXUoyknehVxck9bHEZyQxPZIJcFyLAao7+JdDFBub9qfHuJfr7J/c1jRMAPtO\nR2b52k7acdOD16yvC/bUU6ctJvnRtMZaePmch/+qwIitkdePCeqwZDjELZhb\nadlZYHYavBw/O8i7VbPkdKMRFeyp1iCZd0Hr8oQhyA9HR/mECiWtntSmZLVm\n3ou2\r\n=ZBa0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/list":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/menu-surface":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b2faa116a.0_1611084487220_0.9965781641255509","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/menu","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"255788c43487a1730e290a7973fae73389f2500d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":37,"integrity":"sha512-DCsgh/3fiAmmCox0oKH4j5dazcHQrzRKBDrMFroeC1MIFWO78AdWq1YuQITWZ0BpOhFUuawiTAaRRn7GMMscAg==","signatures":[{"sig":"MEQCIAsACxQ4jttx/mxJX/xveu32BfoQPdM162TrrU/rOgvfAiBX56J2dau+En+ZR4Hk2ToX3mjpCkrwruaMc07ZrJ/B5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NeCRA9TVsSAnZWagAAXooQAII0YtLsFgDdLaLRSXI6\nhDqO7Nx3ljqGNrm9NKVi5mCQnQ++L1leTAeZCBZLiEJlKwsi2IFBowvE/WnV\nfAIltm7oNxPlgadPfaPGLoFVgzrOaitpe8Vtt0Hb4XcdW54BNlCqli2qEeOx\ntd889Ryf3BATix+icuhCvJ7lfMOJ/svyb5eb6VufthClwMz/qKmJOwKFBLef\nmmDX8ieWjt01P0nYa+FY/SmJGfPrUylBXjc4IlbrDUXrv/bOHSN2a0K8vJkb\nyNpaIvl1nkwb3RPbuRQGSzGOaey3TlgPfVDT51wgehbgFcLAuUX44l1h+Kkr\nsIEaFELgwclSDzDz6cwuQA9xtK7aUxA/EI2Au3oD+yVgRkTlwIvdtL6Hvu/5\nXKCm8uhY/XA6qpuu5gC92NJNctX42wL228i4eppsMsDiEjZw4sYuPAU3YP76\nyFtgXWuda0K+XmQvA+CRKl7DnvlM8v+Xqsw10gJzcwd+kESiHBCvD0Jjlyda\nkrmrZbhQB6Z/NAC/PhgyLuJ7izpaA7a0fOkbkvDF/jiEVEnGeqJ8kZXtTh6y\ngdlJxdaNAwZyYk9KsQbpI6yi2K1jEmXiVinPAfde7qL5hiaRZpYGdFjVGecc\ndSGo5/kWJbp+U5UNbzAqiGBBxhgbIXDmcu/FbEat3NgWp6pVdplgE6yoxFDY\nca5E\r\n=Cmwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/list":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/menu-surface":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.0c95c9f7b.0_1611096925527_0.8880302836258043","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/menu","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeef264a29092e812537f7c90ecc694b816e4171","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.5268222c4.0.tgz","fileCount":37,"integrity":"sha512-kSrDNBgJlKs85OnRaEMqpye/9AgVIcwOQ+KAQEM5ztvx2EMC1dloe/HCV8j6JZGGYDj09m5scS3ps8d68gXgcQ==","signatures":[{"sig":"MEQCIBcCmIOdY1CiVJDtVGMelxOt/RfYk8jRhS3Cxrmjj1oMAiAvOvqfV/yhLdLQ08oD4Ptonc50hbxoK3yFYx8oLNa++w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKkCRA9TVsSAnZWagAA6X0QAJ0rjXO0C4p8ni3EV7xA\n7aN2sHLuSoll6ir/7RN8OfPlHCEJ0jtxRbHOdVrTecrUzlTwOuRpaw7sPHHe\nxq2PTyXb1HiD651BEliuTQEcTmxUZ7Akh/pTre7wuYZaNhH159SPMgekDv8b\nbvw3TRl7VNNNeHtH0hThmu1MwCynyD//AgkFdzj84wk1uBbrcKwVNIooMTLY\nzX9Lhh/nnNEx2xwSu8O0mAfZlVz1kP7w962kWnaVVxYJtN+ixqHcFZ6bpJzb\nQunhOS9yShnmAlwe1bXGwLBBGR1+MYpuoSUbfA0GZNGlkgzTYorVckOYYHD0\ndTQDoIB/G/tjvpjFIUsbeA82QMnwCjZVr7nvBvfEFLHdxRr4iAZoWxfHZ72P\nn/n8LIQmdGZU3ivo1y5nwo0ef5emnhewpy084clPjckKxVH33JAso4qq8G6e\n4AoHXCegdBVp7lYLsy3ADNHmqVOHlp2pv26uKINJZ4no6eaOfzgoycynHZTN\n2CjvedmYiyU9NuympW9U3D78S6J9NstlHp9YB2K66qeY2kfEv07C1BR59jR4\n4jAJRM7uUlWZbYY4j2Z16TimQeJ95CSnpyDaVeuKEwYwGfy2yI/gUlVcUkFr\nHvKd/YW9p6cX9bbtnASp8os7B2OA0OZeTNTx1wKCKc4MwolkTOem/Jx1oJ7H\nq2BS\r\n=EImX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/list":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/menu-surface":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.5268222c4.0_1611170468397_0.6517866127589098","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/menu","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8635483b0a7bfba4ad348240442d690a5f6869","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.2ed2d829b.0.tgz","fileCount":37,"integrity":"sha512-hBCxP4E8vos57fjfoQMYE0uwcq7bQ9D0fHgY2J5UyxvIXt1vT5b0fGEXMzhCRBgsTRhfqc3UXby1Y1769AHQtQ==","signatures":[{"sig":"MEUCIDzAorOe1nDoRcc9bqxlm/kjnbvyrPuZNrda0RF4DXCIAiEApUKIz2Ug61C8iM9VDt9vXv5QDsgTD3QeN3vysZTHSUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLg/CRA9TVsSAnZWagAAnXMP/ieirr7liTfa9e0SqacT\npJLHkVinwclTFgVHNp8TDQLV58redFMqyRtVKapx0s4gB3TS3yoR9r1nDPtl\nfjeS3+R9fp0N9hcEKntZ/Yd/tNSFVnMFgw+piRN9L2ZfMG/oFwi8x5j+g2Gb\nuJnBD9GJ2xRqFRhxym6LyzgkPm74VLQg60IaMFsxp9lat2mIgeTLXUbhMpzI\nGlE/tDeiJbBnTCSJ7UNRH9UuLn2qP/MXZMyJgXqvgzg4zEYfLpndoTY1/9Ly\nwl88ZSYEDxuiULnxF1sgBQPzcYYEvJlU+kaOtNlAK4YFgdaT60wbgZzOhrO9\ncpZSObVRQ15nJGCGg+HlpUDSKvCMH7gv7WxsKrq/0fTrKXHtG7IxZxZA1Op9\nxpaHBft0jANhdVfXxbrQ3RzDh3+o7iW/Y+77rQMArBk9QLbbI9CimrjE58Xb\n68x2imlpbeDdvfrg+ApwrzJ1wVF0vgEcbH//MoFT4lFCEjHbg3/Gpv1SP9xJ\nucC3XK6t1/FUWFzPazVgVzwnSKsopJim5VYaxjhLIdyBsXWLUwKsoJ+5Td1G\n00XUWDv6RowTaNkZ5RHBV5LOUZwRPkaO8iP+cBPYy11JQ50Uwh2mNxKO9bBo\nHnVYZPSTohwlLlaLUjo2z6K0573QsrWhJjmVu/cwbBlA247KdCsF5CF8buuc\nAsj/\r\n=UdO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/list":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/menu-surface":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.2ed2d829b.0_1611184190789_0.1712642103978348","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/menu","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f45826f76a6a4d00f6354d84093ecaf4234786dd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.df00c2b30.0.tgz","fileCount":37,"integrity":"sha512-72jvmzTq5Ailhg3CafbY4rDhsvHwngY9ldG9fOuDXmbIpJ0aRIfYYo2b6Lk4ddhg3MQ5qTHydzAcNgSWltOT4Q==","signatures":[{"sig":"MEYCIQD5Do9IIkKUoruWYiyf++rnfw+Gtuy8lr5xOB+pSRVvNgIhAKmHXWqE/w7Nfye9Ydtj6FwjmBJhxx/QS1cGMrAS5RsF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdx3CRA9TVsSAnZWagAAZzMP/iXi7yCvmzC8qlMsyx8c\n0qSsYbvQjf1UctKNgOM+02hhXvV4/zFavUkzgrxUbHfl0uupp1qiYCgWh6MF\nTiIfsQBXlThL17RWethOahbNnof87loC1Y1TakspKy7EYqZIeHfh7nocV8vK\nfjNYGnbl50SAPXPlKVZsYh9S8VJmxrjtApmCY5DM1ZGs2sXwBsnIgG0LyRR3\nvwqsgkESXZYX/rIYL9pw91Vmn98GChYlyX80NLfpBDYXvd36MKFSQvLUDnPU\nST0cU4aicYpYUj4QcKjqwcQ6RlcBYJlOsf7u4HJR4wZyt4+xULmsoJo/I0AQ\nhZ5G8Ah8u82u2aA9EXhHIc5/1KVdboQM4KhHwdLTdDwkdB5GvJxYBAPSfTTz\nig/S9HpRWiubIrhkjuoR6JlKzQPceSgy0SWbHyMyde9A4wwsHi5RwA58rbwl\nSfa9Umos/vlsGpBi5QUqXu5L4zGwyzFg3EWNoCzlu4NTyuP22/OgQ9N9tzIv\nu6AiiVZd3/bAzSYNBo3qnLghxkIbkpNVWlJTKPz6kOq0vZ3loMMf1t4mQ3R3\nDkbay+gcUhE9RmIfmhHfwzmscksUhKTha7RXX9fEUQyPulaixOMNKb2SkJqy\nZEBTORRJnEHR8Qii4/OsMlCqGeLGun/Ia1kiRl9GqTjxTLq2bTrf2UtZcpk/\nHGtX\r\n=mcoz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/list":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/menu-surface":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.df00c2b30.0_1611258999109_0.5916079114948423","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/menu","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc254b8d6d5492aef906ac557d2360906da9ee8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.fd61b0476.0.tgz","fileCount":37,"integrity":"sha512-AfxFuk/4OGQtLGDP/+3p4LkDWn3VzLk3mStoeebAUTCZV3cQKYdT5UnnLSXkHPDcGT7qXRUXK7VxrbmMM8b0eA==","signatures":[{"sig":"MEYCIQDCad9vBMEOEjWrrhiuHhRpausZzNRbakya2CYQgyrFmQIhANGYX2sbbpRulK8zJRhzx7xdV0f3HBF2RVrVs91WrjIL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/iCRA9TVsSAnZWagAADGAP/1KAvORJ2ZkvgEQCAKeM\nw0IWeDs+Rs+uBQmlRl9st8CTqdVrO4yci7rt/MGoleKFOGy9UP7v4kmF7VCd\nTHu2I3Uem5E/6k1QV3pDXzjCkplNoc2E9F8M3mURH282Z0JNqKFVDyfM2iTd\nEdV8mAKLcp0nrITL0FE+mq9n/cVfoGlot3LkRvav/bDcbHk7TkcuImGqNt1g\nKybhy8R3cKREuVTmSggByog/goikPD60hK9RfMkU5pFC08p3E21ep5itcBgt\nrH6SACciEvquDig3n63JPKYQZPmvIBidVQXs/MyrItqDFZq7J08ZUrMcJ1hC\nQgmUslnt6hTp5k+gs9H78D2xIlbkgI098cZ2qjceoAAkJUHDx9eHgrot9T8K\nwkLEW16diQ5cFWUdHPwcQ6kjrqv+Eh69qnbWhzCmX0GDNN2G2jBofGJov26M\nL2lYApuwveMPGfBMGV4j0PR2n15OKPZXPyvSDgKjXm+0jRLYC1kwDrG96vZE\nJeZqnlFqQGFhv5U4PTlZiRgLRtNcWY4h0Zj5rKgq5XVcg+Calmo6efjVASEU\nL/0YI/Lc29fksKgnjnYbq9t1XB7TbKTVahzJTmQMCEC447wvNhRmWBuqVYcI\n2rAxoICFOITpER2mJvi9MHXHSmLBXxvPy1nlCuKlFDscv9a1DVVXV7SJhdXr\no6Nq\r\n=2Tas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/list":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/menu-surface":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.fd61b0476.0_1611259873635_0.4640664850727594","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/menu","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae9fe5ea0c8959217124c11dd23f2a7786c038f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.3fb3a0265.0.tgz","fileCount":37,"integrity":"sha512-kjdwqg49VomeatAFEZDe6BjDdYU62JXjN4a1VBXXpzFylu2TUPLuXK8r/Z+H2srYQtaX2OlqRl1Aiuv7LjKxZA==","signatures":[{"sig":"MEUCIQC2b45L8aHESIpM4BojzjcHgzJayZm4KkW+ebZ8yGwUIQIgcOXMlHNos6L5Wxq2KuiHYARBt04yMQJj1+tlPRe1L4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChcICRA9TVsSAnZWagAANCUP/15bcbedcNelFd1R8n6s\n+xJTBvk71rOpeGE/hyss71A1qiX0sSpDg20tI+r1F1718YIZVO75IRilqPxX\n5U+uQPvk79B9l3/CJ6s68mVFdW0xvr1jV/Hl2Gr6nbkpCAKe5yzoILautBD0\neuYAiW8WdjrKCX70DV09F++REIJ/PiqO4QQzTeJ5gjsa7VbhmvogS3eXVVFF\n7PRmyf2f7i/tAj1zQTiRPq4hVjoepOEfYBBq1WkvMGS4lMubhVZjcDUi4Hle\nYRXccHKdIzpw247Oa5jjmXP13FXdZufCbUbKTv0VDk/h3snndU4MNNDDIkWR\nQ1FqtTNnenuj7nP48TOa0XtfOOh8+0lJb2Tl+e6kTK1XWRB4lCJoFKKoYpBR\nuZMtoeURAkjQCQJcfLgR+LJR3GTcvIrQ/WCMwxeJ1FpEv8d2NiCUhPu2bbGB\np+UnbtLXr2gGv0KeUjSrGbVKfwiWm9RwizzUErY+4SDzLUGAUiagwvZ59y4P\ntq3fOslMMDI3XFQKsSybPRYsN5gqmMcBNDTvrD3QzF0WH/KB4aJJvW1s9Tiu\nCCdLSjcjKXQ0GJbP81fcTPSIDcZZT1GUR6M8RLvVyWZEgexN93gT4JMQ3K7u\nKdtUW3YgXcN53WZ6SqU6EMSgsnxBrPRRZYNbKm+zt/INamdSGS8hJkxrQnTu\nzrbh\r\n=J0wI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/list":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/menu-surface":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.3fb3a0265.0_1611273991918_0.6753473273336854","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/menu","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4fb36c7fab84526a04aaa24eeb4b75c64e6086e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.07deaec27.0.tgz","fileCount":37,"integrity":"sha512-wV8jcJ/ID1Xbtp1TU0moEINv62lmSZ0Qt1PqzEFWamXB2gdUq59BIYFejgdWY20pMdCUzKEcRZAJXbbspM86gg==","signatures":[{"sig":"MEUCIQD+Smsb9ef8Xy1Q0yAqIkW6Q2bb4eocypPYSDAT4eE6uwIgYFM4KJO8H6wVlAaTUgpYeSPgUZbo44+o1mZC6ZeYbvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQbCRA9TVsSAnZWagAAnjkP/joSvgbfzvA5tJzvIsu0\nNscKiwNBmxgI1TvvT9zKq/LyPJK2EEMrwx7tFPhY9w4HBqjQYjqHZBgbp8DQ\naCERCWriq6GBkWoTRa6MbK6btFUUTGSYEoX0TCwFoaJF1xXCMay0SdWOpNeM\n+gNJAh1HUuPtaYUUI7tu8f6r7BDSVJfLcL6tHfgFEktkEwt/C43unC1t3ccT\np/GYe7KjE11NZQCFfn+B1eOhzi4JJu76vwqEcFmjH6prdUmFodOvGA3NX7kG\nUyP8tIAcy1oFMWyGbgL/a0J3CWjAo9ewsz8+F8cFoRR9KdicCZJlWVvpbpYL\nGjHDYjG/nBqR52pwMuDuV0GbVqS/a2lw+Doz8Edyaid2iAj0ADlTdryFZ3WV\nFg/5jERsciNhRzVIpGLn81XpZFfuHrJLn23EiA/dQNQGrn7F69SEw6BvoIN1\nfpHZqvpSJ2UR7MHjuL7jt7XoJo4rMqj8KwnBdSLJ+4grkURpPPdNJssdJHGv\nSz9Ni+HH/VxNjQorHXj/Bre0lCf+FCrGdAIvuQ8PhgKiI2tgV5G+m63Y7rQF\n0CUGmukhhQV8a19M0Vj9co/fT1LYNFsQLibeV9wN/ph9avzPsHqbr1j+3hcp\nLR8hbsvTHl55++ANFsU105S+sL+HEY1W6ZNiLv/bqegqdzGMhXPTg4dxj2qr\nwEzM\r\n=ty2O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/list":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/menu-surface":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.07deaec27.0_1611334683159_0.9736690248647728","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/menu","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c307dc4e251ea2619e8c857714714904462ef46a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.d2959b16c.0.tgz","fileCount":37,"integrity":"sha512-XiYQJu/nihzCwugKp8uunvPuRR2l1kufrwJuv2Lp3Q79/zV3Tpgj1lsnVa1joljq0nqsev6//ZZJq5Ob4+HFDA==","signatures":[{"sig":"MEYCIQDaw5TLeF62G3BWjnZXjK/HCe1VXX6INKh8LW52w2ZQegIhAKwYRewDIQckIA0JUyXp9jcOzG0GICP3btgPho/99f2D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx81CRA9TVsSAnZWagAAjm0P/i4pNeTT4yZJS50aLwtq\nC1jbf0MFpj7OxQI6FIUes2JJI8AhAHUyPWh+/m7XX2ao1s/5dxnA5JyqwiTS\n5XP24LYEthEzU+v14AzNmBoIn8wwuZHVfMzPxoOrqe6hBEqBu4griGC3oMVX\ng8QwjFUKYc00BF6nrtu7vWOHNHJDXc2/mlyDkniXdsnijJloSOtcsX76TmpU\nGtvmJA+W24HZVTNedt46aCUo57yqgEqEnHv6ic30HBVp1uk1Xl88ZX/OjQcs\nFvLEVn0t51/zHTGuU4I4tcH91TKmWiF5//q9ppXvVTgQapjMl51xM0wogOkJ\nPeuERjL+Flzg5Y/oYoa0jwk7nXewQxBy12yhiNlU7El+GG37kcZCUTldoeh5\nYBcD9Tpr0H37KGpeqq+r9L6QMp0DmNrj92Od/UzjECFUDg4QcwupnOBOwh95\ntmSi8Xv8BAhEJD1gC6ABiLI/oYGaoNZanjCDGck7aLQvwvXW7HJ8qHEhOFT7\nQDJsV4KvRTPlPeflfwIAAKAqEO8XOo/WamHQwMnoYKBs51d6tt+pBHwxCmlU\nbdCTOtt0dpqDRIeZqtFezZcf/v+eKeQfSnRFu89Kj82f3CllnthGTWXq82/y\nHx/mEoO8dxBNzJUTvE+KlFnQqc/pgzTbFa8e6TIFE5fDac0O5ozoLxbzhTvp\nqFBv\r\n=OL5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/list":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/menu-surface":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.d2959b16c.0_1611341621478_0.9775866058274851","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/menu","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea1da331719953c5808fc042e5153d5b489ef3a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":37,"integrity":"sha512-IBkMzOb2OAYZOICn3cnm+im0PaSgI8yghTPAHFojvNcBLSYmIVF16szgB/0tdG5thsyLufcEscQdoD7/n1U35g==","signatures":[{"sig":"MEYCIQCZzHLndDRBtoxp5ONPyVC6TJ4fAxFHSqVU8T7SoQlOngIhAK9hvY1WqMcgZmklv15JrT3D49SGhOkEjseCn+Zr4dME","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":687181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1dTCRA9TVsSAnZWagAAQ6oQAJDQY6aeDhVTG/cZnD6a\nmp647MplU+D9qLKT06jLEOULCSKm5poT+pdsTxD1540saPT/tFo5FRxlTLeQ\nNTjPVwcGm32WhKRbYxyv9qrlq/db4AI8xzq5Bpe5fkwuusOWLjDCdPpn1tT4\nmfZoy5I+dwB/Y0vpSLgRRe+dhWbMPvm1m6GiGDg0nHzP9rmw7BHT1si/9Fm/\nDgekOO9sKro7TptereAkqyJHNSiZNv1Iibf3Zp6lIkomjdRNYZpVc/EB2RsJ\ntkH5bmPyclMsqCRTuULYZ3DBZJ8xYt0SEslvGQ6CfSuj41oxeDXqZKcv510n\n9SeInhK9mVDhLZe4SiOhRr7ejd+WzEEORPQlZMU/I5E0GO7syMCCMKYYEOSo\n2YZRf5mxAlHIokb+EUAGzJhApSF4uQB5LrMDmCliDvmaOTlaARAZnRjrYAkD\nwmJkekAUC9lzHpt8KaZmzpz/NdvRUo39iPdTMcexkEgK8pgqMLt5vpDwuUh3\n2GtTaVM5W3OCdaxTq7ko/Q9a1UXdycseGGiZRM3FCnR/A+5ZH9iztMrsFZ4M\ndhyFaAVOG5Iz37lIijs/PfYjXmjqu1IedFsIjvbeL4Epo+g70lgh1mrGZkKV\nakuqquRDLze0S9zuBd8POTqK2fPBteg/ZlWXYwgJOeo4t2L3nEpEMISK79BC\nNsbn\r\n=tCbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/list":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/menu-surface":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.75f3bfe7c.0_1611355986865_0.2134593137538312","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/menu","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"479eb03f40c23e70f24de5989efdab5071902ab2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":38,"integrity":"sha512-Im5JTC7WpnZnEc8BcBbGRTl5RWizJddZD4UyamZfFA+6KVkqNkKfu4e7IeAitqtY9AyyUExbuUhO04gP7omQsA==","signatures":[{"sig":"MEYCIQD4/0+J94eebtxkzNYU6DGPuXJ5VBaCW01b2N8UoioTDQIhAMAfynVaxgfQA2Wyt5l14Ip7j+xIHfonsALYXbO9TP+y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2G+CRA9TVsSAnZWagAAnZoP/02HWITm1VicTjzZmK2K\nwOGKqn/iq5HdNM7n9KZJMHbtT8ZBsmu5FBmkwD8xDb9RwlvgTBgCyZBCKnb4\nBw7KtZJOz4NTpNR3/A0hzRj9sJGplyo6f+L0KoyU2XBk99X/8PuOHBsPYwIK\nY+/fqQK092DGF1JhsfYZ3lE9CnrplOuv+GWam5qW72P0WtHoqNTlu8ql+7D1\n++qYKXIPU4V8setwXJrqNoe+uWOrKZtJDbKR4Wz8dy+x6wApRN3sy3vvCHxb\nhAjx9CL6tRyLuS8sCB8PI8US1+zuylv1NomqoCp8UUsQRvTlU+9Rz/2U9tTY\nq+8q57FrutORE9Clex8E1KxHjt/nnEr01yHlz8yoZ9BVXPv5dQnHny1IczPu\nWeyssCyMbqIneYB0dVeGsIlq3TtbloBviBYwles6wb3xlaSfulVRvN/a+WsZ\nj2MLTm5jV7uap4hkolHMA7HLX9IXsRTf4gpKAFNmEZNA3XgHtiDm7syfbnul\nFZD2jtccEhDTqHfCnJhLrJDv03CDJjbbDB/rUop1Z1/BptQ21z+eQ4yB4Wxl\npZRrbXWwM1fWcdWWIJvllJkwoaMJqK7cM3B+8NoV+FZPCh7/EcLYUaC8DFNr\nihc/XYybwgxhaTSf4XJPgRYmnLMS46mHyHYk2Oti50S3pg9iuLLdK8XrtB/o\ntoiR\r\n=4x8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/list":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/menu-surface":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b9adb7a0f.0_1611358653958_0.8148142773914773","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/menu","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c8ca0c1800d99d3273060299a1b1e838fda91e1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.d29ec2862.0.tgz","fileCount":38,"integrity":"sha512-ofFclTeVRhq2C8S6pKv57+whE91pVHBv7v7/sw/FJH+7vY40vAOtpz3bvFM4gyzLF7LwWhkZBayZE1EDAiNBnw==","signatures":[{"sig":"MEUCIF+6a3ks5exTfB6XQuHKBRRXOCRXB9WqxwIL/eqHLchYAiEA7pwH/fpCSEowbOWi6zb6WjvCGSZlXGoeudo9YX5e+q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvEMCRA9TVsSAnZWagAApgsQAJq2oFo3WqsTL2CzJeYj\nSxRGxcZl5+8vpBZb6aHIDvzjItbhQD9aavSwM+EhP/PLBmonBVPDDHSHgHH8\naTc2CcYJPkJ3K3k8wpd9R31nte4ep5FTQdIH9XgjxYrkf/NQE/g5koOkS/Mg\ndyxMPxRyK6nTh0O22h976xh6Wqqm/Z+8xYYa+aHdvVQ5PHBCFv9kuj8cBO53\nrSk27a8Cow57TonXTTtvKrWwTJyejVihth4bQ/Fq3kjqNWGuZYJEmMtgVm0V\nun4NmxiqSWTQMuRYH51+gE+BkNKzfGlvXu/skgpsL7BiA7kbmiyWqZoKVdYM\nkpw8sJKdPpCg/pSv0s6S9V6JQQV02g+f1qoPx8jI49+WbwoV/bCEZzK+PWeS\nYB7vbtv+GL2lAPyx6X+L/uODZ/o5jTBOlERSalKrjOJNccSlhiPFGe2TfUu8\np8DDX2a7aK2lBNVc843MVrhEy/1dRl7lYAh0vi0rQK/u/hyk8mliXGtEFTx7\nQbSmZNRz9RkxgoVUd/DOdcMmE5YOtc5Z9D/+jz+alpOdYnpAbuRsVJ7MRBPH\nMaDtNgv21YJtv4dkwUQA0vDhARffo4PI9DswJsFZQ6rpUIVbJ9JuUGU9ioEI\nzJH140SnXmGAfXS/cOu6U3JNOFwuH0+LuXSY3rAxxn3jZqJCMkkve4cLtnwK\n9Urw\r\n=C52u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/list":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/menu-surface":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.d29ec2862.0_1611591947870_0.345272398407096","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/menu","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a36c41ce1c68c741fbee5359b974f30a00d986ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.96be07c68.0.tgz","fileCount":38,"integrity":"sha512-P7PsxSUytKSLU+rO6SAqCIEfyLvsuiQKOnvSudzdOW9dabYDVJQJIpkBLNz8XM+z36HNfXiJkC1SzDYc1+20pg==","signatures":[{"sig":"MEUCIQCSGt8f/HvLZLpblukl14spd/DjMhXJNrkBQXi0SI68+QIgB1rdS0PZWSh9yVrqv3Mgq/kdb/ZnrVcQr+wztTNvUpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD15JCRA9TVsSAnZWagAAOAAP/RhoHU+nvKOXNpoXAx14\nJZVq9zuNj7c/Sr+XEiiCQ8trq0CRF6Uxou6WlJxF7lh/gSPtoz1AxdPg5ut6\nnlvof4vYwZIP4XHU2s4Eeez14AEtCgcxfFVZLipKQCqXvk/8+RzaqbsiKpg+\nddHkyAmZWBts1f4UoZwTQ8HgnjroCEyxtTHxHYt0LDLjWCfBmhFenjbehijU\nx7saSDKs/0vWi12Twwu0Ji6JLkTeZIeMVSCHFRK4cCZ3JfnoaMKYO7PMmAjE\nJCWQwIy4pkI44n0pReMwSJPFnu34NhJRn2t2K7ljBb67VmxqCJ42gsebUsYP\nUXQgYg4fmqXUYS2fY67jEGnRZRS9yob2z++r6eFtchm4khW27a5ZuLVKJHjE\nlVzR0l25PFkINg5PU+C4LEEaPn6PT7Iv7bpxJyEH6ZQkuIuyjX8ECc4EJZzE\nlqHI/EPTE3Zv6CzRnoRyVRImZhJWVXALa/EoQICs5EHBSzI8z2eohR8qrqeN\nlq9KFWPIlGxPjRmjAxnUcUI5Pl8UFcTJcfMxNGgkExM/4j0HnX5NH8KEiod1\nU76QPNwdjlqygqeDSGRZ0Oq+Qk5XSmYSZF/rL8HeW6Zrrs3kK94OiSwIQL5G\noV5du/wDWDWHmEIA2daA2va7TdnXVPZ6DbL1aDZdRUkhe/2C9/iW5ZcX3neW\ngFcF\r\n=ns1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/list":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/menu-surface":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.96be07c68.0_1611619912804_0.5431464993222868","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/menu","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e7b91f4b2c6b1458dd20af35299e21cedfcaf8d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.e383944e9.0.tgz","fileCount":38,"integrity":"sha512-XtoCs3/KC6asjN7JKnFNKPcFPt3rWC3ArWrf6ZPQkICjF4W/IGaT76VsS/xH+ur5kysuXA3dOep+VmMdOSlXMA==","signatures":[{"sig":"MEQCIAHtRkYNR15q73lP13VegslZK1qnqlZaS32bzjcYDa+tAiBowpIY/y7MvKWQHXFsgVlNejzPjvPNq7rbjpPv0LvH5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3R4CRA9TVsSAnZWagAAgeEP/1Br9G6lzBEpjo0q3poz\nEHGBMoBIGue+aIoPWJx62KZtZMpEeEMqryihon/foUEyK1R74xXhsIbAzLKs\nTyiYUNs/dvufgnZYTd6MziR4PgyWRTFQULRM+5kuY481vQh/ruaHOpgVVi7+\nKok8MDkqgPGI6peLeGet0Trep7LSHbM72Bfdw5mOyGTNnHJCvWhR4u1bmy4H\n8NBMCfbfmA3+qIphFNTHginCyukTJUs0sm2MOP3UT/qMqS5KPkWyYkQKl8yq\nNk/Oizykds7wmvArKmyFd4lZ9E0wGWtrFTXApJtJrdP2psFv3VHG6fLm1D8K\nIdy8Zxx6mTeuaqQSUi3AacRZ8tuJkpG5kAemN+45GapqGVk13BaGDpCi5xaj\nRd1+TixPfGp3bES4VTQX5INd9L3675wJ1qeF1AMqQtME9+GC0FhIRejmZYeh\nUvsCahBuKP/epZYaK37syqLFnPvl164JPNxPpVo+Pt9sDjJWNvim0qXVyAb/\nSm/xeq3MNZYKNWTCw5LrnpxZPUBzAmNFxpjo1CzNRniqamjAJzmdKxc7UBZ4\nAXjoOTv1Y5ozRx8mBVAZYpaTSEYmr5bC+LEBVM5VisfAKh5ihRBW34ssE10R\nduWn7RAP/X01l96boHWRI28ia9JksfZArhDplQOJUpeWtEBKvd7E+b5yWAAR\n6TCH\r\n=Lt+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/list":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/menu-surface":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.e383944e9.0_1611625591298_0.16999260946209627","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/menu","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35ddb84c0984ecf76adc788c443c8e921fd2fd13","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.623af861e.0.tgz","fileCount":38,"integrity":"sha512-igOSYKcAXfz34IachBAwKTlgB9i9AwLtgEws3EEKS0w3FpYxe5Ek5G+QqPtA+EeDchNtoBTqjqPmNKwM7cDYqQ==","signatures":[{"sig":"MEYCIQDdCNCrvQ91J4oQeiwBv/oPjL3/JJyOq2ZDOCy/miizVwIhAPYIeB67eCYBpJXXV/f7LpV1t4S5xbQldiqSl86D3iVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5ClCRA9TVsSAnZWagAADRsP/jZ+NaiJmLDiV5A1iS54\nGFEehRwxox83sOyMqj+cBa4aTmgY61dhe+m9E+dm/KTlSQiDWOfMj6SVRJa8\nXzU0TSDnZNjcCZnH80xpsvl3SVinyO7zmvRLgSHkEVe3D3H8/Mwt8FYlwDRN\n3k+3oyLM8bONhnhrmBc3pLU3UH4DqX+iC1hIXPwiaClEGxXRvxqRcxkCLzLb\n8V4xjp50CsU6azxsHVUivjlYHKA2Reo2E49IoSMnWRiqDzJA8G6ESZczmGQN\nD1/8QrgKEGr51yoKG5x72GHo842YPDuPBlsz4YGunj6S8vvPEe61EU2JuU7N\na41zvebKGsu0LqITrZHoMStIKPd08jdf5PHH24dv6NxtxzBse6BK/64VpRBE\nEA3UeuWLLhzau1k+8stt+F06wJeqE41HgWHf+kQXvdVHO15GGQLv/1i3X4Mz\n5C3yiXOuSClpKbrmGYgzMybeD+gYpLGr/jKPFnd8NmUoX5by32wH3iaMB4Q0\nQuloTIAduGcikflpwPZUdyhLBnGH4wZ3RP7zNS38+dPteY0w61x3yzIzrUzO\n2nPEF/svczfiRu9gzVFgcY8m/L7TuQ0Y6Hl3ht1fGXTpaw6H/MJoSzb+Q/TV\nbfN3M0y32HzXsNRnJ/6nTREKKF8G6z5GuvDt7LU9Y58Rn75WLCheqRlwz0f4\n3Osm\r\n=6QR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/list":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/menu-surface":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.623af861e.0_1611632804823_0.7840499537242038","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/menu","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fad9fcd5436dfeb02cb8c94996b3b8d65ea7cf7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.6863fd43a.0.tgz","fileCount":38,"integrity":"sha512-l3j66lcsvUhwHbOj3AGJ1mvmOLtCHgO0OpjfVV8YljdxaUqcSAcaw1uJJGZJ58YGzER7otuymugYaMiO9803OA==","signatures":[{"sig":"MEUCIQCI4/jnPo/WVN6Y5cEBojO6sCMzE7A02VJeNayu/sVdggIgVB3OFMOQjQ4N7JWcnhXVvTMsdfAWK3TjTqgXF/7XC3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIsPCRA9TVsSAnZWagAAJLIP/0gCUGMbhts/XCyFjLC9\nLSXDzHY3L0fzU6dBf4tzDvMOX2zEcxTn+a5vSFkuke3/2EC6UGGZQEKRt+6q\nPUE36K5NTBAosqJ7XYT1I/w2HW/4p71ipxHncmdYn2WHawilKHG6FbsiFjHd\nFw5JWXBneUOigE6PnWE7zlgr6RqnMTsmi6w+x38DKmSk1fJXIG9NHyfgnutr\nbJJcmzb/+GyNqFvEovUZftumDuOxFN9+zPLFIAz5qdvKB0xDMHqONPnSdFTx\nFoU/Prrl1oae8kgLGtgO5sk3PwxuVioWFdynU/gVt0aOmPyJRzzPZzqLEQop\n9csGnjWmNTupPknkBFiREv44M3oid/AK58800umkh24NbSoUsYYzHXW4RQBi\nCUqQq3EGF4ADazwBKcqkn3QMpsbr+U7mgKAgxknK4H9pe802RNEqqMerKiyN\nVNAt2pH0bCncLR8LF2OG/xPahdKkRyPj2xDlKcy+thb8oaGLfzwKE/Q02Mjl\nLKo5lpCeIoNUgn12h0jkceaLf1jR5L+efboWJvWqOfx/3MT/mfLmYT+U8FyA\nXGWg/ZgS13QmSaWABdR1hJnra07qu7Idv+PwJr9GGSYlZ5fjlh0eqVeaiNNt\ncQow+11V7Q8EuUC5ZvxXLicJ6JUoyia1iME1Zhr9yYvYbq9IUdNB1ZXfeHD8\nJpDo\r\n=gNGb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/list":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/menu-surface":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.6863fd43a.0_1611696911065_0.07984112824946865","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/menu","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2321a3ea62ce98b93f0d3d35192c22cba1d6ea6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.ea55b87ca.0.tgz","fileCount":38,"integrity":"sha512-nnvSRPGJF9jjpjLlIjvaRQOLstnHP7Fyuh4CmRhvT9vBh6pIkrEXvF++Zr+QgC77EQQkblAArWMVryd/SXPRhw==","signatures":[{"sig":"MEQCIBxqPmVwhFcMt04pnVs+0Pm5LLdiMMiz09WdaxHR2SOcAiA4iCcXJ4zipInenoA/MQcRTKfvHtlpQOgwZ4Gb46yNGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoiCRA9TVsSAnZWagAA6VYP/3TqC3T17vlwDq842n52\ne1UiFYSp5DCREcPE/lIQDEyWNiujniuN72KogMShKg+q+SiaRMkicpiFAGEi\nkG6mtfjx/8/j7GUDZ9SRfhclDLTh2pSGJm+/UoyBjb7q+j6/+ey5YvRNEc0F\nSEf7MacPbsnRXPDnRBPBA7UGJlrNBtHvGZrMYcEwJhb2cTIUKGIG3ic4r/HU\n9WejIM/bVVle3WpfO/JPHlHjcWChSkanPKqWkEp9ZvH9q8HlbNmXWxDjiM6I\nr+UAyvv8QZyqJ3omx2Hubob/OkXeA9Nu7xfyboUhRp0W0capOqR7vCGSgQl6\nTkCirHNVEtqCKnfi8mjQ8lnuSbNbNPSRELmo/67h91fxpureVcW8pLbwOe4c\nPUlpywBDVHCganVDml9rFIay6b+ae7z7KSwEwM0QxhF3UluFv+wkUpb7Iaq5\n7TkEaVDa1PMJtOkuw8YPHLspuNzwlHugWgsaFIQv6mF2AZf2CakH7ulZDMhG\nJyI+Kbg+DunHRHqoN5Mm0Hs4Vu1Bjgfh2hwEfxsaYLx6G1718XzkzZoNV6js\nRW4OpkC6niM4M61LXTjDJYikMjiwiODpRflfdE6f9paML3nOHzPP7oeuTrKT\nO+TSQEinSudCNxdm5MOJJLqje/WFwVp09r8cB0IK1WoYGGc/jkcexJ54X10e\nr4rO\r\n=isx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/list":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/menu-surface":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.ea55b87ca.0_1611704865363_0.9413475793472015","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/menu","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20de782bec44b042027fcbd85f6b4876e79bada3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.e902ff05f.0.tgz","fileCount":38,"integrity":"sha512-KQto/DLVoDC6cfflA4tdLPVsf538yASIZYZRKcjbLV1k6OUQOyYwaisVy2DDqAXBZsu7721V5uzbGyzK4LedEQ==","signatures":[{"sig":"MEUCIHVm34cbcCpxzhzPgeJHZFDWYySLKijgq0d5MmRwodR+AiEAqVthojmcvFtrSfAbgq2YjULkBRN0BD7So7u4rb/muG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5gCRA9TVsSAnZWagAAT/MP/jlNFltUjlRcD2nQaCle\neXwSLt+hUBnP9q4pVP0kNvPonfoOfLglBjf6FHloWakmaW9E3SCKbl/Mhda1\n2PeI4T+NMGoGLp/IYYe92hY+7QccuPX+elA6iy7IKZVswvN1z26E1s8UeXKf\ntquWF/4nGycUPZSs30LOS+F6Eu+HXNYKMtNMXO23/hLCB8bk64H0BrgPtShj\nIxeZirIL5GK2q1jhdaHGYxoQh4H2TRH6uTG0k2cG9qZZ41AK79gVAT5J2zUc\nIULnJWO61+A0zdSQRt+wQRjCXsQsb+6M9SG7oHZ0yQNMTwkjOCaZMRO0IqYh\n78OywD3fVhTfanVlF8L8JonNh710Tf5SOJLbCysWWEtF8oHd9+rqjTGIbBt7\nMbgY/9LLCSESeDwysmNjpVSyWp2BWq27v6e34ml+oMZdqfQJRynJD/hlikVW\n4E4x9MDUGsEYuRPyvm/twi6KFKzCbbcCKO6xg8H+advyI8KcK/FZUbd7wcrM\n9gK+T3Gc9l4sUPemTPnI+kRYusaUzvbXANnlcLliBg4Z/+hC1dT/a+SL0bE6\nPsvAHwm4B34ibviRiO8Z4UyyQhdKquMsnpe9IskJYM0GPp2QK/eIuQjnyrcM\nM4p8YqfQ8ArCv8SYY3uRz5Uu11t7jDyXGqyGPeZsyd72vJUa3CVQ1hyE46tU\n/cla\r\n=cvAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/list":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/menu-surface":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.e902ff05f.0_1611705951536_0.48308718484944513","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/menu","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01f1ed66fb779fe93cc502f97e426fb8630d11af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.2c9fc538a.0.tgz","fileCount":38,"integrity":"sha512-OdUePS4jirGarIkdYcuEbYI5nco8x3t8F0QQeiS+7hGkqxvnX3Pvc7iQdEkFDbdW3nP5t93ngrkJc15lhB4ypw==","signatures":[{"sig":"MEQCIC0mUA8BTJqr6r1GedXfb+mPJ70cQ4+U96Oiz5ZwpMsXAiAM5VRUVmPKCexgK8XHIoZ3xHyUR0wOimTDEK5mN+83/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELPKCRA9TVsSAnZWagAAerUQAJPGRiPUzhSALH7DGZ+H\n0Medn5np6y4dFWAt1eewrv2Z58ccPriaTLiyRJti3MNbAjTxeH5IHKFgLv5D\nVa/+877oxoglkHEjPxA8FRopgsgq+1jjTt4/+54Ug0pOeq0aQ4hwCFxRZZgF\nB88PVTc38t4y9adTiq6h3bNlH+RvfLNMMBkGdWAuyMviWDPCYe3vRCVKDJKj\nqEC1Yg9kOKG/FJgpQY70e4DLkfbzpTYb0q82Lfc/cBNQzsI404aG/UDWN0hT\n7WrN48Sfe1bRWGltIgjSzfBnh+Qb5FulnZ10yMzguoUSSxHI/W1PdniKyU9W\nn2EYa4Ab4ZxUpW7Br47U16AJSxm6ZSLkX5nZArX7x9BcAWhqgzIFwapmEUXT\nl6yQ0wEZS25UaUC1dt6te8gY7/3MKGGhvzemPCZDWfT4XVEbjsf8XpKzx+tl\n+o9MOfTxbBwJX8NX5wbsStOGBQzXntVkNE+4gvwQ1yxER/au3bvEf+RmWLhP\nVyRyh4h5mhbDePJGJiHvQYqePOU8kC45e5nfdyaY/aJL6ZfvDt5Xf64tjp/n\na7xmlRIBGv5taUs3nWU6oM0PH963OwA+QITz0q6ldYIxU/Kglgs9jamTeJE5\nQ/G2GEK+h3TijxTLPRL142uhTwgMAJKvcKQOCp3i1TdA2xmm5xOjXu80knia\neHyc\r\n=eWGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/list":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/menu-surface":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.2c9fc538a.0_1611707337898_0.996238533528591","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/menu","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82fc418a5fad2d13c300e11ba46f0167f9457c8f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":38,"integrity":"sha512-2eXPIjCdlOCKN61yeIhs2Sqv7VV+qqtmG7jJJs1twQBPWyyfUFh2ztI/1wXQt9MXxk6swbSkUS4eRxrj5EBvng==","signatures":[{"sig":"MEUCIFnehggz5N+7CqDK0EHiJ91y0fOpeudSXmC78GALdAGUAiEA+SX1oyxGDUULJHIkgLA3jYMIY6L6Wck7ZoqqdvcGGGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAyCRA9TVsSAnZWagAAnaQP/A1QUZoWmdSP1NBwsN9s\ntEzOIXRUIp9GdVFsVVNtyWrITZh+ONgexDZ5MVwqopN6P41q0fKmEMCSubyV\n6IpAzzdnR8K2X7lhyPXyN7c3ezjsrlCE+XLmgr/DRMGa9haDb+xvFbPmZQXG\nW/3Nj7I9jLBD4DPdWBGMqIhx3J1tUvzRqniTgcN0c5RcYo8VxGYWOsr/0fcr\neOzzISs14gNxtyneMVUtdgkBSHfVvHodjHw+cxP+SHTaP2WPBrs8u2iygWyb\nQGIlY16Dw/HgZlsTeJ2yePQTbavgTfF4Jh6cLhx3FQCZPRJB+QBQZuVQDCwB\nKRH0XkGjNlnUIYiXW/eA2D5jVmVmko/EcVsjzB7jSrJkwrHFZF4aT+XMYM2m\ndd80a1m567L/cDq4u7Tusw18qdIrTpq/vrjHGpxOeAGBNhUSjU1A9D6rAY2V\nst5cAD2mzZhoNj70M8spqgBn4uJsdD6NIz11CevIfTu9CBNFpzd4oTDDTMjl\njIlcpzDytuD8rYwwCpEzDvyg403lplUJysYI2wi+Nc6l2hsevnYcJsfgx13r\nogQH8A62kDEEwkV4v9RwYEvevhj1hPEinF4h8qFqVqljAlhYw8nUS7CiCy6T\nWimkgkuQHVSD5IS/H6qo3Xa4wRQCCCDA79qkjHtNB7kL9+tBDnRQ/SnJmsVm\nXmv+\r\n=NmK7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/list":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/menu-surface":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.6bf56aaa4.0_1611710513699_0.4830786322407139","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/menu","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef4ab630cdadf736b755a82796dba93a556bdb5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.994873795.0.tgz","fileCount":38,"integrity":"sha512-xAlpq8rTa8z/eJJSPalRc72fUCf7JSGHulc3ceaEVIhGjy/iMgZcjfrDkTj0CgXTJ2lrFMH/vh/amR/AHpNFEQ==","signatures":[{"sig":"MEYCIQCf3xVcr8iscNPiYCB19cFJzc9MZx9i0pESKdYc5lwPWAIhAMfyT2Ud82qbX1Aaly4WvSAl/C7lsXVUp/ejqZGCByYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX5BCRA9TVsSAnZWagAAgx4P+wWucnOhrfb14Qs1NdT7\nuMhoFzPhY0B5XQyFJevk2BIcEEaFFk5goicKatayY6Z4So9Ry1RuPmg5u89/\n5opECNeN0i3jP/J+EBAhDccb4tBhOl8YE8bCN615aO/VTU81Zy5cMl73ACcV\nwfPneSw7jJWsYK3K5Gi4Nkdh/pW2C+QJfOeFr4DvKJRqMMkU/iIo4Mcb61tD\nBsPmhfd69a3fn5ebTJN/+V11i889raDuwrrl0o7YESpYXrUPDlG7CsmZY73S\nBkf3mJ4fUYzZ3hcjj02ybHydPWwWGc+/TmLiGWlykSJ0i6Iprg5j1350dcLf\n7JQYHTNo5BopqPtpOxXN17ue5JpYpDDANTyneICgCj07EOEVBHMwBHY3cRjT\nUnaXZnonGC6C56IRdVGmSvh5uLk3dVICAH3iwJso+3aWCRymm9ziODej4a88\nHeiAnDTxTyhFkBzT9vvt4DsztiKfw4A9TjsxNGrqLUSpPkcQMN08qIyFSwyY\nqldgkHyiPzvMg/AcZB/3CXmLdg0msF9ghPJeqTyLOlxoSIgZZnjekg+b7gci\nPTi+akWAJZH0eqEtksnJ4DsEJwtGN4Sa5NA6wyV+Q9vgwXtAC/7Y0xS0NBps\nUV9fNiYdlzPbom54Ui9NB74RPdoOovOdnlQ6TsLlr7HKaT+lgHT1mLMDaDbg\nRqYg\r\n=doQY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/list":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/menu-surface":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.994873795.0_1611759168957_0.8808518962958896","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/menu","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f43926ccb0a89187b36c3c4b60d602abf2990da","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.96878e1d0.0.tgz","fileCount":38,"integrity":"sha512-W4QVT8cbraucVt2mr2gf08JiXdhMwcrhwtem8VvDMw8kkusswIdItSq8OVTWeMGBYwMKCHMur0swEYkXam3GzQ==","signatures":[{"sig":"MEUCIFExYM5Y+WrmQ1wAAOvqKvAmxbikCCKDkJpgYvvQNR19AiEAgmhhIgwCFibGSLcOdL4MnlKwZKeCNl5oYnj0ynx+sHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEasQCRA9TVsSAnZWagAAw1IP/3PZd/rSW2jC8pJFf5Tv\n4qQ1gWy8OPiEEmE01QWovtlC3pEnW+0sNg71GyJ6WjQpgd8jEExXoPAmiR5A\nbsVPQo2pEKNW31lB7mADEP35cAzrNM79M+mGlnu2tX0PtSQdbumuLoTTyCl2\npbqvu4eAUlDh+nybbG5iFOieLDXozSAnCp+LKQ/+BF4vOG7tMRaaiOn6vak3\nMgr9ARuBlgGLZc7uzxnK/q61m3Ulin5P+msGJV/6G5ZQSXW0UB9TySc+w6gd\nl/x0FImtEpq1VyLIA62KUWRu496Vgdf/U3fGjADRnBvArv6BPCJbjZy/XBhw\nC9dx5yHKKbhJ1HqAjOVW91JIz9Tq37aUSPpNqUs1f6xW1yKFJT/bwVc5nbV6\nIRI2A3YdRFUUQYoyQuiejYeIONCElNXhoW9fcL0xgO3TqvFFsfVYeZHwPJJU\n3SIKLnrjStRj0Lnne0OyS0Ye5fKHNa1s2T7MfvJ6qA4yMDBKsKQYrkW7kiG/\nRmvG4zOV3hMd71ucCGIjYXIMSa8tz+08nzzZmInZgwHOot6KSwVyvxodH5Bu\nHWXtq2e65gF7numbL7JNtFKtWSeBJqR/Jb0EilkEjqg+tAY5RbA12FqL9Yim\nb5Sqvac+Y1UIrKptw+k2sMyheCEFL5ZY4INNy77FshoJuy3AGN1E2ykU9NhA\nKcmt\r\n=FVvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/list":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/menu-surface":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.96878e1d0.0_1611770640048_0.5969955443627917","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/menu","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e650acc49f7d054ce91ce9e3a912abe5eaa14caa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.3c117cdcc.0.tgz","fileCount":38,"integrity":"sha512-Vc1Yg5ZpcxwYXWH0+RhUTdnuCeNTt1lQk9Kbf9zGvAGH2gSspn9Dk+I7Ct/afXtPPeXb0Z7VyeRWj1Fo8LYCPQ==","signatures":[{"sig":"MEYCIQDZMX/y9j7ug8ik4X6Bz5YWavpl4IOSdVS10xUR3vDIFwIhAKGA2jSUbnJlL1J7VrSbXpPoOXTohOVHGeCT84+kcJVp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbIsCRA9TVsSAnZWagAASk8P/ipYhEcavVbZlPdaxsoK\nKZNqgB74N7zQRVsWPOwdpaRU/O6E0UrAMmtkpV3mqe9Uva1/Zf09OxNlsM7L\nTm3a3ptVnwaMbXwmN5F7fLZt8WgcyQ18LvON7/lrBbgPmjQyudRCDvyyL1M3\nLzAF5g17vILQ3vUk1hp4HzyA38/LkR+/qX6K0ZZJi4R7Ji2DAo0bAaLMGZHG\nUbodc5NJ376AIQHZgc895A2WvRdMpyBS2KoUNpgTdvsyQNQyX1vYpMIE3kJV\nbaIyYaEkZzqucad+ZGX6yL129XaRoWnZBSvGay91v+imqWUZBYUCBBAbtE6M\n4DNe7ydgw8cwZbngIJm0kR62KJBVgeCNfdRiqVTg7QP6MNV2HZk7YUJyvvac\ny267oRASp00UrzVV9dmBcIBwwGcV+mEf9Yj0tmRgwKo9tU+I9L5rm8Kshn0d\nlOg6mrwJ73g03xxSbl2MdmVaVDPqnKL97BCdWMBPfLVunEAjWSbvCMB7yT2k\nsXq0a70eyAqXyiFbswUQBmRVLT047juMpIiT2uNrnee9Uy/A3GDXV/i0GZO4\niod1BMb13UaanVITAjAFv/R7i/crx3b6NiSg/wR2aDCD3CK8uMbbDCuAyuuF\nVgDKvLQrsdrCHIs9JCNTAltVF/3jrxIIVcc92cRYvP7zy43GvSJemyN4+P+V\n0Wxo\r\n=ZE6k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/list":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/menu-surface":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.3c117cdcc.0_1611772459604_0.06591663475282461","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/menu","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ae03a884246d9cf354d8398bb1b4489377823f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.b411e7033.0.tgz","fileCount":38,"integrity":"sha512-xXtEI0VUCZmNDEJmFIldFNlsJOCnn9daiPQFANpBCMnBshwyWptjBhynPPU4j8ZUENN8MMIrX0c4qzKjGWr+IQ==","signatures":[{"sig":"MEUCIQD1URF3dXd4tyNDTDY30gpyQ1laDOGu/djx2KYsVzohGAIgcLxF9ZXwQp6JKj9wi3xnI+iiCTr9DdL+ITg7JYjdFd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOxCRA9TVsSAnZWagAAj/wP/3v3345CYGRTedgk4e2s\nx/YfgDkH8O76avKEgzGfqyjzWi0B/gvLggO1UrE1mNeJYijWNdV037ntvEnG\ndraBluLlGB21gRKRPFR8KBNaNKYUL+4s3msKvjIC8f49disAODVRxIi56zD7\nqnhM5LH/VQkakhpEWIM3PNCO9Njozt+38zRZyOtmj/DCE+PFH/0lydgZj8Zl\n9wyJMqbDmRnvpGBQKRR/j6PtK+UbMnF7XjhyC+xfT2jlLYxbST+EN+1hGTC4\nvvRziH4O7tSMRgZGeIHJD/MvC6wO1JkbDmEqdgfwFDUkA0ReN9GAMAJJJ4aG\nu2KH+1dlZzK5w5T3jKduU25lhG1/z6sWxdPYq4qLBypvxfp9/Tds7OuNPbfv\nkFx1umnUT50Uh0Z753x5Ws5gtK4D38bgUIRkdCi/zem069be5BXbX4Ril2TD\nVfSc6MUDRR6h04Aj0Aj3MfolEgYOmjLPvkXvEd3YkA5myu82Kq9KiTg7OJi0\nMQ8MxtpdsP2TSCehxy4RS6yWH046TYgN/mXkDusTF7IzHgXwSfBM+OuF4wTx\nqd3WhmYhy9jHYEyktvmAyFfoGtlIf7uCYyHwH2RsfuFudkWqQ/tXZHW0WQK+\nfjnXtXzjLEHrMuQKN/yWDhpAGa39bg/e01d08vT3nklZDSK8EwHcLOpYavOJ\n3xh5\r\n=UD8Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/list":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/menu-surface":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.b411e7033.0_1611785136497_0.30424276758218416","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/menu","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c69387eb9f84b2706f4dd0d866fc5e581f4c1d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":38,"integrity":"sha512-CvVzeQHYM9Jqwc3bUvXUqCmm+w4zyR08mhm79IbQHWhZpy7pg59aRJ79kYleZNC6J6REksKB1adNASeU77QuvQ==","signatures":[{"sig":"MEYCIQDobTSh/GRai46f5BobzECe+spUEYTrxxsdF9wCy/F/uAIhAJsMs4dDxGsG7hrIvv3N0czwwMCsqj6ckBkvYfdmnYIJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGuCRA9TVsSAnZWagAAO2MP/1IDLwxPQ2eCT7UTnb9w\nHlk/biVLlqF1XiSNhGbfaV9nPgaxQCuS8E+BIDZDTvx8+1rE1xU1J7/CtJNE\nyfNnosej7d+dbngb63WSzNdFkaW2K+jd6C5bKOtRNwTJ1eUvjPgR1crMEq3w\nUEWEFhR/j54dcHPkY33GTzOxjye0OejxoMNgGAlrj2y48G7kc/7ghR+JoUeS\nerbnah/E1MXnUso1EdGZPdgkPmN+bGZhJIyAPseKGIwz6GA0HK66Dx4Oktgj\noP1wutq4xYKoLwIK/HGUCB567UvboAzjYZNZxlBvNRVZFR2/Ni45xeVp/EU9\nlx96BPXKvPQ/a/HUPmyY1vOKo280dRTHDO57JBZmOQXmJajF0mgOdeHzXLbw\n4fdbjW5t7SB9tNQUHO3aWIiEYoSLIe9u8Lf8cm9QvriJN5ja1w/l0Uu3QmRc\nFeHiLmPA7+2FFNEw7jNUAT/dveOnJfYWv9qK7IukEDnUhzIxYENMfAizsvE4\ndlN74B8q4+nusvMOMZG93idoHlcEz6bkMEGuMHJDRU/VGjinWhCgNBpSQ/0i\nG8N16wx0oRbtey9ZL7k9e6Rre/eArr+HaRBw0Wp+z25Jr1luPMqkEY1C+Mw/\nuKbfKPW10EZcJjYN1TkxfwQtwPUUXzu43xLQqar03+FFmZTJa9gxX3tdphMW\n/A+1\r\n=n2nI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/list":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/menu-surface":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.a9ac16b4a.0_1611788718402_0.4488040934437747","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/menu","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf9489f305e534ddbab3a402c9d5a74cfef72d48","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.fec7b42ca.0.tgz","fileCount":38,"integrity":"sha512-BrbIXpBnviZlCY4kZ84lRPc/I0vGcsI00MV7Z1cejmF4lx0mJJ8SLBJCueDg1qQ171DtcrPADX9bgzAZrPRFQQ==","signatures":[{"sig":"MEUCID9P9QyAQdFRTV0eRcdm548kJYPuRR+tuiQxG0jbg4pNAiEA5pQEI+kY5BpOQdqepuvc9AejSgiYqnh8GF1N0fsRwOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw2GCRA9TVsSAnZWagAAQ6oP/3Q3ryCavy3mDI5PqoDC\nW8Gj4srqD7GCreiGYooQ5Yj5Ne0INTqBcpPDdycTi8aj02gng39A5RxI2EAV\nuXttFa7wWn4PDJOV/+YyVY6m86v5F/G/A3YKicMp9npqI8IfpSmhCcdJAa92\nr9V7Y1zzVK++L/rnDyZVK7a9CZkVLGsdykhptW5/h3l9mShM+Ch9J+/sDWD9\n7VX6kXN19hMyNTO71ActGif1ztjcnvhHNi4hIni5fyS0DadD36kCB2cSlzIS\nOrOcE/h3V7/iU3bQWQwZtTrrK0RafUIyL4zw4Yct9CJXvpgF5kbnroFfOMzy\nRuAE2BF79HyDMKbYpHuPrW2pMLBcYc9Mc1QR9TxPT7zJ+jTyS3SV+51NzBCb\nKKntj3Gic+YBwUjYfuWVmlTD8BZKNF4PlnYunqK8p7P2WkrA+qGjdeErhCqZ\ntUKLSMC7SmmBpGvhw1ODFD/p0IsYAYVkhqfDD5na1xwkb3hH3DpsyFAdaZTb\nPLdouaZr9hSFqsScJzg3muztVsj5CBlMVImHRpUUrGjnoreVfTCf944BUXsO\nd26QSAwltLT99wEqeQj1lW94Iyu7senKTQSe5WEL1c5FyPY5P3OlihRYABJX\n7WD/4jkCCPTjAow3MrnSmy9IjSUWY5/lbCc9FFzWmb08vCty+1Po1mSqiBGj\nw/Cz\r\n=2C9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/list":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/menu-surface":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.fec7b42ca.0_1611861382106_0.49303115911787176","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/menu","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac91e3d7c5699dfb9608d5094f1fcfe0a72088d8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.8e66dbfee.0.tgz","fileCount":38,"integrity":"sha512-63jQt7EuJGemiM8ev/kHItj9JMJNoZQfA+aR4DbrIzBhQ6HizfOrkq81JY45vDQ+bg+U9bpd3KoiYRVvj0W8gw==","signatures":[{"sig":"MEQCIH7rJveT0BXaTyh8HpyaZbUHN91Myc75Z9N6GzHFAG9EAiAw/H/xtn7bbl9CG12IXGEwmNM7KMly2Ro9DXw9Yv8M+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0fCRA9TVsSAnZWagAA3YUP/3ksJVhHyOFoCnaCvHDy\n8AFuDdQCUNgtSEaEebc6THRGsN6MSCbE0oApOutw8AzAom7+cmVCMj9/rLnu\nLTyC+xnwqDynVzWf5zwUAHBiXnDJBFUsUwz4JfTlvZdYuPmqKqyG3bjYmDCe\n37Dmt6A5saxFC0NQxi9DTrzlLga5JPjKFQV8WzKgpnWa6EEDb/MOcSJYGjLr\n0on8swQyyOIRBGA+FK2eFQrL4b+SHnJfKjhocnrsl10scypB1KNW/twr2YvO\nOZSF0M0/Su6MW6a3U2wlEsPDqpd5vmDixsQ/HHYF7ozDworOKJYsW2EG/IHo\njYSJtHWcQwEy9H3CwmWbdflrmqgGVXwG2wAMST7HUUi6e7tt5Vdv44zr48oz\n1DhjbgvuNlqzZ/mbq7RZU1BzmjwmuAkze8EU/R5A40cP+twknGYQa0wB5Hvz\nuNTO4wpdcFf1yflT7qNdwftsDSBJMpXwN8/MO5M1bpxRLWN+ZFkUPIzsW0WX\narF2IQkHCxLhz0nsGY2MOuLuBHf9NLMSAkQouvZAudOZHyGpmeV7emoV3428\n0wV531iCY+JD4Q6Ed+ZwdGt1lb0z5QZYSiexGEW1t+xjDBDA/xriE7xJ6hDS\nb9gUT1XVVuHdajOuFF2wGr931X7OLdjarxRRFlt7v0CGC95i/y6+N6mHXfoE\npJfK\r\n=UnmX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/list":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/menu-surface":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.8e66dbfee.0_1612221727405_0.4765375714051614","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/menu","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ef250742e0c1bfef6f2850ea7a6887bb401cd97","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.637d15da6.0.tgz","fileCount":38,"integrity":"sha512-d9TqVq/O/BNI0iqo8FwtVZhEcQZ5V22CZQBlsrKWrhIcBzP0vnXJrfSvukCAWR+vFX6wSNSCqXs5jDRt+UYGWg==","signatures":[{"sig":"MEQCIFBIBn+0RvwZb3hrhHmoKuXhxe6J5lfHzHPup6biqbEDAiBAFBRFViS+2TR+3dkYU8fi6B+Zzg6fPja64kM3qLP0ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ8VCRA9TVsSAnZWagAAERQP/3bIZ6O/bNFS/IJ8UgSl\nt2FWO5gK+zjGJx4+H3yYj0mNxVA18dPbTxA0qyhGb8aJjr8KBMWSsXBnTC/7\nHvtTgyt8g9g17+vu0KDiQujcevMx8PtTfjeqYgKztxCLjnkSTIlJpjz5GFb0\nMQvXJvAAlxVLb37vG6w8T8hN9UJdx+W6slmchoHxObjobJw02p06TOg9rLbr\n9dvLbzcttqGZ460DIMG5vuhRpWyHDk8bqnVHtkgcOFABqY31uAgcJ08s4+n0\nJyiTFsIhVa42qpMFFwFelWNXx8psRR5zV00xaXhYh9Wt1oa/LTYixzbiBNGX\nXNIYK0vpIG9SRNYLUqPYSQeh2yVD7lxL4lXVts7W5Gi5NOmAlhbLGxpSXPAg\nOXFOm8QqMAZBir7+PAeuajDusCSUftxVcr6sIzEXKTUkHmFUmdTp1uoZJbO2\ntD/83VyzJdok+FQ9qGbNwtjkBsmfKj3531foqYHA1qccpxh1KY0o/C5lG6LV\np1dYTxMnkGBcqgj1wP9mMEKMy7LZ08ptCPPJdh+tenVSGgMRu2zTO88ZWpGN\n+Ki3DdcPb14YZ4uMvSAwp+xhSb0F1Y29LCy8IDcbNYV19qJAab22Ma8efogO\nqMRWdhY7UQpZiL157zZsu2UYApvvWCZlQd+/b3ppHKx+sn1vecXtbjv0iWj1\nERMf\r\n=pbha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/list":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/menu-surface":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.637d15da6.0_1612291860778_0.4150224260751878","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/menu","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f117f60b0ff5d6a0d65be472211fd34ee7e0551c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.fb793939e.0.tgz","fileCount":38,"integrity":"sha512-lIA1UJekvZEqH5KXakTZtuuUOM5dqkPMwjHMkaAVLMA/A8ldPbUCiMwCStcmuYnx+ta8vDjUFKlRs2bCu9JuJg==","signatures":[{"sig":"MEUCIQDnEaWXaEqycUR5c9IdSXl0crK5/RILh6uf7/xMgzNe+AIgWunQfiCYH5lLz+0/Daa3HPMZIe9P0tinyaSPvzHb43M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePyCRA9TVsSAnZWagAAySEQAJ2JTYNCpNmSe6q0EWl3\n0RCQstCb7pEN7DMu7hLV3wno8yJ/00ePFRqf38FwGpWliG80IktdSu+PCgJD\nrKKpgaVGVazmTkw+CGlE+qYO5O5hgbrMzJF2aVM0LEcLOkgWbtzVw8SqU5Uo\nhHut+hy/e4PhPKWLxtfD7vsZvRqUtRuAj1NuI6+2gmJFiPCrqoLDg0qPkso8\npJVKqVCgjrKpUriYwHpfIvr3G2Q0ZND8wi2v7w7j5TqwXhwCdn/7SBicF0r/\niHwZ5gNhEFGMjsUJZDSwZTxot5QSh8uN/9p4cB2lb+deUwAwKNbgQUqpgFtO\noAzMDUFe2pHinbYNyuGTTnrd0SlwpEu8BS06GwbpzFGBien9d9hyIJFycOU2\n45/Ygd6y1W4CwxceT3AhZTIGxkqKbueoNOJX5Q4ig7tkfox2REiuSoasRB5q\n2+El194Q8pUXuVE6fsfvC9+tIL5hhOh7qvmo4NWvaViPgMWXN66M4AUfiPhh\nPLjtEUWP1Tdb66eafeJuy2xy/9hQa/L+BqUyZVnAz+wxnhGgQHhJIEVB+IbT\npnkAYKnQ231/AqFfNx8Y3Pazqtu/NFM0XypALiBZkeylF+xrCqvPwTeQKFkU\nA5x7VKIex8jdn6yxGhMnSiaaZ42GUinhZ+/lP7LIq9UdjRRP61R1ZcwqjyCp\nb1gD\r\n=3C5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/list":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/menu-surface":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.fb793939e.0_1612309489485_0.665216586430285","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/menu","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"518a2f2e98ec1e85a7ed641c42ab618b1979c10f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.15a4d40dd.0.tgz","fileCount":38,"integrity":"sha512-nGWmAZHtDz57d9jEmji5YPiZ35HC5In/X5ffP2+Ve9DKAxWvH4Fy0IFhuPzyp5MOxYwG2MI46S7zCgYpYzHs0g==","signatures":[{"sig":"MEQCICjAbCB94PqF2WPtSOV13lbcW93FVRzmoq5Tdk329cRFAiBaiHZrEnPZ6k1n1/6r7qaQ8dDx11vgMXlXsNN/DI2tDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghZCRA9TVsSAnZWagAAmDMP/AprUCTrI9wk46AcG1iN\nXUDuIH//ddZazrNINU7JJ7oCM9cAvoXnRD2tOR3jTn6g/ojK76GCTShYK4iR\n5CBUbDM52o97nXgdxisrJxf2hj8NSG0BU1YzlYCW4MneG9i7I3LTS6Kh0GMO\nZmJi+1wjhkzIdqG/x9/zysWHS3cYnAAVJkEfqXNmw4AL0X6Mpe1LC9p1ouvv\nPNIlb6vHlgRFyFppUIJngjlkgQCMV76bFjEi6bq1nH6IwWUFXoMP/y9aNn93\nWzCBf1jZFjm/VGws3zEot4YgliUwWFG2r0OgLaxUW0uv++YmRGkyU2ww299n\nmmjRm6sVAE+c6QYpOhntbazQabvRO4feV6aZSGdZCXNpIrdVYLSOZiwTjyHT\nRFqf41iOQH7Ltfg/6qPAikIcQe9Pp1hXWeRAnkrXnUsEdPjeXo99z/7OfFMv\naLF6H/bqxUglFsAgJb34paA/25rCQGMEGWsGsCTI7rGD4M5L6d1Qq18ztmBP\noRgwYwI71HDCmPhFhLS79oarNB81DKEfM2JGy+r9lS6R2MUxM+7CC1hBMAb/\nVdXXuLTg66KWGrpNsagJ6qTknfpouEKoOPTk0W+KCB+pjzwXmrq1LTiupbCj\nR3RCh69OF5pU5xqm88BgUZdXlXbThHWPNrA+6dls15gBgIYqAQ+PdxNILs5n\nB6ko\r\n=q9Vb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/list":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/menu-surface":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.15a4d40dd.0_1612318809078_0.6998923648545818","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/menu","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"325dd81560361ae7e0578571ff6ddf69f97b1496","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.7a003acf0.0.tgz","fileCount":38,"integrity":"sha512-I3pSymi1AUM4YqMFbpUXVfN+8t8Pg3TxprWannqNJdJGVzBonootILdWN0ePnhnxlwYEAGp7Rz8TVYn1c+BYiA==","signatures":[{"sig":"MEUCIQDScaA0QXx9T51J0JLsqstZH0ugSKvtTsz3HYIkIiPMIAIgOUeOW3dU7dsJvnEPERBVHbihxhB0eVmISKb5rp2x3yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG12DCRA9TVsSAnZWagAALkoP/RIWzmwMcM1Zv3tolshK\nu8Mv70JlUFkf/Scchf9dM9YyyIJuOg1+fFT24aYlvK5WbLucUEzBs5Qsqbzc\nG6DV3TOBkFtm84LLLrBJo64XWr+4PAx3kg00qyC+gJ0290Ti48H71ZNiUU7U\nGBKTWoGvz6vpmqN7DHV+rLgmge5/WuJ57du02vbnH/aWTwNdRf5ZbDyCZHLb\n9blRATmtgCBxmjmKros+DeACwRg8uuYlZ19kX8iZEio5aDiTrXJsT14rTXzq\nKglExckWYZb2wGHjU9Kr+l4HfAwCSfARLDYa3EQ0uzUvNcHKkNq0hHL2/1uv\nkdj3QfAd9p35hL2pgs6FxB7ONa2gGM7ri/aN1ABjHGtmPW1dzo/KTy7BmUxx\niDtqWy9TKpm30qYpOIBQqDgkmplhthswr3w9H/pdZ0w5yPFZhuuc0pLvwK2y\nDuUPcRF61ePYbcj5dl0j33x5GIfd3ojkKtgpk6G5f9P+9hNizgsXBNyud+6t\notwoBIjiGWYaM3SH3foqmYbXI4ELQ6Hp5L10Ehf5EheiKvQbfZK/VQDCf+4K\nYFTPS6BbHjlHTfmPjyucmLL6Ql40X6VmE2q3IptWAwcmtueNfN2eL1kXqXhG\n3BTdyUIgc17+4Y1GIIG9/+Al3pHp1n7IIpCN4nW2tFtUqVgdLEES5kMaj96p\nVnri\r\n=2NaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/list":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/menu-surface":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.7a003acf0.0_1612406147407_0.7447807373157513","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/menu","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50d5c097f99bba84cfda81770364099a4cdc768","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.05f249666.0.tgz","fileCount":38,"integrity":"sha512-JO3i18zpkLhH1Vmpra6oo4xJ+D6Pi84HVZPWgCY+dJLZq1wjQ0/4PNtNZ0Ka2ov13Nj9StCVVqVdRV4SBADITw==","signatures":[{"sig":"MEYCIQDZBP2MsV4w79gWDKuYnQvzP8Ywu9pCHbl5Jhy8oeljkQIhAMzZcireatI0M5ma0Y5zGjVPBu9FUJXjteRbJ2o43eVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDRCCRA9TVsSAnZWagAAErUP/0h4FZM3VwnZISuWv//7\nzM0WNWuvg4FzgQOB28/xfMmavxrQ10cfhFCQVKndwDq3nHsjwm3SjOeAjP49\n/Q8/RgMVixWso0CIH6I8q/Rkfbt/jv/RThRAcV1Xd1RIGRallQQ0BWSniSv2\nDpHWwK9wHVeFTJfMgHq38PabbVuLSEBuJMvV4wAGLWtQAfKGjp7Kn3nae8q8\n/yM7IK+ztSWcm1Tg5Nsybewz4isykcimoNn7gZRjO29UrxKsd6Bi21L2ZDM4\nXqhmSzOOGYjyagfwnNqwd+6yD6sucHPSbRwGJCwfrDhKRwzkTb3uBlvyRAxq\nwQM4+vYuDxFxf+TJW/osGJlXNxClEhCG3xGzhBJYHIrXidgU83OPiGRQWhYA\n84cow37PFrksef+XwOX+ArsQZm2wL/72P3+bnB4mpuv5okpNsYija/4+dAZ0\n1jr06vqqGpKG5ZWBlMMk04rpxnvdmuh6rkOXqsOFmYF4FMM28BbGk5d3pl4v\n7+WaBVbNjV5QQ19ESA0dQVx9owW8VgQMG1cwSr68dLU6iR3UaJfUR1Y4mZAQ\nSsw2SKacU82FBmueNY2zoEKrYXv48Dfoc+/QFvxhcIqiP4JkPwngtajvoYfn\nRCfmBVE9LW6gudxI92SWzd4AekzsxwjXsVhh6Lr7hIiiRF7Q8vUFtTIrSq7N\nUsdg\r\n=/H86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/list":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/menu-surface":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.05f249666.0_1612461122196_0.30032354445923537","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/menu","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c669539c2f28a423d93ae20433a23abb5a0dfd30","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.1a3a39629.0.tgz","fileCount":38,"integrity":"sha512-6uHGIWw512FqgyLR0/NnmmA9Vdct8ans5dNAk5RMfrnDnaY8B40nBwidrgWHrqYvgUxU4Eh2Qj+ETqBibAtvoQ==","signatures":[{"sig":"MEUCIQD3lrT09zQtKDY8P8picLiK7q6Ji3cXrYXhUmDc8urLxwIgVXOXc+Rx8Rv1mE/fN/0T7R+68FI9uCKuEmeHJr4bUb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECqCRA9TVsSAnZWagAA1jIQAI6PwQEndxmOcNpBo2ec\nCSeJZtVMv69xlVn+2Qmnt/ranmb5LZHbhBPVgihPRk9hx6iTu4PhtRXodkP1\noNUNLjQy90aMI90iIYNjyp89leM9tiTKPec6EJQ23t/lEbqTHdS4HblLKHry\n0pZNB7CO/6gpJ+JgjU2qsK9rl8KtXqJ0YjRT9wialLFXyClkc0qePp4pkKFa\nq4H6RHKwYAvB4lAhe7rxuAZDXsTp+ZCRzfSYpDSLp/GhO2ihlCKeMG7iqz+p\nji5JpEQ3IXeZxOPKxIkcZddcggdJxsbutkWtiPL+MxAsZ8pzlQrekqL4TJg1\nXMH41zhBp8QCKtbynlIn3MKMowdv4v7NJ+RWbW9V/SA6ifLHVwOnn0v0xxYZ\nUnPxjW8dXVvLxIc/QFZ04+YM/Xdtco866IY1IePxHGTatzVbzqyNG76qkQ6v\nZtAmeIp2Yrm4zPs93N/kmn1OWKRWrqG9jd+jAwpE4t1RNwEUGb6GSo1NpV2n\n/+IXdwvQWMeW7GbefmuIMC2cQSzqaNSSCm3Qq5f+7tM2JsGWemy1/AnemImb\nEI2OIBjEFbm7kBZvXL8Sw2jxXPcYoKF0kc1kjwV69Jr1j4ZfOq8RxtI9ToBl\n67fpxn7Ggd9HMwSeNaNrheqa/c+Pm7vAXJ4XOlFhLg1Iu6iOu8J6mU82j1Nf\nUnOb\r\n=8Gio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/list":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/menu-surface":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.1a3a39629.0_1612464298149_0.1805385533033026","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/menu","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9843dc2e27ec5b9b533eb10000dd5f88cfe09198","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":38,"integrity":"sha512-8XJAc9z8udipAmrjrMwO0/B57kt0lIf57UCfrwzNyY6yb4gC5vc0NWKreZGBjX0oEYdQ7Gpwg1fihKQV5vzALw==","signatures":[{"sig":"MEUCIH1GhVvsRAr3/4HXsl8FebSM4nj91q5/9I8/rlkzLascAiEA5ViG+rllUJS08W4UQIlNLv61okzhxLxXeRxXqglRoj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbzCRA9TVsSAnZWagAAE4cP/Ay2q79Bg8L6zs8HlKcB\nvPYC9M8cWVofYQI5FlhONXp932lKrR58tZamDDjhaN2FRHBmeYumqig8JbKG\nLDTYQgfMPa9vcsX/Ny+/daNM8o9BLy5cNNBk0uTTDwU1FNgW543sPjRm7Lyr\nX2wlIG2exXNMLb5OLFpfHDDmUFea3UnzxbQzFT1TzP0KnElTkoaBFT1/dpUH\ndQAIG3+5EUgEBW41KTWuoTLc14Ktzj7iuFcsmPCtUthMufYq7ZIJeCMRvSOk\n2aNESAdqu9Rv5FRy34UkhaAbM0lXlQRgMW4ETy6bpNx6deT58bwNDsujZN3O\noUW8MbsXNIo+a7/KOIsd8CJXXJBwgrA8LZBXp9F8zWf93X4PL5QfQzZMgkpd\n5jlfmnnbk8fAVOd7/ZHa9MmMXTYaekB+jielZBAR+JYTYsiqk57AqC1AFkx0\niGiDpRTMWEdh5afHBN46GIq+SuRrmcFUQ0Wnu+FAmObuEDfz9LxvprFQpg1b\nmh6F6OgXV97GKOIfIPQbmQqU4ZrYlqficMi0bXGVPLDchZZOb4vjJlxIf5h0\niXnQZdo0iP8mDZFlPXi3mXE8GUw9AeVfRUB8id88mwaCaXDjmxFo1UVf/Sve\njdQyaKmpd2DUFx/ISZMWuIkPiyF2QYhc5MtpvGCZzl+7SCd/VVuJsB2taQCR\n2yUR\r\n=2jl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/list":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/menu-surface":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.8b1cdb1be.0_1612478194921_0.4855009386144331","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/menu","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15115520c5a011eaa533ad8880d29bb8416af511","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.8271f00f7.0.tgz","fileCount":38,"integrity":"sha512-vlxburbns6dIPruSqSlLJPNP8vhn3cDvTQryUB4sZhPzI89hPhoCpEsPwI0rQUrjb7F/a3opOCD3ITNEzQ4v7g==","signatures":[{"sig":"MEQCIGFj85D3dJHp8TuUYPv/qYmPWxQ2CJACM7EQktdkaDkzAiBMA09tHsyMo4ULOQQUVD5iNMltLSO0y4XBDCj7t4QWMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHz0CRA9TVsSAnZWagAA1XoP/277C0y2ef2vTgvkndNq\nLbuXUnyIyoeRrDw1D9qLy+2CASFvDRpDsjYGYeKUsJHWPmWA28ai1Kta/B9F\nUg7tyDzlMCz685Yv9Ktuf39N+J1JUl8wCxjw8wIXScErJAwcyji8qbTLBLrL\n7g+SwbNMquRfcUCTwXLoLEN/RmeYaFxjmw8CYPNB8U9hrLn0uV/eGlGAmM34\nUTPuiL9/uTOt/EHG9LUaZYMcjuAsDyfQUQZSiwyc4P37BBjHZ99QaWrDcuYM\n68oDPxfbi9DaH6ywDuMVYH9qTfv7xsbDkoGQkRpJMycmfC74qBBBIemBlzGm\n64gEg2/4ksPrEiZXU7CRGCEeNrYJwQE0YNbNWw79tKnVI+MtpwHXwz+sP+2H\nz1vimEgPsg7AMzoWs69a9Hjxk1/XLKAs/h5mA8UE9UMPjs/x3lXAt2DAZ5Ln\n2K1jUFb+k/cbAeVzn4Qk7elRfjZtlpXnSm6w/JXQAw/BB3ly4EViRr5TRyrK\nG/q5/RlecfJOlwmt6muZqcN7F5WncEcyFR6P530sL+yGgmNFPM9ESiBqi9vq\nDumisobOeyLkxFUjg09DlNAVFKYZTb3GBouhq2sAwgz5lwpe3Gj/zj4DnGmS\nYI/jQ+G2ckT2xDqhp/YPhoyOS94c3ZnUFVHdVpfZ43EIVG2Fj7uRMY81Zehs\nnOOr\r\n=kB3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/list":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/menu-surface":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.8271f00f7.0_1612479731756_0.7025239440364175","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/menu","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47b38885fbeafe0af78cfecd807f75255a0c9f8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0-canary.533092a90.0.tgz","fileCount":38,"integrity":"sha512-ZddPPGiZ3pw6nhlb8VP9wFHqKitxQFeuMQFxjIPY4rDS7rqLF8K7U13XYziZKPiVnCn1qfHaL7VuNpdh1q81vw==","signatures":[{"sig":"MEUCIHM465sZCO+7FYiWQiLQuQxQt1gL4yRkuf1iE8WzIkM7AiEA4Po2x3adjPTjOXlGasrUGlxCKR7JSoYvdhKehD47EFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHMAECRA9TVsSAnZWagAAM4AP/iBJaPEgD7mT1wk+Wn/Q\nq9/94iFqRmaP1l+APWi0wu7jWIeW3b4QlqHsnCHh2ZmX0px+pTlq7wk0TJX4\ncmYT+DSdDEpGRedbzd6ki8DdIUnJ/en531Uc1Gn1lFcvtKoBYE8BnNamoGKz\nLNIqrCpyd0h0YUdfL83BQMNAr0iqhnJK8kWBZujhB/qsEJEpMica8hEFa6Fa\nv74QYpGjwlVD8TJ/s9sOzGJZ6LuKQIDHrg9RLRBi8gLT4pUIKC+Nzwphomue\nLaCuy3FbIqszr3ZtHd0CKiAeX9c40yCl9LzfvzyZZGWUckdKZu+69vZ2IHGR\n8Pj6nHDaE7m09zVfnE6eeUDsreiyHlkFFe2gkhFBWjK7DIigbEGtDX2Sxuqn\nV+oEnUQuPPuZd+tmT8fsXCvW5WjYqfIdsb45keTOIftXnD1P63MZgIL3MbKA\nIjIX17Rh0MbClFwxeOBjGLzy2bSPVzHRe3BsS8OIedz3+/W9AJo7M/D4vfL2\nowZ1wszPL03Wlb+5o39b3b0mjkfLQGTT9Bs6sUJ1BCej97HvU3fZBJL49yo7\njSvHxxIRix5YQwrcI86hN+nNhH6SKwkjL9ysy/FDK7AqfYp5Wap+4BlzCoG/\nwuLYsw5aH9lD45L3swXz5nRiN1HfePxAadNiVas9XbEbOYyC0KV05kXYT2NF\n/XRr\r\n=Nr4d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/list":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/menu-surface":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0-canary.533092a90.0_1612496899572_0.8504539215770823","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/menu","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857ce787a257e078806eb397b754ca630a60f3a8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.633a9fc7a.0.tgz","fileCount":38,"integrity":"sha512-3mkqFTApFN1zdanMV3fvNKrokMNb/acSGtU14bbN1SJdGAxOXeJihjIkDIq8WXmz99Yw1Zl0/8LlHsBT1jgXcg==","signatures":[{"sig":"MEUCIQCjnOFKjNycBzZApuZcIN3+kZTSQACHPL97kXSp23ftPwIgInzp/IfcJy59BIlrLyoMFEqgoGXEl6w218rTFn8ZtYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAPCRA9TVsSAnZWagAA9CkQAKN8QOgC08OXZYoZ73Yq\nUuRaFck800c4pul3GuuD6PIf8Y+PHxD5LYj6DxUBhQbg2Rr0Q6GCKXscWku6\n9Biidul2Ht0oidM1BUye8GmBFui0X7BZ38YSoxL0bVhtPcxs39i6W4dDdeXb\noewYAhY8JFdtbbr+Sn9VTHUbeIxkN2XENXtJYchRZM/Q8U1v3KptGQ0QFzRZ\nOqggxQZhTmYwk16Tt+zG0bJvdxQcIInMZWYOgorEgY8Q5B3qbNQcPRb2x0CB\n+ATwgGLQUXRWrGp8vqsdSGXspBWRre6KuFsFP4HVKjvyPR2q8vtKwJBoG+me\nPw0l9ycsXIc+gf7i4ZrESSSjATC68YCURFBSemre/JibUQZbdst+78A2jCk4\niFNPTqa/vLvx4XpOWK+8TrtJXXfRqZTU3e0PqH0TeV5M+GvN5J3tfYblUGyC\nywInyFotgvyamZ6+yIiFqmbWtVdgrVHUyudM2erJRyyAIvWW2wNvdSxHpb/i\n0/dunb0lV/35fCIeSz9fIhz5pF7QXvQHfWrTB0iO8BVpTgbYZSlgC2s4FSD/\nu8rIPRKiwtUpPdBtnhyt86jGbz9262jtj0bJ/4jVFjVWMXjJ/KL4CtahpvXi\niyBoK0Sl20i141oIY+/Sjt2x1lvFlBGFG3UW0aIjPMtFliPPafQQCKhEKdCV\nFXwJ\r\n=nWlH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/list":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/menu-surface":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.633a9fc7a.0_1612541966983_0.9636379302737066","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/menu","version":"10.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0fc7553ddff0ceb18aad86ea51d4235192a5dbe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-10.0.0.tgz","fileCount":37,"integrity":"sha512-UvutTmhENZc7j1XO14bL/jj0CFQV//8FiQT8hqnZ2/bisX4dyVkwJcs/iSj7ZumQ9KSqn62XMP+DiOothz55Ew==","signatures":[{"sig":"MEUCIQChgZo3RIyNMTm3XdTl7LxSf8wxCLX1oPVV628V0T2g9QIgDBUWf6bhbsSRwvcG97ji7tqs6jzuw8pzOhtj3bvanYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":689824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBeCRA9TVsSAnZWagAABhgQAKUEMpm32KXU7dJmqYIL\nZv8V/JaTjUssO62J1MStXWkgI5/XQYcuu0l0ahmA9pbtCKWmbhp8m882rifB\nuGWCqRu3r5yq3JENYj45+TgugV5H1I9zynFs5FHxIBVH8qzE6mnF7EE1G6hY\nw3k1tNcDgA86lDNQ9UymPoWdg3PMcO1tXn/YH6XbI+A4pjmvgD/4wpVxj9/E\ni3Cs4GMeguPjQMldoggI8/bz4lsTvUxmjyQoabiSu+wjMW3gdrHh6X4cZ8lq\n95k4K8BeF//Mt6wMhK3Mt84Qsbp3qe8JhocOZ/ZaKxRAIluiFL+cVRdIWM42\nAiQ+HX4yNhEwzRXngaNtTKH1kJuFYu0irnucVi++34YbTBw51FUMbBZ3biV1\n0BZn/Z0d2ejoz7UW6LkrKVTjtGJiZPgzpLAZ7gUs1ykCt69akYAIGwKjVbGa\njAijRlDnQyyKju1eDnniag7FH+xOiV7ahaGcVbkwhD2sc58+xO6jTRIdK5N4\n1B2laBYvhmhNG0gy/d/l+xPHr3vpj/UfUN93k/ykLaMvZo/DM/tAqDgJwFg0\nAjNY30jhaxkf/YIvBCzI/AwWgXuJzt0UJpdvyNUm1zE6hyvt/MrdT90ese5M\ntbAcnl0fQZdMjZCEocFtI3yO+EZHxb9r4Y1IyinTBhoLv4EbN7m0Jah1qEmV\nX/xK\r\n=9aF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/list":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/elevation":"^10.0.0","@material/menu-surface":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_10.0.0_1612542045413_0.6791625434510982","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/menu","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19040c73f2b2e3a12b1e12b4e426328855e3f852","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.b5227247d.0.tgz","fileCount":38,"integrity":"sha512-ykUww99iqbs+1h0HnV5o2n6StVvmUN7CylKHL+QOFo4gkJNDyG8J3Q0egNZd/J5jm6idOD1F0h9Icyh0oPfnQA==","signatures":[{"sig":"MEUCIGTE1fWyXtxB0Y7PmiGVglzDPLxZPn1u08qZZQ38M+xKAiEAibmLBjFKqPVxWrQOyKzX4Zf+eOLtt4Uj4OKGupYsu9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPZCRA9TVsSAnZWagAAa/gP/iR3BWdBFD+/utgn2pbc\nHnlmLSHzupSCuwEbpJK1CoZKhJo+s4oy+d3S7ZB4wj0Ootl4ZjzkJiNIzHnP\nhGMHiedYmWMLCN87kPjEfLxw+eGc8HhJuWFUfogN31FGsBDw4wRFQwizUHIz\n0oy6QWIgosi4AAgbcqmOlhAI2gNlLTBm4LDknA/ml2x0Ph982nhViH5v1dxW\nGkHyCUXb43XJsk6gWMwqGrF2qig6sgSin95rKtl3JsJyWg5W9qnDwl+VW+18\nATfXJeCv2LjM51Zw+p8T3v/kE7na02N4bbe6MlhOG+fDktFSGl9BIrBgL6Eb\nZ01yyp7zRZgKoLHJEuvgg5Q7BKgn9kj2n5+CjCegtKPGuLNAvk1Xz8XQNON9\n/vcMtP+k6Df3vjwbLwZSwDxQuax4jwRlhOEnUPrtWu0WM/VPzfp62dLiJR8Z\neRBBCAw1+zGNcMmt6ytE++1Q09Dq+H5Z0kNRaDu7dxAqKYF2STf2/bmj1bOq\namNX6jTe1w4SlIK7wPp+kaa5tLuUao67Vtc4ZxCTpZLiHwOYbY4t5Bueefjh\nR9qiwQICDPHx4K9O+wzoI5l+NPX1Asajf5nank4VyAdDjKLF8z3JAo+WrP5F\nwxQ+x/sXrQfXAsiPaSSObSgKGj+/tj4lud66NTJCUztYqyWFUr7aQszpxKCV\nAku8\r\n=SK8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/list":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/menu-surface":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.b5227247d.0_1612547032629_0.420966326544423","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/menu","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311f82142a8911676ef9570983b17cafd8540c68","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.95322b11e.0.tgz","fileCount":38,"integrity":"sha512-bYnEPjDPj0IB2+OCZ+7+o30Z1si76QrvnPPV+RTlp8qKLgwQjan+IQU1B0fJ75EdnuWGkUmPcl3vVcIU5msCMA==","signatures":[{"sig":"MEUCIQDRXFuJj3sKNtAndvGDnd9azk9qTvkG3Ajmm13bq1sBsQIgNA3LT/Cu2iNXzSJQA2tHfukFOnnMa3N1a9RKlCJ9iKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdW+CRA9TVsSAnZWagAAbvgP/03GwQvEdwr0lTQ/3sHk\nEUp/fkCk+jA6/saWhW0nq55UtIqtDfpxtxT8hItWqDQUosX0I4lyUQGL8+Q4\nBJAvLRUwZSQrafRrRUVe2GoZnzJcifwfP9fQlerkonVeeQBx9d+C+dQ48UCk\nFwUq7rT9B+CrM5GLm2uzPlTuHJ/BY5OSlbEqg3TfMKbk34RGsq+c8khQIk5K\nTT0MzM5K7bEJuoAigzpcBu5Fe/QvVVmIoBvwwZX8PWdTPtJXg7+hJJxFjzYH\nf7j0ED6bcY7WEjbPZDXVECZU2xxR4eSHvDgaUerq+2VJSNSF56/jifIMccAg\nW7erlUHUwkfHhgKbil/DtUfI93a65dAcV5DGiOKfbxfgg0fIL9olGBp/ZIFS\nrH9DvbxOFv2Xzvhq7R9zeozPYEoba15Z6ciVQS7+wemhA1pzkoHC0LBvgzJo\nhr7I9jcb8jAU77krd4JLWA84SzpDQU425S246MB7cfUUjmbi5kG/pX71NKSw\nrAdzRw+QDrshNX2Oi+36iV9FBP+s2jcPuvPw/5gdohv+UrdmiU5XAb1q3XkV\nnjDhihGFm6XvDykubWgawpv3oHwosZiJ+VNp6Z9u7u+dkDwV0BH6GZk1wT4k\nBsEoXKTHI3H3c1pK5cys4pYkFfIFCJnyoSYkRSCL+1JgJ4QCg/Qt6Aou3EMS\nssHx\r\n=JNKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/list":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/menu-surface":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.95322b11e.0_1612567998276_0.39738856614658347","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/menu","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84bc6c5b78bdfc7bae48f30b1370c440bc05c7fb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.1f318ff0f.0.tgz","fileCount":38,"integrity":"sha512-uRpPjcRw9/suvk831Nq8kI4awyE5QM0mYv4yvssvXPOl59SmBVwzH+oO0we92eDapkduSmmC2Nqs9KShNkXQ6A==","signatures":[{"sig":"MEYCIQDdHfLahniJ8nV18B+1aSFFun1+e+hgJP4Xu0yhZ2n5DwIhAJQ7uDQjXk6QFrLZ6ZvKUTC0aim6ei6diAvyJe7L2z74","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd2fCRA9TVsSAnZWagAAv3MP/2FT4lzKo24Z+h7tFhZ0\nxIDD504Ocw1CIv6Kg93m6vKbrAUqe2X+uqlnBryeyGcnAPmqawQVk/YoD+zv\nPdOWo6i7ZERdMfGHPXEROCTrXukI1nwlJNoY2J6+Ybzm5HkbTa72Ed3Ffzg1\nq3ycsnqN8fQQI7nWAD+y53vOQKTHn6y4vtskcwB5co2REaCOO2ISI4unftdX\nISexbBaCR9+Yz/dslmYTeZT95mueFtUxOAcIrJgbe2qsIfdbWH7nmcUm2Tc/\nCj8K6SYNkk8wznNi0SGVO7MqUk6Gqb1agQuV2RrHbiQQ+hRYdtxJO/S+RHvy\nei2tOaPlXcC7nRFjMb6G3Sl56TrvZWkVDCzm6dFaBKWaVBeSv77q6Rv9eQiw\nRampfxeX75pNdUqPCt/npSSqrWjp7kVjvo+AmmBb4fryuFQQo/fBIjwUNW4K\neeSFZPIv5bw5XQBaaFoXRmvh7VnNWi0XvLJiFkYeRK/odoOykDbLnXehAR1+\nCuIT0GE0G+J+rGcdXn2D28R1gnEa2r64V/sIFWAL9KlVZizEKH+FBmuleKgq\nHsSr4s9J+qz+gNA+ToVUB4Zxoj9ID7DwJdBT0/AFpYdHeV8JBfDKdoVXKwQk\n9NH3L0iu+JYURhlshV4ZCe6mA8S0bQT+pr+rQbHr28yamrWae23Dor6O7jt2\navH2\r\n=n/ju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/list":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/menu-surface":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.1f318ff0f.0_1612570014842_0.3662958895604753","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/menu","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6870ce552c9ed32a4ab2da383039905bc096265b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":38,"integrity":"sha512-elYVj1G+R03mNUHVMgUcAkKDX8HNy7Mpxs8hg6tQ7hsrp4Wtcaew6Reil3Qv+3+kwchwbuJgjUHfIYorGVQjTA==","signatures":[{"sig":"MEUCIQD+gJg2eiRDNbtI5arh2BEYZkS4DUbnCb6avWbbWdO1GAIgcITm6a4f0XiflCU5PDhVjZptlim4+SQGypoS/7dpKKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVM3CRA9TVsSAnZWagAAw5sP/RuTenHicgP0j9wthdB0\nExOyoGRZe3Q1b7jcwiJwVHOH55JO+IE7rrJmWba5XgSoHtp6qY42UxMcQExj\npOO9OAFJ6dRN9imU2aLTwT84jpiWKeg5AD0s2B6meZb4M0m2p9HT4ybNEaXK\nhTcFi3DfgH5kvAYR2BiwuDci5drB3v23RtLZkUNxH5XkyYh/mcNOIm2lpN7k\nOf4Y6aIXHWWmKtUubpTeYzymTueGYaG2yyBFmp+dEMJsLoC9ZfLugIFXKon3\ng0x6E9KsTzF/kvyH1JGyJ1HFCVSlNW0VefnBuWYXVIK82mvYHht/GJl8oTvz\n4FPgJ+C+l56xdCCrZSfKvhSDRMP6qgeYS3ehy+3xLI/VM5nbePey2Mbdfec2\nHlsTg7X+GU5KX7wtK3MkOtnkpIEbFiR1sZDPp5H+jHKurgy26q3+8xSzOSRt\nQRs+C9GlzgYGPu2Jd3zkPMZsvpnVhcuiXSghD6leOzk3nkuBBa45RXB5ck3E\nawMGcs5KCPkTFto9oIabYFvinHDH66BROmsy7OBTjo+luB1bo8QpScXif0bv\nTB131iqdJfqOTQP7nPQ4HdDIRxpkvuHxLGDfIGPEEdcnB7ibtX6LURM32TMX\nmZc5U06Q8Rmz+8bb3vA2DSPv8vuZKBHSfowoODCuabmt62FyFz0W+43rrye3\nauuA\r\n=7xDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/list":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/menu-surface":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.ab12cf7a3.0_1612796727096_0.5738196717094679","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/menu","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a44e7a59b9bfbf0e08926bdf33bb754ce3398440","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.98db2c5ec.0.tgz","fileCount":38,"integrity":"sha512-GrpW/IUYJ0HOfw0FeacjwZecQjpW6X555jfwHlU6jXNQCcqhLGOsB6qzASbqCI535m67vmccrznK5x4IQknlcQ==","signatures":[{"sig":"MEYCIQD2tQVJgsJI86AS1agNeGWDSRPYGOp85fIEJk+YIbgynAIhAKmyjiwMYOu67phCBAwsUXaZl9GwXJa3lCpeT23KEL/g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVp9CRA9TVsSAnZWagAAOqIQAJAV0cq0b1B3d/T25IOb\nk72L1EJEKvVF3d0RSBgX3S/TyiOv3EdKs+5W9avSULLYLILy0lAwccmgcAhb\n2QptY84+OKsVp3kRcrq8IySkmfBS2m3dM816KOjNe3eODfc731xdtXC4szmv\n1Vhif0efKd8Fb4E9v7LoGw+9yFzxZlJgHHxJq4YRP4G8qcTlHvBHBzXeB9lw\nT661LuZ3T+7OIZ4jtbWhVI9EIhc6qQkjQ1ksgEMOKbb2T19xYGPprHGD6w+6\nPwXSl4UgzKhUdpPXEuJicxxORRTnpxXGezQwZT+I265xuw/AvP2PQ8AxjkyB\nOKKyH9LdNTxtNUGeL+nNXpCArTxATiMYYcMnvJpkdl05SV0Jn6lijmofh0MC\n8oHD30kXDD4mHbNMKUAiQ5e2jR9rTSnSeBK/8lVWcRuT4kpnNJ/5xfJawdPx\n3OJqUTpwA7xqXzNuq4fblXeQ8hFwpYDXPBpw3zrBA0gmKZB/77tE8pDMulOi\nrmQYdebimOCCDMPBUCo1yv4qnRyo8JUb2XwR8LY90bjJOwdrFszJy0Hyw7JX\nRwko8YNmmiWH3nBnpuP8+d948eF3rJ2rfoY4rLeXtcSlmrIaiRpEQ11uRMdI\nPvtbhV+i+ySMoVGN1ZKwyIM/IgvhsTfjSuHBRyO1LbG4253jOJl+6z/clHHA\nuEJ1\r\n=5FGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/list":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/menu-surface":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.98db2c5ec.0_1612798589280_0.30404011634195993","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/menu","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"098b4fe46bbc6ad0ab932966d325df2be3f60669","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":38,"integrity":"sha512-wciP8brquIX7xsB+lzDei5ndxIhcDY5r1KvebmfN/UB4U4ViN7MSD/SAl77ucxziuRyne1soUpefV40Y6e3B1A==","signatures":[{"sig":"MEUCIHiwu4dfld4rIt321VFMpGOUeC0gl60D78P44g0huVd+AiEA1NcJrbX+krhz7bqihSBmL21edjfGkZ03Cpahpfi4IIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXKRCRA9TVsSAnZWagAA9ikP/R5NuZQFJo46WiT5dlVO\nzK6Vp11FI6Sgu3S28Eh1e5lBAuQdnBId/UqYZHt/sZ+mAPqLllhO+y+N9RYY\nLtkQpm89v1e3BkzwQrIhOv1cXPAJeuEmwHDQJKw1hRscU+hwIWfjxoDrSKN+\ncxb5mXXRBEg0os9I7dYrET9xWvGv+niwUC5xZ+nCwfjQTj9+6R+OsVfv9Eio\n8p7kj0FnRASAkE4KVIgYp0GENqkzATuo8Npns3ykcpuqXfD3ZZX4guOv6CYi\nF3MIiJ0vg6sOReS7OIeaf8mphZT/+fuj5D/kmyGW9LT18hjpDsOLd6Kdl3zd\ngUyQMshYifYocy+dpsmWMNnkBQxCFgMgp0T0Cb5Q5PjuX0Jvk+1jEp8jRNsy\nqhlLOiqLIodOvYISr+bp6bUbFG0ZpOg0kUEHAFRYGzJkbYxhss+TTJT6JKQf\nBQGjsUYFmQSQ8koqdXu2qtrTyYvVsgFzqj4FcOU7fYoNxDOeQEF2wiFC6E6v\nFpPQdEfJa4KPrV/FGPttLRz2ACM+4QAgnGY2OEc3QTTg6nCGU8aanEoOJLkv\nt2jBiN0C1p+eQJY7ek11mo6bW5AN7mefeE/2G5aDmQqAdKk6J4K4gHzjkIbH\nxUUF4hIMwQjJJHwEBoShT3W3jwo5NDDUYCAjxxAK4RpP4Q3bhLgvvlxBGQbB\nQIQX\r\n=XYkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/list":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/menu-surface":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.1f86b9f6d.0_1612804752849_0.16642867797880223","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/menu","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751697377afb02fbfa6bcc62ca743e1a0d8b9f1c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":38,"integrity":"sha512-iG2YqEk8WRm2sS6eafWMlrvD7rWQcpsVuduGc8P7rD/f5rhPnSBLjHiOFn15KIEvfBv/LenAjjAfYRwLZbKhoA==","signatures":[{"sig":"MEUCIQDJH5tYeqHqq+gX/eHiBL/IiRAq4QGo5TAyZ25S+WIPNAIgbIhauPHdpAUbDTTdrG8gqTehS3qAH0eYjGw9S3A5SK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXysCRA9TVsSAnZWagAAfU4P/3PZvHI6ZtOq4OjDByyp\nKqK4lotEmdZsrGc+3b612nxoXYa0Ep+TKE3SE/v+B4wwhi1UXnrLnlm86wjb\nG4a08LHBQq/sBjHzhjhpm5txKzpAYVZhdpglFOUUWRMIBnQ3nTCvx9g9W84N\nImFYIfM9QbooT1MHFLaZmwcfWMp50/YIFPvXwIZdbQgJJgsUq3kmIYsvd89t\ngFNA2yEytucDb74gySLYwFTGw2wJyzIm3UPRUhGSnmVV0/vfhy33F+/CG7MY\nXAwnFRklm4ydR7vs74jVcIUD4YVNKEjkjl+aBxxzrjYy10XKlbEK7idDxugq\n9IA8Bc4TMG1lMXm7Pzw/8D+y3YtiZ3tkNwDz/TIE5A9jh/WlvnF8bGfq6zPb\nrYPqCeg1y6pks3dAVygf93dqXxCUr8PEPC7+Yl5hUGmvVPIrMfVm5uofuViv\nFUwB2k77MwlgaZSZaMInHMI0FvkRMS3KP7byH3uMaBM4tidR/olyAaemCB6j\nfeLsZPT501/khndi/Zuy/FHoBrMEd+a2hhPKqP94OJ8uE+k5HNY/m72pqn3i\nbkXUhdVpiVvpQVxGl9jP0G69v8VgJs8IeM/4iltbyX04ot0eTS2BZeV0UV5c\nJaCpbEb1ccHNe3RMc1OFW7rJboEh8qhkDz3bEwasMEA+D7PtQvHU5UtmGmR8\nimmt\r\n=JSo5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/list":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/menu-surface":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.aac8f5d9a.0_1612807339863_0.7163419623289498","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/menu","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f418ce9d9a6eb42b12ee942bc59be63685195b9b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.750e18fc7.0.tgz","fileCount":38,"integrity":"sha512-mSE9Sj6nHNdCd2joHBNHB1FaLo7HtdA5NlLHYk/fDpSxNtAh7S4lebKK4D+BdK1fxC8ENEAyHLFzS0IkFovFLw==","signatures":[{"sig":"MEQCIBeM9zbvIlsUxH4tYR/hZLgIsiXCWu7wKi/WLz2rMRzrAiBMItIgTVCqTUNZ36ya9l8J3P4X2EanYOtwh7g1BSiMgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBkCRA9TVsSAnZWagAAmvYQAIgANHZ4f3Qvw5guTpk9\nwmZVkbsDfEOQMZf0Y+UCvf9VBrwE0GVNooFDG0viSRIQY/1DugNg7Nz+24hr\nopmWtYVrB4fAq6DcY0Wzr7BQa2UDMAc1ZuZuiFbEFkcn41HIF1vutr607LLw\n6jqULvLrzrtbrbIvTzethryoNnoNYRV194JF9S4ZM5Q9jQ7yeyjAhsFPieEA\naSJz2bl1FCtUxQNVBCA8oTImwB8rF4+ODGn7UPxVqigpr3z7L/tH1xeT/VYe\n5cky4UvS6wpU1MOqWQ/s19xUS6waX8Zb2G3ZqQx/VsJ3NrrGF7q3hUZwg+X2\nwbNA0N9QpOGzVxRl9ruxYXtILTfq8VNV5iG6ccVts7iE96Di3uqNyI1i3zsS\nD8D6yFt8Eh5d+h/3R8GgRMH0IvBbUrcO9KSDOUlCXizOHm2SkydfnazNFZaW\nJraYFZZREdnKxa7RRO97PbPwBVFIYQxd5eUxMX/O2XJ7NRtAuo68NKCtdaH3\n8Ymp4X8I8oWGFL5lbugCxRAKiCPJ9v+zgqOdDVMeQsdOYxylAjqh8NXryh/x\nsZreOknKZAP2YeT7f2KAJAH9MCvMLStsNwm4zhdG5TqUhVTgnjPj+nHJm1k1\nNdbUuU6VPia8kORyIzMiwuRIkNqWSMPxwP/NAgsDrHHXtIm9qeFTtl6cEsSK\nZ7yo\r\n=stXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/list":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/menu-surface":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.750e18fc7.0_1612820579944_0.27264852323790434","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/menu","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ba514483ee554532af1d8cb82495c314f92a1cf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.b62b1266d.0.tgz","fileCount":38,"integrity":"sha512-cfslmOGB1qGuF/DL31CJ/+cyOsc4hlGCvZsWIze3QQ7ARXz1I0QfjEraPmqQ9UR90VN3rZ8QNErM8rqiixj1WA==","signatures":[{"sig":"MEQCIE8gJqHSsiqqtt6soTFOm43ayCQifCl04vbxS9pkufmEAiB2xdil/psApi6ZLTeZ0iM1PsJrG2DTibDUh4GeJodimw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwSTCRA9TVsSAnZWagAAPZwP/3CYZwJTJeQ6Q6rTUihp\n3XNsiWhmmkOZgjhBtzaM3vRi38YqbnH49LNF9/sfiV+XcHJcSihDQq6vip1N\n8NlxuE9naxxB57WQ9mAr7STa881uqFTG/SGeWeHAMPEz68Xi5EPiJdMLLhi0\n8CyJAPxOsSOe/vJ0csJfpIucQ8cJIARZ2tchCWb9n1Q3hqfc6oX5gALjdPHk\nO0yMWC0lINGK4rWspSfsHyQWeBW0OjCF4MICq1gt2dMjs2vh1Xf/5QUtNjUy\nDPVWVJmZIQka3fIc+Ri103IO9K8A3b94cPZfdX/o408ZiMIZRDs2lFUEqV6M\niRVAIoGzmRRgsPrP1vuGIqyYtfPzjvNezFrWaN1JkyZ1fQwn4lMypUyma3I6\nMx7G0t+rGbtQ9Jf1DtG6tGsYkJdPIsqKWF9fhD0UWqfAv2rem3nEuAB2k74L\n6m2abqgmn9/ivHUnyviX7BPCg+rLcakNMzagi2/MEIfGNoyDuFyp53DVqPqG\nSgaSV71MMgA+MOzKkc57YdTmhvUe1lihhXxWjoTSj6QgXzt5a1POduB97NiQ\nj5/UMWzwx38ctTNsjUApOYHTQy4bLHmc/rq2/K4CLdevVfeQgWxyc1YzfuWH\nFHuIHfwUS1gVHfvOELl2NyTDn3aE1tWzu49y5yBpt7tUkEdnAdzeCI7UOV1N\n64v0\r\n=Q3RU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/list":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/menu-surface":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.b62b1266d.0_1612907667044_0.4869050593334856","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/menu","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"671cc8c517dc6c7de55ef6056277f326496ad36c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.a6b3101fb.0.tgz","fileCount":38,"integrity":"sha512-B2q9Im/rEos3Ui98qwhXOgrvkq22Bm8pHueG/GuMREk+vLkX7DxH/k4Zgyl8HRic57EXIncXNjKOLhU4d0SOPQ==","signatures":[{"sig":"MEUCIBldC+PMmH5HzmoeXT5082ghRf+l0Oj3V3scnm4BiNA7AiEApkkKvVIGrISIEix9Hr2Au2nFH2dLDpCkc1lEuwoLcoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbtSCRA9TVsSAnZWagAAd74P/2nNlA9F0M/545J71jUy\nT3dFYiTx2453TKeo5nmoqRLz7zb34tgsMo16rafoFCVTRc+lkamgcaL9X8sz\nF/hpF3HntGZbEgMZWf6XHELcxJBLhmp+hbA19je+WkqxlxsQRGp4tuPf2T6Z\nEu1zds9P4Hys2kT1LtmnhD+5OT2gXNUsrk/DvhHyhwSSEyMYORt9H/jKmOWW\n2LLnVhyueDbKeIGMFxPuwDX4I6qnjBoXVWNZjlpwmL8xCeuobM77pYd203LD\ngsA7d7tF1UwWNH2jdviLBMdjJasaqPcs8rvZxd7vHSxklnbr904LzlVGqCg+\nac2L6yLzA8s05iCddmfXXFKJ4xeIogulIUQ+IXoGZD1IwUFm9w3RbMSr0nEe\ndsRHM+8egI9fEICqvgex7SgElgkz9YhaH8PnF2Jgdk4PiP6pP+L/Rc383I3D\nVgdceOjou8s6W5oKcYaor8rTqW1tVmoMLxyva9KGYXJv1fFzZnVgMVSfTnts\nTjj1TCRLcvF9ynTnxN1XWEtiLa+YBGmKSf9Q6xLJdphTjHZdDF0VlGPN0Q2W\nwTf2lfN8P8h5jD2sN6kVeXgx9eXCfmJwRBnqjpd4uQN2GSk5HzCKp3QMoI+o\n4xD7k1bm057jy0Vq4Y3cnCpJMvpKKAu7gU2hRhIKGG36yznQl8EwEdrBmVqr\ntico\r\n=frhN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/list":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/menu-surface":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.a6b3101fb.0_1613085522346_0.41496700207046033","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/menu","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c34507b704b322edb5074924391e298f2adbf89","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.ed88df700.0.tgz","fileCount":38,"integrity":"sha512-0BAH1EC4ZvT+oBqgBSY8XGk1IoVTjgixrbHNr83cckW4TkpQJOb0qzUWf2n8aLWteCA8+S17adwjxdq8ScyvzA==","signatures":[{"sig":"MEQCIEgjN3mm+GXCuONH3VhXr9HyrOYTC7JyuNNpTvUa1ZBgAiAIB/ErfijGMztm+n+oZLReKSOGwXXn3Z8IXgJNQK2oUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJccFCRA9TVsSAnZWagAAiM8P/3aK30N0RIgAGOcODsOn\n86Iwme0XFvLZzrEXO9S66OS1GEGQUnkGJuqgcC/Z1ROTP5nqGeO/YkZ4JVWI\nAtrVddQl3vGX9f9whcvi93AZmrSxSMRF8iVGvET8ZCYqmzd++eBARu4H3iFe\nCk5fqnIMuUNjWv9AL80rr0ifwWauDFr6d/k92pmZVTYhxm7p5s5O6KzJCLz3\nDpSyy1XH1ozN/N1bKbtAXLFLdajW/DxkFSF6qWntdA3EOuYa3iyaPXMo4DuC\nrfItoszezHztkCkTKZIo+dnStalUFmOFPzzvnnIo/PTfGRg0T4z8BD9SA1NA\niHjItO7lLQJ3VFm00+fJ1ncyG3dPHzArW4GFDx5TwtDUrXzuu95Mg48CxyrS\n/No3MKuktCJNpTD0TfEgW9klMW+1PWoZGSxP5D6zWpu5jdVHedUowEBmutoS\nLJbod/9rIx7Hg2QmkloymrdPpWMZH7GvJd7j8jghyMRMAmBXiV2fCPdvrvRR\nStpA2WQUs3mDXN9urB+xwCXeu3TE0rBomuurdvsHP3GSIHddOj1k0ukul5uE\nfgDUQtsj6MtZ2qEIJ8oWpEa/mU59Dm9nb4ahkY7/YGlk5wEMg6yZQJVB+KFi\nD83pN+ZlMtBL/Q0px27LOrylZrZ8jiaB48X8rbtHFQ6oAIYx+QqLwNTKwnDD\nqIUO\r\n=AhUh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/list":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/menu-surface":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.ed88df700.0_1613088517085_0.5926843569619396","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/menu","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da5fae8343c5007eaa9185f87e2301a6a67e257b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d30efe6b4.0.tgz","fileCount":38,"integrity":"sha512-EHyD3ZaWnhcnY6NJ8buKN7qRz7FOwA+5JRyxQwZZwtpLP3c3Hl9eczjbu3mbrUZiHkm6HNVO1k5vtxVpjrMeOw==","signatures":[{"sig":"MEYCIQCHRVvB/jQyQIHX/3ofR2/gmvFmF7m8MrBC95XaA9cu4AIhAMMsHB2JVmOSmQasNgEgcZTdldPHTv5rn3pOvunuwg9C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJetTCRA9TVsSAnZWagAAC70P/2gL3wl4J33vvQH5RXU1\nWGVsyu0OdVXciCfXZTYZcYCPfiwtgXuboTUmIh0LSqKNVXzPJcctPVr+P9Wk\nj5e0jLxgFBUZ+1nYLPnx/W6R4BDr3OvT1xu6oPWm9OX/VI6WwAYtNZG17Uxu\n7cRnImAQ4m71OJb0bsdXBRl47OhZJIxwBtqFd/KRbRnrWmubicQF/ddutCPG\ncvOT89gMR+SBjsAz6xrcBusPSubhGGPz6nFJAZjE5Ldkxveug4Jv4xANhkEY\noyGWUEex4Nh96imO4XoewbverifTp4Qpx/tuMY/MVKPu/QsBt5OtZA1xCjLu\nDUOe0dj+C8ni6Dbv4xrVHJZV6mbYDmZZFUih+gS57ypHwZej4n4XBCw8IwTf\nFrqTs4XGkH84fZi6FK3OwryFXNaKEDixXSi1qh8rmlfo++tLmxvR6d7rYUtU\nzpwE4gJj/7DUqe5qCvrAQZW5laHdZJEMUuu8OD/+sZTPtvP2YxQdIsW+l8Qc\ncmkp88zbdfVU3BSswNKh1uECrKyJ6xpeUNtetd8jDJiEZVEZFWzpOPEH1BZ4\nrRInnY/zbmLa0wVnD13dc0QCNkSGpT4qhd9vD/faLnnawDMTbWKskvL2j5cu\nSIBF5Y7S/ouZ8qceBjPJ0kncrGG7M0J86NDBedr5VGpuapWpAwHGY34Ij9cr\np9oV\r\n=1N6f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/list":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/menu-surface":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d30efe6b4.0_1613097810356_0.19154103454672766","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/menu","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f3d92346a2e7457774315d701c2a9a7768aa94","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0393bdc4b.0.tgz","fileCount":38,"integrity":"sha512-b3JHsBUTF5DygxHfVe98LITz6A0FQgMCu/KpZzKpe8CvUut/h6uXO18Tm+RyQsIVXZghuFELFMou6rE/49fEWw==","signatures":[{"sig":"MEYCIQDqif4RQC+n2l9MQy7vsy7K2zL6IFODsMkkyUkuVlXZ4gIhAP45YWhnZxOpLL5mmHDyhQyXNXF4DlxpTzrKV9BQdD72","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTiCRA9TVsSAnZWagAA40sQAJD39Q9WLAuJIgYfMBYI\nGHcvni1powS/RQZajpEiZFHo+nQAgdP8cBezH4waf9wcChs1U9/uv7Cy+fNK\nfwOMSQnGaI/g7vVFzpeMI7TiJE01WxBbtiSwCDhGpybctTes+PaOfYXMSFSV\nVI17cuDZc5VvQxAoxSt3xo6CAUqYnLKEQbBpNcwwvO8aT7gMhCiMxL9uxhJg\nTxYlJ8AWCNywR1MYeD1EcK370k6wQfc+31pASe/82LNR2P1EQslbwOc9hHNR\nM2cBVibFAJpiIBjeGhpEPQf+kKZ1RQ4uLds9soSw4pkJCkW7m/kZDhRGzqQ5\nAQfFIMmXFc6z5p9rvPXNDHr1VaqaPblzCA/hugyEHFx37CU1ccrGDRwLv2E1\nqEfTd/WsqnO5Nb26cAMVYtgE/PbSXPah4BokdHpI4S42rvFjBz/wVyVPV5T5\nQaMjfM0n7k5Cuxvc2AwxJiAMFNRQsfFc9Bq6fzVjV1GMD19MxtLW3x65iBjo\n2f0EsUdg8FxpJQSl+vSu0x31Vx/a+O7HtmD7aXkT0zU86RNhBQiiirkrCcaR\n62Jb29eeKlKtJ1nNTd3EnI2Ozn77jGk0F05+TxdXmevvybApMPrFh+Gp+qyG\nPCID0Xh0XaIMk0cTi4sSrwbTFpudK2L7hxtp0BaCirgb5bn4bchWPGU04aTN\n0zct\r\n=iCPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/list":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/menu-surface":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0393bdc4b.0_1613104354188_0.6226652185159869","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/menu","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd8d3b8bc084d13e055c8eb0f4dd63b86b7ce69","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.7cd26af4d.0.tgz","fileCount":38,"integrity":"sha512-wtD032MKLHO4QMlX7V4f5e5kbE5sQIF2hiWYrvS+ugkyisUH+fWa9artBIBlb3IHTYjYNprGlfCkcBPsXaml/g==","signatures":[{"sig":"MEUCIDzNzcQoJt43SQ0I2Uq5rE7oRM1/9da4MwJn7YH8pggvAiEA6RvpZtbmz7QTteIElq7vOIED4GRtIZ4hRtp2WH0ZIX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqZHCRA9TVsSAnZWagAAhv8P/1rKyr9ALTjG9QlGie0D\nHuYlluQ/8QUr2SnWpi5vrYa8Nb/ng0vlpe/ND77ppcIN1mA/nplIZikDjMqi\nfNzUjuS+8J97CiXuAb9vSdOoh8OMPu6pGLq8haKQ1gxjQrRJvhhg2LM4LXV9\n9YbjCnOIPQjpuHdMgw5dBTAeJM+H1wzonsUaWh35E4VtEiFXteYqpMxGkB2R\nMihsJ/+pj7pMiDHWCOgiEm7ZnRSCkXg4UoaI5ozW+UujHWgpYX7DdPl9NYTE\nbZpJWnJOc5psLMf1USCaq0BQLXy0K6qUZ9aT3Cv8YbZGLPTvTLAai1isZwN0\n5V35bKSOp0GXvngZdVPxe0H1gXR/CI7oGOZpUaHbdP82OHokz5vdNmlXLzpt\nQxLPwu27xUUQckLphQqh80663dnV7WnJu8SI0seQj4ijyF3msIBz+/22rNNj\nr3pkUp72RqojrHvSN1U9qhe9QBc7O1opa/Bh9i7lfsPGxJex5XMZco61fTcI\nHYFl/UOtOtumn1//lyg5aZ+ZUEKICUw1IrQ8MSsq0NbEDHZAfQWD682ybIH4\nSYitW1r73/kLfZfl8deyGSReeemd4hT4SJapFw7Yaq6dTKh9HcCc4stficcD\n8dpz2M4dLmE7MruhWQ5sU37VerKe59qSyUev6GAjWc+XrAJTNpLMtqmZ9b+J\nq6tE\r\n=Lp+K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/list":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/menu-surface":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.7cd26af4d.0_1613145670690_0.9196197561058979","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/menu","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b662e803a88a052eef6158885947d3e6df01550b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.71fe9a067.0.tgz","fileCount":38,"integrity":"sha512-xFSDQSe6duRtE1QLhxVwDoT8Yv03p8E0cOWoGjmlL43tgLofo1MRngFda5MrYuTDL/PUskA3sA0FFhuVW2eRPw==","signatures":[{"sig":"MEUCIQCgAelO2XTJvePkDs1SA/w4O6I/LiUtjOiKMufp/VkQKwIgdsIccN1xZMJ9Xcbf2xTaWQQC4/zVtwFtiWJofShsGIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2lCRA9TVsSAnZWagAA/DoP/AuIGvjsKhW6D45VmUVV\nHs96Nm6SXr2hwN1CH4ISlNBvW6jKWPEEC0F6LR7s04LQ0+rItVZXqZtafD26\nSMTokY38c+VT6waX6hpDmqj0y71+GAsK638ZzFXENAWIbAJaRB3NO8d5JzLz\nMOMQOUepkDht/gsorwheV4Q8W2FVdIVuS3bdiHn8q4tClH4MIh6U1E+FLV7x\nqro+5/bVRLjK6zMOi+R3faAnSOenvxw6KCWz+q48iczv7qy2G3GTN7kadv4/\nrFSTqOdH3/KFK0r3LOPIEOItsI8tgi8qkUfuxc8T4M5TsKLP5fBZShcHUINM\nA5XgFELY7um9a/HtoZLbl1KbyfT7Qn9Fk64uhK5WSz1RPJB0kpG4819MmB5G\nc9mNMBGN/vqhsDdSBjxay1LLKRAHEvjFtOL+yNdKYgwEpjg9WlhUnju5ZVW1\nVgBcH+LVtMCNM679/dX4gRrL7b+eLrjVVMSBv4B38hcGokn2HJ54kQ2WUrLc\nn2jh80tIPyhcvpwyTTD4JLWIXjZcNAn+QOFA0g1JqOsyB4TjiLIZpag7jDjU\n3vT3lxpBM7YG+RZqYPeJuVchpKToSWS6LCQjc/oSoTwcwWAiDZBkBuVVx2A6\nBjxmDat7N08Rtd8VsL1DQ1kHmcwWYKRAJnhyds8uNaK5zCzvmIM0zuZTga/z\n6kFb\r\n=fLoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/list":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/menu-surface":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.71fe9a067.0_1613147556927_0.7556723536263827","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/menu","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8ca61b8db38fa263ac08706f5e91238cdafe00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0fd56a86b.0.tgz","fileCount":38,"integrity":"sha512-gj8ffGousPAAjMjNQ1Q7URLh4OOmHm2CLWSp7ZInq+vHum0TieRxT7ZG/xD6xOl0KLqOXparTlfRI3M+NBy6Bw==","signatures":[{"sig":"MEUCIQC9QFJ4n5V32OcU90WOVOFieUUG2gzF61EV8X7GNn8j1wIgBhEjXLyfO195xHiHuLN9Ev39tT+PeWN7HrPKnHBM6IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxm0CRA9TVsSAnZWagAAnmUP/3nn1EYbOrikkNwok/WA\nsduWkAmunSFDIJaPMml4hnrLpWqh06HA0a0FzGRSNdot5p7GxOk3QTx8uUno\nPmOu7kpH8TF2PrxcjKqpU//6ybKV+3JXtu1FDApVKhnAFoMUYgiMqn+DyiP6\nGU70+nDqQ0052HtZNe7VIDUcxtahnft6+N/qiZgY38mpSQqHp7maRWefi8cS\nZEmHmo7EZN8u/Vxbc+G8XlMcKY7UD+prNmuUS5ax9G7m7c8G2tos/i0DpbUU\nefzXtWpugiIABcR9K0wbGYPJC1Aduibym9RvuN9FN/jZ9ZKUth9EzATm5953\nZMW+YNhRUSP8xNytG49Iou1NYfN4JH4IgHKlHR/4mlfphtSGQPk4mSRJkPc2\nXC8gz9rns/SD0UpWGj8UqGfvOOUV1+hPo9i5x3TRSqmN42ViW4o3NHz69Ym4\nDz2c2nUtfyC3M3DFfCS62vD+vYBOok8/T8/qTAZFA0nlfhfz3VWSF1Wmdx3c\ndrxp/uUiUvqMJyiNNqyJ86khbezVIlAYUGF7hlmHBo/kqIqmXJFPxJivOiNs\nZxLf/TmsKrQcH+AloBXfyZKS7/RNPpXGHJ6mIVNuI5Yg0jy/k8BvGzXMFxml\nIkwhn5R/FVoCbcYQyoG+S7/PAx3/7bfBT+mQ6Wl6PnfAjBqKJ81nOr+d2wsq\nNkqR\r\n=QmDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/list":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/menu-surface":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0fd56a86b.0_1613175219306_0.650567041093437","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/menu","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99e78d983cb955fa4f47dc29d5b461d26224e3c9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f19bbc4af.0.tgz","fileCount":38,"integrity":"sha512-YB2wkz98cSg6OJ6Y5fw7389dXa0oeR1ECrv1/Icvn7sF7CpHDrplowrDQjmKc4cWWedTUc3FWsA948ZWh/+cLA==","signatures":[{"sig":"MEUCIQD2/ae3c4hlmSukWJ7uZPRPqziUWztGAziBn54d6VSNUwIgWcqTLbg0XxlOkmV4eICxjbnVumGmQxDSHD97p2ND0XA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLESRCRA9TVsSAnZWagAAadoP/jA6O20t/HnAZvzLz5Uw\nH1nA3oqb1uQf1XfuoqxwZfSgb0VLu27ABYHmqEkJBqe9aRGK3UXZlLo8Frkt\njcXlAjFH6sij8AxEfdfLJr5HiY5u8yWDTMYLbD6sy6AQfkZ+nC916wc53bMf\nAqmm1T0IkJl4FfKQ1eY4SewFvvF8uKHoS5luiUGHi7TXfMjsO4oDwJnq7k3d\ngtpLN3jrI8/cqoh/ltbLD9PvZLvoF/G+SCsIhjOmb7+w/A2UTWO6zc2Ixray\nSKhvTeTIXzJiERjGUmUuD5QxJ7fc1MGU2VtSxuYWS7FnaU884DZhggDE74CI\nRq9JmCAf277HQG7+BA1tMxJoUYTqOVGai6osAiPMjXSZWE/NKs+yH93tEsxH\n+b0AP9d9BYJhKdSO9X+fFVa7D/kZ3bpJYDEQyGaC1HwVmDfbwVxrn+pHcqvf\nRcawZttAMNRzos4p0nNFikiy8ENrliSSKcRbS9QiOUEvAKwpPCuOETjyVJue\nEXdHDok9DAT2dLBnKfx1kZ+ngO7OBbtkFyoa738cIQP+NkpQrVogwEjp3cVK\nF019OE7F7dQ3V39li4imG9/M9D6rp7JFgyuraqqEkdPyutF6A5QN4aKYcWuy\nNtpHqegWyjHTUh9EiqwiJ/Oux8D1o672INB0TBiG1A78ukelE8wlLfReOmVE\nCFlX\r\n=Erlu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/list":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/menu-surface":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f19bbc4af.0_1613513872820_0.29420517363407717","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/menu","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a085cbad386744abe2677073ccb8179502663f28","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f9cac96cc.0.tgz","fileCount":38,"integrity":"sha512-MQ13cmoLjBvmT+OTOjENh1g4UhMGw+xBc2muX7U+6LoVbaqC0itl+JUXkv04l1/DBpKekbVoHifBf4KlTg3CYQ==","signatures":[{"sig":"MEYCIQDpGdNS6qt+qgyw/QDqrhPeBd3XW4J5ZkkKoijYBZfsZAIhAMtoFhfgasbKi9mJvDYuw8ez2865RXwQuXVltOeqtzRv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUBCCRA9TVsSAnZWagAALuMP/A8z9Ne4g7c4Q52v5w4E\n0sp8Od8UGSLl+thx/WGbcul4exNdYCHTWFOPVcy5jhWsopeZVC7J7V/hEbqP\nNkVr2Fcyjxmf01GZy4QnRQDAH/CHhXK4ZN/K8vo7nGoxlMqiS8yBxg7cSvNZ\nE5AwP2AbdE0r/QR7EtbxkVLzzd5triSIxzyfB4Udve7/9DV8VArMSVxe5+qz\nxdWoJSMsKT/+yohUot1pBGFGZKS7HYTyna/M1kht2rW97yJN5NpZsF17kLk6\n4V+i6Ar2+vrN6NaekJ50m/YYJPixvbPYv97j9jP++pu6Hk7ZzuQMCnncX+9R\nlVOB3r8QH9cuudIViEFrHU70sMjBEUlF7sj+Usq4Ryl9C1I/CStlwg0u94np\n9WCvTfJhvQc2Fgf048FpOVGdbCDrl2X+XN7RCQR6mIl0KbT8QtocTB9c8/v4\naAEgNO5boSoWBqwwaCCnsJzBdY+8xMHmbaJTyOaS55frjYvAnehxmI/vIEh2\nRISDSOhVEr0H0mBk9gLQDAh0XjHsTDih2udbU35GYKdqEPhldNY6qyNfh7p+\nEtA7WAK4Y6B/GWvd0lFghvCWubDGT2jp5co5oP8cKmschjnZ8+PIkq+US3CA\nc8nRyF4qyrlRgLPf8leljjwnrmN+BUrdbzqxoUEJkTchOL16tnuaxLMe+a48\nQV4g\r\n=QJ//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/list":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/menu-surface":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f9cac96cc.0_1613578305408_0.08170104309304183","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/menu","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9faad0d0fd652364be295a0c205a979da7a58f01","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.79ce0878b.0.tgz","fileCount":38,"integrity":"sha512-IMj/SWBH3f71ebFKmYpff6WEPZ/N0chJAFvnch+1SxP/nWqriIE7LmpE4P4StVR4M1OVqYIA99I4x3+PVC9cOA==","signatures":[{"sig":"MEUCICo/A19irVd8jH3I6ByM03n/+NZHV0gOmuLkUCeubLd1AiEAi32ZEgODLEGwRWb1+eygcvYVpN1Z0Ec0g3zxUOPvyLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW35CRA9TVsSAnZWagAAeeIP+QFwkv1tL2eNze/AtUTK\n9j3J2DDcyYJz3TR3niTegpOrg7GQI+xfOhwiuGYaxPEdKM1F80BgL4g0lhUZ\nQQ6MKpAnqLnacXf8cGegJVLXpu7q39i45M62QURkIKz1EWCYUUGVurg7RJN5\nRSoI+TrgyXXCV4QnOvkOKc35/MSG28tIyVdiMxHleFMNjHTYmuk525l0GaOn\nLtGNlVT7NQVskG7YSm/m8Aqz+RhSid/7nQMQWQK6A7bMIY66shlF8wF60dfE\nSf6n2wvaqdT2NdK2Tg3i5OHdfZJKR3oyo2OJiT3FmSu6nBdGkywQIQwfYpcq\nAjrMZcQ244DDcxF8ioVuJNdk5cOOE6b8fKtFMOGpY6Va3oQf+byhMtI67jgV\nhNVSsT94NGyJlmEApCV2tn8SRLZ67u8gHC4U6R0HPVS72vMRdqNUP5jByzov\ncG5zdGIwA1Att2q9WNrxWLyN7GzW2GR4Sm0lY1sVwdp1g4rJqOaDJ+RpDBtI\nH6WB0wBM4Ubtr35vq37Cb9EFlO7z8jzfmHG6p8Eoz2AwJCbuMCNA11g0kKGh\nQJE85vO4Dk6ujhP+FyugWIzbd3FlMPVpU2i9SOW0j6+mOam9+DYQrg1BoBDe\nNnPJRSZN1JoaQl4ywhNQozG45jTyaqBodUdL8kfkhAV8s7s/HZygJEjh0jcb\nom+v\r\n=ePsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/list":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/menu-surface":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.79ce0878b.0_1613590008696_0.9988054818671492","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/menu","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c0f2114c4b1667fea76ec29fb1df3d1fc26351c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d6e507b5b.0.tgz","fileCount":38,"integrity":"sha512-naldcJXWfUi7hDwZUykI913zPBvYBxY4f7U1ok8CD8Lb4+DNiis7yFSphPj6zFT/5dKjIvCRmCPE1gwXYcPNHA==","signatures":[{"sig":"MEQCIDaCykUyrTrJKRxBIXr5jCNgpxJ5aOhyAVTQWsBuA0hyAiAyuwyaUt/R/nispPEGFkv31S4hhInronALKJ8QetyqHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXW0CRA9TVsSAnZWagAAiesP/1ovOY/GhBvumwNETVEn\njKEgf8Q0wtRiF0gdavvT8+Po/Rwhe3IYher0rF4CloB+xW0P03I06FhG+zV4\nrnRGZ1WuJzyQD/lqDyJZHNu2YpoaKEcmQAYeZ4CnfpYcPk7BrAl87EtAcHt3\nNlnZe64tDDpoQ3k0ksYsICNi8A+PxAtJUPiAHvGyBfHpmXu7mcasAgbuSxqM\nXcGGF6edhsjh238uGA+6jJh2HF6ojOo/6RE3BOGaZNXw7SvQu54s9DLolrcH\n8Baw7V4UjqLOdF0n//x9IRLFu61NCAWdflKHRsb6haOooIVCM4V3U0AaeUN7\nUZGveP2h/1flsmUjiUI05QD8i7S8r2krbalPICCQ8UWckkCid1NHdOFjUOOA\niU9lWNWkOEbNIsybG9Q4fo1AYOU0Nu9qjzgik+4b0xUQPmdievsmdDLK2jY5\ni7VSKQrGhb8Cx4JyYRRbNBFYPNnRJesmulWpLz5nHjwd5az9oglbt9gE+KT1\nIZTwOVUKA8V0hqt+tNWBYMrOV5/OhjK9rCZEBoJQHhF+QDQPyW4NQIvMVbuW\n5LGUn779Cn4fVqnOSAoRr9yJLKb845YxGKeUkkxE6DeRaeeKvd4uQ6OPZzYy\nxXuwDWxaJ76Xss/D2AXxxwaVKzvad4u/EHiy9U7/D0ZIbU3lsYDFSUVl+d44\nj+do\r\n=6ldh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/list":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/menu-surface":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d6e507b5b.0_1613591987673_0.5508684375950685","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/menu","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"becdc3a53e28511f2831ab9283ecd9286a047c2a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f2658381b.0.tgz","fileCount":38,"integrity":"sha512-kZFhPW85WnAGRT7T8zTWI15mXSLoRuiPW0+WcCrsF7rVgb+0fwBt38sSRUXVWrxR54hUR7XKUZ6FCDxm4mqiLA==","signatures":[{"sig":"MEQCIC5O+ozlE90Vw/FPApVclaoZJti4ikiLSjEy7Y8KjGEaAiA66pnmsNoHhcRiDwhvQABph/GtrYapY9yjVKtGDZtgbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZzDCRA9TVsSAnZWagAApOYP/R+5Ji2iphD9aywtNr2b\n4y5kB6D+EtbbNA9cGvksLNB/TsJIxv3aD7wVBrUN6Qrf+B0WxnkGHkPs20r0\ndrhuVSdrZkAhvoUnJCpzMVriEkzWNG177IUOIt/TeVE+WI8z+/0E1HBCCQic\nB08P62GMF6IY7Ug587d3Oq0N8HQtG76Ww4D375IHgHVaOfWcKYBtLGL2+ZpA\n0tNfHbeydV2zl86mPcHqlbl+0T/M8gq6NXcnNxS7wCG2tR3de9QBXUyAp9O/\nJ4kiLntkNi7z1g6CJkU+xW1Tp1mXdjCT0kqE3mxMD3wunkpsAYrcSXQP11mm\nJfb7IvVmEwGqHEzdubphmY/ty/hQozLPGaDUm8TDTzMtemWj6RJ22oDd+H9m\nveDIYEGlbQF2FHsuXes/A1h6XdibB2xsKzJX69U12CnjM9uYmPlKKlAmhkhO\nHSeWbBuhIGyYHncTq2yn6nPZfyJPqVg9dYU80qXHc8LuubiMd2wNPP5ei6hp\nczAF+JeQVipdo2uEpvB3x329JsOri6G9CaRNkCDpou7dX2Oh3NJZivnbFmO7\nwTMxVAwK7Oa2cZ54cMcgk8Uljb7fvIIYkS6Xxg1NHJQ98db1J7ALSHq20HOm\ngLUchRhzXJ9MmD7+gk1B/n1saKClJUuHLvfI0fGtOU0dfXknOeeluZ/YYbdA\n0TGB\r\n=+NNJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/list":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/menu-surface":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f2658381b.0_1613601987182_0.23317983858796665","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/menu","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5ee9be9e8bfac4d9845ab85b0d8010e4f01bb1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.97c4d4035.0.tgz","fileCount":38,"integrity":"sha512-xCs0k8yRYQThAj3VSdIXjJIED4HIsaEhLXGJXAQFrwaZy102xn+7IFGzO8KkcCvT0lUUPGLsrkQwC/VlgUWscw==","signatures":[{"sig":"MEYCIQC/fteKhbP3GHg6bVl3wWHD2tTkmdXuxBoY/2tB3Y9vQAIhAJPbAJT5JfLslW/3QkDn2wwlrv4oaLETcAxBE2zSBNeL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdK9CRA9TVsSAnZWagAAnZQP/1SP8GN+qlPFvGvgKF+X\nraQX0PZmE6ZSMeNL8aEPJDEosxeWQJz+sBsO5ONlC5Z9gJZK1VUkbsdwc3Nf\nATvep+P4lCCEVRz59ViQeRjFwjXKHi8K2lbDNHCmHwNeMPBtvH4Vfhq4f7xw\nd56v3kmwL3GRCBZwb8za0K+sPO0MfLaY1pKX8LiqM2gWx2svNnRzVbSRUVld\n5FbgKs0IGNFIm8wysZEWxLrjdL9K5GuTSRtIlbHN1Kcx9ICypQ2H33OUmO0f\n+RjZyvaEnlAGyqLbNmc5jkexNci2Pd7MU7us0u4emOFtCnWx+TN9rsOo116f\nH3uCJP0A58qflJnI61kJoPZ1sja+l9Ac38g3K2UtVgS0SaJWX/vNCpRJ4hOR\nLvECtFJprjclK3eGf0SJNzAy4vo7RpUubdJx/+09wWT4RWUyJG1m4G8iDnMy\n1wthu4f/VZ0UdS366EEgc5vYuSuCP83DUSeYtnVrpt1JhStYwwjBzdXxwCQB\nbhsq8Rcyv2tqRVjhFqJ3HZx26OEJD/Ek8ofrc18oo9N71BXcJqDobOpOHjcs\ncN2krld7fdm0Tj/Ma4MogUy3GlvEDEcxhjSXa9nFuSxbR1kCiqvZVwWRlUF5\nkCpy8paELEpAEFjF3YDR7IbBKWLhe1G7SyHVTDoFaVXMZCmMEKjsEVrT/jiL\nDry2\r\n=p2WU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/list":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/menu-surface":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.97c4d4035.0_1613615805081_0.4678736723380781","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/menu","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5806dcf0e8f1091c8122c4712cba23d7d6228cc6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f5bb4648c.0.tgz","fileCount":38,"integrity":"sha512-6zBX0YxglZx+WHqQF8AocBCXA3Kh66RQ5vV9a7nQDTmCjQT7WmlbQNLOvhFW941U0xGff3Ll/8e3Y5BWmxzc+A==","signatures":[{"sig":"MEUCIQDuc0ygXMG8kkh7ugvgn/XNyIBE3MiwQjuGaIvlOBmEwgIgP2ZpJA+dv+YsjLchDZ+a4WbLgSj2B0M1UpaelQM33vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpC5CRA9TVsSAnZWagAA6BwP/jKEXKWRbL/rump7iwDW\ne84gCbjFBto6Yn/MOR4Ei/itIOnrkm4d/MRPlZbECPTdu7oPGGuvWPJo0cqV\n0jCPJ9N1agEgClHQU0RJCgHPkSMjiVTnL+K7ozv65ghkZqGdoakD57hzevlE\njWjjX8jXFRrFFnHOBP1BZjuCnDGlbJZpzp1XlZ8Hv7g0AZYOHwrXybOpiaiz\nofWUPua/gj0hoSUsK1Jc7SwsduR1GDcQQkQn+jj8Xz+NJpm/rytHOolBiSOB\nklR1nXr1/g90vjSHkVGbmCOMwPE7Mzb0QLCoYwhKzG+fLGd+UI5R60Xsnr7l\nvWa3YHHXqEqw47kH2BanhOs1cS8Dk6xPBvzcATpWrCmYQkTKrUvUecEtFVEz\n6HtKo3Z4nvBCpNq+DSR+pHN1+rGBWTxTQ+wZX/wDpFxm7EUegwvZhwjWzrXD\niBzlik9s5uE3AjtEMQkhbqaABFIdNtciqrL15tZ+n7eKPBC5lFzd6nVzNF5A\nH18/VINZivGS/R90Du+vDfkcdCGrXDnEt1YvBzyD3pX9UhGiTemzt+JtAF3z\n6p37RtfQ/nU8Syx6XSKECOR6GnJ98+unitkNJv7mcxBrzrUQzK/FiRMk/9w8\nA/qbuElgnyEr7RDxwqwWsasTteXSL07C9cHHPAzqxm0FXXn4J/o67tAbySih\npZYY\r\n=zWte\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/list":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/menu-surface":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f5bb4648c.0_1613664440568_0.5306167656624521","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/menu","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9513c7288e335a3f744d0260f40c314e55b97da","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.302c7a960.0.tgz","fileCount":38,"integrity":"sha512-kU+NiWTdjCVCwn7+nMBa68DZAt2APGQxRSlzPNI+xvXD7yXFQ7FhQs0gLqvm1ajAgXMFADKhf9Ce84m37LgNNA==","signatures":[{"sig":"MEUCIC50ibqERx08ymyJT+0UBS4BgwSgR3ib9Sgpl0/uGaQCAiEAiLg1+wqj1/J+6VAAdjUk0aZ8x/wzM6KxwCJXr/yaQLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrR+CRA9TVsSAnZWagAAme0QAKK+HI83RSfR5evS2dof\nhwpqKkLZRiPox0dNMMiR+hw/LDDs3JIA0raLMS8FOVLvOiWUTpjKuVCdIniu\nXiLUBv0ANfewiPLDkxFALV7V++DBCm6bx02wBrpAOdhQAS74btpYkUV/eVZE\nVkLTAavW8PFsKIqB0xqm82mNDtqHNWKXCuhZ55nmshrjyPubbkt7kolOwjME\ni2CVbz8JlL3dnt+48cfLdUsWopN9b52HEj7D5RG+tW5UKEUa4/aLdmaZNX/c\ntUe0OQ5h+d7tY2eIZmsWz5b/9GFCz5Yf4DjPHq6939cgS61AXwjby3DpIoMZ\nnoP906zmLjNOOZK60xVPFvwazr08wUW2oWLg9H/cvtj45MoM3DNWDvaW9OMt\nHPSSeOmyjCLodd+dYvY8tfrlVkBNeGKW3cjLyU9O4WgqezNA7kuNIGRpOnp4\nZw+bHDRlc6xgALAhC+oaZymXjXtTnfe3p9vzkFxAkyPEg8DosVcQUiiryjOX\nI1wqTbOD7Jo2wdPIuJOSGRF/VPKNyCiu3JOWgaiFzi/dNt5talCLO4VP1v8D\n8X/X/Z5k9Wd0wWSzn8yP4tArWlQwYs0JqMo/o13CQNKQ86NAr+hEZFIr598s\nJCCwY26kM4mfFFDtH3f2/Z7+VY/HSAdgB2TwGAG/6UpQpQsL0jGA/10cABpq\nmMzF\r\n=vdQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/list":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/menu-surface":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.302c7a960.0_1613673597395_0.8977491439292398","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/menu","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea221b5ecdc1cc4bebde3e491e9113377a36e3d2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.aa0aaf026.0.tgz","fileCount":38,"integrity":"sha512-eqMe4NJhXQo4Yik3RcPLgQ1nIOqgFZ9mXCJ/wrlh1GNK/q957vi7z662bdXXoWqE+IUPLNIWWWI5BEqa5sAv6w==","signatures":[{"sig":"MEUCICRfWfpsQscnaOtYD0jbsI+6X5zEHiMvYouGgIl1ObsNAiEAnpY2Vq9JWJq8ikmgXzqob2QLo1j1TGUoaYR+xrrKanQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr8WCRA9TVsSAnZWagAAji8P/0J98TNpHMBe+T639Iiv\nkhAC5REi5XrVaGlQuOAYr1WkB3phZod+4kHkhqAKb/qNGLALyIN3jn4KR+yP\nFZtq70p0SfjXwJyBPE7Q2NinQwqoVvIt9cFHV08BOQH1imtdmzWQWWDtr/EY\nmZvHHVvXKjGNmRpi2aiMM/zRCwb4W+aSRjqfvFpsgvkPHwbRBd0JfRac1JIB\nSi3ecpjPC4UXpRJtU2aEayv9B7Fv9HhTCEDOagO3IocqDKMGPjy7B9tR17Hb\nArnlnhNj5SszZC450/FqZi6j3r/ASpPRkdaJ019UrYwkQu+kdoQRhgT3JpfO\n1xPl/mRlYWAi/6EpepwwjlknpIXB1Q3O1jFI00u+dFgclwZC3Ck3+lP/q7pt\nUAzoqvQf5lhT3gqNFm20R4GH895Pu53vZbZ4sqxqRkVUvOzqHbAHddsU7C1h\nFiWnAOPWrXofvfmexVl3JGGTJZJXrhnxPMc5wOYyPaLzryJ7RN7dL7IsvYlN\nUvcL7A3w8H3paPYJD7A/HJM8JyUQfELUPYt2A2PzD/H9WoD3OoMYfo9gAnjG\nJlF8xJWIU2LU4xauG2NqxgDLZzAJAln+/eIc6QL62Sznh7AtwWP5jJ7FMtOy\ntUiu90bGk+C2MuiLAlMQ/MFxfdpwCODf5Rlsm8DDc5WrgWpKY2Vlg/ioYAh0\nnaSZ\r\n=aD1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/list":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/menu-surface":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.aa0aaf026.0_1613676310406_0.33813962227247596","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/menu","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67916d52a03586eb7a5bbe1b1ec35bbf4a03511e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.07ff0c452.0.tgz","fileCount":38,"integrity":"sha512-HM6vDyR5BGl9pFiOGs1h0HXBaAMtsNs6IeKIxbu/czZjvgHAvg5KJfBuhKc+VbgBVOTkgNPfEuRojVIyyRWohw==","signatures":[{"sig":"MEQCIDB7RE5iXInCgVtVCBKtDCSjta4Hy8G7R4+CgtN1jIQxAiA7aqfD5Ion/EYBL1hUbIPd4WAUujeH08QKr6B2grWquw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOpCRA9TVsSAnZWagAApYEP/jnvytt5oMyLsuea+epL\nKFyBltaX/eB3nDccCoG0/Q9OjqrlqyGrSlb1nVHNwZdGsJDHjNWJz8TFNOu6\n3P4GUW9pgQWnwhyQoeKfElrMvbeh8TKiGsK/IJQggYTfC2mcAXQ92OPR55LJ\n6TzGP7hXwotgWZ/j8GuTx9dv8CM9RpYy+ZhsxLRhAmN2s2Ny8uJrM45U6AYG\nMkpgi773v95OfznLK/exGCdkTLHfejFvgf95NWA9wUVRx+QkMOsfERo7jg4+\nXIjEtOk7njJF1YbsQMqXJ0yBZt+U39RCgqLFOTKgQmAMn8vEVX+e3pqN5FqY\nfTsBlCEUsVbIi2PTto6L5nnwKY/6e1li0/BZ1mqSakg7WkRvyg4aRh8TcZ9M\nTK6tDo8DDeIaMeMfnZwy4p15/sCkxOz8aS1K4NiN01CUxSKRL2mDxBHNN013\n/d7DrYkq+90Livp6gSHgHNZqZA/9hjbbtATYb/VKn2c5WyN/7yL2SZ0xbQCZ\n8EUBnuOhKBbnsKSCLAoLgYRBSjQckn7JmkcqR23W0DEqHkpohsNEg5ehGINV\nK8oR1jaWEEZ+ppfwLXjurdgLdOnd0ZWidVMMS0q18T38wztIAiSnCGWjDwpW\nrvjlf8LOy6Hw6CxdvX/eYlYzgrK8AKLBUAlZk1fSTcjMclhc29mbYIR8eVi3\nyTCQ\r\n=ToqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/list":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/menu-surface":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.07ff0c452.0_1613677481262_0.9202267853792314","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/menu","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e04e6cd166d9cd209f703ebd5747749bdcb9f7a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":38,"integrity":"sha512-8drCoHE8rz2Zu994i+tTq7LAbhxzZhLU6SrVG0uZO6Jb55zUunLlJEl/YP08LpQF8WVCLJhCKnlhRv1Tw2sPQw==","signatures":[{"sig":"MEQCIEbIYdo7nehmI1UBIaJXu3ZJnDzk8EzAAMkGMqb79QzsAiBJC4L50jTo55mVNpk2G8O/6tg1GfMA6Z8hjZiiEwUD3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvhHCRA9TVsSAnZWagAA8tgQAJFSAMqvMRCuGDEGdtXd\noC8E7XZrp/VHg53pD9RLUYy6XKEj7vUexATY3rkTVnkBwRbSNKV7pg0TpFMH\nwwgzSzZhJIlAlbXSSVGazyWz0oPJ1Gza++lWEjXZDvTr7kt8wvJ8ezv9N8bR\n8H3wnRwsBTp5m9yfC3apCcEY2CCHA/Lms4MYagwu0FSPDkFHbuGYX11Rq+8K\n9rK1spbxs675dm5nh+RBX0vh9FXUALg0suQjwzDdL28Q9UU4h0qlMd24ZIih\n+dbx4HPGRMIMN7tT4G7bALkM9iemt2wZ5+i4PpfQ2PRI/NnQi1ok7KXZ9hrP\nN+5jarmFwwma5JN1ZMldkAFxPA2z0gqL4XhCNhsYDLO+FyDUjmwp+0F/UQwd\nBgQ4ERCLSh21rtT8SYbMNhf6EpO77GQ/8DCZarmnPYfwIy7dYnLOhpwtbucf\n8AB0qKlT6u+fAbJP9sJae2gswiLB5OMWzR5k2EKP40ll0AnBYP6MWOA6T7yO\nHLtseTwyXzJUr3IKqawab9648S5CjyS4VkcXpR+153754q4ei8Lnyz7Kigr7\nNTCSMYfuR89yxT3VelmJ/DFaUCH+AkGxIC4pcE47S1mpVMA4a0vQSgYaHWay\nYbOMMkYocTdtB/KbrcKDFBmAkRkdshc2HYVtXKOAYiAn3PFshhxNO1Miswz9\n6IPz\r\n=jYhv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/list":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/menu-surface":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.bed7ecd3e.0_1613690950621_0.5714995442370034","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/menu","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b913a6cf309013678342af3f821df655246c259","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.06dead2d6.0.tgz","fileCount":38,"integrity":"sha512-2mf2F0Y2MtyVeNHMc4brfR9rAMGCioWu+c7m4SCScYdRtpA5nJtmEK5tgq1mvJNmjGdcNvlnfdtxRhqzyoHVeg==","signatures":[{"sig":"MEYCIQCC4lhFULtXIqF8ijcyuvT6aGot0Hf3dzHj2e6Og2bd8wIhAIDQmhQkBYO8DaWvhjyGH6K7jZZ2RPXS2ZlROKozuk2o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwiMCRA9TVsSAnZWagAACMcQAIL+B1zJkfbrOTmz71DU\npUK7IY3u/0pqomVDzNR1SRUWP4qJfndyXkwN8zAtpjoaxq67fuf1iO0oUp5Z\nOCvSr1U8WTQ2LgnW5vHgYrRGuKMlvbgibAOHp7COePMZeukMiq/IaifkmCo7\ntmlqDuDCcnhlPFu+lc8UM4qeseNVsCsjaw9wpras2RfMFAOMzqZ8Y05oA0U1\ngVBUYgFaUn2yrcsO2ULLAtZrEMMqxwRnxh8YZ/Tv/A/1wxyFcvALgkcCR0HF\n8BNZsplBF4qyB2ewhxXOYTGjJls9Xj1iny+O1ARsFKK1wkzpXo4o/gZJlERl\neOeS6ulPZ9SDX8gmP+k6ozUMWokAS5E5VbPToTlE1YNoR878fDhILQ074gHB\n/46YHlmIQOl0kOh/ffF0tCB++6SbAB9j1cW1ujg4hBPP/6CIO41slZKzs2KP\n5pxfzc06Y2aPc4mEKirhXllcAoUkWKiYjDW3+8xFG2v6G78YJQhNR4yPkG0q\nbbGWt5IoJwFePRDeS04J78ZSRta0mylLJFBrXmntqq2rVyRH/j6Uvopftjx5\nlnfljH5XQO/EhEvRcIN5ZoCm+s6z1C8aqcGjvYpOCFQRn4FsaERTjNhtWO8K\n5Na9kTGL2+DR3g2fFj4+W36U1SiUegYmL2JydQRRo7N2lJ6NusEwWEHjr26c\nE63y\r\n=i6Cu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/list":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/menu-surface":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.06dead2d6.0_1613695116382_0.0006685922398377286","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/menu","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a04d0b7d49ed5aad11c766d9393eae00fca9253e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.cddb03553.0.tgz","fileCount":38,"integrity":"sha512-yRk8CLjYiXL+80AxJfLvdvy0iNfCzziSc83YulrBnKYid9CrDnmv5mTd5XxxSWolaJZOp2ULAEOgJrh1aj1QjQ==","signatures":[{"sig":"MEUCIGSe5J6lSdFsmicszKt3UcEIB+ql4+j4MzN7f4hKInTbAiEAnaFy00jNrvWe3gCVmh3gRLqY9PgkaOdUNye90rZaQF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0iCRA9TVsSAnZWagAAkAkP/REXyojZyYXIWU/ncvug\nGGTHdOgFUYC6t65gFVmm2yF6LIY51vPbJlq5z2XjhX1oiyGaDau1YcGzNsZO\nyM341FeEBIXQyJP6y1aGDn/goTwKpB2qyBXRpyXUoT/FTFsQCFGq92jJbyF+\nIPofzAxZjTPvjE8eWQB8q9Ie8KBTTEHAwIIvuzSAMhA/zIhBoXgETzEfHYKI\n1HfvCFDOlCZMDbAInlPSK7KRPxyZNN8PRPY73VzZpbRs0c7wgIbQdz1bgwA5\n0wtnM6OnnSq47LlrMCrwTDHMTd7rLcnY0YS+NugAIAMmqPXckBjabCZHLluO\nTo/gk+mZ6GKarFiUQC0HV+DVgxk3F9SfEVbjXVaTQskaMmB6zMy+j+Y3yKkY\nzqYAkWFhObp63Fw1vsuu/hMrqFBPAlf8Cj3nM4OLP/aQMTaNV38S2be2eft3\nC9N3iuGdSldlgRY69Gvi7zs/DMGOJk+nyRMHlnXSIAxpajJFYNhGnvwEX80K\nOe+3SjCY6RgfMvW/sap0mSa+xeMO7yj9Zi2Ze9pQFaKJk6FQ/M5RRyXgHQEw\ntpIRPXVSfk5xh4JH+6P5Tp5FC8Tb4YzB82ox7v6JqHKUt01ugOcpyLFb7Nan\nM6Kec0vmlNAo9hiXxr3MiX0Ptr3R+28z//7Ut2nuu+fODrUbVGVS4mDAHAGd\nTBcL\r\n=RNVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/list":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/menu-surface":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.cddb03553.0_1613704482102_0.9807544577891454","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/menu","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b383f8805edbac080ab9aea2dc78624750f07b31","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d6d8d0476.0.tgz","fileCount":38,"integrity":"sha512-XhxfHQIFOj/kLB5As8/EA6i6KtAEPGNgaIrzOiM+ia5rmZcNBctG1fFkhfGwK0GLBPv0CkqQ8sAlOhJ3OSiL6A==","signatures":[{"sig":"MEQCIEjQPnFtWUDIrjIw+f6+YdEIMXxy8SO2QWiKEPkSGlZcAiAHplD3p6GnkbfXOekNNWCyVztu3jDM9z4athxMfLCz9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL07KCRA9TVsSAnZWagAAgCYP/3CriyA5bHv8GJ24pM9j\nBmwI0e+9pS5NfsDonlWKBDp/KoHprNN8t+CFVj2UXB4nWdw6RYfkoSgaES9N\ncF0DXJ1s2oCaGyZvPX9L58f0ksvTdk+0aYucsRha2QUp9cXIPy4eOnQ//NZC\nmJYxfjlGsF1irR3GXz7J2rlCgoZVtNPhlKkpla5fFaW3P9ZJx3tFz19dwIYu\nUwq1qAMmrTc9peChsLxVc72cWuahP0sOPwZ1Vuk2aKPfTkcggoDM99eBR9IA\nq5vss5qKf/Gw2KktibkuPMuVPDYhCnMykKL7qZLezMKYHqagWmaH/ytDQOGf\nqONWcZTMu3xWADFsXWmp8iwWwGGg0/jx/nAhnIhe/YzdOwwCxf9TyCQh8iI3\n/z1FCtJ9KqQYk1IZY94AGkkLE2lXseOM0sWZXiydQDGnEAS42gXxwRqLqUy3\n1JZOp7gXcoVO4P/b057JmXYux4i1dx1kocIsi5sui71fw1HC/j081EmTpKqi\nnsk4RWrPzRScTGFIuxyZhydbWaEfhf8bGWawwGEdyeyCU3zuacMO+QPRpDK7\nE7s1+SkY9dao9opA2XB3hH5IwsVm+gw0C0lg0q0DNya+9kzTxBRV+YIBoZFC\nhebdtjGKAXUMB+ws22N146LgET0HbOsr1NAfwzAQXwIzM5+/3Y+SGYgZ0Kw0\nUaDJ\r\n=mP8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/list":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/menu-surface":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d6d8d0476.0_1613713097935_0.030815564149127228","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/menu","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd549a5683b26cee4131a480a5ac6752e85d04c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":38,"integrity":"sha512-P6bWENJ4rIYaz4cnJrc1AMjwa6Tisxe8MPY4gYRakySbnxtBm2zg8fhYoHjNHAYBGndDizZxI6enL7unkWKr1Q==","signatures":[{"sig":"MEQCIFh9tTI7FmizaC2dsEemJpyan9i/UQdJVHP3F4tsmpGQAiAtpsV1lewrFq4TaeMZHvjpT2Zkai9u/6RANz/ZQmxkEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL92TCRA9TVsSAnZWagAAenIP/RwwKkkJiMZqTQOvV2uD\nkdmvZWhciQGcYEw+BYHg0hMxC74/xe+GuvloPatWV0dK7Brlz7omU6ivlrcm\nBYPsjisGmJYSA+nzdoOJQQbqDQG3/vcefoCE9VBq/DyDHPbIQBWezIN4ZrwZ\neLUtgCJdq+M99Z0va5P3t4qAx4FYHAD/KbsBbIXBFFOkTuWYLlEaLNhHTAve\ndcX/993F/qty0rzVQ2hubz9bvtCfUMdjEXTdJ/PbW/tpqOd9NmSqUYVKrjqH\npv2Ho+h5lSs+7l8abCl925JvVABj9q559PC/KkJLrrag3VfbI1XRpxRyJJjT\n88/312MUaFKUWwdM93w7dAj+Vd33+6MtO53xkEGNt1F9yLwd8ey/KvUvyt5q\ncaKCETJjvGh7DsuGYCULqPYP6eIGE7BbdQ3DVZPVpvoQCdepqY42rz+qzUXt\nQaCQS5iM/i6urXHQmd6O3t2lQOjClkVHqipUxjBs/Jxv3cwvkjiYBrahe0Ba\nABu+IlHCCMQVdE2mVlgVPn/uQcOJhaO4qzee87bQ0DNt9SpVQpdSyDoD+sbE\nSAYz/Twcz5sopfIu7PJGYHdt/BxWTuTBCr/x5TfiNqSuAZnnefzRwSZH8UGI\nL/7ySihiR5LaqnbG7svcFYbsZrMea/kdXD7dZFbGeWikXl7OFGG0ETgUkjct\nAFvp\r\n=FwI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/list":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0b4a4b2eb.0_1613749650571_0.4195989416204562","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/menu","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee8ab99aaa63c62d9ea82cf4d411012f5418e49","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.3201cae47.0.tgz","fileCount":38,"integrity":"sha512-HRYuI6DlbvyUeDqhBBYs8TX8q3hKaP/q93dLJBMjhLIaAUdAXl5cnQk7y1XS2LqhLXlJjVpEVgKV+L1nqX35yA==","signatures":[{"sig":"MEYCIQC5IBctQg8DcaXKyvz7ogvzACOybmsEqN0+6CVy24LNNwIhALdsd2QY459UqhX8UWRjjehIINO22SeSFLZF60hlLsY3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEN9CRA9TVsSAnZWagAAQ9YP/2vByljDUZi50mUcGvZe\no20AElwIExIW+q+gf4cUmgymeC1WVoJGpNkCO6ue9q34x1Jrf+d+g+iZ6pHd\nLUnMKV5vsdXBF8NKszzSu6UUudr9ESBI4VYKp/hTrC8vh1gITTkuSRqT2CK2\nEeG7RFNpy/IvfN8t76KBDOkPMKsP0vhhA9yeHWsUyOd1k1XYGTcmBf7EA706\n7Ck4fi+G3ynzE8jbUtlxfXCJmAihNLDyMn0TDYNxEhIQZYPeDnkB4E7gPFky\n3Tk9xl1S8esGXoPprHsncXcm3Gd1J9fb8di1psCh2DXD6vwhmoffCO0wsatY\nyE6ckE3ib9i5gUwMsEnaEaDsf1s15iQJ9yv/qF0/ifRbb/H3E5eo3BZhJR3V\nw/VUslYzoy9mHpd96ItAyHQvINHsh4HE3vFam7UuUv7bA+YgUGeEPou/JV2V\nrP3Lup69R0IeGUB6URKvfUnek43sIIsSgQnhV8PBscIUWgD73fUj0IGatMXN\ns0bOlIfHUz+U0S7R6rSSuVHT7/tAPbMGOJOWurkWdJJQ4ZGiv03pbyjW/9xK\nok3gpikbLRQuzn0f4BzsctczTr53HJFHmfI7a+cP0lbFSEbTk/fvXhOLoF5U\nd/clYQ5PfTQj8wUh65MVWRu5kQ5nAvFnr8u76nDLf63cgwmp56PCezVdoa9A\nGOaJ\r\n=XTOF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/list":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/menu-surface":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.3201cae47.0_1613775741143_0.37101879696544304","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/menu","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59cdf4a77fdd257abdb33f8292343d4e08634fd0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":38,"integrity":"sha512-RUgVWT6gqvkNMw3YoGdSWiaLh/y3QlppN17Sfq2ys43j7FXx5aYR6Y2j+fjRrq+bataNkK0PJCwZddVJEAFO3w==","signatures":[{"sig":"MEUCIEDph54CrdaonvYFEwwGV1xlqx9BaZhjwyecfWQI8ZDBAiEAp2HLvaZzdiIdzBI6p+l8fDd9Al8RAnXCvU+wgZfN6bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsxCRA9TVsSAnZWagAAXHEP/Rd6/3cemsCWiO7xJ/td\nGP9iBasa5tJchikjjNxVMe+oFUOfhpEL06C9yvdF2ez4T4e7BRYzi5tebC5C\nQ418orgi5esk5bDS6nSya0SepKJE1Hh5gG/u/2BkZoAOBxwKkM6tFjFKVHIP\nNmRzZy//h75srGUnjwl9ZxH/IniT1OEE8tDeq0qUJKXdCANSNfmwv4DqbEWr\nUWPag9DWWv98aiqOZ8ZWfMvobrLpVo5ALrbh6bRjC47gZiDbIY9lZ1ErlrMK\nurxMT8xb6QMPQomEMeyW6TRTHQ1DH9VAqgcxaYACsvZMCX6ugMtfUrh/mm0b\nsecfgrUUEDzgNBS0WbrO7nlovcpVLIPLlWMK9/xRSmfaboVuWt9Cp8fVJxcy\np2ou0OE7Qcak7QZnT7GuZMffWT1nPtHVDICFg46EOIpe2Dvt67SCJyJfZ/rb\nkQ9YhSQt72LPM43HPk97Kp0PxpXw8e+fBhzjFXCd+oafdZT07w8A8Homvl54\ncD9fU1+Z/y4/IyviOrs2saAEU7nEdCXrurCC3ZR7zM14gZiqZXc7Lbrbj5cb\nS0KB4Zsqw8vwUjTJttLmb9bOFjZxEUNI1YlFlCeiSAnaqrOwbFEJw/+aoUbI\nZiedyw4POuwPO+PyHLewK/tGd7LBRDcdMKc51WrXUl5iEbxzzVMRj7Kml2/S\ngeGN\r\n=7WLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/list":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/menu-surface":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f1b1fd5d3.0_1614023473061_0.7406257511504901","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/menu","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e6922dcb71a851a17f65b29227f2d5f432fbead","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.7899e0fe0.0.tgz","fileCount":38,"integrity":"sha512-bm3tlB53ugit/mZw0zOr/PjN6m1NvkJ+qx9URTwvoFJoy7cIwSGG8O0MAZn8g40VWylhMHRJKgBVc4q37y4OGA==","signatures":[{"sig":"MEQCIFE6ZfIhiR0pyyF8Gw7W4RU7BzIWY5CoIqDqDboojhMFAiAfGd+lcfvcmN7sSRjH9palNXa3hEmjVDJeloCit4zTLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDR/CRA9TVsSAnZWagAAxpUP/2A9vsRLe306UCAw4kIb\njskmsKi7D9I6US3FCIDC/DmashBhrlaAoZA1XGWOIBgiU9n+HcOqx2D8eycx\nk44uYv/Gx1Sx/qLwH+PLdBuaZSrx5lfQ148GgyZO6V4aJV4NwD9Jj7zD1bJq\nb9bpfrYt0xeINOP94wRPelbO01aZi9VjGXEM9qTQt1DiNZ13Y0t9L1/+mwPe\nnqY3zse6m1XrzXQ25Sj7ryuvm8+Jc/qhl73JcGZ0UdY+d9em9qI3XcGLxFzT\nqP9w8TC3LBzzSZbA8/sGQKftlSINQ7aqNqNzJcd33zOWYfK0Mfpge6bvyXjy\n0zUB0A+QnzY/sscbOFLm6IWJhcrld8Ug9YLrzhi13ZqjVv8wI1OizvDzRD0w\npNOscx3V8NU3q3dX5M9zWc3/LbggJrryK8xDmO2w92thCCxlvZkw9IpJ4yWd\nTIpAOpzd50HLwQzSo63NztQUG3L5v5hryLEC7/wnAkNsL7Pg8quGQH4bYkMv\noHqFrhM2Twn8C9BS/+4epJ7r+SOBCd3OpYd48Vcbp1Eu4gBv198tcxGTON4q\nVUHVtW6iUWy7PSmevjHf06wxmpv51qjOlcbZcl6FU/B4Ap44bJh4K/64EyuK\nrMdtkGga/lzn7tuFUo0M+14wYXqVdx2k7m13k3mjFVPBr9WWxHWurQSp1r4P\nYuzc\r\n=UqGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/list":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/menu-surface":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.7899e0fe0.0_1614034046726_0.6304106408853778","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/menu","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cfbf3e5427fdf9cf320df9961f076f23c55684c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f19c86d13.0.tgz","fileCount":38,"integrity":"sha512-CPC5x6CSWgO9NJSqiZ0X32g7ppQdy9qDrkamI6/BANHf+LPH92SKHEPIy5Tuxc2Rdshne78ceUFpXYS3xB1LEA==","signatures":[{"sig":"MEQCICxzuxTUlbBbO+wvMMY3e4f3bmWq7NJ99MD4H+Rx6kMpAiB67/5CkHPzaWL+9Te3AjMQ1iBUsZE2427Ga2INWCr66w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND8DCRA9TVsSAnZWagAAdkgQAJoH0NROQWOmkzIWmt0f\nVrMrwtI5HoeWSdhY/2rXeAA1zEgYIGy6WZR9XstLTuvXQ9E8bkxBPsCR1U2e\nxmh8mCcgog6xvH7NqPg8D4z8On00A24iHhPZ1ySGqcaf0WcQUgS4d86VkQWU\noUECqTIS9JczJ8B1PUZ/cXZUF03G7a5kr8cFtBSXOI1xNTjNBXLKx+fEn99B\nyqMcfEhJvwBzTVyZxk7mbcg+po0qm2NGj9Snm1kBsWkX9OY7q1YkaDqcoC/7\n0z3bGAhpptKgW/yyir2MLaCi665YAm72fqG4TvIUAqfxApCHAOIoaD4PdL/c\nbhiQncD5gb6nGNCKaa9jB80cWVaUugx5FhuFmYHzYXWSNGen1i6qk/vRl/tH\nCB064SOh0O9Bj2inlfGR4p7OfEOCI8tulQROKVJJBcI2k3qQ2F3c4tqQ7E90\nNnalyHQESqZ8QZc+vYjZ96S+qUOvL9BbMoDYVnZ+0Fomz6NhrGZ03/5+t12S\n6NUs4x3GLW28XZM+fdkapSE+wi9DKwJKWBFVKrrHH7Fv5ki9v1fWIyciRY7l\nyKo/lWAZg1+melkHuynqjGwTd5r/HMNjPP0CFkxuC7DCs7G0k1pqoYfl04ae\nf75Lb8pXGhfHqLIos2r9M7ta6jS4tjqF0YhmB1casHbIwECmN4h/ggBolqaX\n+q8v\r\n=x2Zw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/list":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/menu-surface":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f19c86d13.0_1614036738704_0.8179990491137028","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/menu","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c45325d3097bacb41fa431fb52843b533eb5c917","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.60e892d79.0.tgz","fileCount":38,"integrity":"sha512-/fQVlzARo32jNx7+BGu8SQtarksKRmpnrfEfm/zUHf9s5Pb4NhncNCP4ysc7vCPvolboX+P6LFE5jF6DYGAKNQ==","signatures":[{"sig":"MEYCIQDrrBvwVBcsxLapDiP1dD847SMa8Nor/AuPdhmkyiWyQgIhAIAIIfVfGm28QIX1wD8KE1xDqCKnA/w4WGfFEqem7O36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFdLCRA9TVsSAnZWagAAAO0QAICtqPLVaCuit5UQ8r6Y\nKKFR/p19LWbiMyKbwv+2BA1d7MVcWsLmEVe8teoTtf1Ao16E6nbmOrBZlBKs\n1rX4Xzm62Ac4aUfydG8XLukGloImVh40roWUvRyCQNnQ3GzDCnoJ3afentX2\nkP2s1BPHlSbOtpVwLVepH7J1H5WaHV1bTB5NGkL17rz0b6SqBSIRE6WLKrku\nOoIb8uVslavdRY/ddCke8k4wNRqr5A7lmdBFPIbSvZKWqUc+UrzZivrQ5PgY\nBcaG0iV3vxK/jxmBn/IFqfYTIpk0VJyARzx6A7mCUCCxOzfn3V8HXCC2Ij7u\n6xNiyv0y2td5QNXMGRMgZnDmzjmkdu+R/jFvaQIQpgQFi/nKZVTM0xR9j5ud\nt8TsaveQ2nwqeGjjUJ/NQXE79IEIlDtthGus9I88d73nX8Zq1FBdTnRW+QSv\nlF3sjDbCy9JFrQc+QdcLSKGnsRxELdaeSzjrDIhQDKcUWW+8DiUUAwrGXfIz\nHNsMbiyQGwV9FCq2Qv4XnZ0GGwVAgXZzVgy/vcNkH5Tvo3MeosQuphQSQAKD\nTViNC3XqKpmEX9fuRg5cVp0lGqpA0P+upz9iKavcWnewCJx+bmeMinqojt4i\nr9MueWS1V0eMYAaJmw09j4HcX486nppE1uMwAhhy6R7DQ+T3HsWETX+stFEY\n66Xr\r\n=inwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/list":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/menu-surface":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.60e892d79.0_1614042955437_0.09237325999237478","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/menu","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73ec25a8ddf0dd66302d34196467b1be67407184","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.c96bfa495.0.tgz","fileCount":38,"integrity":"sha512-rAHNhDq6czW+Sd/EXcTxpwjn2a7yv6WPMW0lXU/bo+oPbfpQ33ioDw+NGN7YmJRmaKwfERe+2VpS1m5bKjjOqA==","signatures":[{"sig":"MEYCIQDVvUeyfdxYRhI5LLSxOoM8dtht6PENwS/eoTlwo4p1BgIhANOk8OTJNHMwTHzKIVaF4bxzibAb6OJl+Xtv/rtEk9/8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjiCRA9TVsSAnZWagAARP8QAIo3KCClm0OfPQTMipWu\nROshH7EszMv08eDeRO3OT+1AFlMaEIgAKYd0Hxyv4N6gJX1lRUmCfKSzzXrL\nByOm1PNZWKRmEWwDJO3VQ0nGAY5c1cTanlP5ph7Z7KbR/ZIWX7ZpZBsD9HxE\nH0UBMQDLC+u3cN/M4bMdAQBNG1eW+Zk7vifyaNAua9HF6eVbuIK9nZDYHktf\n+AeqdHybNTXFHEAcS0YoDnnXDJEeupvwPnGkZgJtXU+I5uhmONOdF9+o7Bp/\ne4WDt7c4fwz8FdvBnTVBsaky68RhQDVzVpIXqAEQWYzdO5JmMXUJavXrSMoi\npLRb+G+p6Bd/LKwVgkU5AzI9mVegOaTKkTfVAT1vCvQwuti9EKdo5nn6wo9a\nK7iYpnw1fW+dF3qPYjPOzLEDpJxFnlcOGYObuuIuEPmw2PmQoQDZX58dZ+Eo\nM1c4C8VKPRNynsapCZIw3f7sOge4GwUmZrEXLZ1C2ictqlNPpZTIrJsI9z9Y\nV15zbgmHPLIAp8eOpEHocaQe3sQNr2kZg6VFvs03b+Oa/ltnDPjU70TXxE11\novGYYDjOdWGhK6HgsQ/YeZanEoNssOHFHHt1f0UZfBqQfNCgq4WAHaE7WkBE\nO3+u6DtGe6bZuaNWDhRNHSEZUEGg/ZHcXrJadEibXv82MXTQS5wwg/FpK0Ut\nBBGH\r\n=Acpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/list":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/menu-surface":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.c96bfa495.0_1614108898210_0.11675769228442001","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/menu","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"675ebd6ae3e83c514600913123a5d185e91e6935","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.fa9b59f67.0.tgz","fileCount":38,"integrity":"sha512-4MPPRIo3wKSLazJxLNt/iZpRbBC/oFiDUg92FKu64zrismlYh6vswuYZAlmJRIK4kjrx90ICyE+qz8Mp6vGTfA==","signatures":[{"sig":"MEQCICM0dp1gUScyitLazuBuj1957Kl8XQaDFnX5YmSosqpuAiB1tZcRB/r38PIrg+inc40jq5PrubKKggk2ZeZ+3fakhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVksCRA9TVsSAnZWagAAmacP/Rwh5XbWrBJSvqe2mkpM\nyEllsD+z9xkLoGDwioYSoXg2c+YS4IMWeTuGrSfsYBT+jWbW+j8U0bBxvf4C\nj01rDXhGghLlVAPW2qHWFB+hniQSiVP7m5iVn4Zty5+jsjOdIY7QTE+0B+WB\na4VEf//8SsY0Qv8fVnjapjg02O/s1c3e1rzLKyUleUOIlpSdK0E46QP8MSE/\nbDkEibIXXABYXCoNpu2ibioUTu/NnKz18HwZIxWFKFlSuL4l/KsIpHpLx7Ha\nIR5/eAAubsOBFuKWXYj3zx+9ExOW1Ey2MYcfSAj7acXVdl0yfOB0bM8UwOON\nf87HKMlHnbrG6SOsqLgXZstv8EmwiD0ljgwqOchQasv+wILuk9v89acWYtLH\nHJZzLAARF6brO2b5dd5SSf+smKGuDhHgTab3+/JFJ/0j8Xf2kS3SjAJ9jenR\nbV33bB0IeiKkfYBXBub4rGUVeyhdgR6EXPOibUzh6fG80OvyS0nBR6EAX/Ll\nWpyiQU73wUaFc3Dz8cS4NLjZ8u1gUiRGO6xjQlE+l1O3NcbxW4CmTmbrtXty\neRMpMaDIna8ZU25zbkDvCuMutXNcRiXOHSVEnChUpOkpOUfhfdtFvRDI5PgY\n3ulLbih9Dlz2+kJqLJryW9iA90bwYhXupg0R+aBLxs4/1O2IJSEO8IO+qQ2q\najzV\r\n=eF4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/list":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/menu-surface":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.fa9b59f67.0_1614108972498_0.6294626204570901","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/menu","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb92103a937fb604874ded90faa5e2cc54a3a4bb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.869e3497c.0.tgz","fileCount":38,"integrity":"sha512-NOHoJlVQXUAZ96xDuFOtVqvC8QIm9eJB7LbE7Pv8o6JIefIQW2VYiSdDy5FtniBAJrQaLxyEAA3+N74sKN4JaQ==","signatures":[{"sig":"MEUCIQCyXBsYRdDh0S4zgm9RblQMTcfyJbsTZdrXstPlFOKTAwIgT46wQH9D4rKXLuCcDDriGFBKPOhCAqf6Hv4Zx1SkE4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVlYCRA9TVsSAnZWagAAWvYP/0bMkezXy2w2qTspC6TT\nIlPYO4O5N3d13FhMg9HqOdglnlYPgwgYSljkwo6MuU8igU7wpsA5dkrzQxU7\nZmM8wkJInJ50u3VgZC59s+n7ja4OzUXIOVKfqWhocV9NcWXIJ/IljTdHa1wN\n6RWJbwIoz/sIJPBmu3ojYS+/tvRljATbeP2GF/iprreCCvwAZQCyk6rdH5Id\n4L0DR7tKJnJrg973wGl8LjzPdqFIEUw1tVdmnQhLZ2fsWu9Evhx2XYnTHsU1\nwxAYNdJuN6WTo6CDdsvc1oFRqZv1z3i9Ff/IrgJ8YLAop5Sp3r9QEJfIoxV+\nzIdmMmDxrNrNh/6pjHVJ2jwEtt5R68avaIylzW9VvOliIgtIxHsiMVbYTRgI\nKNoi8ZLbfMG/O6IGcbzU47PS430AfEzCd55aOkdrmNdej9JVC/vlSG81ffp+\nRysC6unSBb05QsKwoTKOHNCzBdpM6cJblKLBFKC+6+oues3aQFkRtmil/IVX\nk3ChWxQ6wHYvUH1OWYcinEE6CgIXS9ixFJLHGGw6vN1PGkzkqq93faQ1BIOs\n4FHJDupbeMDewgzE6iC80JCxgzGs+3XyRE+HQSgZbpvIZxwUuBNRU6O88XPJ\npRuSnUPTDvN63UaEaSuwltUEld0pR3CecgVj8tIGD0sOiOQ4zqVDUc9fsKr3\nYMC9\r\n=/Uvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/list":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/menu-surface":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.869e3497c.0_1614109015664_0.8316530416320662","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/menu","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e243d9a6965cfe0298da8583b54ee04ca6550e2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":38,"integrity":"sha512-DGt/tcqqQNWjNbVMtFc1Sybdyg/A78z14dp1qljeHwNXdE9Ml0ndt2q7vWF7qcC8YyoakYzT1EnIlRY0lU41UA==","signatures":[{"sig":"MEYCIQCcGug8iPI9gKQ/ptB6gNe51AzX3wsfjfn29d7Ma7P3mAIhALMBnRUPJGnBHn878O2QPriD5G/yqGbPM22tZKDXhgoN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVz1CRA9TVsSAnZWagAAa/gP/iPDnOZKLg0SFkIqU6qr\nxFVb424UE5sTOImt1Oj0fF42AA4GH6/uRj04/D5+3v1w3vaC8H4zxpfhGnhK\nF1NBIkZ/UvPQp4MuzWkxDiNt587UQwA6PCjrgwD/EDNGZWLvbORby6rYW8tA\nEI3SMb+W47OItc3Ufsctu5VwQeYc6g1BAcx/p43hSa7i9W14m4xxArDrfQJ6\ntjfcXIGt4Mw62zZXbFFy+V2hrAXup8iIDGDBifMAvlI0q3U7TQsXAU8s0kn4\nGQfS2QQQ1W7pa6BV95B5jT9nfrisqrtnNiMgfMyIeHhQ9iVctce+joBmKTPU\n5yHay2Mxm9gndL3DGCInNapd0PvtY+o6HoILFd4aBNHr+ZUc8C41v7T4R2k3\npXGTIPEe2bACcTtyww2azDOwT5SqkgshTNAkq3Ay4aYoR1a7muoniSryMxN9\nDt+G3AobIeg4castDNr4Mp6mbhbmNBNZup4UXjeNQYEWjteSGY+Dps+aeBI1\nmuzwaZiAMuttNHfL/JeOEWCinlaMwdpDOUuEYUFT3wvfKj00dvtbSQsUNM2q\nSvYiv2z7/F6LSkc7rAUkxORtQ8o0Ycxv+OLhu0krVS8cCviIFfqG/mavVVal\nQUTgimHHhhTQxJPKGewaWVxvzJULS63+KcFGFX92i2U2fKFlhpdOB+K4xwN1\nXE4C\r\n=K/Ku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/list":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/menu-surface":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.8ecd7c9a9.0_1614109941424_0.1744668605478732","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/menu","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec0af1c6cc82ad57e5b2841be09fe098a6d189b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.9c85d505b.0.tgz","fileCount":38,"integrity":"sha512-AckvN9/B0QtibuGR1+B7IJ9SatO4TOjsME2abFCN4JhZvDd5GoyfYImJprZvbbcTjirujiWJUBs3WW/CjsKKyA==","signatures":[{"sig":"MEUCIQCZ5iCj+4M2NVaaQNZsDvczNMbvewb05yGvLh9yCMrnzgIgMHj9EoM3vlIvJ2shjWVkiaytifauDGSpqwSrHqhL9tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7yCRA9TVsSAnZWagAAfwgP/3Jf9iarahtU9v0K3xgE\nN4ETzcsZH+nwr8Ru4Vr7Y5rLEUcEKHkgN55VJmWeEPOa/j/ovI1LzwU7QoPI\nVqorCeCouIHZtCDHMRNR1mL7qzCfGYJSLtKSi7V2GbXJzH9ZLGkCjpd8ic2g\nJsSaquSXU5CrvrdjBoGeKZ4rIyICzdycdNcn3+kzfysOXTe+RmPS+OwUFcze\nhcLJWDWPuF2jxfpg77/e705AKylC0B9OTMWHl40/QQXVOHz2cQZy+qRtDQca\nT1CT4wQMv8REv+s8yqFdy/4GPQ0qFinfHjXq+59zOOZ4Zitp8saIx/He0KOu\n5PnG0cL0Q49OhXcEg1Q4hmeK9S8IuxiisBrO7KgruoQogqvF2VhtA31bPLDV\nHW31bpuemY3RoC9HQwz1CvXjUp210Wng80A/Ju8ZKjO21kRofYWj8sbVeotV\nagqNJcHl1OMjHqChv5SUT5a06cP3LKgeq2oKEO0Aga2LJPcTiag3F9gHYft6\nixUr+ZEA5DP3vm558lCnEjKQiqqK75kpXXCDMpp+8T0KrZ2XlUm3O7kUOh/T\nViN5ZNksmVg4BJZ8abnF1DDlkeYYjvAeZZe1Yf14k5L9Io169NMRHTNXJrcb\nfoDuD7OyAxscg6Gu9ZeyXC+h9VKMCLVmK2xkUZptE68A3/6+mFNCDvkY7iWB\n+6tp\r\n=HHhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/list":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/menu-surface":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.9c85d505b.0_1614118641885_0.7280603892807205","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/menu","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da07e5e4329c2163c22c4dd20417ed95edde9eca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":38,"integrity":"sha512-R/IGBLsySWlJX7asCP94cF56kfOOiKqkj99aebP9h7/g6GSHPi/TpN75PH9+HAy18Po7zU318JKn3E85JwiteA==","signatures":[{"sig":"MEYCIQDJLuWnXxaJqfiQlqgJcjp7EygnMxaqtmOovSa0Ee36qwIhAJ81r4VutnYvqVkHE0Wg7RSufwWz4dWaqdFr9nNb7XFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbDGCRA9TVsSAnZWagAA260P/01Rfxl80ZdUhJpTUIAu\nDd+uDayGc2u3V2aytGvBJwaEUjDkEb1vr6G1tgQbF2FI7wgeBIAYfZHDVX3R\n1PpbXKbKO4T3ZvOaOUDwM9eBj+YqXSO8ZOpbiRIrNBPxhC62vJ3p/FwYH+PV\nchdY7EnEilb8mMmARqnLfGLlri9ez1hFBXMFJesN1mnJ+BKozBkAcrje3sc3\nd/PAR82/4x6hVgxDACI6qsqlT2uAp7Cl+xkT1hqFIheVntPHQrkmRwz6xy2F\nXKrry+m4ZEhivHQIb8vdZtaBQKefWIm9rJIYVNl1XZO9T02nbu91HGHilEnS\nhqwWXbacGZGLTml7ybbvqCXD69dY3Bbg5KfsNnb6bYJDf7+hJ+z1ihyopf21\nnbhOHuzUsu1WdFfSB/f/4gieCNynPV2Jre6ZA2F6M9wzBHoirkpwsrMHApXy\n30ZtkFQ87cqXym0jlstgsFyvREHei4cuRJpViRfPGTCKRuRZjOD5v2ukbFsA\ncIM99glWqC6oUSPwkQyHkQgQ7cJFUD5tNObSnx3LAmO0DLEqighI3Txat6A2\n1MXQvRe7CiI3blcVMQ5uuO/8Ke3fPEvkdCdvsxoOfzaB4+OQnRfqd9aKlYr/\nJ8FEAA/HCUTZGjf0h9GfWpJRMfcDnHYriwKcnWXQgrZNeO4dZM+GYKiT5nue\nAgda\r\n=34uI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/list":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/menu-surface":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.9f2e85fb8.0_1614131398221_0.8439449232788963","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/menu","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bc9b3b731733ab22b9421dff4d36b5b4c8caea","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.19c4f29ef.0.tgz","fileCount":38,"integrity":"sha512-E7EQll0+Sm1QR1VgvfeMQKPxrE2r0+xMgUtiGI2J76pa5WSbWPAr8RadM31dqrqwZmzecbwc2OHLuAkEbhWU3Q==","signatures":[{"sig":"MEQCIHl77d7Xdqma9Q8fVN+h8jqpwshT6gVPK/fd2MfTPHHZAiBnIIeJnIPOQU/379O15AQ3wfDFuTkNVrXwL9a7Ok/kOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lcCRA9TVsSAnZWagAARbwQAKI1iR9sCS3DXs7MNFSJ\nRWXsBe4dYDcnYiBaVO4K4o6i+MVNt3pzm+IFsBeIjSku9vdBxejIpFu0tiS6\n0kUB8HtpeeNGOJxYNnObBUlYdR2IbT2s8NGl9AjZI1fLGeaKLNORA6caT0fW\nkRQCBEkF+8O2RmkgQYo1xykgfVA/wMUFhpYlUj0Z1cDQcyKyzlgEpZz7TdZz\n2pqtGuy1I/SEamiceyaiXD6r3CxjtNAV+F+F1Zpo4wxQJm0EI/GvaKRUtV97\nHEZck15lg2tmOfZI51VPB0dM8tMcImJpF/YkeS9ug9jmOMTpTtyYkXrWjzMf\nWZLSmWQKJqH2zYj4198oe5NAc1vXslKoqJYlGO4N48zTp9wduMyieDPUFoOk\nhOESwrt0JULwWWW4sF68Ex6lFyq1Hps/s64E9nUEcsx4vvfyWyCth4pOoOOT\n8Rbhf4CteTes+ux51YRVZM38HKaXtbDScv8nQvk9k2Eewmn8uGF2qrK3+5aI\nyNXaunMwW3REucG2d08zDXMhbAGPeAgC9YQn4Cm9kWFBy2RniJXKNc4pOmUE\nRNvSIuUPlq2Klr+PjC7w6UzQFSYAfFhizuvvQdYGhLW7wVWhwi7nbhNCLz+/\nNx+D3gphF/gXezMgwSAhr8OwsEGkBkaUX5qSoa+p95MfxXwGroCM7ucSuYO5\nMw8P\r\n=zKMo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/list":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/menu-surface":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.19c4f29ef.0_1614281051833_0.5370202663253252","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/menu","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"defa12f196f13a7015e33e57b79553bf9b2b0ca7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.63df6e9bf.0.tgz","fileCount":38,"integrity":"sha512-xe5iqR0pLrvLccWYRNhuEu/JmcisgJBKbTmhjEiSaseAhFOaKm3J3qCOpRz/c1HuXlkGIhKiUE7cJsPvEnW6vw==","signatures":[{"sig":"MEYCIQC+tH35YOiEnnhktelxlUxM6McHosdongX6YmJWsyw0hQIhALHvXM+U3F94kNb/toLWbtYFkfWmevttwZPeoS52nhL8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/zGCRA9TVsSAnZWagAAFKkP/0A7HKyn6C5Sj56GIF67\n5nis2zV4S8pYRhL4QJv75DWa/3js5Zt9I4SLen8GorvDD8sWDjO5AWDaNzXx\nkN6oenCxcNBkVhLrb6ND9rSoPXUE+DcHzHFj/3Is0KaGJmT4bHGi42kzjN/H\nQ+E/cBeUTWRvV9GEVM+2mxHzjDsPo/1QsUB+viS/jtpUbTeI7TK8hBurTLbJ\nelrDX6SrYg65LbG/ZDlFP/DmIuSjQsbVvxCjLp9IHD3TYGEWzm628RXhyTNa\nn6g4IV/EdPnLGLkWarcR7CjFt44kacy6E5SNc4BJeUYR6YuajDuu/5atnRXD\n5+RVj/BRMDxhYESdDQYOttoGMa1OLGRG9z4mo4wp0MQi+E5si8rA4peUNCTt\nXPb+Tpw36C91SDN/PTk/XJJCIILR5qg2C8Z+uelatu4m5pvJLLVkPxdG+iJI\niO0lf9shooArkYEbAQyf5IWE+TAKCKqquYAY/ocj7H1fvxH74VITitr7Lw5r\nS2XdXvtnVZC05yW7oQ6GHnjVUe2A3DLAISLn7jWFWfo0VSwRmBrnLSoW9LSn\ndhfs1gT+Wf2i5IoBRIKfzcd6nLw2WwtoGxB8WGwWKstaWA6YNq7UgbxV/2zB\n4H8m6BJsYmsiloZ0R5fzaV1LLmoFSIvaj9B6VrB24Xc5x2XOmcVlJrbQ4n57\nfbUg\r\n=XDOs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/list":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/menu-surface":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.63df6e9bf.0_1614281926166_0.3351911933286842","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/menu","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61051b1fe83764e2a3d777686e2c1f369b9d3ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.981ad970a.0.tgz","fileCount":38,"integrity":"sha512-siEA2LrwPerLXmXYdsoCOWsc8Q5ogkYHwM7HSzQ79s9HfjU2Ff3lIBNuH+nq6HjtnjBp2rJeGpAhLZMbLtmzsA==","signatures":[{"sig":"MEUCIF2AwwwHHrR6Cz82GyB+5Zk/NGVBXXFeAga5WFJZqYLvAiEAlJWpxqQ+zGafeYipFKLVxgr9FcZ0Ec1gC1nX9xsP/to=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODxKCRA9TVsSAnZWagAAvi8P/1YOvrlml6Vdz1/j+5cg\nspkH5yeL4HzAcBdQDQYhiaI0bqu2TjV1HPdt3HDLYowSZz1lGQgtR/Tg3Tal\nEKJv2hA41a3Lnxc9ETInmYtwN6O9LXzvXxxDrmpNj0zlM/EGh8XD5sRZ17EV\n8tIoGabvhpiHqJXwWzl73kZPKFGQpLZQZExPVOz1zYCkIF8/PEUjIA56ceMy\nEAVUCwCddB1e5w3yieHTu6ep7gAaTFMmPj3P199kfGXb0V5pi1p31OZJp7Vv\n8PI866/MUc4nzEzkhlywqPNwvDOmj8CRaqjOBXP+0SREAwnWe5Rml0srchQJ\nP8dkQfEjvEPDCzFCU+0YRmWid++P+1+IGnkNpr3hPzWw+V8yU24dATihA59m\ndUD6Sz78KjitMweqQFscZ7fcKnlxl3RrjqMBSBiFaiZ4te507CuNKXWx/IId\n3UqSD2YHjmTk/Fa3yJiuvyMw83GOF/cewIiPhE/on2QSJgS11uZnEfVqO6rn\nIhO9khj8ppytqAvh8C8rGAbDV7W4TRxYf+RDjroejqw0A2KWC5YaSM/XEG46\nlnnRpsBeH94ssSXs91AG24ulSlTLQtRNOfYJ9hfuDfOrVB7qKzIH6/Z/4YCe\nhOat1F/smxdH7Z1D120V+ZsIpay/ZuO0kDViSKkWGaGZsFpVd0lAPec6LeI2\ngjN4\r\n=3PUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/list":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/menu-surface":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.981ad970a.0_1614298185805_0.40978022776597167","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/menu","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b04d4dc0ec86afeaf0f0e2b58c7606ed1aab4587","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":38,"integrity":"sha512-XmjZF3FyiEB/q6A4s946/+WGpMnEhjKw7LOKkCaL4WX44PL67NSIYWUxnw0gLqz70rG7vRDUhqNrCT3rL5hckg==","signatures":[{"sig":"MEYCIQCzCmiFTR0dAkUurpi5l1pgky1/i2w1VN41kLn4roM5ZQIhAJTKwiSC7lQopN2L7HIpOI6n1otgMmRQ0svi+9LLf0Ti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCrCRA9TVsSAnZWagAAD8sP/3v97vZjNt71+3YBGqhu\nJA64194as88UAWlfyJhXt7pUbdkCkOheGKz5vn2Fl0sMUm3tMy0XhzQm50I4\nFTrCtuin2BA9q+M+zHxRA7DztZWedCmMFTidA4QZ1QYJskoubXklmGtOXcs5\nfSxDP4o3FFf5uhjrDWov3089TSC19L4op6s+cqc6RYsdwnRcc3sBbXSvnufU\n9Y8iNTElScHPveEUJ6frwdNOVfCp/GLA9smyqHkZFCCdVznQ/LpTKEekMqmv\nkBN+qtx4nXppK+61HtaMXO8kmMUKVLxGQnBuOd1q2OTkt1SGbcKcUbb08GXY\nlYeYdCxdOr6IXgKJinruWJWFwtUPgN0jikgNKPl2m/mDaJTlx1amH0E4N2oz\nimDAkLDC3pVkfLsIT3zDunL/Jx9G+cFakKkN0KYfbvXIqkJyNy5VPCXSBiFN\npkZ569n7rh4mlXzgM896GxG2ek5uZ+j6pJE+MV+IJyrrPFdsKnKF0pV5h5yL\nd1dkeUsOoR1jWI9MeWk3vU0qjmsJw2DaSVBGtVH1L7rfryFgygSHu20VNw20\nXd0ejqxX2vdRV8pGa4sUmPHvyhGKDItHOzGSSsBgzmkX+OWtvOt+pg1i6Phq\n3ahQGJRbDIGEwbgNejTxce+l/kQ5hYv5lQAAiTbwlm5oblo0QVESMf6kaawP\nOniM\r\n=BlPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/list":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/menu-surface":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f9c9e39d6.0_1614364842580_0.2740542670284709","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/menu","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8acc341b4254fc0ec8cac3e7798cf40d1b05ad1e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.c97d7d881.0.tgz","fileCount":38,"integrity":"sha512-MGTRWehPWwJSDLQj3UP+pY6gbzqXPjUiwhlErAisoai94hYXDnbS25JME1jG+owBfStX6x/bqFwnmxlSRMb5iA==","signatures":[{"sig":"MEQCIGg/TjYLXeGra3V/7UJmMeoHDkdLCUn4by0rAzcqZavuAiABL2FHayeSdYvcZ/D3HIhLqgWOIbSS8Y87C18RbTZhsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSbCRA9TVsSAnZWagAAT1oP/RyH2gO/r2oehBp9CQsj\n0yBFlqX6nrhlsK0pSt2mS2uWDSXQV1fA1OSK3+nbuUpZIHEOmTCO/CZV+kaz\n+EhbZDP7U0rSj47ExQdR7g3D4LBvfNSY2kzBYzQqQhDgOcoA6wXAH7jUFAdC\nI1PIvuTDXYhJ9eqCxfVnbmtbiMGDdY2zQLYacEKX3ZjO+q5pq7kB8Npoj6nd\njYWk2/UWMNm1cREx4UYrPuXUOxoZTLt3N75Rmlvuyrh2t2n8BAU2lgQADtka\n/5PU8KMA/f+bIlpRyTiNV+TZfU0+IWWFPj8SV7kx5PjNYqX4VBr/enHDvs8t\nEjgBubsDeP3dnyNCfq6gtCJZGy/9VXCYIQyvRk4jOtiS1t0WjNha/c1VDQ0I\n6lhYBnc6lOwufuw7rpAs5cI3Dv8sbZLGBB7VXpBylvy/6WZpYiQ9xzt282cY\nOpTRMX8vJx4YrS2DBGzKmMHhUCq67I93eWtOwww5f+2zER8AtJk437/BMCLT\n7OL5NxkPqC+gvdE7K75SJtaVOVJ3XT5+2pk0/hTvCGdrFzxRa/k0/AJ/n2GI\n0xf42colSM/LCkHGqTV5ebnTpZQMBVcuTBY5ENNPRzerwU48harhluj02vv8\ncufOGg/5KGhsUOJm/xZugF9PHTr5LQliYX4l+fbQaxvYUQdqs9BNxcGG8e8G\nF/EI\r\n=lXIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/list":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/menu-surface":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.c97d7d881.0_1614632090724_0.5424925320628564","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/menu","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3940d407661f69797f0a280e65cda0da29ecb372","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.bf670dad7.0.tgz","fileCount":38,"integrity":"sha512-UJLcPGKSLOE99zgLRzWXeu5TX0eCgsRWx4obfgFePiVTO3uDQYZtMd0xaMjjmmslteWzgt2L9oFlsSVDxDJ/OA==","signatures":[{"sig":"MEUCIAYJpHWVSuQ7pHtFYaohM9KQRamAjcsg8T9aFID/dj8jAiEAhyiHHfwLj+kO4QA/wJug9Is2glb6EOcXKXQYO99vkbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtbSCRA9TVsSAnZWagAAJNAP/i3GIpmHZGG8CbEzmOt+\n4v5msGCKF2jR60R+FrJUHRliXkUMlI3mDTshxRqNFV00XWuxU81KfmXenuZT\n87c2QXtRv5zfFtthwOQ3ummIg2AjXd28/A9Z3A02GZCA7UKuBGzJCnEr+R9E\nPkL4481Vfri0cMwO3VyCEiL/GPMTianS4u7I5AColjhWUhmfFDbMXMgomgvS\nmW5knHgd1Tiqveyz2asdqpzeeP5H4RyUDiSc+Okzv0iVg5KWFR3uw07FzEFM\nxEOXTjjD6A+d+pHLIol8hcFSpQ3CFMlgHKoN+lo5L4V7EnW8RYyJC/9+sHkz\naSCNiqu1yvWyZEEqMg+m9JnPDTYQoWOaaDbw+o2r2ATP3GJMIfGGM3rmJnnA\nJ/hQwfGYQ3gmVdypn7GEV8x0BFGjOOcHsdlbWZzzHJo6AkVH+Ee+aIR5W5k2\nOazkOp09/EX092fkyz5C6D7ToAbaiycdZwwrVLdfpkEL41UotT85p17U0PYH\nVos10UJRBbZMV+KhyzCzQ1u2s2be3rPMHzuLqnNA6bsWKnEQPJ4yU1Ncmk/L\nEhkKLY7KeFvELfuY71HBHOOXMhmwDtLqQ0aCR3AWMnrMUIgEXGdxR0vvc7/g\n6QZnW8SxwYVCQtM0jO6G9ZHWKkNE6cxGeyKE5LBbmr0kHGCga4nfwLEp1K6A\nuK3Z\r\n=WUG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/list":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/menu-surface":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.bf670dad7.0_1614730961948_0.6582379716687807","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/menu","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ad9181752a7c0fbdb63aaf7e8f594a94295d4d4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.c7d98fcde.0.tgz","fileCount":38,"integrity":"sha512-aB7gPqlOmPr0gDzkI7UL+rJ6lrveOxCdNYsQvri3X0Wg4Q7yXtrk3qwpmJhda5V2ILBbFqjj38vQz5l3bqwEQw==","signatures":[{"sig":"MEUCICn13OXUwXl1mazdFHfiBX5KXeLk1xrZhmFSWFKTGEcpAiEA96DbLGocjed7EML3OsKRkF93FYX/m7KBJfdC9afiNhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KuCRA9TVsSAnZWagAAxacP/3LMU4IFJ0Gk49fMbScO\nlHHRUwtSw5xBqQVOh3yXFHg5QX3qlX6kxIjlDXXyAzdDmCl0OkR8LrZQ/wyt\nWkZOE6EI291GYi/JUvDxnLpWEZA8+TtlGCpEVTsM3U0GPJ1vbjsb3dyXkfCe\n+2vx4QnAJ4+GOsXnup7ANek/cduA4JEacQUEP1FasLUPqxkJkVM4P9KCC06H\n5qNUFEHwoUzfyPeNlobNjT7kLhWo+jMq3LTKx7l3K63lAkeIlII4N4TVlf9a\nfepANhKHfXdnOckXE2JMzvKgbHAy3teE0C3/ZdGW0jWXeAL71KUEUdkzZqAL\nyFSZb8I/vT7fRtllIPMVezoOnnKLszmHrZcrLVb281lvPjztyPnY4DzKUsnd\nkS9pveytxlvQ6cZLaK3GVfMd+SvdNlZq0fz3OXidLuX+5VmD35g5n+BobSM8\nBfTvqEv1n0vkyYKjKge23+BdU3DxF62X0exiqjY1dyAvejKfAesICHlqlNtg\noN+63GIEj0eqQgYx2YvB5mDfjhG2ub++5LWdXUwT5x0/qXqp4iK68x0ThPJz\n13agzInk6piFa9InhO0LRoBcJwRjcOxGHhmOFcAeWn0+qPJ1y8eHZ/Cvk3wv\nz5K2ckfX61BBdgNOCEFHDHYERy8JAmGGUSnBgJPUFHmiTv+7Hto4xpOiUnH8\n+YlD\r\n=Mggz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/list":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/menu-surface":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.c7d98fcde.0_1614803629925_0.7801807095592441","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/menu","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f714754ce634fa65e6c486d4a03aeef5ee0127","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":38,"integrity":"sha512-KhlGplN7HJ3Yg5oepwtV41fA6rwVCO37k18NlFw+W4tr2oL8vx0GdVHPrwp2aj0Ol7u18fyNQZl9IzVN+LQGJA==","signatures":[{"sig":"MEUCIQD1koRAEoG5A/5LrHA9pdEJ0Y8uPq0Ig52RgQHHeSw1iAIgFpRHRJgXqBaxlq7Ly+AoZKNpSOssnpw/dIBIij4fPuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":696806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBr9CRA9TVsSAnZWagAAe9cP/3qsWobp4tZecUDIFzAh\n2eK/8bQDB23KI6t5iwX9Cl7ZfpoGu951mD9YYK8N2FrCsZwDe5Rj8/ftp+sm\nmNILYLfzPNAfsdU5hiYUR879YFCkMEo9iKnC+azqWluL86U+swyARyEwW6bV\n8Z4QT53iJP6PWE41UQTI67p5L9FBHIUwvCZ7zP4kR6uylzvcNxw0oGtdpUlT\nKQ4ICdKnhVGf1it3bK64Q/+kHr4tjnFwmHiNj5wHJDac/EtBaMDbB/jd0Qwq\nwp/hyLwLkrsz8BnWX4F5CqWxg1JjspQpMiKVSwmSKnvOYiRQ/sC0WJJwXfFH\n8AQTLsgIkuhciOU66/9eeadHmhmDV0qU2JuJIZyZcptsNR8+VKbkHwHwbSsk\nWziyUvIQc/VqsGGBTbp7osPVeQLuxa3J2Fxzy96s9OXXygxeRbKVtibJqsKS\nGFLoc373Mpxd41SuTcdKSdUZAtOYj7Hh+oRivg0jqEPieCVzRaMJSl2JlEJu\niCrzyKi63tvs49ZO83Fc4Kaew/oRvy6f2YbyfBQ9RRXuLfnwvNV6A5/Pnwwx\n7ipysWHmnXpu3/0ckv8KEhhvK1w/NdfITRxjak6wquyhu7WGGE/xJEe75Sll\nDqfsdAARolX0qNlRTQqsyQNGPsTCmKQuYqDsbodcfmgidO2tV/VfWimwSFyE\nXi37\r\n=5I+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/list":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/menu-surface":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.4fef8bc1e.0_1614813949160_0.7068030561942658","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/menu","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e0c6bb56cdb21a266a691850e44406d5f47dc37","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.afae3a3ec.0.tgz","fileCount":38,"integrity":"sha512-ysAWaAR77tSo0j7qZYMplnRMDUOSrIQk86b4DwkSBuaqMuY9baD3cawL9gutl/nLYJNZPlr8/h8pIiIh0eVmIg==","signatures":[{"sig":"MEUCIQCSEcpw8J1hNno6k5aM3MHl4m1anhBm5gSNfbTquB8s1AIgU/wxhrYXEj0YpKMMv79OjQhp1rwQv7RnGyqGjBRp3V0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":711676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8tCRA9TVsSAnZWagAAQkwP/31qrgGbvsSnC+IzrTPl\najW6+ckzJcRstojlBelRoZAEMfJdH19H2pOPpSLREkySUJwNEcvhZNmdXHI6\nG694IvFrM6sGEjFOcX/nCHxbe5E+gF0ruiu8hxqokGTHk0atHv5y8swxtJL6\n9TwpCCl/Q8dTr+Sn7xk+52/Iz0sSsULOxMvJXFxkPPcdN13aAzIUCjEPQU0Z\n8kP1kES2fsgQ+oF/KyymKwX3UQazZ814Y0YE4NVFq0roAKoh2laRPf0hqr5Z\ndHSJZ+ahwZZorVgDnPhC8LUqSTzJoYJ2LMTI0s76xS5Jx15Jk0LV3s+knv8w\nN3euWOFgR1AccmTi58Nh4IzC9KGmfIMxv2vLSHbfOQmuivOSn15AHvS6b+3u\nA7o5w65rDFh2Kt97NFYJhoJufrqe24J2yKdpy8+QWbu1SktdF9oeCkSwBzFB\neRv5c+GV9tigAcVPp3n29iB03W/Sguz5nF9q9RJ3ULhG8IdfPPVM7QoTpKi4\nENrjX3ColXQa1ABTEEm5THg1Bt3ughq6dq1dSaEyoCUJIHiP//GaHg3GpuCg\nD7UBqMuMqrQNwzacyS5MmF77m3SIFJAUSxBwbEumV9D2e3kJNToF2ruKBu/A\neI7jQXID/WAJJZl7AGPhfKggyjejeZGEBLEJjJHgi4AgEAJSDa5S4LxxkSgg\nxeuo\r\n=swyc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/list":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/menu-surface":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.afae3a3ec.0_1614815020900_0.3202695919377643","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/menu","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c91289cdb232d4c82934af45e458322114e24a0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0a0b10f22.0.tgz","fileCount":38,"integrity":"sha512-i2LzD1vzO7GnEM4B5jT6lWuja3lMgFWC9XQc8g+OFUuKIHnpd6QtEyXFoEfhKaiiJ1EitJ9LZu5kXQjM095EdQ==","signatures":[{"sig":"MEUCIQCbtgZd+pYzOELt4EsWAkO/6VUJp8cdT0y0KpUIX8G25gIgOmgfO656OWDBlteovyUFMwFBGUccxPKlN794MgFpXLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":712286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOjCRA9TVsSAnZWagAAmbgQAJKkLnw1+HIW/36xmXQO\ntg31iz1/MCRLgznDujeMxN9k25lK9HFBN5jgN0ssKtU8AzddoSo7tvPyEmu1\nhjgTO/QRP7GVcHxKpEYOEMrKw84EaZnb8udhu2WgI66vl+cDqe6HINYwnqoL\ncJ56W6ybR0PqNiMsHp3Zptl8MyM0NtqddZAkMGWfaCRCDyRWbxd9RRHdGyrn\nhpZIeckj+mQ5T3lFXXqsQ5epPPlqDFOINqin528lC7xT4DpU+PI6t/V4JXaX\nRRsYt76x4feZT4tgr4JaQaQCNIb2voBt/tZh/v3kU6IhQLxTAZDDv0OU2oJL\ngAxhV3NDGlx2dsc/9TQrbYhvqaQTPVreCGZdnqW0LhE8GUYmahLuZ7wyb88U\nf48hbBA6LKYwitOStPOmf5GZKUBeT7W3nUGUlxJ3GeMskGqLzz8xJOr3YMQT\ns7Z6tCEy3CLuM6SlB0lMtTZxAoAJHRYCByl5JQi2ct21xUwuPtOYm2rbzg41\n+wzEQ2Xm5sEKn9FC43Hr9CnA5jOiBtyAnX1NwITODB9ItX9wVFZthttCggOc\nqjT1ycbdt1xCNDtaxeO24dX/l9cA3Bx+IIgEGS9phFkeHH9sepRSgosrLhTf\nXjlV0udIRC8stFpU9Moo2GXcSRodrEB4nxuXTqs6znBOSawBc2HFiuonFQKS\nIfoz\r\n=TxvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/list":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/menu-surface":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0a0b10f22.0_1614816163430_0.1479252478155948","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/menu","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07ad833f10ae69d8e644e9342d9e1de4441148d6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.6f678a91a.0.tgz","fileCount":38,"integrity":"sha512-Kt5yykj+yR+oJVKoV5I2OP5JgiNOs5rcb1oAP6Q8KrLzgFALEMoHncuMHjPC5I99QwlPSaMUVglUmrcYmVJChA==","signatures":[{"sig":"MEYCIQCEjTmjSuiO96bX9D55VvMtZGpRk1HPClg/h1PWdULt8wIhAOFC3imKwvUjDmx/JbgOfAsFb7kE7aXHVUXwcTWtnB+w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":712286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnjCRA9TVsSAnZWagAAI2wP/RwGdIZhY7jO7xL+btk1\nsIDDfEUB5Up0TGpKu/AA6QXLgELepWEY8wzB5wEx+lBaGUdiFyVwC/jfMttL\nNhshrS4FNRaepAjxidiJF2u5EXh7R2FaRSeHPD3HzxxUM/CM8txyaPH6/oyz\nF2Nqka+bJJYmjcr0ZZWK3VPlv6Ws++0NwzR2AxXCV7exqX8xjf3lyEPUKcnS\nI6WJ9ETz+Wr1Tv6NWhU0ay0H9TXRobsGtT+le8wy4ugTmZ2WjfQhWk/xtO8O\nl2W8XlYFP0TwXpVaLGfIO/fIvJQgvvZc/tlJdYsDgbijfIFA5bKFV1N9Zg1U\nqEz48oOk+Iq3bfGtr/NSDzBD1R8SYOSnoU6fAIZ+1CRNzGd4XWoLUctK58QK\nBFbrXFUFWT1KyuMz+053VPNov3Cuk4z8LayZrm6B9wsZcpbx/QTepLqjmCa1\nzfFhVZdsQRf+Cegy9/YzOw4hCz+m9joDZfPOe1YDjRjPT/GvXYsCwrlS6X6c\n8gVGFYIs1I398NEIGkM2zcTXCF85R8hZFuPrwg4ihdCNIr0dua6ue2SJ2tbI\n6z5dXvMJGpEySprX6io3YRhviI9PHOArHgNKLaiyNuvrOPnYmY1tDHiJKupU\nPw7+/1T7PxQhkpl0v5H2zTdL2fpy/z8OaJMogcNtYFJx5PIEsUCywEDtuPsH\n4Cq7\r\n=mlig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/list":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/menu-surface":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.6f678a91a.0_1614883299490_0.8247788388484103","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/menu","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"915fd2109a22a9b69c7e4e7265733a520299fe95","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f5f1b613c.0.tgz","fileCount":38,"integrity":"sha512-V7kDNi9JgWgQ3kjey2c5IN+WJRKOZCN05W1OYk/XI8MwlnezvxRgWzGvpX4bVVR1eT05yQfR3NcgT+2+babilw==","signatures":[{"sig":"MEYCIQDNAvRUzsrryohmgccRnl++O7EsqMcmUAlwW/UEONW8CQIhAMmnN6xJoPuSkje1Jlgy9TYSZsbvJmzpqZG2F/ZviyOf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":712286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUg+CRA9TVsSAnZWagAAWh0P+wazpTk/G0krUL/zplT8\nUOjjLK9A9puka424GA/VPFggXvrEfy69Gyf9avU/LMDtGa7vDH3CJwfJ2Je3\n0hL9dYaLloHFOYQtkC70ukSswF8tCKQmjvr8WA5WZ2o8fvnZiNfMy8KTB7Jr\nHOv2UgjRzfj2aSVfDLcPZu0Qz14iSM8LCWNNnAeLft8BxuCyNlX/Nkzb6cZX\nQ2C7zFxk98TfYSwFH4LQ4sueacxwv3PUF8X7Fcl/n4iFHeolnYbt6V8eOKWT\nvrf7p1qzqFefUubmhNMzoqIRBX9PJs/IoWtMcLYs+rcvqoKRjn0F1Yl6YCBs\nTotVNli1kQtytvOeAn6//+E3spGa/Ph31/KqZ40B42T8LJdgQhkilqZ7QDWB\nBLbUZViTv9XTEi1zeokVl8FTAlNB4wVmESRaoa69L7coIvxRLgGMit87ARkQ\n68MJXCu1+VxLTUAAHhUK/y1GtfjktROvGlY59Z2Xho+tEUGiuwDTMiOKnWoI\nOQ0Zx9R9ThYfZDBxjclnz6ieTpXuAmevx1GwQOpNZ6Va+HxicJVPhmDTupn1\niDz3g7OJTwx6te52KN8Pcvaj6gvIIluK+QBswlIu/wdMQf4smaufnxddDlaz\nM/gH4TAP4/9ptNH/YWOKdcrhycB/FkrP9c9t2FjcD/2cAGAJY3aTIR0wBldS\n4ckr\r\n=NNgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/list":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/menu-surface":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f5f1b613c.0_1614891069806_0.6163286020346344","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/menu","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04d5698b1fa04f56e9c482dd1a03e5bc668c0798","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.606e767ef.0.tgz","fileCount":38,"integrity":"sha512-OxYiwVElKXGg9cwaskZcQqbosV/sF4V9/AV+qAhR7znuW1py+zF5cAYxXvlGMUTG5X5mHpnFC0rIkw7ZvoObAg==","signatures":[{"sig":"MEYCIQDsoBlwSZmf5RGrAjbAimA1gWEy5jA+VWGw7/w+fUOsWQIhAKTrs6gvddCn9exvM7iH3LP3bqKj87z/KsOFg3WAI+xP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVkCRA9TVsSAnZWagAAumAP/0CDDpfnOrULBf4lA8Z5\nVz0aOWiFC/BYGpZLFjVR7e14OvfSMJEMzwUp9JW3XQVnjvYhcmYx219Bf9E3\nrDplr0pUhAAhdkXxE9fMj6SQuCiRsYpCZenvpE+jaoLNhsAUuY4pK9wdnLjK\nmwOVzKZrKDuFYhDO8JVTpn7KYwbxEHOOxzv+XCFTLFoRiqP1u/XFZwW3TsyY\nPf7tWoVdFRYxiNZjffgoLu4DJIdLPoFH/jEROo9IZZfDAq2zVs/rJuBKVaIs\nsMe5Gd71nmdgQBh9jLN+Sbx6cUcughmrM5XrvY9vzBEpucENfiQ613H3LeDc\nFVSROywHBvh2lpF7Ne5eJ/CCvOSUDz82ycgwPpvnlmZEFtmhIJfi8wZAU3CZ\n2C+amRE9ixMFPNjYvAx9eUFcuJEWDCGhfxDUR0B40JImCBhHyDNrCyvoN75D\nsu8bh3L4zvLQshIgdtIR7K52rhuRFELuyO8yeI0P2VYAVjbPJ5l1lDu0Apjz\nSBMKuw6I7jrK1lPdZtHFIppwNrDG8dc9NMms40sB1ZpfCb54ls9L1JtMl+GD\n9FAH52fo4g5RgrmJvOOkxhT6ZjmjdmzKOeHUye0Ac/XKlKKFMV4709T7sDV7\njbQ5jAQkowfMZhSPir5Zg+Tmro9VuVPPdxaaMRex2R2LMt17DOhSbJdAtQXD\neFk8\r\n=FZgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/list":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/menu-surface":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.606e767ef.0_1614894436156_0.39137747639088083","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/menu","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"621ebc247f06ceaaaad6adeb671b481d301d910c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":38,"integrity":"sha512-HzqidRW/0lARLGqJvcs4T2EFjG/0kkjxYe0yOpgF5Rr1VEt3hfYcz9uCsGx3NC35kPPKma3d5LZNr7cZeas3wg==","signatures":[{"sig":"MEMCIDwGT4y0L3ryelysu3R8Mam/HJ3j8LuIPSSl1pqhPW1AAh8qVEyr/FeJ7e8YAS4lnudgW/s2lhjwwof7QGDRx8UM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwf8CRA9TVsSAnZWagAA/7UP/2DjF4ZOY/TXZYiVCSKf\nKETvVjrS5YxFzt98/YgYSNICsy6lp5M6mhRkXVOuCLBaRo1TkoFZtOwwt+UU\nfb6OUxezyKa2BHgGrWoIGY2ONMgstobGxDh4ZytvenBu+lAwt6zVY407s18b\ncMdAkOvFqgIk7PE5PU5oN/SDGrzjDmCgpWnSFZlfPe/mxbLXHuw9fb8qbtOd\nHrvVakPdDt6uTiyquhToH7UvP+5wNv51y763lymFjxVQmM0PWfl8IZYv8SaA\neZ2+KGyvwMPrJTVerH74WP7HWh6n9JTpNXtmNG2bEqY6Omm3UKgUkCuDbFcm\nRwmBRUZ9UPX4WQ9A0bK3vn3xE8F9bQYG7reRjppebEYDc7299UC4B4tr/w3G\nnenGfhz45uRUFL/Sl0SE8zYcGTjdko+2w+c2YCxgJej9jhfjmSOfI5fOi0YT\nRxUlVK3bBPSSplhmwGlqXjBAibeAMV8zZ0iXRXhWwdSLRg2awNgW5XUhIWkz\nimU3GFrgIwblUvAjjIqIDG2jquZ2F55j+dNomv9NwIORe+eLldfV+NSYFJ/1\nxZl24L/AUx7yMZJUPvSX48ejraTgawX9R58z+srN/wE9QTeynTIJGk6TmsUO\n9IbCgi2GrgOLYbGjHo163mwkCJ+UAvpVsUdBvBI9uEVYzKbNNmHlKh4OrBTN\n1l1r\r\n=0OxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/list":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/menu-surface":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f77a4dd1a.0_1615005691938_0.9607218986416441","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/menu","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94839ed567fca5c9f8488e6bf063880231c59920","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":38,"integrity":"sha512-uaOPLrNxxa3d1bSSUx0DLCtOxRTf3H6PSesAARDKNndNUBsz1p1mdQXvIBczu8sbQ2cC91eMWU0X0vBVd9ef8w==","signatures":[{"sig":"MEUCIQDmGzvFSPBTk/amJno5epRXt+/qCnBeKV196Xsxo4IeBAIgS9FF33btk7fXJtP+AzJiGKxnZ21TVbcddrjRieq+Lvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkWCRA9TVsSAnZWagAARywP/3+f865FSglrSr3zp8xy\nGXUgyPm8/CoVqKtd3qB43m+JwTTGVDYBkgjQNaZ8J5axYhNACMUh/uh182wK\nzntCewBalbqeFQY5/WO/tw9rVbCCRUSts2K0MhC8Q9DZcTw81pKoq3JXjASY\nmh8u+1KQt+0YLn3KJ4/2+IWyoGu+Pq9+kN5MlhnUk512j1NUpC6LeVP1jtWQ\nyozU4XXihPXw5kQTYgD2l46t5zQ0dsozPhXxNBswrUGKYfrEM+6blpHke02K\nNquyASLxpi8KFKfeYQQYg1egU8+9YSYDgZRhI7Wit+LlBgi47lONc9AbishO\npWVmamZIgnQRgxyZBz1Z96e19roOOQR1uXV9rSNBiKUpD2/FrYaXBc+Vt7ja\nKH9X0k+NC/pip5HQqYp8yDb9onkd5xxonNTRbHjfqGHvvC60ymSJljQ5S3T5\npWgct8eE+w/E3y7bOSFDXfVLFARTvpIHQfhCyTNIO+NPN43Tc0q4k2k/m7Nr\nhto/g4Ce/A8/t7zzd4bLIZGqFlfgF1x4Ip5v0VQnz+/t70wK7ECMalzC1+K5\nUa4k1ooARk5RjNSxLUWF+eNPQVrUKmWJ1Q7cC7brGBTxOLb/HX+6rQ6jhZTq\nAygFrBdWp0UAt6xKSm2PJQl6Z6Tbw9C5p3xi8Py8VZKYoXBri++85L5D3wPw\nJQwL\r\n=/lvB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/list":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/menu-surface":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.2d6ba2c23.0_1615243541822_0.8028013168464989","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/menu","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8347cad79715a08b1812a91a2cbdfbc197967112","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.7522dcaca.0.tgz","fileCount":38,"integrity":"sha512-9HiHmuSnZPaNOXZ64i5Y+fGbSjXIHffCeKditDqwLlA5Qbi8dfEkByp2WZjRR+xeic2IuD6Geo15XPL8aQee1Q==","signatures":[{"sig":"MEUCIEvA/8lBeK07Ei6J+yMYeQ6sgmFRW0ASNy5sdCfbYeKRAiEAw5Vw9Gb8FPKZgsKSAdej/TKos56+cIthziAYbThzxf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsFWCRA9TVsSAnZWagAAqSMP/1nhTCWRhn/LkVgWRIla\nwd+k1Te6Ufxfalv1SbK5/zJf+jIKDfbsjVNss1mGU2ZHHHpcFp0RXxNnTzS6\nxa4SI5xE+u2pbcdAMAXcDWHWerPxr6XbPGoIjBY7vBjC1gifQkVMn8SipiOt\nLVEPzbuTbzYB8gMsWgP3VuRf7E9QqRsTD4HGB2GAFme7G4qXP3G70qHxwB6z\nKvpfneQzml3d1Fu2ScW2ATyeFCWFig3CaQxxp0puUhx+2mmh7unxHHIjn9cO\nxzcYMPn+1SpNba40vkZMMJmlbs/ePyQA33p/Amf9CHCYjrODZI9DuqupDYdd\nNtoTkc639OnKuakfjZIHujlzsrIK1c9C64QZHnAEKBsUDzPKRe90Q4MxcwJe\nqa6Oqbdk+UvLN2XeRBybogtIW1aZxCrt4EduYn/GNqKa8lJsvjjFziBcdG6D\nkog0ennz2pn6Luul9tItxpAJasXXuem8hNg5CjKPwIwqNUNnr1RcF/IDs7SL\nKgo3tSnjertipqJ1Sz6xS+ajkvL0Y8GvpZd3Lq8GL+sCV9ZZPIhXniZPgygm\ny/GpO5X5XHWNotCINWFW6PY55dxhZqhaw6GtLH7oChaslBBv06bNcMwYXo2z\nu+VqXexvXYv6J4R8HMiVEyTOxPbd44jUQC8SrYOcozTXUlcL7st830iHfsmW\nuL79\r\n=96n3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/list":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/menu-surface":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.7522dcaca.0_1615249749583_0.4042344737849193","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/menu","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e667767a66e07260367b3f295a75cb58d288db2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.5c0ab7401.0.tgz","fileCount":38,"integrity":"sha512-1HGXYA2djysckcdyG6XDkTQE31r4A78NYzrmGelj/lhAhHCkBXpUzSap6j9uIli02/P1cKJ9PPDy6ZhBLlLGYg==","signatures":[{"sig":"MEUCIQDKx+CtKN1TMcFqLRPSgazBUbnxyRgu6zyA8chXkNW8wQIgK0IxbSjmy/O7Ar50GogzSLF3pXLBFg3dnbhFkocRWdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/yICRA9TVsSAnZWagAAMM4P/jqce6Q3eeGj0dwQzMFo\nA3eg4qx+B0lMczVTZ6ei6E9tV/ffA2O5g3UoTprZWZE6QBaqRWGY7IWo6y6W\nu1GdRZ8VU4K5Ug+KNo2kDi4o3fXcaskYGVsuva30x0ah8tqRO/SsTKmpCx7t\npubWun6kGThPAiBRnO3lg5RfsQI42WjQJRXiIXIxRS5PBtJvoTAtVNvrNJdL\ni1TZqCQ2sMdD9Ohu6au9Hlv7G/sMoQz4AcQN1H/Ngde3VkBXzC/rME3QD6hW\ngK6exFvUkrQYrLjzpLBCrnFWbfjw3mn+mogUtKogSCxarIsg5slZzWtmXdpf\n52ukAVUXAFIGH7vKY9IJ48ZoKWLqmh4TisirOboUiejOiEtXfjjgZOByTVhY\nIfT76B8OJE6YBC7vcU7eb2fNkjkdPBhxcriI5xFKgW1kRDgbYPatflBXvCm6\nVXPE2YuXiCYorKDvTsxvomxWQBRUJcaeWo6s23KbYyqc8lkYVdAhDHkDbJta\nEOeJBJI+uTU1BwIePvi5uRlRKJIAg6iv+zatLRraopGK/JuAfMymUYJ9dbvO\ns1lngzHKW1UiDUSwjQt9zgop1cY3AN7Vfvk0m8FeZnRvGZlG0/qwbZGbdDPY\n2x5VRV+Ttmb2BesWhEAlZ7cpfU1QQLF9lVcfvFjwR8KkewmSCaaZB/K4LGr9\nkNs6\r\n=Bd1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/list":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/menu-surface":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.5c0ab7401.0_1615330440394_0.0033276472943077895","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/menu","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6006d554f812adcfaefcf61cd9755180dac35b99","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.59010b6dc.0.tgz","fileCount":38,"integrity":"sha512-SZ/OSCqnd4wciY4H16C3GK8BZbgX4uyVqH8CrAaLT4zF5Ucm1YXR7NtELvsDOoQi37FvdLRBcsBgEonT26iyUg==","signatures":[{"sig":"MEUCIQDDBVokVTtPOb7j6QS8Pja2nFedeMsyCYw2DQWeJPNtRQIgJ3nfdg9R1AM74pwuIgcwz2CrZwEA0RYgX2slnwbo3s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrXCRA9TVsSAnZWagAABK4P/RYXNeE1ONZz68YYszSZ\nlT84UwhQ6tDaeMHwmV9vk24zvKjXvZ0UvnbxWqbLuTGZhrsMse6wdQP8M8E3\nQRCh0g4EoRe9KkiotZOz6dQrow/ZGSWg3u5CpK77ZSq19fBUkUa0is/OWno8\njJWDo9t84ShePqt1ewBeHdj2Nniu5Emck2d8o6zPvQZW4oHLfFZ8v/uQ6z1x\nqRlhbAIHsd4utq5TKTofJ8mpGOu0TPI0PpcRbuB3r7gY3smHZ+M7oMtaH2rI\nMZAliaYujEvaBvkU0UdBa8gQ6MzEVKDMG1+igBSleljizMeDlBRciKnAj1UX\nVII0gveypfqaYdOJkl6a29pQxdXsi1U7gDnomB3ZfyO/jVtA9eblsKvv1nGU\nFrSwNIP6OKi8rrBt8NKwtNIeEhILO0xq6HikyJCV8wYBr5cTd8zV0k9BSYQO\nU7tgaWHIHdC8ndK0vOqwRdXEHHp7uQztXgfuDyQHEPXIBrJI7JjGXN6tnkxD\n4i8+W9DbpStSe4hUuzUj6fvbEp1ezTuGhq8UoHlz4AJevUHvZFjh/gm6kk3r\n34Fgs9CGj6EgTISgbdazmTYuBketZraAqSQRBoMZzNz7df6d3+1HL77Yj1La\nqgxtHUlIUB033BM1nJI3b4b2w35V1pNWmeiR00pbIeYs1gJi9LgvfcqS4uz5\nrmBt\r\n=Gp9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/list":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/menu-surface":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.59010b6dc.0_1615395543427_0.18938046210937798","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/menu","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69085304b47ed2f96dcd1b4841ac330d31687911","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.9e52f5544.0.tgz","fileCount":38,"integrity":"sha512-Q9UwZAjzsI7Q+VSuqLjn6u/tAKrkagcxqe2GJf2gp50IFSjBfhGo4Vm2cJU7MxemunglzLxYY3OwxBlpYCiaoQ==","signatures":[{"sig":"MEUCIENC2Fj+DKF6DmFtYDMxPuLzgapUERmOq0l4z8D81zfFAiEAojofsN9KnELtX96RO+jx0IPpM/mkxzL0jJjaHc7HwvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWyCRA9TVsSAnZWagAAb9QP+wRV1oFxhbDcQgC1j100\nRfCGzafZl3ozRpDPQAdgMqb/Flz6kFqstc7WFImu7ymavc6y7SZkHa45ya/a\nY+SQgn6zdhJtgIqkjWhd1rFfJ4MR/biR7WJ/3sbnAhZDcCJA1FvfVNnM/RPO\noQ+Qdmpbht/aelvKESWzyuT+k2b15eg1bNUs6HFRJpP4CWt2dYDFGzgioIPO\nz9VwY+RKUyLUAFcCcVhp8+g9FcIQtM2mb3uyy/8n7rQioXNPlRndrU/+bwGg\nPWKXedwn0Cm5jsSRnif014LvCfytkjjdCiXjn8C0hqUOhkOAlRt6oNleoTee\nJ7tF+kEYAPBTnMEM4PT/9+Uts1GR6GnZY/lhDH29BnmPFb5vEqnfHumbsZBn\nB6uzPtpOEIKJKwuwIRHZdvLXvEKZt3Gg6aSOD4z3vKGfDyXbMS7V72068IwB\nvbnsXc5++QAHYc+gcKzBAQuIpgqbvet9D/W5s8NayMy42SKV5bk29mmCcMJL\n4BaUSv9gF4/BsUrLT5Ns4W7es+EXI3TqYTo2XAzsDLzqVkEFKv3EY7F3iXTn\nweDkmYHbsbklonBLyTBmjR/sS6kKdZHzqwbBAt4h9Or79lFCZbvE185Ut61i\nI7n2iIQw/1aGXwzPKKJFAawl/8FFvJqrA6/ipncIzK8NOSdtHp2WPkvQNZEM\nWOpq\r\n=WhZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/list":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/menu-surface":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.9e52f5544.0_1615418801846_0.06152040553282645","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/menu","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2265f448bb20b430610a74cb7cdd52d0849e6eec","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.a678806f5.0.tgz","fileCount":38,"integrity":"sha512-RxsORt+QLioIjR7KkzUD2ks+xU31lgLuGM2CRKlq1bEzYoQzNpRzTk1Wq/MXFFJ0iyO3JW8sOzYb4eI4kI7RUw==","signatures":[{"sig":"MEQCID0tnbAT9KOAa+Y+NGx2gfBDWpa/j5b5VdyuG+H6CgEJAiA9sMpnqNtMSWptyQicOhKxA3sfjzWddI5sgthTJiWw6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXedCRA9TVsSAnZWagAAgiEP/RIgN6WB/FPBRCtcsPR/\njZRchs27vz+6AW09j/jYha4IAd5qpWyMdlxzm1xHN6H+D+R1tNcx7Og3CNLN\nlyGEjJxLhSXzJPw3xtdJpaHzkmD+tTtLIgX9T146XBg6E18Y7PmU1fevK4We\n05XiqxRrypDcQTEYGCZNDycEmQ9D03IPZFI9OZu2lfs7lTJPqGvU0VF2aEIz\nPwUmS+FGA3/yPrBCBbeTBiGjF4+BdbaRhc3ABVvW9XcHKeAfzsz9puBbSaxt\n3F8pFnMpACzqAjiNFvUHi3qGFFjspKcjommb3lseWwbAKqGFqPg4ld3eBFw3\nvjfUYXgLj1PD+WLx/1oMDP9LuJxyCVuZBzHCVFpLa3SaiGs79Hx/VUAON6Nb\nxydg2IKyoKXE2hiaQ+9PGTwGQo4maKroGxubENWAQA/4uOA3ENXeLyDEMWSo\nDW6fUN6h8J0Bi1VoxlikqdmpWd87IkFo0R9bp7i0MYUcZud0cCYs0ehHUZLo\nUu2jjMkHh5Y7yAoYRZ+9+W/FNSkxl9IaOh00n9z4gwC1g6j5ghiql/MkUuBP\nHa5cnLQVnKX6AVsq3MqxUpzSLO++soa2NeKOiH0ixWl0bGzqDy7UwrE9YcdH\naECY7qVTdepN6H0xPvJaVrNQ/t+/QNRS7ZojVtWdL0knq8fNJUT205pMUTGl\nORxU\r\n=ul4X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/list":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/menu-surface":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.a678806f5.0_1615427485501_0.7089170395903759","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/menu","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e071a933955043df66b8ead865d778b90d97aaab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.b2d22df5b.0.tgz","fileCount":38,"integrity":"sha512-A+YMzZUTVtI8CA3C0zFH0dfHc9z2Xg0ucT4ZfXclVaMbfJuW3dhKRjZKosfC5eLvivf+4bY/HG2HNDmZOvZdqg==","signatures":[{"sig":"MEQCIBffeNUcJbRApZsS0J1CBIoP43Bya2tn/ictmNuzuu3pAiAA+PZQM5KcGTHjQGSKrIMn6h64dpTjVpCiyjPA4tB5Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2qCRA9TVsSAnZWagAAaKYQAJ2H0hxYfPQfPP9lgDT4\nyg+q5Xd7VkAj0ysIAyYJf7sTPtfJ52WhStwK5Yxo+hlA4NJq9sv6r0HwD9Qk\nqyO+iCUB5WC8XhEsgFenR6YINZzgg01N1i1aG8iiQCysGFUrJ0l3eeJrLCUM\n1TNgAosCSoaVkXspMf/jiXMQmRa7Z3KbKfUqya1DO74gaI6bAtxgmdO9BQDS\nwNHwl38RSFTfw6FbcyX2Fa5WvrAD1NZtCepc3bDnjvT6MVJnjBEdTTAZMDFH\ni87kkc1WKKaO2tWx7SVky2CJ/pfi1c74yoVeSPrWF9qoV5h2zgvg7FKREDpt\n/YphzpSHnUuCt33UkOs4cEXydO165a7Tmtejuk0OsNn79lPP+c6rnshmU4sx\nxINSNe/DWuj1m/bEjr1BrMrMekQ9iw+bj6bC3MMdWtlzZCGzttEJC5YijuTy\naAc8+rBwOzRPoGFR0SBNx0cSIhJPw8uw+OfreZzyGpDM0Yda/1JuaN/DEsvr\nlPKDJFJlqcquyrdxIM3sT7HPzcAEQ/uyuVyPqrjbJexoKGikAQSvGUJN0TRj\nwDdD8Tfuq3Z3QXFqETjUaz3FY2QpGWq2d3MToG4vWdg6ieEAmE8uwi45RinT\nwWcmWhk8bkGDyjdO5Jorm6+yk9sGote7iNsykH0lHov+DT2dUZpGPuYNnqXW\nEh9x\r\n=6PJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/list":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/menu-surface":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.b2d22df5b.0_1615482282528_0.3894248767074904","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/menu","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908b64ab186e95a7256c58901ffda3bff8b18246","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.81911b707.0.tgz","fileCount":38,"integrity":"sha512-cJ9JE30BxPurVGsneu8zWYQVOr+JEdCTi75/EasD2h111PajH0fv0Vh1Q+vCg9XvZ/Kwhe9EU+UZlbZlufi7kA==","signatures":[{"sig":"MEUCIQCKm2QeqHvVfXjBvsgrjJiOASBFwx51x46y6zkbRzuxMAIgGMrQfPJgoSxNt50tOLJW8sEcBLIHll+SPam48OYlu+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmB5CRA9TVsSAnZWagAAzgQP/2vnEIaCdi9RnSi+w+N4\nc7IHQvR9pKxy3Kw00HyA5tBPc9WFjALbPXmRfli3CLaMb0QitdGd9OQcrxRE\nmutUT+4mnmdsRebD9mA57zFoqseQC5xNWrNjoZLKhNvhJa5j5SoW2Mm86AxN\nsC0yswO6ntrkZPrMsiiahEo8xeZ2qKuyP9OMcJQnln01/DSkh1eJAbaGYYk+\ncuj7GNY18rplZ5w7QL8wfG0AEjwfPGWeY7VcxS4vxvQAhZj4nIbbdkE4rbJm\nYThrioi1HLGjeMLzYPyLqXDimihMRvM1xKjaCPEOy7cymxSYJuzI3xox5REP\nq5yEyFnasx789M/hZTkARx+RiYCDQ0s/vuI3SSoJQqUP1bdjGT79g4IjFOnI\nwVcSE7w2YZ4NEb2jxHIvLARMOgDostXUU1JtkQmzsXxZCd5H8q3K+KLM+Pd0\nFRE5EJGeW2mLPYbnk7b3lOU6qhPk40DuJNlVcsV6QX6aJAB4Ld+4lRARwrkJ\nNyIrwyNy6bGK9+R33aiY9kfdYKbwYPxHyIx1s8hrzq5AJS1YCsbnE9xvmkty\npxR+Ic2/P8ipqN13TX+HNwjc4EL2X9Rxky3wwyu5nq9D0sWgUD3ADc0TMZwu\nL5T7CfeXIssUoj4Rjq/YAHYUuJSlz9WH1m+bAWkqAMkQbyGfTZxmUwDF0k74\nsWnB\r\n=aQkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/list":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/menu-surface":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.81911b707.0_1615487097159_0.796618940376765","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/menu","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"decd34074bd247085ffe9f6f9e18a71213575ef9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.9eeb35c38.0.tgz","fileCount":38,"integrity":"sha512-M8+XfxtRuIbsBrgZ992c1/lNZ5oBWkD7zN2F4M3ZZyDz9jE7vQN4wLWwlYCKfpPzffHMq8cpm+/x6VDtA660Lg==","signatures":[{"sig":"MEYCIQCq8mzFM4BFRipz/I8R0fTbzgz+lxNGm9xaF9Kq0NbaFgIhAMw269kg44/c9ImTgvRr8UZOhgk7WDR2grCYGfW2tpg9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGxCRA9TVsSAnZWagAARCQQAJ+6V6E0cIqJV6tRONOG\nnQoOB7lnzt4pp7PNdxblbvEGNfObCFnyTUPrP5htG15WpE1T0RtGyG9yf83L\nD26o1g93wImGXMGuSfkGfd2eh0yOy53elPxbzInT+9IF1mbTn6XdH4MTtMPh\n2IyBzsNUj1dYoSFMhnvXQf2eXYFIKow5zFb9Pl6KhLb6WvNqDms8RJRh0ctA\ngoVQEhmiQcsmrFFjoDCJo81rida8v+RFFUAGEz59QsxgLBJ0s7gGkXbbsT/P\n8djS/q/hMy5I1By7Ux1pivLmO367EtGJo/5Wbce+HMdzZGqm32HksfsxzIZk\nnq/Vq12k1+X2oD6EHhZHehCWoLuvrygKk6nj+RijNzUnzMRIHXK/7oD0cNJ+\n5K6MSS8RbT7EGefJiWPgDLm7ZRGJeSco9JtIttcOcdw/ODqxBdHg2yyK064J\nITiS0XnYVA1/fx7PPgWyPePvhxdnNd6q9JpRsHF1cmaE5Tah78TvM+TbgL+p\nCnB8ADBCJMxGl0AbwI3Ck7C0JNE1qwWeaZlpTzkWRVmE+Bfb9LYe2gxUNiu0\ng+D3kWBPD243J5QEuBMEZ3X/CtFG8X1gj+si63e7AKICWscvjKKaP16q1NyG\nGaI23Rv+zPf1TJzPVvzTiYwsZeKS2kL9bqfA8dqbg2x1Ov91n2aTZ2xpMDj/\nkxOl\r\n=l9b/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/list":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/menu-surface":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.9eeb35c38.0_1615491504873_0.555743998848921","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/menu","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd8ceb61095ec65a949cc896dc70413856d98e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.12be3e95a.0.tgz","fileCount":38,"integrity":"sha512-cKYWson6XVAlpq6QyKakXHitdkhqK/57IFoUB7RHxDvYsnQ7TqYPaxbf52W+FYDoDDvdGLKQGEcO+5MdGNS6ZQ==","signatures":[{"sig":"MEQCIBMGB3L1sm6paJh3pzyguK6S+UYPgCJsHeyN4o3Y1JucAiBD9PEPMnzKcjvihO+w6YkI1dgTLFTOipGxFuH1xixV7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnd6CRA9TVsSAnZWagAA3WUP/38SnTkCdYjqZcenIzVR\ncDRrMGb/bVsT0evsS00AhmmVveqJwIt6qGQ9ytPqTSGhJJvSLKnkc1KDzF86\nfLAjDrRlygPHYnsc9q3V2gWkppXzto17PWGgtIlZRr5wgLycNstf6Ndui/3T\nSycGgPjfE6kU7fhmDaOlF9Lns08lm2cj1X5VtCPoEovySj9Xi0ZLC08UnT1W\niSD2W5nWv4dvt0Bqo6zzvwC7NhNrB2LcqGUyk6gZ4Q+/autHyKziO/0dEWYA\nakxL092pEF3KpEHQe9sFqVlw5yfsDvgnsWMw3JAjN3AlC+9jhRaV9w5pgDeR\nc2ZbMgn8Hw3rMPhMr1ZZUCbPAYzqa7Dy3zS9gcBn9f3kA81ddEEir2F9iVzy\n27kdVcig4Kn/9/BRsvnd1ffVcjbZUzDQD5ekNFTqnq28nh7bDsXLwnrRg4Gx\nmD84aMc+yRaesFM5G0QJMM+Ln+YBgw416RS+Ise69eCaZvTaucfaIK1sbH+3\nN9Zs4j5+Xj/iExo9Uo7vuHv1ZzZz2ytIw0uKnhRyyngg/4L692X2KECK8OW4\nugaqVTjHj3RGbK4lgvs5t2apmJZZoc94f79PSWBVL1zrBot5R5vQO8KDwA9I\nJX4YONm8HY2rZGE59PNpkiTOM871FVfVaH9aRkCSPzVCS63AbLVT15t8nwI/\nu3NH\r\n=aKau\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/list":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/menu-surface":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.12be3e95a.0_1615492986448_0.4392872499651892","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/menu","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"023da8eaed5b3e2f3ee3d5413bd4989917121e0e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.e683bdf4a.0.tgz","fileCount":38,"integrity":"sha512-rnl4ChIQnZmqcaQMFFUNGhrGqUFHMgsEEm0zS2QvUWjK5Wy+Rhik5vpvQ9PVOsKr3tBwaU+polSkXwpSEG5y7Q==","signatures":[{"sig":"MEUCIC3gpWw7WXfH7EJwYnJN9lzzzXQgMIm2oC/jFKfrnVGGAiEAtVhT3oQL+dZDgBPieZickfheP0Z6j6CmilKWMYnHtA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnlDCRA9TVsSAnZWagAAynIQAI5qbxRK5Mc73f2VjCTl\nWaIkqZUCzVhUvAIzg/HbO72kP7dhORy4I7q48cBOHMbXsmA0x2mAyCmKChX0\nkO96/6ZJoxrVFfjCxh21AOl0eBWqLExeX1MSvTnrfulgkKxQG/m/PetkupSS\nRveAA616BBuhgvcc0PEohoGkDq4L9Yigg5mALGIdzwRcDdssDkaqb3KM/5ft\ngGsOYvrMZGvk+y+cGnOtriY0nIj8Lmn+1oRT9yYucSzC5qd4aS+7FPR8Pv/2\nUvccx2iZnJJGZA7SA9f/b952BoEnSsGTGNHH0NyFwGkR9Q6ZMpj9lznrPzQs\nwQhVgUQY/ccOWHKhiYW7L5JbWXprGEL3tYJn/AnG6JsXLiXZ2DdiqhPqhXVC\npHoEDfO1q26p3FyczWrWl+v5bmbXdPuH8ny2HbGIa56uGZ+ugPt9DHYUVubc\nzFD6dsCFSac1aS4JSsQW8wAwrDDTPnHPfeM3DMQV+Q7gwu877Q6B4pPb7BaM\nAyfGfd7DJWZ0yjVA+yqCkcJ4eYoXPUuxjv+EkdZqVg4CE//RA7lBMJ3Asu6d\nVvJKz3O4MTI0dShzdjD+LO3OhTAvK3PLTxvS3Y3vc2GSQw4xk/v401shnT95\nMGMIrufjiDlduQF5C3gKLU37jhu00XM9l8B8++tPwcvY5ZZ/ygtLBRg1KsAx\nCVrx\r\n=wLQH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/list":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/menu-surface":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.e683bdf4a.0_1615493443314_0.5078596081744275","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/menu","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e374475f8f51ad9cb35b26cd99cc18ee0e3b71c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.a07b6d486.0.tgz","fileCount":38,"integrity":"sha512-rv8mD0FstGLFl1W9728bMVMxcoxGVgVCN/kmAEsZ4k+i0JB7gtsXR2mF6qvFdUmTIAyvGAFYEyHMd8BkCTBFiw==","signatures":[{"sig":"MEUCIDKxf2LpIxEurQ3zwey7Q7TZamiWaWvXsqV900qiRb2lAiEAgexLHE1YeOSchky0nkeqV8ICkuE/Cx6axwisYEaJcdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn73CRA9TVsSAnZWagAAXd4P/2jMrJP9Rq5bVhlDvpiW\nOwczRMLCfhAUiLMBMa/1aVC1Vhj8BsykfNVVJw/xrXzzATtAxBP9iSLL0yzR\ntnVgR4uTO9c5/wnmrOiaIbVn1vHfd2258SZPXiuVwYD6Bfvm9fw1Kacyue5c\nBXfgWOfIT1WCKqYZNY9m2kNQ7C78xfvKOm1Hmlg0xFHRz4coarxYSrBxmqbf\naB2XVUjdByVeaZcS5XepdxcAY+l3ckLo4PRcC9HaGbvysebUX/AQn5XkBnCi\nLQN6GhmGvMMPdSmadH9EQDkMXhY8kfoM7zo7eKdPYbaflrrkjPU/U+b6X+eu\nGttFkXSj2R+6Y/L10spgCcDWEc6+lqMzvdnKbQ4WwIY2aob8b1DX3TGi3xJv\nNxSO9DcGXvOzti3gWFNFgOfJXmAM6EHZKm+PyscIJWZ21SSk2MRjJdSv+jhC\n0mo35r2usYLGxE1KWCj4XIE4DNp/6lbj/IZV7szsAQRbs1uTIU8ysa3In/6/\nzwziGlPGH0mrYPq0gjtbmhd8mm8320nFf+uKaaNXz9fiFe3rSq4aggt4/FMc\n3GlWeJCBZeWNaTYYgtTLFUMjIZ1OtnYtxvKvILqFI8Rr+hL3dsVr1rvi/uZu\nGNnBNU+YwuvUfAbDwWkKP0Y09mWONa6kSGauqpwMHpd9Xz1gWCxvGwcVNFuX\nV/TX\r\n=YrBY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/list":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/menu-surface":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.a07b6d486.0_1615494902626_0.29153578235625477","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/menu","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91fabb1623990853e9960eeef78a61b382c1ea7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.1e0653477.0.tgz","fileCount":38,"integrity":"sha512-WfHL0rLhPHK0AtfiLLito3ymC2AMyap7uHsFRJQEelSpCTMN8Yxz+jdLfhkiv09qRln1c5Dwgbumx55OVg/dQQ==","signatures":[{"sig":"MEYCIQD2IUwWxZOQDLNhja93X/U3DYLuDSVt9kItIxv9gl9joQIhAN7mswj144EQIh5ZZlWtj7vSrFDBbs7oCTqjOehCwxYA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCeCRA9TVsSAnZWagAAUlYP/3+MkttFIBdGgbTuIOY9\nA99vFksXL95FPTAOBbkYL48DxAoPdDb9HwVsW3XqqD6UpAU6FEGS4o7Fl+/E\nQtdbV8n2u1wdxrG+6oYbG6Jd6Pxg4QG/t2P+OWCsjVNJEVDEgdh1/EVZ09lF\nSQ0UbOlvub5S0J+PhQdHWej4XxQ+m/OrhBl/0F+7c9ZJFImZE60mQvFppfzk\njOemNe/lRnqv40YVZQX8jAVzBIzuMV8zrb7hqm9ojAuJOx4Lwm5e0XCwtFIm\n1kCfBXR7MVIG+7VDfG2TMOD+ToEWiu1/YkCPCUCEu7KRzl72GPbQp7QEhwQk\nq16hWRHSCrIWBioQTvKhaHv5VUj22Uqe7zNJ3C22ncJRgW5AAimxIcRa4E2V\nZgnz40q6OOjnY6VjZDUs3CzAiM4uGf7H4uWhzn05TPrHpUmJOAmZxSaRcy9Y\n8tS2oIcP0RBL5BrHrxxcp+t0lKGW21Oifm+uyuTZ+8vkJhsFPq6JYtgWMa/d\nvf16v3NicgGUmsOi++ZLawY44GTnc1arjmkS0PRXD96yuWzMIDvDTMg9UMAv\n89PTf5DDqIfYpVyr5PkBQk5V+9CeU3akl9PoFMbdAPehwNfCmeCMjFn+mS+W\nVumKjSggQsRyg/2Q7DbQUqCw8s59rM0czdM2KdADVay2aYo1+pKlrIlRl+BL\n/PDF\r\n=CZv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/list":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/menu-surface":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.1e0653477.0_1615495325978_0.45482229530498897","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/menu","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91a527abb8b030eda1f2120ed531d97a3b18f83","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.148e8cfcc.0.tgz","fileCount":38,"integrity":"sha512-/29Jvz5YpaIBD7pNYSGRKFq5nPMNRGJ5GpwUs3nNtcGUzPyga3VsWRPH29y/LY2m2N9OhXYdG0cclFuwwAZ71A==","signatures":[{"sig":"MEQCIFKhOAh2Ph2B0Oq7VO4bSs1Nou6I7dRGmCYlOQf9L6JSAiBoWJNBOx7490+e4bIzAm6dzOTpJ0THRFFucCBPnn9H1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2fCRA9TVsSAnZWagAAdNwP/0dI/nMjUrabVEBQr7xE\n690fFDFUlXm3/RsILcnLO6+LNw9GARODBmE6O8nIrkZlTucP0h6QCaVSb075\nPZGNg824JV25HdAXxAb1l0LvGQStx31zOJ/RPyh9S/gRRL+FuZQWc+5P2E7e\nOzHvqzyDBz+5SCP50+3YLjgWv0AMyWsd2K/UQH9hljUjGxksCCMmje8845aW\nKHH9wlItXtyDUiWdv6k/AaK955L7crOuOUAd9ZlSQx071D7xJO+/L2Jj0ahI\nkqV8ikWTPROnNvh9uOHv74JZPHSUL003UyPVc3fQNtQO19lXlntqX+lmNinA\nC2jVBHvl5SOCwO/sisq2dsIQbswRhoMP/yM87tPqlB9OIWsoKpdtxnzeE+gr\nTOwFw2ODN+ub/ysiNSgz+hvVIMIOy9lObVzaKVJeEr7U0vJANvAN4us+g820\n9zjuv4uicJthJNfjhp6hBBdOpXvz6+zEhEQY3OT8YwyFhoVGqAONsA67eruX\nlfI0U+RStER+JVT3gwewoa1oAWpbW6pFxwDKSDPWBpREDbA9zhParQwqLGAP\n5uXF89n4et2bcCoAip0NZSH764nq0WKgGoeV/w9yVNgianGuXxIq6zif1/pe\ndddg/jfhxPB1pQIWivk9dTTmxchSe4ROwZbFrXaIyetfLqJDG+t6dd9lx5f9\nsuV5\r\n=MT7C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/list":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/menu-surface":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.148e8cfcc.0_1615502751412_0.1520776629253182","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/menu","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e76ad1e23436047bde5ed979463a5606121fc429","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.73a227194.0.tgz","fileCount":38,"integrity":"sha512-RvSOyrTX/I++nBtvA9or4BYclrqtDGeV8K0Y/kMQhIFGpZcHCGd0SsBgRE1EyVRnRHSCtHsjbpWz6OnhDzgMRw==","signatures":[{"sig":"MEUCIQCdaAtIAX9sl0Zs2gIQoGYnmPCu8Hs/xhwOmbDFVIU/8QIgHT5oFAcMYHU5ttnlYKTtW2B6aoBjdGPvxakMltIaCx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrUGCRA9TVsSAnZWagAAgFcP/3U06FQN+4LFlHjBBiIo\n2zbHVfcAKrYCo6OqcYCN02Hi9pItKfmI+cXv67EETJ7l/9TOfcvGGiUI19W9\nxM3l2wCu7fglOotzD519IhJDCC1GcB+dSO7sGdJRAurXfH3D0VR0qNUFDCzg\nCVJAGkS0Jq2rik7mRZHu1DzpoZPDZDi/WyprT1TpgSazyVMgiyMtdy2wHLMk\n90VqoGDtUgTBu1WQqbFltN+zt9CFUR5wwKrbzGdrJQiIVAk+95Rq5S1/rPp1\nUqlrvVrR5jMnFmRuNtubcpu0ydf0fsxxiXTwSAaQ8UI95xVhhvBqhe6Cipif\nHd/vXnUaJehUrdASEiZmUqZrXkkjZSjft5ljvmsUjp7w5PXLoK2AoCoX0fJt\n2S/OJeKZaRgPvSB5Lhc2Nl4z6OdnflXHKhiUVb//EdHBsDgEDNNR3QMbTbxL\nXFojTZ0gPfdlZm03pCLgyOIE456YbFxLrWRzbILRMJA3b1mQBqLn/RaCnrGk\nWLY92eme6yvtTC7lDZh7JA1aEw29dBNuNiWJLsuW0YT3ZOTM8mb6fa342+2d\nlsmKLddPzQ6ZIbPwu96Lee3lh6CCmIaiclHFakdJeJWLKArrvSxhJYPeUZ1K\nmUQv3qjWocBnyjRANuGQFno6W1lZ/meG6cly0PnLHjfe/B4pgG6b7D0ApM9K\ne9no\r\n=TAmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/list":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/menu-surface":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.73a227194.0_1615508741870_0.0115157033427975","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/menu","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28545a2a900dd8a2772ea824fb553fb533ac3ee5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f8579b7ea.0.tgz","fileCount":38,"integrity":"sha512-fpGTJqH3zZyamh7fv0dTjKB7cXYw2i32cPs2iwabTnsBGUHhKD+h0HyjJCreFPne16ty4/93Mhh9s1B5tJpngQ==","signatures":[{"sig":"MEYCIQDsQ3xdifc8TH6d4Eet4ioiwfHVVNMrdH8a0XKVSJzCjwIhAN09ttvsacAhX7sAVk6nCRjUIwewXapU122mx0ztycwk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB25CRA9TVsSAnZWagAA5bUP/AxiNh/ZKUkjU3HM4ACY\npxhZAcRpKQ31/7BNslUGb7e8yCLQ65qT/iZYRJEqG/1N9Za/4T2vugOOtJ+R\nt3lxr4PQLGwLluLu9/S159AKtdw8WnN4AZvhN/iUSutm52abCJAjiS3WOPbr\n9VlbglauSGG01b9HMYQN1LWmW0O7c0owQacqmaA1IbS+9rI54rhAPCjptolg\nuGAAUkke4IpWq0K1WlvLudjGIwQkhmHFGxNV2hK1du/KJWYIB0sp3+Gal3a+\n2csDHeNARV7nZJyw6jT24G1+MX/Iq/M1jBtssBLM8Ns1yVPvyvWh95zZ7Pod\nkrwyw7XNziYmkJy3omEHiYK9tjAez3WvJRQojAN2k5CbMXj/VFO6sppkaXS2\nUyjS4BKgZwTXnc41mzRilxDRyCRGYPReh+Fts1GIZluyboJdF4GHQtQ2C4+C\nuNVu3evYqhOq4bwaHSx9tSrerlfsn4iPiAUoLnHeZ7jW3PyxU4BzcWKf5yXv\nzA0SSgTQBdrXgUeeqptGTUsFbyFMGQM/bw4gbxpkstWFY6FL/yb11H79aD0M\n/TeNpN08TMHrCWcoxubWasyji8kq4XSSuwN5ARllOrwUOaYxEflT2II7flR1\nMyEa9nXxVKoqdm1bM59N8T7Rc9k8Jc94MkXZoGyjlQRtDneB3pgzwXY7ntyS\nFbrH\r\n=RpKY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/list":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/menu-surface":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f8579b7ea.0_1615601080721_0.48450376012927654","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/menu","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd509243f7de36d07ab54426e5cb7bcf45884e1f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d2a39d300.0.tgz","fileCount":38,"integrity":"sha512-sJS1LfN/XSsv09dPu/McvuypPg7sIJCpsVM2zCVaWYhQqhoDg4+eOwdjhREMergeU/4auVHvbaVrJCo7nq0Fvw==","signatures":[{"sig":"MEQCICkQ9si7vflB0xhQK3vhIH/ywLADuOxxeFK7DWqNw8anAiBRivFljyrYJOgqYtl9p82Rdlxx27a3ihHdLISqYArw+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/2TCRA9TVsSAnZWagAAl0oP/ieoy6UFisUCHjM6Soa0\nceNbUQ9eNZfBYjx703g/MhHFsICJgPoZ1t0LiCgeJftMYMTtff9wsFioIEBI\nk2D87bw1l7kYr8UF127I4a4xsoK2Dev6jtIDRAhgHg7HKGmgTkPUpBzaC25v\nEHLKKh+TtctkRQfyPdAQRgLv6xs1NRDrfM9yiloOztZ0EIaLp9mjGRanKL3W\n+3DDQ8tg0jTYuZBSoyU0ZaybpshF+AAClQ+OYpNjzMR+xBryUKz/Ld20Eymw\n8usQqiL2NRjpPgvFGV6guZZ96x+JZDRle6/Lndws0zDm8Ec/5yyBX4t+ISc0\nmb2bzrZyPxxOMcHW3t0tPnlIA3Dfda/tBmEq2HCnKgxUBbUnDJEBEwFE72GR\n5kBFre7Ok5OB+evcH1DvY4ZX5GSxZEHHfSNuM4yEH9SXW/jFM1ZVioiS+AGC\nyi+d7dZsrJTBRyS1wwHjH4xG2RucEyXbY/vqJ1zv7qeC5m42P4FpNhXt2UDZ\nOuBmkrNI15iqbOU0+0tzIDso/nGbau6YUTHAsciLEamEI8KQAg3lYxPki2lf\n/l4vafAWWVhaszRBne7X3ENtqtkYKwS1kU1WdjpCOeVKpPPVaRkcGkMm/CNt\nkv5tyZLbaMrAC3mRodTpR9MItGfrVy6sDL0MTZavxO1qkbygvlkTZgLgtrat\nF84b\r\n=7m61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/list":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/menu-surface":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d2a39d300.0_1615854994913_0.43327116311142544","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/menu","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e590535ca9fcfa43234f50fe81ed2925fe1da24","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.7cf67823e.0.tgz","fileCount":38,"integrity":"sha512-Ju0K1t9TtlmzjevzmJGbnuYRNVWh3CZAINTo29YfcMFEWNZIj+wbTpUTQJ8lg9K7Oa9P7QB5pfT2gWz4vlOfOA==","signatures":[{"sig":"MEYCIQD8MFVb6sthK1We+JOLh4hIWbOmoiPq+F8hmTB/nBhv7AIhAMbLQq3fXkAfUrRP12fqKvTp1ixoUa6VKkg9qGsIYHeG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPc4CRA9TVsSAnZWagAAxgsP/iuEOidIrBQv0kqlLcxk\nbcEgXinl0/7E2wwevgO1+HfDmQ7VchF9roaC4hhUia380IG233ut+Dr6Iev7\nGIdmgU2MW8AbBnee0hPRItb+qjWnagEiSVss/Xq7QQx2BG8DUwbqWuJ+A6YW\nsnSgRVfK0+CutOUyNQkFr8dvh5CtBQ66/p00mocc6byeWsLk/qabArMf+2+L\nCAJ80ONELI/YRRKBv/HRSOkEyp1UQC4+oXFhw5WAob3rVzym6PBCqU6ahWyt\nfS6RUYSFqt6xazVoVNZRml0+Ie+7lsZLr4N2rJ6AahzfC9X1dJwu3wUQiFd0\n4BTkOIZKb9HNceF1UBKsOFSFI7udK9aFQ/g2Sw7xB3EzmM534JkxRNdBhr5o\nF4Q9G3Ip0WO0QEGMYJ9Iv7goZHShpJfD/Jc4C6PNdzncA2nZfIu4uNyJ15md\nxXdBQGATRHr+9NdP9xXlzIarJ1UNbU0daODr0yK3lqdCuma6iWefEuE+JTQu\nsVx4M8sAS4V8uL/P6+qrTGVnN1TQFFEsocawuFJL4s2r6CZHKGZb/eCG+DLC\nGPxLrDQ4SxDT6ZgyYUSCzZOzlzrCG4SyiUDK0723jHjMH31hGiLKx3GC8Dn5\nsqY74llFC8dOJ2WYLTDHwMC0/01d1LvoODObih0tDLhdl0IqHInYZ6CNNYSg\nwaj4\r\n=84PY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/list":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/menu-surface":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.7cf67823e.0_1615918903679_0.46283241162675526","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/menu","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e18f45e7cf9ce67a0089691fdabf9bc353ef570","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.67d780c79.0.tgz","fileCount":38,"integrity":"sha512-zhLa+mRbw4cEMTBGJU5u3FT3FKu/+e91+WBoBKXIdDRk3Ijh5R913o2VX9i07z8Ik6FMnXX+VYIxaOlIWpaVjw==","signatures":[{"sig":"MEUCIEHw/rzV0eHepXkyNrPna9wLSstP08G1lpmkH4gOshkdAiEAyMmbHdMkSA+rxj4SVSYjeZd73N3wnEhUfi7jvxvEpBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQvJCRA9TVsSAnZWagAAEz4QAKBRT14l8xhrq6m1g7Ng\n55mtNp2Nb5X0OgokBRKxGKnPmltdMhR+4l2mvZxEytxoFpNySkJIQoiQvQho\n/WInWzwVWym5DWiJov+5Ar99o8me4bIFmC7e/+LUfERHp1aXNIJXTGkqT81F\n0fAUfh5Hf2TV4rmL44x2xpNqSlUaxlYkfNZWHAcdHnPZqWJq5Ofi9t29sM9U\nxDQJw8pmqzWPO16R7kZV3KjZPl4xvBEoXG4q0rZzwxZDwSOcetC4kfJH8puJ\nijntxy0ufwkYoTWCL8OdfFvSanMmNqCPBQXJC1aVtyj1OxyMVNC5qyt7nUVK\n6wTTmMR98npBMKJ8voWj7VrQbckd8pOpVMR3cHB1jToYV7MwfnUj1wcR6+4Q\nwqHSrsfgb6MCwGq6VqzOe1ouToe+NK1lhOsFO6JuCk2DvTZOKiZ+2Ujl+v/f\nl60xlyd9+t8tpITwivJUcFjFbxeOt/UuYAO1XglMNRlU0kgEkS/4+AXF4KKI\n+FZpaROo0+Ae7lTOzMx9ed6ZZ1WbutgUgkAyDo+67yqYvs5q2HNMTKiEwWpH\n1zkah+WPZl8l6DO1U39rYZHj4raJ9++7hHkXP6gbYZVMNvn8ly2P/BjiRVcd\n89WYZNGQPu2LwYWUTrHRcILSxNlSGMLk7jErJYAESSEkeK67KBrlBplX5JiS\n+0Ms\r\n=raev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/list":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/menu-surface":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.67d780c79.0_1615924169048_0.8425130432142143","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/menu","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8933f0c3bed7d42211c4b7b07477245d51bcde55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0f358ddae.0.tgz","fileCount":38,"integrity":"sha512-IP/sbKD8M9cBq7T9eUWvDX0KPMyUgxUSGJF7x//qn7WmLErRpxX8oorEMYrNVlYDuf91F+k6UPKDTEXRczFBOA==","signatures":[{"sig":"MEUCIH3UWxFTgpye7M9EmRhgl2Y2jkpRzCLlCiIOI8q3LrEGAiEAjoDU5/S+MySOM8Jje5BpalG1LLshQgoDaKKNRArdzcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2oCRA9TVsSAnZWagAA3F8P/jauQPQNZUFcNgO9aSQq\ncSFXweYxl1WwOWuJFyiZPNijj+8cxZyr30nnRpsd60KjHVI2//EuJsszwUEs\nGhvYRAXREhSWko66aQXJRaznFS9DoMk23Mpc+bAHXBsVnp58gtiEOdRAc6dI\n+SOXPEGKClAsK/meDnXWGzRRWyQ+O19Rh7Iy6Xhuzc+2g0MAKBnvG+LFTHCm\nqQkCI8e+YHrriGgb+x2y+9LgL/oSr2V/OXt1rFJidLSybbg6K5xGcj3RTes7\ndvgwDbmEBZJD4jzCJTPIsb4kv36Obskvwd7WV8JDIN3aUKMSCpvAhYy5LUyz\n/evmCbwVtATJ3sYlASZMTbJ9Zt2CwuyJlxfrCBiIygS8CzyNTLGYdVu9rMQE\n6tkjwmKfS6lCPh/jt4NNm/AZmS1l4Z0xnGUA6dxrBo5bMFnpR7gLpHZnmPEw\n50PZjlPH/WDUZOp19Dc/14VKUY3iFgWK2LXlkKKqXMoqBnDi2Wr0kNLXeNBN\nLvV/kyEgVlXQyUtQ2eeSKYF293suClceqVGUVP1q5C1IcADN+u5x+ZBoAvmO\nyQVE+FsrAlbfjYnchMdnM7SOYgPgqjTQIanQ11NxJcdDXIm7TqLIwKuB2Zwf\nScDej5o3W1qseFCCITEn9P9tMUe4mXY94Ch1aI3jA4zvEZkxXD0PQ+FvkI7E\nUbCh\r\n=rmva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/list":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/menu-surface":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0f358ddae.0_1615932840187_0.8344000344839841","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/menu","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b6dd414bcf16490257c562b040e5a4b29c0e51c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.67eb0df80.0.tgz","fileCount":38,"integrity":"sha512-5YhQEbvgAHY/xWNk0FvagOfW6Dbrfm/gdrUHgpqlQpmF1ZVB6dBcVjBYvCBQgEGjeTpbhv6CAMeoa59sX1EGDw==","signatures":[{"sig":"MEQCIEy+FmoNjlQUOBTf6fFNbVwLOa80UDqhAOJvyGt8YNDtAiAoJGpn1uVJy3u6LXrqmy+/18qVDy4vzIvf4TO+mXruCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQJCRA9TVsSAnZWagAAk8EP/jpZ8SFdvoGb/mZMb9UJ\nDoqzZs9AKmn7lRO/PtQiidc/a20Pd7ywFkF7Hl7t0uomAx8daRifElz+czyB\nxDiVF+Y+U6i+NA2xIUJF2MN4Ify4p0uwgl4yGE33gOQM+JDN9yO5PDEmZd4S\n8HJV29tExEkUXC+OPKqIFku9bl9EArXUb8fD/uGRPh6RumUrqrSVfTglpXGr\nCx9UL9m2nAEz9Ve9nqg8dBMrdf8esfUAszuVSp+mz2pmKMXB4qxAnJ062UtU\nTOoDIfREX6B2FYC8LKEcLuBLpvTHatgfFerYda+omW/nPum0WEaS3p2kTACw\nWymbwyn9LxG6p6OGl3ikSFY7Ca8wv8DHKzSqVN3ppucnn/zRq1ld6uRZdpVu\nYWWZIf8qIUW5U1kFtc+aNrzLbzMbqE2Q1vbsQqGkzUcX+8tyH1J0iKc4PdNJ\nfUwOM1ynx1cV0O/YZBpYsbFlUd8MdyLadX9vMPwNJpo6HBPerOJO4v5mG3hT\nLN0w2kWJ86j/70b1fBNhRyL4g34S2qktpJ7IoK1EkNMamAJzIOZ+4pYYYJZ+\nIX2G6fSBOvlJlsejEv1sQu3y8wL+yug4XyANiq0L/6ToCwCFBuJA12J8ym4J\nlo5tS74m1kn4HuS6JUfxHqAqPzBN4ostWDsU+UakcZKo92/N6eLX8+ONN6vQ\ni6fH\r\n=HrN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/list":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/menu-surface":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.67eb0df80.0_1615934472928_0.45953291801040663","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/menu","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fde62f4a5e2e0dfe15249b92028531291f1f859","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.941ca3b3c.0.tgz","fileCount":38,"integrity":"sha512-5HU5NJOEo9LByMYI3mvZMAu/83TMNCohJh6Way/yosoPjtL0ika1Pse5wimz3qE6MZqR+acQq7uSActBfwwfcA==","signatures":[{"sig":"MEUCIDNZi7huJs6Nq76eySbn+DIxyJCYfpKjiuGcKRCFdKKBAiEA46/JEblsE5C14mBqNlhGG4NIF4NS9vQGenRcVKOpbig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRuCRA9TVsSAnZWagAAkeYP/0d75oUa3lm4dKxP11Jn\nAnHRjzutvcZv+VdLdGyv55vVjoM6p73ysp7asxXrVNwxhPH7U+K4FlyuHyUP\n76DsYVNOJrXdFxBYvbZ/iZu5H5pMfWEJeLRm5z4mBc6H1hmm/CHnJ1kxLwRZ\n4TSefHSCqNSo0RtmiFwnCZ8hcvHu190q0CN7niamBwOx+bS9K1nVyySsAoKh\nbRrkV2uRhbMQ2QYioSdTz3VSznAlRF4iv02nsJmD0uALzTQcvhw/L0xfzZev\nZiJ2JCixGl8l8KSSiQKFviCoM4qxo85uWnyrkoLM3D+ad5jvWGUbwp1yIKBZ\n0p7pEi/mAYkCF/Vx4ge4p3Y/qu5GyFWtjGx77NTWC0PqbwCkSKPlvOaTpm3i\nrGVEJHfgnMw0tUv0Zv/7/5ylaQaAiitLRYN7dsuEXugQ6u7AQRUnekU3MqVS\nB5FqbGgABW4Ycxyx6itHZ/DmoMNDZDfAAXOIp41niMh8v9IaTcB9XXHFh+1s\n3vvncimnvuujPf54P2CwwmcTb1JTCX0ruewBMYmkZPaeGhniSSj23pFCQmy/\nd47j3EXf262UJqgt+MIg5yQkNdSO+RsjwVjINy/35C1GTrZRe/nIuz85GKPa\nRK/pUzGf05w/yhGAjqlGT3BF0VPd8w1RgyCxG98qcV0/xNhvlNWXN82zU0m3\nfHFZ\r\n=DicT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/list":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/menu-surface":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.941ca3b3c.0_1615934573728_0.503371938114229","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/menu","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43e102722e29eead601db6ef682d97a9d17776c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.3344d12ad.0.tgz","fileCount":38,"integrity":"sha512-OWyRbon902QKKAinsBKkubqzJR/WzhO9Cs0MLDMJNCQJC0JiTDJEkxHl1OKcJ3lUs+CMFv2b+Pq2le+O52rDRQ==","signatures":[{"sig":"MEUCIGvm5gpQNadn63yO/iybvNQ4yW+6hY3vs+AMRLuZ5AOZAiEAnPUQ5wo7cGRKdD8aredn/3082KGrCdf7kJYfMiORqIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPoCRA9TVsSAnZWagAAe9MQAJUzHtMz0w7FCW9ltyED\n08fkV1NWxXHMuBxeOefANF9svpYAZ2zGijBMc/Qy7UwzDDswsPNG3SMIMq0/\nUquAeiMncPqYDlrnWwcIswQKuYNA+d4LYFMj9EEF5flUBs9lFo22yN6HzOXB\nB8i+4CFJciW4ISmgz0Bmu1LkZxNf+5SRXJJebxBw02LOTmrB9b/teDRi2xDA\nK/SavNBuZRHXDMLK+W9mRPedstNbXh4Pw4KE4IDeOhp2cUNbLJF904wx1Yn/\nuI+Q9qC9fRHziXTmw3hMBWiSL4NgkjUClbphD9PcdbH1xAV7F9BRSt90rxB7\ntTiFlFyhkcCGPao0d9sn0ZrIZVJxBDsA0Zn/+TfqiYcRJ7eMkMh+CRB5Lifo\nU+SLgJgInoBz+JIzacvGEoGj5FFzeIq5TtEj1ZWGnAkwID1bNVMVgaRUVnwI\n3EuGLRAsvRGzyrRKY6ywEh9JOQlzCO3aNkUKgGToPUweMntpl2JMIv/ty4DD\nJ8uy2RV/gnI2EHr+peDH49Bz0QjfHv8oxf+Ptr9pzVYShaQsSOUXV8WeVFAQ\nzzDND7xwLTglEH+PtbFX8rQ7aCRVSvGmXyfgZ3E/mZRMOSSUJLblieH88r6C\noORfuFAhjKpMRe8QgpKMpq2IvSmiA6PbH8wshqR1+wtrpUOoae8tkWKjAqRr\ntLyQ\r\n=4Deh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/list":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/menu-surface":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.3344d12ad.0_1615975399741_0.6159602040369239","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/menu","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b5b9495c3b3335188856c59fc10dac7574de149","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.6072ed604.0.tgz","fileCount":38,"integrity":"sha512-6OkLVZlXeuqzmA9FxmIqzW9+H091nBQ5BzOn/lreRr9+ZD2lAnKuuy/S+0TjSzD2eVw/WekyEKyxjvXSrTxK2g==","signatures":[{"sig":"MEUCIQCoME56Ok1Z4U5s6ZsoGHw1Dgi8Nh9ix2w6xy0RsLO7/wIgLPpKyPYT3Y/LuICT6vpyM5xNmsvCMY1rJGEyPCfzd4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUoopCRA9TVsSAnZWagAA2c4QAIm1M8+0eNp0NLIi6kMk\ntifZpMubtZYG45ZRuYyoFGX6SVooAgSUVUcIBAUqCJNoMIMn1pgnTpmH/dMm\nxOtIm9HhJevkUIZLgRqvBfWxXXnznFRWHxxi7VXxD2ainEq9fJj8biKJXmGg\n/SCXOPdAWjXHNnP980P1ZD8ii06JSGjXPUQQHp1d+ncVZ9f30Ub/kWWFFsPN\nLgQJO5UJxqmpV/u0xKGtR5swiCT+wf4lzMSTJB3KzMyE0H/gGg8kvEGLmJzA\nHPqVfZgbc6re7mAU3NWP9QVDJCU4mxWG/maB9SArEvIMcy5520gbACLDi2Mw\nhZq0Egv4D45SuKBrif+t8sI33DXPOOqcjinkeYTs4qY2y4yyHO2zot1a28HK\nbXLfWj18Bue4arp2weDAWqzgG8Bc6eOT4hTVv1yHJ3rdEahIRRqlGNipcGNZ\nyQTKNzKxMqeeK46AFeKJcuak4edkBDJb3s6lqeapHqg3UCbg1MvrMKXOHkK+\n/1Kk6d6tEZg0rIcXGVYItdjOqV3ZPwxgAoxLhmVj//y7XC8iMYfjdrEznuS2\ng4IFD5xhGRiy6KQqAUuqDGWmZ8m8Xin0HjSkxZC4Chz8tTxvG1RbLYHtPbS3\nbNi+0Tjfuxb+oR5Uia4jPNn/fW0ra5OshsBzF28FvynWv3P4C81Fg/PCj/qg\nrqxe\r\n=X0I5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/list":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/menu-surface":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.6072ed604.0_1616022057258_0.6467922504710044","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/menu","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e9c95b6e6c01d4c8a2fb58ff78752642f8e03a7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d3a6862af.0.tgz","fileCount":38,"integrity":"sha512-233Kf2zunCMOtb1DZ80AQljmW91w3F4iEgiwkhR79IO02eszq5JHwCqCZLw+LHm7VRLXdkyPHpZZOQ5MdStMiA==","signatures":[{"sig":"MEUCIBSe7+oYWwSWjdSvHjzqj3NKZ1fLC180G7oVsbFxFn5KAiEA2+i3J8OrRDnSS8DNk4syx9uaZFowR1NN5W6F5yUBi0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU34XCRA9TVsSAnZWagAAvSEQAJXJ83eHyviXIDEzY33/\ntt8yrWehSQ7TUWRnaNp5VA9snOf5RNRcm7/ELORRfiBI0YRc2nn+h01+DfWU\n4NJOmqyoB/Oq6jZl0STCdJo7XXExsBasraEIQhVpV6WfbVVZGO6zSFRaOsdB\nIxp2/vhggzkxbrdGWNHWI0u8k4nALEQrWBC3wZ665i6re3KXyDD0BaDKvGpa\nudquA/CY07vmdrvhJJt+RGoHj0OT/o5e8/JkFIoj8NGnyH6SeZmSU51IDXhB\nSRWc+s8NbthPnQRhab41ojyVBKgloItR7l5SVtQiFecR+nEyZ4vldVY83n51\nM/QPJpZF6bL3He3P0u9h7vHloLJJK2wQKRSak1BXffNFX/wr73XZEKgbM79G\nVAkZuvJY1dNqJIXD1b9oKvzDep3Pp43MTrIYr6Ym+ZT5+zNhF6G/HdR7FnlE\nTmVNdPBO2eXSxo/3OgCodylh4CClzhSWw2lTrMLB3uZI+C8UmN+gXebnJ7q1\ni1Vr7YzXFHmKRI6DLWdcSJad3EV5nPjXUKambWoCY+WGon5gaE1GLkSsmj0O\nCaRbbHLTXNMDW5dxvKk3V5SWPhW60DLSkgBK5UWCE88isy0x4AxkfWs6dYWJ\nQIWK0Ib6PC9uxt/osLTQq8GHfaCBbKCaK7dK3AiU0alkTTtSgIhz3YcSoKDx\niDNe\r\n=wdDV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/list":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/menu-surface":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d3a6862af.0_1616084502868_0.8074706423249804","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/menu","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccbfd78cbb861c3b78744a7b7beaa4fa746419bb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.40dd242d5.0.tgz","fileCount":38,"integrity":"sha512-AkbCh/LEW39fTI2UherzK/+RQmQrVUt1SXMtlhMK6u/lx2P54EzSoZWrgWbVAnBDMokOu7X63CVnPuaXmY6FSg==","signatures":[{"sig":"MEYCIQCIcffjSrmd5IMxzcPjBZhqfA8WPf6Eo4W52gugtrlcOwIhALFagIzzqyyzDP0Z87I46jhqh5De8cXfyPzVPx5e/OYr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8O9CRA9TVsSAnZWagAAHXQP/3BMFwzhs5dzJAHcnUSs\nTNkkNtJ1kTeYEN4FEI0WRtX5OwllVl0wRkuPbzCWBUuv4MWy8rsn1mbSHrIU\n1hxxxbM2jIJQLV8V31dM936HT71lTXDSvNE3aMVM6oggWqWNnyqtoMo1/MoP\namsFmr/U4/XQ9pIqCNbu+S1rz8a3AHtFdS75XJeFmBhenCVjWoRnNmn2HQ19\nBSSfDPS7ENTQe25puMoMi6l1onkdZlOOnhucMY4G0wGYgDXH9oEK51EiXGrL\nfMuiIoFKcoNkZX4y3pHCiuHjyhdLRxAi8yUTgKiM7B26r21hD18/em9yaVyH\n29Sb6XXako/Ng+TvS0Mm/OWVcP9QkK8gz5Kutw2dST0n8jO2vTc7ctFySutU\npB8CkX9dDk48zn1Z+5FoMDV6K4XOIJwEOyHojy/E1tlerkmvffN0eimATy6P\nqT5GP4lvVI1v2p4aS55d48lvcX0m3hHkO85H0EGUYkAD62CoPBJzJjW0jxew\nr17i+BXnvtds0uNGoc317dxLTsfGMitSrA8rleMFzEGZ1F3VBYr9+d7tu+08\nSGdnOCHgPXtkehwQ2ZHQ9BoUXvvg8y2CbBedObsCsrKrvC7EZtsZUNziMuv9\nbFhvPANGxwP88z4ExgYcy6grrjBW0aHZqIGAk6shvR5NjMGBqRy1syHUs76L\n0RGQ\r\n=Iqdi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/list":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/menu-surface":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.40dd242d5.0_1616102333142_0.2727708299800955","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/menu","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deda1c6384c8efb78fe629d85fcbdf45b468a11c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.ec8f8465f.0.tgz","fileCount":38,"integrity":"sha512-boLNZiHECRf2Yj4S/LWWNcbQcA1eq2gS72sv5RDxnWM6TeqrjgBH2x2ytIrXkKJoEsgPTig65TV98IkBE8OnXA==","signatures":[{"sig":"MEUCIQCN0RjvR+g3ZcEsZ6NYMW0LmazGRl3ougqkHGbOytW5UQIgbY1RBlLwq1B/Yki/RqYTkI7pgBgmeh67CPheZAb17eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8oFCRA9TVsSAnZWagAAQroP/iwt3vyfygyxw/3yrgxn\n+9QQ4kvRtDO/NUgOYWrP92Od5xeGX/EP7mK3m1M0w4ykDIxVF52e0L1ECXwr\n5q43K0DsQ3VwcsBeEAYFdGio11FfDrw3OCTIzHhDUNymaen4UnUOe5hpnuka\nsAsKJ76CXcpPbHV/LKmzHl/KaZWK0JtHYsO0rmDSd0bA7SlGuSw3QIdzfP/o\naBli8GCmCxbi4rMO5fCdrIukSIMHqR5VmCFrd1XtMWa34oshJ65qDZ5XG6l+\nXpSiTpOrWFMgqwWRxrvp+I8/V7NEgTmoI4plSSrwSi4VvPN0bxqWTQWeeMg1\n2utYf8FMDzY8ILwtoxdWgu3QVD9XI2B9ZUFmyncx9gclSwJ0fcWwUfAStuzF\nPbKFBiKdf4I0/PSR7Ckks5U+GnArEDwoa+Qp/xoho1/eJmgRM0PWaHVGY+pa\n4ZuUwNiNhJi17O+/eaXhWNGEgwH9zpHo5eZbEE381jW2Yf4O0FK0SCM6ds7Y\ndy9GzaUsdSCkZqExYX8sZI1VOH38xWMih1slyANNcGP7R2u4UDvRn/LDz/22\nCvFGDcLOxRVeR7hCw/JpA5UsXFuB0V+6BbhUADLppzYaKzsBF/yEVdq2fBFH\nnxPkeLuK6ULk2XveBr1UARom1fol6bpAG1kueQJrd8ztNjvyYorfMB49lwpv\nzP4v\r\n=x19E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/list":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/menu-surface":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.ec8f8465f.0_1616103940854_0.5395530943947489","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/menu","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a894eb78e9fd372f5e855002de17116c3ec58c0b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.da38969ec.0.tgz","fileCount":38,"integrity":"sha512-Gkp8DovlBkpFgz7QaUTnzwdbOYpgv1W+GnBgZCql2joiYcoay/LmqM2IK1GzO/3RFlkX8ZhY6fu521MvypxjNA==","signatures":[{"sig":"MEUCIQDowAfhoqenWogQ1I0rsaiPuB6miH/O/bXU9ry5nd8MawIgPEe9xZteZ101/F4S3KnXIiEJ2FCLVPney/T7UULaCCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HyCRA9TVsSAnZWagAAKjMP/jMMXBb6z5VIt7HYXqCJ\nzME64Ix9BTZjGgAmP7nSOt6MTOi9b7kJ9Wk2L/c0OyYgjfyA4V/kRqDCuKcf\nScBwoFAWq+SDvHJzYfiil5r47JpuFtSQFHFBFs5ns7uSkSJ093hDZHtI00os\nqA8Rvb1ScHQidbcM1ouLHmnLOUl+6l825FftC+B3lwkUqJzc1nqFM6KQ/ok+\nKV9H8JKK3qok/Xje+GpYGu9Qtw6WiDc8HER/XhdpbwYX0IKzm9w6h9sQYx1X\npDC6yJxf6ifZPsFBCvewfbun1xzh7d68QHRlGYCMzlB4n8qzDLszvH6P2ek5\nZaRlq5yJQYdNAvGfcnZOHfTZs+i2NiTGlVKjTli7QKznYF3WcJgSVYfkLOYn\noGCUG0T2LMMG5HxinPLJQSuwEJecZOG8e5w4ttbBAivgkBRcwxdfi/mtQe/1\n1uGNvcfIlcA6Ubt91li3gfrITBsqFQSyKzZIEwtDZjX7kw1Y3mLZQ6NHe+sL\nMfdmg4ECYIIV01NJlU7CDekn1q+BLCanEBVlB33YhVNRWiSQPlzo1GC/4g7m\nZlLUw5jLICrfcuV38RN8WpANpfhv8TR6mj/QC1o+NeVU+F0dWdh+bBBwueE6\nX6XBEbYRjlMrRDq9oJYLqw6HaWK9ShA4lcIq+f24BUnEBSGxj6Tthkm7HkY8\nHYGK\r\n=tDJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/list":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/menu-surface":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.da38969ec.0_1616105970341_0.843474012047573","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/menu","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230184b9ee6c879603d6470a9e882e4531357932","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f5246264d.0.tgz","fileCount":38,"integrity":"sha512-b91UqwJ5u8B4UA8bnqHKKwdnX19Im+ZZ4FqJsSPBq5/xkktRgssq5HIDT/67qVhisncNaOEInGHodPXQ7/H7ow==","signatures":[{"sig":"MEQCIH2Lfro6zQ4y5bKUGNek/Bs3mYmIjw9YtJ2KtheGrqbhAiALoZYBq5shA0mV51d+wh+LUIVzvmjKYzIRLj8pC7EshA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LuCRA9TVsSAnZWagAA0LgP/RyR7yWtvitodlpVNrmW\nTpQRD30p2bIogovp2oNBtsKVj3XZ7ZJJijYYaYJVC7GGLGHSEjCNtAxtoYLs\nmsB8khpBGE1tEmpVJRRvBHJA7D+6CkOHNB9eWi2v00oVrJNwfgm1rtPScDDN\nT9k2GHYsdikEbyxZqzY0B0qRU/mLNmbSvGQWcnPgow9m4kdUwFFECnhvCMXb\nYXShlY2kVKnj8ldxqghfjnhHCUdmG8vUy0ZFuydXiwpe+pP8apxOfl4dmsfK\n9D6yvK5FoM5zmbVe4ipYENvlJUkwMI/wg7ZD06tm4Pa2LbrczJ30KNBUWVYi\n7ESG3uwIjWNHNrH6h4Yt0KEBWa+S4Jn1/W66WUUmST8XXPWN+szCbb+HUkGG\nGAf3uamdsPBpcPMxsOyIYl1PiZT0PvL+egeUcO5nUGOuD0Ljk/Qgd7zVFVDq\nYJddNIesDPdSSJMUrjoj1MAjvWdZn0bpIJUv7D9WWv6+GnNUtoOMQhYrBZGI\nLJlvu6U0lESz3vytIOpxHBMAEZmot/2ejGTc4ysuki2LTOCQKtx/DEdvcLRI\nplgoO/CH1perOs2Gzyo+/MZspWr+zLZ9ydWd8ySxKA10zCRoHyPln+f6Pfv/\nxOZE4U9kpASI2xPwoY9+lGVQl/SBJMubzm1txW0YaxrnS7c3Jjj3CUwZO53E\nY3Y6\r\n=6giu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/list":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/menu-surface":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f5246264d.0_1616114413974_0.14287897838037367","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/menu","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0bc4a58d2dbadd3dd2d7f9dd3b0049ed0e98cd5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.03d34bbad.0.tgz","fileCount":38,"integrity":"sha512-xTdPT25xEtKpIsOO8Ufrw12fOeHFYfDDzJaZEPuAQEyymIo+COEgmaOPBtGN2KDZScwnz8uHMUxegSRPmtFgDQ==","signatures":[{"sig":"MEUCIC/0wAipBlAX+atXOtPGjl1lP8znwxj8N8Flj7n56eOPAiEAh/ZPRZBVDVer6Z7ciFTm9jpHYpeb63pD8TNpeiZAvd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XqCRA9TVsSAnZWagAAf7kQAJfnS6Kq+Y7zjKUMLIT3\nP3+nRKxO5lEvaoI1QRhsai06QRDwNlnfj3WlhpKVInj08QagJ0pt/K07u1Cl\nHzv8heESmlR93IXOF/KMko/r1JFyol0WjOrf2okkN3JfHWydd/0Xl4MdrrbV\nxxX6WAVqmx5rW/mBqeOTPkr/0e1/igkZY9rWnASLYF4aDGhqVmZ3JjQVtNqw\nZ7662F/ZX2DjGJSfaYrd0sKcFx1oqNC5TWh9eiwALlXWNJsy4po/wfEutxBX\nNylcSZ2Iv47yx+TCXb59oPvB5GeYsdBJS6EDsSnhXtZm0Fzx4suCSq3uLhP7\n3N1MnNd0U5LST0h7+WGO+dLrRwld54B6QWDf/nPQipPXVg696kd4NiRI6nuG\nIrCmXqegLFNdP6Nw4k6vsru8QKPpBvLuImvZp/afj8h+yuxoIi76mjiaxVf0\n6aRObaYRuFhsgyl66QuqgFmIrKfcfXDf8Ds6eVJK3UuNC21easEdZtEQ6nyz\nwlkLb5hi33LqxzqXpN2pDgzc2sK9WcE7WLUmpYJhMtnNafnDzfYm1GCYM8HS\nv1XftWj2/4OhPbPT1wNyGB37wCpHEyGz1rUSTUa1WjRtOA3cQRBR+4QuJ36A\ngZAGNxE/4fNXqLKiuv7FYPtJM8GCPfo9o/0TOjxjMExuchBaT0NpORG+biXS\nVXIv\r\n=oHpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/list":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/menu-surface":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.03d34bbad.0_1616115177931_0.5432562604046989","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/menu","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b643c08970d6faf40d149e2f9a89028291700b96","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.cbc57c600.0.tgz","fileCount":38,"integrity":"sha512-QWV/igAHE8AdQBPfTPNZcIy7gga3vrPAWSEtOk/mk6xRKQrKjhY/Qtk/20YCqcqoJ7dBqvLUh6sS/eo2LqWk5w==","signatures":[{"sig":"MEUCIHT6WB1fwv4jEHnUGoObaibbNZ6U2qyFpF1NtpdGlnJRAiEAtWwlYbMTVO0K5bKX9FotOZiaFw7uFEviXq3mnbqMbcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/fXCRA9TVsSAnZWagAANeYP/iPpGJ9nuMerik8DJwcP\n4S0uCeoh/O33I8r3izQ8/FMsjrRynRf/HZdhXlxfl0JDBtqQuRPNMIlm6ijC\nTWQ+vUKZwLkISW8z/a3urnob3gBh8zVCO1RYSXa/45XvJ3Ugz7ZLmBauVevc\nqliyYoyDMTKbGguabg3TA5EAxbRWzG9HllM+kBN5HO7qdGAJFGJH0xpf6A/f\n5A3Dbm5YOD1A7C0VJLCOj7qHh8lC/8fCVVjdcb1Ux+QQ8PhwL4+Jh8TblLBR\nqlS5Ltj0VsIhaWbsYKLtr0DIoiMX8axXi6W4dgCEpmMOIuDe7qwXLzuWFzAO\nAyx6Rvdu9LNCXbf7jZb/XjDcRSiICzPsPKR5fRpfNzVyyBK050IxPq+IvKUv\nIv4+aauFRfZPhcynVorijvRBiY45jlwRZqyIj8Q5nyug1zB4f0fxnetzIq4a\nyBgSnw/VIbqDDjLhjxMX5TzehE4L+oudkMmy1zkJ9KySLGTYLPeUMBN00Rpp\n4gmRFfo3Rj7L5RU7UerQK18HoqWT3njDNzVns0myPv6DWWPAW2fiYHzuerpd\noI4eOMTjLusxgcYdJryDsvisOb2MMWMngx/jlsJlzvmylCPQ1Ej628eprkAo\np3mcLWgnNzkMKoc+xSzR5BHioCYz5tcKzQuG565eFKaVQN0aIxQvbcUlgfD+\nfe4R\r\n=Q34y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/list":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/menu-surface":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.cbc57c600.0_1616115671020_0.9761262960324122","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/menu","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d0168f8f75886a8073b10db85ebe9a304508fa2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":38,"integrity":"sha512-jPSW17FPWQB3F9ZVJNTMQT0CzmFhOqBTGtG6+23jvDttHKxfISf69gmTCR7rqH9cVW2snmNk7vG9MDK5eSKyTQ==","signatures":[{"sig":"MEQCIBZ9Mj24OwZNO5PETfYJvYhMtPisCBv8eooekYUhheWKAiBtlPEjaVZVlZnuAD4DO+hDGlLRencZJlrHLANqkfK/7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rqCRA9TVsSAnZWagAAnw4P/3Jk4iC7KhPobtyUsCjc\n0IyWDxzd5GBXHqwS6wTrWKlEcn/CFmEs3X1CpPkOKGUeqFz6rVJoYMg/UC+S\nv7rBwrdOZ0bR4hLlduHRPZR1YA2gAnmtjdeY6jjyT/iDq/ehtiFvZvNlNFTf\n9m5omZPEAmwCEfOCxw3A+wXvxJ2qTWRzFGZ92VwBAnc8KyNuWHuSMiUTXEdI\nrI227UBw9l8FaM5BvLFYAMPkdmlp4hkxzfHh6HszN6FNy2jYunlWNejp53DZ\nZ/+7yloeVirKRbkYjgNjb1R1lKlGOBw+869td+4WdsEy2KUxOmB84GdtHTAv\nK8y/+R7YH2LMhi800vvclQjf+LNwaEDU1uSrkuNXejK712ExuMYUxbuWxuTl\nJNCqWwsIWUZFPJ85ZAxcgGhM/zDDWFt8476l8i/JkJCrJowoAewdJ+3U2fXJ\nXx6OcUnkjSgAe+IvPzYblV3gh2L1yXEFasU5Pb/wU7ZTzLrLN0afFbqnIXID\ntz+00TtUAjUCKcRA7GD/B6XcGL0h7xkiXC70xmzcJqGTyhySDIzKfUvIXG8+\nc8gBUXJamQyqxJznu5OMvcpdw0tFo4NR6E6BxiQBC3NQRtyFWKxfYko85CxH\nQCuWbUY2Vq0PjbDnfKo+0gjojg8fcjvKL8r+rmugHbQyV21PIBY1wBCjShRf\nRsKN\r\n=omds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/list":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/menu-surface":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.d6c5bcf37.0_1616116457808_0.04746066475691979","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/menu","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a335d22022e02d192fd77a6835ca151709dbedeb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.fefc668d7.0.tgz","fileCount":38,"integrity":"sha512-SQmShuUfOqbIdYC0j4pRJ4dgS8637Pp+u0H3WDhD6XUQrTO0wBsCrPycPixQgVmT+JhBkQF8RFWI7T8s0d2nYQ==","signatures":[{"sig":"MEYCIQDjcGPiUaiK3iCXqSlsDdThGzYdpSRLQ/4vAYrxO1xARwIhAI+td2t54QK5GJDLFObmxU17BodXoelv/ekGCPFaM5H5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//qCRA9TVsSAnZWagAAfLIP/iD/kijbinfU9q+LuhP8\n4Utk8sBZu1N5CaHZ9PZz/6oPlkCWHWM0fkUigQhDFF1If5srdPRyKY3MZkf2\nTGEvIurQ+++OcTPtSHSXGr+B6Mr3O3epCGkbcdRTbBkvd5vby4hSKn+uvaY7\nAtbGXrXJTM8rwwIL1GxYcNxygD7oPtK27lL1gaTRmL+bgBu6WLQ2qMr5cqII\nlib3lPFnA3gMTGoEnP8ThCUUrEDzcbNegoJraZ+AhsCbvHnbOkuMop26RblO\nE0+UE+TcUxe/qbUma20Mzef2Y1o6DvzDV2it8NxoGx4prGhCO7eSIN3GkXKq\nP4XS9b/fUUjmxFF1cR7K/w/+HEWgTFMRRVxvSBSVf493pnXMZ8JT9PPy9zRW\nCv254jdxeQm7/IM5WkxYnZzfEsHtbwF8nTITmhifZDL8CxRwSxmlYuKoxRb6\n0MrsNBLrH7JTIWqHuKcfi64EgA9SSTMO07ux+0jdjiHDm7k2DdgooMpoMBrC\nbV+i+QIsMQuS6XSe1DjhaLnthpx2KmcYuJ5rw2d66PMyL2FGAw+ftgVaWg99\n4EAD4w1OfOQM/CA7fafkJJWSilb1VrXV6wEtPrHQzhr39D2aNK7EYHMDpJfD\noByBnyTl+iOZ9BW9QHAeD12bVX5WWVzto5/nqO2XacBlYdkZZxggEKPIlJ5n\nWYd0\r\n=o6r+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/list":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/menu-surface":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.fefc668d7.0_1616117737769_0.7517113703082547","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/menu","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c03e97ed9f4ceb84f3b84eb3dbbf8b3d18f41dc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.faa7d3226.0.tgz","fileCount":38,"integrity":"sha512-FUhg6xPwI+ITLOWdLdDNgB8bJsX6laDouRcTR9eBESgt6InB3ZHVfRtr+mBjUid1/602vuR9kS/5e54klJoX1A==","signatures":[{"sig":"MEUCIHPURjaM576IGlrfSn2XtBOIrfL+bQo3LVX+FFZsSGKQAiEAmLq17/H3LlXm7tu/7kyz6rDvJBXZROOYkHyuLYh5O0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVONNCRA9TVsSAnZWagAAzf0P/jMhbX1P9o//e0ScLsJc\n6wZG1HMbne6SV6oy2kPdfz36QCyhgVZuQigs1qTXnJSIwccUz/lGuJeJb0wX\nzDkNrG40VswZBYHkw+RxdU6arQXQJz1+qk2wNqrTEjR+0FNzmjvw9MaEE3Ew\nqpWuQFsDpmcv7WVkId1+llorTrhlK1IcnPeJIFymO91Sj0F9n4+TryFgiQTj\nTN00sUKCQdTz/jH155H9CHPHFh+cbY21nkfJmtJpqqpV3ObINid5PBcjCCI3\nfS6liGTWQgFe+/Bt4sr1ixQWwv86p2zU5IiwN+0L76luSAHArQfPQzEmhvUJ\ntLNgisYsrtwGDZOI8GH+If12DrXdmYPtzU+DiKI8Ejrbga+AFejXFQue8quK\n12Zt4neL6h6clyKv3GQu5Cdil1HVXuodc0x8hvY1SarkSnRFDFKkQGOKKSgj\nvIzzw7kVjyEidMxebdq3Qa/7kcr4mjlUUWiIHI1Jzxk+nGpZLMJj3a8Unidw\nTIOCsbfJdNo7jFNH6mkYzdQ7yUJFnVQ2Sf1FJ3eFI+FwbJMSRDHOzBkCIR3G\n/t/gj6rw77oDzchCEVOJ0u7191MAWVVCGRF0kczXFYDV0U5kr2vj5/M4ko1Y\nRAdFnvQEEQDPUvd7lQ0zW22v9z3AovgpLxNzVeAenEz+UjCINYp81tmQlyfB\nMQip\r\n=hG+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/list":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/menu-surface":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.faa7d3226.0_1616175948782_0.12918949859018403","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/menu","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"567b97b9122ed3449dbe9cedbbe9f81a4e547172","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.c60449bc8.0.tgz","fileCount":38,"integrity":"sha512-OLZbDXTsE3esgsVQczKoK2PYgGDHnWBO2WEvrlJN2EP7+9/WOCNLy+fU9fH4HofpdhFAY+I07NinvDyjec4shw==","signatures":[{"sig":"MEQCIFoKSL04ButZ/2ckE4Mwqm2jziRdURyOEAgoRzsGS008AiA3zDGk7aR1me9Nu1tWmN2+kJQJeB4V/vBAYfCD8VDekw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgwCRA9TVsSAnZWagAA/y4P/06MPW9OkKVVfVc1XEXO\npW4pQLgsVhISVeutGOQmD9gqioxKw/uL+1yhN4I56r/hu/0yQ1I8dLGbKYr5\nTsQC4zCJu9/mRiPHo3DGBshBk5m+FQV+feFO8ffbkgoR23/0ftJWhYktfAZU\nOPQ12ev6AYqeCEo5s7T7FtroR9ifdFGZadBrTCKjinMwb5B3LHB2xXR/49Ku\n2uUcnH8fPufILYuUR8NlWl/iHTe7aCAHJxDAhEU8ngbhI5rax4DiVREyTGzA\nPitLd+d7QVQbRmGhcCgVomuzg5TcTlP3yEv2xwmMTHBF+uUG6fZk3SAvIJjh\nOFqHJ782Gfjn0BvaSUtlP3ZzqvrqmEvVzgkv4bUvdzWX7O7XXVfVfcaYIF13\ng0bOXggU9tnPdv7Z7N7jxak2C0495pRpx2yOUs7022CAsLFyBJoOIIrj37e4\nZ0dR7CpQ+OeE8+yGJ9lh/5Ydpzqq0mC8/VusQLlLaXNdN2XyLQxfLoNp3K04\naqc+wQB14pytSBFNnNJ7E0BzFsz4IR37OrJbRsBEA9+B9wsliaConIjwFhQQ\nKV86f2CVwMKoxSPMNGBwD6kOxU7s7y/h5aEt6Avb57zevYXLIqk0FBzGGc7+\nNquaSQYimhtRuxKXh6Mb86rxKZy224J/OixwuEpwd/bcRSOCETYkjjhvpOhR\n1KrW\r\n=rTaO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/list":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/menu-surface":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.c60449bc8.0_1616177199177_0.529997035527368","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/menu","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d7479875e1a0df599bd55f2589287c87198e68","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.5f0fc444a.0.tgz","fileCount":38,"integrity":"sha512-XIj2H3GoR9ATg4vrcGn7bxbWFeGeBun8FQJMrrlMIMP2wHApHGZRUiVTuFqMnfDZ07+65InF9ZI0NjJO2ufH8w==","signatures":[{"sig":"MEYCIQCJNM+5GpoEwVyIyR1hpdEb0S0irzrBm/4POPcvC+8UeQIhAMLfVBdVH6sWaF5+5TVU3yi6IEYH7RtB1AGCv0k6NphJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO/XCRA9TVsSAnZWagAA2uwP/RX+aSIg3xPaSp9gD51Q\nCxy7K7YaJZ17LItOVe4LME+H+wjh4oYI8YimJRyzem8oCEMYvP5gV3BYjxB5\nU8AYce16UFEne36jY8dP/ax17++OPS2P3OAWIDxuouQkg2CL/8zl+BTGvssa\nW0iEZgCvrod+dw4Oer/AM5sRUvz1MlqyaITW977bqaAWJy58QKzmZvPZgfs4\nhOG/xwgp6wjlRZlOQalbeXiOW1TjZOfmBTsmNw1DikhN9JkqXYKXVEMXZQ7w\n70+bjfjyunOBw/gSqxYjNo4kN9a3XKYWiYeR00HngjsWUcnbHMm8aDEi8UTn\n3qhIC/IlhVR4//K4B/HduoccVUaDvq3qHLtq/fQMRcdvFHr8VUv9Yc7DSw9n\neP+GKbn2l+q1DHkG5g/YLyV9p/1gQhnjX31kSMGSjwmjA8CJyH5/9TTkid/d\nLu7VmHBZVB7XtVCGlncspgmTeVe6E/zaUbESEStv+veHP2WOakavx7EMM48j\nb4YU+qwFhYj0eMlutl3+njFSsOVyoGYOdEh157sDffXJiCBSQ5E75RMjHTGW\nHUeTpvheL+jp/vjCL5afr8qJPeur9JqmxURkRtn2GlcoI5g0r6OC21I90AT1\n2SKrEWhDT71/33NAG8WfapDIBWd9BhtrALBCxHVM/91UVQeeBlMRw8L19oBG\nvc54\r\n=Go7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/list":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/menu-surface":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.5f0fc444a.0_1616179158494_0.7124432400959106","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/menu","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc38f3aedc74a969c1e70c0842a4865e2be94af4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.4567a750d.0.tgz","fileCount":38,"integrity":"sha512-G/kqepWBwJft+dMbms56MS/JtGl5FSreWtUHlGfk1S035Gb/nmsXLpd25gHrTh+Fmfohcez315NylsW2cvhPCg==","signatures":[{"sig":"MEQCIGBznlM3DWYS5aNcWuIWv6dfQw/8wVX5nN/mkM7qAwrgAiAfY+sZUuloTSbLbM3F8vEhdAwixuXk9E6GL3CS2LB3tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVlYCRA9TVsSAnZWagAAP+IQAJBYiPUTapRAaqo2/27D\nGxlb+f9yr5Hl+aJvHnyKWPTZOcYzxtqX/3gFjoLVvQzumGmMSLVHA0m+GbG1\nTTcvnCz1zsK4qW+IP1Eij9YqOZzJrTwxQ2FJ2YhlEvTwWAcNTF2zmvOA0o7l\nTNi6pO9+WoulYzI3xNlqm5pFhAlTJyGSmBi9klXFEls+8vKaD+9VaPi/Zf2w\nz59rDk1Bz7m8BmNLOlFmwBZhS7FQUP8GbuIhgn1U4ALYqgtSXVjAJmEe4noK\n6k7EVoccn8GV6n8Wi4Cw+FoeoQ/ADJ4Uqi6HvVocXxhXyzTz3s7rrK0xLRPm\nB7EHajUWgVKWFtJZWHhvI2bFVSoVkS1TRw3H/xuYUpCr6Dadm0ZydqNh0+re\n/dFBr7SKbFlZJUZX1Jc46anHTz+lwNxe5mmie0SRuRxDxL2/7ARKSOQeZ00G\ni9jtXrppFKE4+RnirYQ40EvJegClQ86CX8/fZATxtFdG7wGyp0weu9yEOr/e\nXPXHqHD5ZW1CStC+ZGxPBVPs6BGfCn2tJwsEN0i9vAxeiuCFexympsP0dpua\nfOERTSi76SBgLZwjCDO+4pq+LXZvPlde1OnzFV3iF3AUods+NqR5QeZG0bFA\n3ZdZSDnJ5TwSghX9ZQGBGPKgvsKnYVhO7hebMs80R3VeoJWx04IRZivRaKCN\nNn3k\r\n=VZ5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/list":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/menu-surface":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.4567a750d.0_1616206167978_0.3878877971953225","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/menu","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321b8b1d49ca1f94a6510b4baafe399ba5843cc6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0cde52f5a.0.tgz","fileCount":38,"integrity":"sha512-opEzlSMr4qGEa6HBMNwA0kineQC+1p9W8vuODx9fIPqR7SprzudbxFGIF7hc7UZGmho5ccctn8TcKB/a8+65DA==","signatures":[{"sig":"MEYCIQD1Bt7UDPVRq5SbuGsmybDAlAHurhNWKiMwMctwnw0CAAIhAMwnoYG7ZgbQckCexx12Rvp8V78MSPosKPxRrtrR2bVU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTCICRA9TVsSAnZWagAA91UP/id5X5F39IM7UIY4gayg\n6jmJSkiIqYgB3djVNB0NAOlLQaKRTcGC7655ksqEztqZOS0soT6eEPpjP0gV\nDLYK+qGQplHZgPPp8wxzdfBbrVBkMyhythTpGhpLLMngMGTsPtse5qYSaT6W\nwh/043k8GZEG+EdkKWQWbKYpnfrvhoOA7ggJYmzF7qUYRC6REaYZjgvmhGb6\n4R52lVBDrHm9SQbPsj90NRq3W+PcXyguahI4HHIaXuEUB4/uku0f6upiauCp\nbow3QP0QcL82FB9Zxd4J+lvPcCnRk3Waqq02hrJQxxS6Rab72oHPgS+4roG0\nj/7swmJRMTrITJ2NgdT/4uCLHVEI2XFmsIQJjjROGGEA5Fjfg3Vk0c9mBLsu\nuRtVn8NaBckTQ+kx3IM7ht/483L6H4PeJw9aDKSwcpeoLT6GOqQvXA2AcSYu\n2Le5e+9jX8fIBZlKCEIZbyC3zuYUYU52cDW0HPbQfxbEwA6Yz4NKHW86GUZ4\nGh0x3yMwMvnLkRaU6Vnw0L8Gu5FbhzR5KVoOYHXu3fruUjwDlhWmjUGy63rI\nUFsTfPd3PyvayGPZYrob4nJSJ7o9bOrsiclCTcwnepehQA8tPRZDrq897sIJ\nNQduwirZco49JKMm07aYA92qhrlQ/P43ioWi/1Za8HCzHdNkyRRPiMKxa5Wy\n89qu\r\n=Dn0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/list":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/menu-surface":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0cde52f5a.0_1616457864243_0.3451599732995103","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/menu","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18f1e0f52885c3345b1fd6e4effbfc58dc48992a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.48f4b67fb.0.tgz","fileCount":38,"integrity":"sha512-gRtgoaw1mp51e+aFHpoaLGnJPsfC/VKrxw3MA1BLc0evt0ABFBY/TSQCw0Icma0eC+AZ45RORSuinCiK6VcX/w==","signatures":[{"sig":"MEUCIQCHlj8zqBs3pAADt6da/0zSngZfTwxBKkZN+rWFS3w3pAIgAYoWuN2wBKV0KagRADM2cy2U5ffPxMzdZmRQLEn6OJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkfLCRA9TVsSAnZWagAAov8P/RiSxtVhcbsqAA0kRiA/\nQwvQ7l/LK8MlI6OMkue6f+eEK2X2d8bphThNJxGMwLdrt237BqxuQoj9A9TU\nN1pGe0iwTkNWFj7VDf7jq1YQSh1QVTiqVvNjfua8jAgssN/L8uK2Rd8KK7Ee\n/ihCZAnmjBHjF5uDp/m0+2ZMtAWHO8oUqmhrWVJnN7GB2E0GOhZ+a+eNGpIJ\ncVk+ch8azBIgUhPwcpLzo1EI9yqoELeCfXh8NijRyhU5ja8HcTF4TAyl63yn\nxl5PdfMoYq0raRAvu4BU06NlPsuE2uCx4EilRJ/H7p2nBxaHMJLdPyuBpHun\nUDc4fKCdHCYROVLct/COM7ONvamSu/WkW2Ufomp3lCVsiYW/PPiDg7lcnzrm\n8PZyREagOhWlyqJ1TN4B5psd0b+ltQA51tLl1z7QJQbefdmLWDGkNdwjljAE\n5obwjirU93Zjt0E6mKykTxu5LpY0BWSBIL7PMI9YK7Gk1EwJht0YW01McX7v\nQOs8w0zWWRa18wHuAfKqHaba5NYO9Nt90GGGUPqRJW+eLR4OOwq64zh8rXwm\nT9155n1qOfdOSabGeezSgPFue/Ivm8mz9D9rKhIOAAPWp9XZU1mmup0LeUGm\nRwTipJIFxrq/7HtJJdfspb8AG+g5tq0ucrBZDGz1X+aDtZOHoaGZ3OIzRSBA\njHPx\r\n=TiVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/list":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/menu-surface":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.48f4b67fb.0_1616529355297_0.35910829434444635","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/menu","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3d12d6daa62124b8e9cbcae4c05ddd6534592c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0b8cff734.0.tgz","fileCount":38,"integrity":"sha512-ZsNnTACPw6Q/Apudfp1z0sFMQ5lckT7arLB7fB/WzWv6xLO4/eg0RnlVG9Bg21ZjKdx00bSEtQhs5D0I1K6duw==","signatures":[{"sig":"MEQCIFVVsnvnJuzHzlch/qQoIc+mhURQQBm7XH5ukHwK1zQJAiAe93ClRMfbhFv7KnBjOFkVW8lxmHRRSomo+ls2Eyka/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkoxCRA9TVsSAnZWagAAUM4P/2p0/JYyUmRzWJoVM/jZ\niHThgml6gyZ02BuU5a9r/KIH8W8kJedZMbfyrq3pyBLxrplkR2SF/8Q0GzV6\ndYa1TB0p2uwGxXUPldN9JHLsgUDNuoQLU6+qEDAE3ZjA88WzQZ0RSaxAMhwQ\n5r/r9JgxyBvOoFMs7rbpIiO0aKqt13Q1vHDEnSWGbpcl3+r8qzLAHCV0Er9d\nCjiIgkQT+Raw6w/+faWAnVl8JelVUOp1LniZTf4irnoCj0s49bG0SDP0RGyi\nGvKGtyz8RxMZK3AQBI9bxvHmGsW1Z7lLOTtVX0iJtSQekbcBoX2ukBh1wtvY\n54zF+NREeMga+K6HQiZjLTBdf91V6jeMAgJ9pGLrwskzxWSVMGHg09SGxKfZ\n198drPUl9P7pz5mRVA9bkma1ctWJppPpnmssJThzN1bCgDTgaomOfFTRtv8Z\nWwb6CV6s/GeTYXq4YMMoOt2GJ/Z1kqrM/Wev38zJIWpm+heO8bal0HO2gIzN\na94zZ8M4+R2tkLHXzrxmFQgzVdaVPHSXY4aUbCrIuhwsl68kEizGCIsPGqFU\n8U6ab4DM01CKe5BBTVFwBs03/MU1PaZP7tKN/Gdb7DO2jKaE5UGv1tdblWvx\ngAWevAfaUnBALsBe7aKq/5YsyIvHOop7KxcII3yvV1L6OgnuLwZw6T/Q7DbZ\n3z2s\r\n=cHWz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/list":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/menu-surface":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0b8cff734.0_1616529969177_0.7426506100754198","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/menu","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5927efd97f778da4f913a726a93d072b7172d1a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.8943b991f.0.tgz","fileCount":38,"integrity":"sha512-bgEJTRmrYb4I7cBRsMc8+BDRDZckO87kyIfWm6+wWygQegY/K20MzKXo7fch/9we90lRDSIVMuz44LUqIc12sg==","signatures":[{"sig":"MEYCIQD7rREUDu+Ef6koLhhZ1kWV1YnvWcmpFeExZxljLtsflgIhAP5ZSlWacPvoBx9+mWntcqACdYb52rcHeN9QVm4wX1CY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWlAUCRA9TVsSAnZWagAAPXYP/38GO0hnmKk2AGxA6w9V\n69Cw/PDtw1RyVnYVCxDmcOJH7B+iSZTiYLPnmqRfyKpYLDYOasElgDYc+FIK\nbH13+6r490W4UJxEWm5V4eLl1TyL5jaYQUW9LxYVbv0v16jaTM8Sr+RmirUn\nDCtsY6++J4MNUQOF0KDLYX7phv3HvMRfI55yi9JfT6EGqS8I1AZ1jMCZEKnx\nRmRlRGVb5mfiL31QcfT2uAsXsj5A4hPuYGRvNxTJfJHQAtigkxCm+u4i7Z9a\nfCeAv8/j8c7/oh5A0aZYsxgQBqYi7EahTo46T+dSTyzvBcL3q7JLAOWzxXtZ\npnxz4WS6MP4m/csgkIzhqRph+SpMgQL/L0l9raanOKwI4+6mwflKUO0z6Qa7\nV0Se0jKthJW1UnoWH6s7QGId6mNfQQvIwf9EctFkXE+GkkkheHPBdd/8aXYH\n3AIuq36EYqpgxstekBoh8rXUiayBSmeOc+cWGoanfU+cwG5Cg8boXbnsUX0R\nwPEqB6o1NXLniCK/s4IrpUv3UAZ0FaSFSS1H7r2Rki4hTtpg1znq+32T61/j\nm7xU6CwcoTA9DG2Hk7a20jjKfEGrws/hCDM2rpBYHkLDAZ5/Fai42PMMJyho\nwPmacxACg3pa8oVP54ANP+1xwzG1dRGU3yXej4MtDNNcsnwljpCJTLgP6d5s\nlgK0\r\n=gtS2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/list":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/menu-surface":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.8943b991f.0_1616531475692_0.0676349014430706","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/menu","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b598276e1a67dae0d8164dce53a5c78ca41d3df8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.3955d8d3d.0.tgz","fileCount":38,"integrity":"sha512-fkxLvsu79neFZBgjg3iVLIvP7ixst2YLBMBZWTbG6N1ObSoMZsE2S6xavgCXJsIJ+804PM3Mj6AjJq83Hy7uRA==","signatures":[{"sig":"MEUCIQC4lsQanvMBV53uuFYsrmq4bNvSOUhQT8d+94VdH9vxbgIgIfSZ9HIzxPMtGt7fzbpj8wMwljVOmOUwIXcKwYTUUEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5B0CRA9TVsSAnZWagAAqZoP/iLVepw7Of/9Ipltb2U1\nJKdbk64aJWnA5AqYdnDz3FiJUaXSpiQpTKSuCxJieDgBz2R4haEz3Gi3PHB0\nc8D2lJX3q1Ny7W0ZJxypygabNsSkyqOX9zoh3E7SIPTFHfsb6a0hXmoyBebm\nhHgEpz/gr9+w+Ay9uht0QhpMtRYQy1yz68Kut3d2pHjuKQU+RMALusJFiioI\ncRCHtib4bgdtFM0X7270PlM22u9EHaGZ/r7owzTI1sm1yfy2viq+JRGmgJ9I\nBtRXAMge4Js6Fpikl9Aln3Fns3U+QNygZp0CMwW9wnY5pTgQUvc8YDfornvQ\nGVXmZ5vG5KC8wAUM6WxbQ7ym9HgSgH5w6tTf704TgsBnlqvW31ElsBHs4z7L\nIRJBg1Ze7Qyi1zkNoQyDfOdbnBXGdC5wi8Smlp9Zh29/4+MmJNUy+eCZWNgn\nwBKtXDFgJjwIq/1cHXdNSkstZLuGAi4Dyuz7onHcCdbAWkx3hqZF2wLepIQ5\n3eRD7TeeZAQj4eP4GIX4t2KCPmKsoU0taxpJ2OGcfUO8yRThHchWFJRXlgxT\n+dqhCGN8blj0q4a3aRH/UYCzzGIqthVksnxTB8RbUksPaXu097CGnZEOelj7\nNyl+VltDltshBmx31au7kg0meVJswhTfph1AsJaf5ymgovHlwOQTkZHIpzkr\nOJT1\r\n=tlg9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/list":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/menu-surface":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.3955d8d3d.0_1616613491410_0.9054795602387384","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/menu","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9cf0d81de164544855817837fdcda40fd8495e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.23ea2d85e.0.tgz","fileCount":38,"integrity":"sha512-DDSCUPzMNDNx3ymBmhIn92e530SUow1jo6T6C0TvstMPf6X7jRTuMaRnJiN7VYidTy41RoG2j0eIjakhvXt7pA==","signatures":[{"sig":"MEQCIDrSUBKaEYXvxh8ZpqJyMkkay7RGP9XrrU45aiq0vd4LAiBgDM+a/TN+LJ5brMHqcfiUxS5Yph1BYbs0SvjrpILW3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmdCRA9TVsSAnZWagAAsqYP/i/eDeVjZ03ZSKJvlK6s\ngcI/kGWqSl3iarTIKAJmPOyk9XJTVj2kU/zcG4nJssZbQWTtptcNVBDDTAFa\nzpf0Xlm4AetzVFxJYzE+6x6GPodGLw7lKsh3uHWMjZ7p2Abm1Y8WD+ja/kDW\nOrHz12qzYH541j0D3bvbXWYZVWVU6xDI4jMYcIyysOFr0zyZd006k8alEeXr\nWFb1uTihhwMfj5zicfEE7QIAVQlhXNrX1rFSnGyxQffQgSkeQp2zMsf/53vj\nafE8QiKa4UHjltBaSzRd7zu7UH9a1Rotp0mNGw2UXyj/+jYnendLkxF40o/g\nZVe1tpYNGQ3NQWRDpC0dXY0hcI+ia32WkVaeO4o2ncQIuc6KAW/HhFsN8DwB\nREIZnZUPi1+0EQCrb6pJSKgiaqJHrscx3VFf1NKd0WeKNOshNdm3halOrdbO\ntLSMq64LOlbFajsr9gPyggjvKjRKjqo1Mdliys2k263qN4YUAeC17zy1mJcB\nLGPiv1AaT6cvy4ce4QlYMPCHk8Yz4jfi0GlEjD54BsQysw4fpPfLPmE30tAP\nkw9XoGyFd29vUZLqSKqwE0V9ORZXFPX4P/e6txTyR3jeRCb3ZOf3Xfw29o6U\npqgv5mrhnyfa05GZJrI4FVPVUlt12RPVk0ZnhJsUntWhsKs+GmCo8zAeTj3F\nSmgY\r\n=U7lX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/list":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/menu-surface":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.23ea2d85e.0_1616693660962_0.406020529443716","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/menu","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed364ec42d0d28284098dbc1ea8b1a2b979c5ebd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.4ceb42220.0.tgz","fileCount":38,"integrity":"sha512-OgzeC1IJX1aFMW5pEgGoL69/E7w50eTyqOcJ2IPmeD9xAy7BcY63blmxBLuGnXo9ZR9mWBq0TE3rl8GcJPK86Q==","signatures":[{"sig":"MEUCIQCKR7S5BUzz7xovL6vOFM5DU/g6VP5JIET1wO4Xrn+DbAIgF66DjcBreLjQ6Jn+AcdWuRjoZ5v7YhmklsdW8AW5jG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZROCRA9TVsSAnZWagAAX/0P/0OdN0UwIucuT25wA7dX\narym9BAHTlJacjzggOPciSVnh4a3Donma2SRspNKQpFhdSZqP/Xco3Uvvpen\ny+obDZ7orOs95+B3+CUi2DnT7Pa8FBI77K00mp30PVODT459/HAXyzOb6FFf\naHrLAypjcD8ulTBygezeMcKvhhpPoP+yPgUm7ZLP+J0J9pkmFTHXLRxvpaC2\n9uRxVw6i5rtwCLaQdZS1i0Z4cY9mYET4YaVBkMIMNYBz4sQHU6yYO6TtmzDw\nVntOvyPnhMNE4tX72EOZ3cQ/Bd8bkr2CSUja+f/wlY2H2Q7nQDnsn/rbh6RE\nH/UIIVzYa0VK8GI1NtHKQB7yuyi1NT3XTjmNEkBSsw4BK6f8vcjzjYgjYrEp\nDxn2aRL+xhlf6vdFg2YftNJcaABpVDaftt7/dRUOR8upBp0ZTp8zUnV7/Tr/\ns9DNTKXmr53fOnrTEWxuChdhHv/5TvQ2EXF67F1X0yJQrciTcatGc2kgeSHI\nFbBImmjdcBGASaN89NLjiD8TEzkqtc5xhMUnf9/YpRNYQJjOfzNYSn3AwR9q\nf0PbD0lGtvnuZn2WwyUpgLGYkSs5bu8SMOEtz1c/K9jKYPhS6wG/T+OiF77Z\nu38/EHsCxPHvtVKAVMQpFaGq4mmG3PqxfcuHMXFAtbxeSmcqIjnWQPZSH7qR\nlW3G\r\n=SpUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/list":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/menu-surface":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.4ceb42220.0_1616745549721_0.5186533481276354","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/menu","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178715c5ff0da53cd3f3ac6a738a9f3483d872c1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.dc9c84023.0.tgz","fileCount":38,"integrity":"sha512-vegNMXb+v6TLnUxNxXZ9c3MSk0vX1uBhxL2yvDtEGTPQS2Fl9Pydb8ezS2bxqIaYn1GtaLzL4tEY+a34kw1Z+Q==","signatures":[{"sig":"MEYCIQDJ8VOY5g5bZPdj9Pje8sGSK6cj6qQRPZal2FvMx8H1BQIhAJAEsHq9i9xhXT9mFF35zv5DNvETM5aEJKw98keShDJH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2TKCRA9TVsSAnZWagAAr7YP/2ooNDqzz50Lp4xtCWcL\nrmtu4sIFpMyoO4ghjFiuvXufQyVpbCpO6GudAEURB6a2vEjVCOE7FpEAL2Pp\nDcjU5QduEvk7Z6FS94GZLzQJpEqs1yFatE6NQH17iakzYkPVdDFTsC4+0u/A\nPSXFhE6GhS+Fb407UZ48UbrRcOwnktpeDmQQomAqKqj10KSbpZw+/H5XpTYc\nvMnSHDGeekVCcWwbOfyLCseom7fXXpzX06dn31uIsyX9LuH6g2o2rZ0YhtJb\n9/Vu7r9iIbXHWAcjYLNU9xdKIYYJHo9e81a1DJ0ypOc9r6ax9cwkNvDdEeD1\nh5EYHm+eQSDOUce2/Mso9Hd/0+4lS+a5zdF5wK6sBUaSFHr1ZRL/xwt/2gJO\ndj86hicVTCJNzrCELp/g3Yq8r4yhTgY81l1d6JFfB5mHsm8U0vbJZTDXJ4JH\nWnnVYp6dNnQA7UilyStdvsklFX2BlLc2YeDkor6HYnceC0Td1NshbIB4nY6t\nx2z8ZEO0WDJREe7699uiY+mHoFVTWmOWRmuTNjkjCD8B8LodTBp+ACssmUSH\nHMyk14emxc8tcCAx9LCfjlyBZ8n8iqRzifxUlrMY6DcErMgAV/r9ClIMng9B\n5bOqH6l4L9TwgjySi7hBjMiQotyyXUwkhMibIvADNDj5Bx7lasQQl8EOfQ/b\nEwhY\r\n=nmzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/list":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/menu-surface":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.dc9c84023.0_1617126601654_0.024940902036618473","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/menu","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a3e3585822fbe4d398f5f9dfea4f3eae39da646","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.56fc26962.0.tgz","fileCount":38,"integrity":"sha512-St8SX00AKnpOqRFC2ZGjNlaa1Q16bf+yowdg6sXl5JqkJAim7NpfR5a/Z1lKMb93QExXB9tambeyn5kEfR3mJA==","signatures":[{"sig":"MEYCIQCf4jDYclQnt7XDTQg0wJn2qNkVZLEQKNXU//3MhTg4QgIhAKvGuOYhSMVMjxgT4TYhfW1Rqkz54UL2ho2prNw5Kq8p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CwCRA9TVsSAnZWagAAXYsQAINr4Eut3bOtkyqzyvhT\nvow9SWv0flMwpX5d8SORVBnRlxSABXl2d92Nbmx7tN59z647nGZrj4JOWf2p\nAmb0ptQSyNSDa9q1+oQOxjv19VfIqhoDJlGP8hJ3sRLX/VHNn7xRQmCYnVoG\nzWvkBHoabpIhR7U6enQVDZ5Hlx6i+PywRzDaoH7mahZ/UivPsh9WBTOmBJ1S\nPcqoMVmNYhu+bapptpVUdH+d7kEEADeGUIknFsTCpqtB+i2SB8l5HrQ1EN7R\nq/DxA8OqutKOXZbajciIyjxc97VaIui/XGIjhyV+N8TketNXwPIUJbk2JAQs\nzIhAvCK77pEdeqevzirVmi1UFm8DaS9rPCbpIDW9GS89r/d2M/LMrqnfP5/U\nXwQaQER2a+t2/kIIyecqsZphT9OlUhu0VC5jimZ0hAbxsPqT6jpMN9gj0jcI\nhPIgviigH2OOqXhpWx7TQrJjqQRhi9HHZcZzRsBma/zzxs6nBucqAN102ObW\nHww+4HLwXuLCS2K+yKqysr2EsNmDSo3YbYE7bIok29VdW3H2dmZ0b4QepaOm\naeC+FGck5olXX0tU+X5DLhwCwrBEsdxoameJT9rVRzKa70iRD0CgFVjDnT3j\nl6yBUXH7Eixg37Yju24OyBrOEOranJ0C0AOPNzqTVGQf6grx8VVyhOIksn6W\nERS0\r\n=OGPq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/list":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/menu-surface":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.56fc26962.0_1617150128557_0.7456242082479225","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/menu","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87c969424e6fe04ccebbd10259f146ac7c71f71b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.bc318250e.0.tgz","fileCount":38,"integrity":"sha512-wrzkQQL5C/fXmKj2tYu5fJuKxn0umC1Rzb/rmzeBCTizxXaT07NIZ1CruRqmlymzrsmaVVljFUz4v5lXqcjjhA==","signatures":[{"sig":"MEQCIBASK26pLmJ1mOF4CFwbWYRB7eFH/3LLT/uqE6DUchyBAiBEWdqUVZ6fbcwVdPrWDUtQlWOCWPmjnNaHXXdd8BevFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9HKCRA9TVsSAnZWagAAwjAP/jTw9/zauQeAapxDG7bI\nK6W5i5zAfNKF6c3vUo1HAVkNpyT+qsIUJIlNIvRKQ+L1gjC5zlL94NsD/dWn\n+YOFtyrdZ6HMugBKUPVUUe+MVuYCQn0PTuL1J6FZ6SW4vNNjYgeuuiHIpxPz\neqLKYHKWe4GoXG0v56su6Fpa3PmyywDGXPIy+cs0uYn04CbI6157HPrOuNUU\nprmPBCt0t2UnHpsidNI5dYvIi0F+o5f6AL5h9O4bueU1Q9tcT+gwHCKU2gJn\nnTKZi64/W7WxemkF1Mcqno4PXcEhSNANhSjgbATx7forZ92mVa0JR7CatAS/\nELvn3HWDSmMxJjGokuN6p2JL0qvl2LSvmn1RXAK/j2vBWBHuJyexn+WHxK7r\ndEk9zjZeCoGOyXzf/4zy1Bf6bjmpgwVI3eDCY6zt1eJlytOvhjfhQdSBo6hK\n3rwonPFQPif/ap8kkuf6Kqa9lDY/qID3A5Kbr2J5t7l+hY7nqBlq+BUiG9x+\n8DFn3BmfNCaOuxwFZK53tYJmmtnQdKlR9v71KvMX2nKCYW6V6g+MC5pKm0zk\nFfoDkmZkbon8CgdbfC9xSU4fTv7nIZELTf3NDX60whAaBOeQvU2ZnZp/Fc1l\nkTxPntamRQXaC75d+lrCz2Tc5x5hQ6ttjqm9RfVOxhc+zMGk4FFid0k2yQJq\nLapc\r\n=Rw70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/list":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/menu-surface":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.bc318250e.0_1617154505673_0.4073405216103878","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/menu","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eccb3c58f8d2811a620fa948a1d2a5e436859d74","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.edaee19aa.0.tgz","fileCount":38,"integrity":"sha512-xhwu9MZ/1odX3zzy7zXPk8XlJfogWPpF6m9B5RPG48C1L3vtxAV9MAtAepxF/Ofsw14rGqZqYMzBGTFFlYzrVw==","signatures":[{"sig":"MEYCIQDENde/UAAk0gMCGEY2EWSjeUWnK7y7JU+VKOciHny7zgIhALpYpF19Kkx0GkIrE8jEl6b5BpofgLQ3KHy8gm7BnV2c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qwCRA9TVsSAnZWagAA+LIQAJwctEkXTY1X5O8UA0hk\n1jLUx+UZAOoJyrqMxyteLaSUF31wwUODY5VWEhRF4hbvUQCUoTqWZ6WHpMwK\nImVVU+iaMwmLm3+PdaxLSD4axavVTpIUkSGvYxD7WkswG7J9wnDbqeazkBIl\nk7+1sONYAx4FtYwk+ldqfWUIFB5F3MQpWZ7ZnRiRewCJSjL4T3f/ehXNNYDI\nHcBdoD4x1tr2xKGwnV7FJexFS+pSEzgziA0gEocIzCVl+sa0CU85cOtO94HN\nN4J8uyKMn2JNgyKM2uQKRv0N+IR8cxt1bZh4rI8BFYFv1c+IH/kqEaAgM/1K\nLoo0a0o02kPRUqR2gh2FGVfyGOBKlA7bOvD5TkK8z5lB6qBE22dXgaQddbHs\nYUUB1BGcSv9qk/dbEWpGPUqi70PxWrX0M9+m4rW5XGPJ2hTuYfla6SOyQIyr\nnxIPFUkC6HtxznZLYcNYSt9XMMVgM+aTw7dR18FM8sZAaxDTAmWPokmFiU71\nMmTUNLw+YsdO6sp2Hlp/YWBFaVE+ru8b318dr1FTQSHXU0VhrLvAyEAKW6RU\nM6qrkSvYAD6bJpeBZtTYcdw66lVwg/EQ0SeYQY3nF678Abi51jY97h/b0tNU\nJfaVtUNptQzZmDaveEVxJitzN9hGbVGCTphH40iioGuFE90r2XgnqurrtmBd\nIoi7\r\n=FjQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/list":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/menu-surface":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.edaee19aa.0_1617156784371_0.015501584790597489","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/menu","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6532332c04bf435c59eeb5cdb83511a178a4e67d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.24609b822.0.tgz","fileCount":38,"integrity":"sha512-t/QwVL0+l40IGzbeby+5+6ILNVamFmY63Jx7wcRgrFQoT0ZM0xnR9f9uSvbwAKFq9rln4fOuIB4mQFDb0E6WDg==","signatures":[{"sig":"MEQCIANMOeCtH2V6tgnJfXheJAjPKszfbSu1r4BWTh+7knb4AiAXU1LY7uV3XNRypz4O8z2JZOL1JbNg4+QNmfb5aiSxnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJxCRA9TVsSAnZWagAAegcP/0ddlo7l9wAjDao1gbyy\nV2vzCkv0TyKpWFEI8yREl2YuCK9VYvGhzwbxA0Ln01Lqrit3j8LfRuvpsNWe\nNh0KOWp1hTvEjYwjArfO9k1KfzEtZqzWFSH9t/BwZ5ekC1cliT4iW4dOJUoN\nKXGMkoODcw5Yw10jsqdK9YlYCCvVAUF/3M4b9jd5hjJr4xrVEEby7wQw584x\nPX3dxWwFp3J59JNF+UVK2gFdu8ayFNz+/3QL6acUBfnJlgSbdZLksdPYhJbt\ni7tEi+6cedzkbJZvbU0A9Nz9TUCszl7om1sEuqjmGreGSfOMnkAzQhOXIC1x\nLEpxzr84e9zDxwjN8EsD0enTYktI2WJhAyUCp+bCYt7Zer682c21U5URFlUp\nkPVwadb4+34T2qwGmDKoLztQB1eGrcy72kFlVrJTg+OXg0xJZ+CMFf/ymwPk\nDyBdTxq6Lt+uks/0OOzCCAokByRD+Tqi9eoJYT9inwthkkVnEIbsOphJ8spK\nlg5fmRX0jU9wkO2284wLuNeKT9MLyjVVlxoChCM1QDMPqlWeNoUsCrKj1Ly9\n1up8n1c/arKK+5u5YmIs//5VwZ2K0yoqIKSzgQsbnt+iEqEM+sV4ub8kGtg1\nyIcO7ZophWZaD/g63fvP+RjV0THqvrBBrsCdjdsHCdr5BiLd/L/PlCi4RHLo\n4JjH\r\n=fYrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/list":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/menu-surface":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.24609b822.0_1617224304846_0.2641633323500887","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/menu","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e633f8dc5b0d6f89e0f29806e40d2f27f0355a09","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":38,"integrity":"sha512-K1WIbZpkEfJN/Skzqb34ZxaQkBwlkOnhBe3M9KcNpMkzK7ZWt993t3bS2l+I0paSY58WqaL0Zp4DgVDK+M4QPw==","signatures":[{"sig":"MEUCIDGQ1ekxqs9+DoA7iIYi/3SUbSyEOAuf694fLP+0aAPIAiEAqtHJKFRlYpXUY8W6o28xxpp14nJgmA5yf4chxRfmiBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeGICRA9TVsSAnZWagAARGoP/1oB9YDNN8INaoe1KAan\n6jF+VFQxo/c58IpaVjAeARXtrm5aESb5zqNZUhBge1KE403sXZZyVRLCxhZt\ndxH4jDFzU9SHgSYOPCgbcksMwWEoLkY8NOoF9v97SnN6cKRxg+SIItq14WDn\ntnp/D+QJTFss7Bgl2QpVGJEmWJNh8BXWe77bzTnTnHgoo/FqMO4IWVAdJVt+\nR3ggQs3ePE6e0ruzn2vV3raBQxDGnYDy6bmOXaBHndUdz9NdOC/YVH8+/oVZ\n1NWqdcteZbB5n/NmCtZaGawTkZBvveFdVDY2TR1INH2bE5qkVUWsg+Xy6a7f\nqp6OQCHA9iD/riHer8qr9I3I+N5YhpzshCjfarg49jF0DknHmoH+csAsNvNA\ni5roilnmXU/IUdYsrhmafBkMYws68j7oYjd24G22fkypkz4QvOXyGpsTzJyH\n7FVUEb1qbBjXX7EQ+JbZkX/RoEEE1rhooat9GoJAkpiomBA95K63WfYzuyEV\nXzPfWrULakOakK1bFWuxek9IOR0NrfJG/Lyki67kMor2kPmnL7VVcu3WQLsG\n3yBjh+cJl/McqzCJBHGj9oYcD2PBWG2WzBE2AEKO+GKqkljno+uvTXYra1cE\n0NGAJ//Dp5mnFAtvjXUOFs/puRCuR5CxCeEjr80wBuwpMR4NU8A7sntEM7jt\nHA8I\r\n=MJyA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/list":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/menu-surface":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.b6cddc2b7.0_1617289607629_0.9960805338195784","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/menu","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ca386ad8f6511988fdca1d208df2063e9d01b4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.94937c78c.0.tgz","fileCount":38,"integrity":"sha512-HEP9YMXEeVxpU1y7E55sTFOY3a/uqiLiOUosPNGWSOtiwnrdutj1rXzICfvZRcMbAxtCrX9CHGHH/O7Xex8xnw==","signatures":[{"sig":"MEUCIDge9tmzjjmso9Y3ULOER1dI4V29kGrv4Zn0/vtYYIMuAiEAkz5kp5avo/yFe2OObhTe4sC8p3wXeiwqM1mX1C/q8z4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTcCRA9TVsSAnZWagAAegAP/iqop5vlYNvzn3fF/WzJ\nJOVK2+ahX/RBslh9l2DmiohfjJRpw4+rNgMsWwbZSt7msEcY7t7QRSTSRLcO\nd4oDcatEJ8grTdoxFqB9EwcRsP+LkpLIcaadLoWUokcMbF5vkZPofIxbE/Fb\nN+hLEOo/LhwSdav5HTpQlpUsq6C39jEGCWnM5LukzQ2+8D8e3yhw4f1FUQJE\nO/byJuGYG2gdd4KS7iLNDUBgiMbMSSB8O6YnftIe7IjPk3v0SITcuS5edo32\ni2+9msmjGoOidH/9npbSwNKBmOCBQh1HM5QSs0WcEelyUaaz5knyiIp1o81Y\nx1CQT5Pz8w2mErMx6QxtMBRmiBJwTm+FXu7kiyZG/o5Ig7IOPWumuC7Qdtqm\n97c1bA4xmc00NKGUQBB9gpRQdPxdQBDIbmBQdr85ndcY+OyUI2NeczAtv3qH\nZJE+L5xyZddRNk/IZOwLAHf67b8V4uf4TPp7zsHShQ0UviAtPizSZHhiwOg9\ndUBCxXjYmT4/LcyOhNyz/GAEBLqXO2MnnsJhMuAmOCm4gEAGiuwdkoK9kd6o\n4xrQRbebPhlyhh6o7cSjA7c5j18iS1VWskWm++pU6+/AugaP5AtQeRTbUa2q\nd+7jX+wfeO796qC7X6QTQQbyPEWmVkYQ05S3aRIbf3EwYpYcwWJSasLwdLDv\nunOY\r\n=BLas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/list":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/menu-surface":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.94937c78c.0_1617310939631_0.04585113410662345","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/menu","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca95e7f533bc220f809f784549d922afc240bbc5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.e7202cb57.0.tgz","fileCount":38,"integrity":"sha512-5qZSFcgv3KRNyoIkLGUTfcQCMsh3n8y9YCzWyFlh09qLgkkVYByGfnmc6OlYXdZ6Ffo2zquDVbim7/8o8So8fw==","signatures":[{"sig":"MEUCIHoXXg0ppy50O5ozkuXgcchveP6N81ldtiPBwGvywjHKAiEAnMvM3iaoHf4sFvMAA65MQiHSmWh79+ZjGj0oclo4MaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk3FCRA9TVsSAnZWagAABwIP/2tUsBpBNl6yOxCoiSnW\npVBo3nV0vZJT3JhfBsGf3Bozt+hQ3l30BLUQxJu4HfoTTwHFQZ0wSZ6XpFD1\n5oM58NtHPTL/RQ6DZ31zLX2ZYkbgKUmKNWBsJcK+Z47s/DX86TL0rte0zTTF\ndHX4YCTcvDTeOj95Edy9Oho4zPhJzgOrg/icUfFGyZOol4LjDHcPV0vEhDic\n2mqzLUN7fRZCq+3+id8u4PaAkbrP3dkLb4dFoWpe3LAxE2Whdk01DQeUvDvv\nlKKIv/Sf5WqdBufZK2Nx6IMmGrLZZdrOyAuWuvlidsqaoGp3R5iDcJbbNsRd\npgt/Q8rbFnKds0YzCbYuS6iu+gRRJJ3tfiFjyq9mxYQQE+r80tyBDOSE5EJn\neclNOTbBTtZDKBpUT1I0HqAeqGeciDc3dUo3zJ9vBDelDfngsKMtqZOlb3oE\n6DTeaOb+zoUR2UtfIZTCAPSSZRiZT/P/o4yLlucRVfl6Dy0DP1oQSSuw67gQ\nC0Mkoy2mWJg5KTqYbcZr5F7y0bACGNGPNYWk9TOP7iz/IkdcdivnoEvcmG1f\nhEBCmhpvbtogQ+sX0CcuTYSe/uMjcX3Y+N5AUrkv+3abyuAjN300Z+CJAlIR\nLWslLW0yHP1cYFs/49qOqasK0iQTli341mRFdvgc81YMmVqkEaZNr/XXAV7d\nZCr3\r\n=5QiB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/list":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/menu-surface":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.e7202cb57.0_1617317316756_0.3922980070752988","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/menu","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ff3a37e31d85103094a717ace769b7d96882ff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.1f636b205.0.tgz","fileCount":38,"integrity":"sha512-LNnT4mvNs39Y47cn5F6iDZvNHdrIkyUJkDuABUXn0qgzdB1Rl5HVwwfkooS3HbI9vTlrKebunFM7bLg0G6OQ9w==","signatures":[{"sig":"MEQCIFYGEL5U56c3S8DqLH/Vdggxyzr6S0t4oH/EqiCEA9zyAiB883R5naJQVKEC/EfVNugo2MTB54JowiGGVGw6qj4LSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5ncCRA9TVsSAnZWagAAv8sP/idGwx6ud9nlwCencoJS\nk0H91dmMe2ySapYq8eKB5HvVJdepJoDbGrcG0MhrYLdIA9Bf+T+gTPPlD966\nRuLqNkrcvBQjsGgEIETJu3F+vJW2VOoHao7sKO7Fw9ZNSR9Vv0PNK3f9JdYb\nwCMLzmPwt7NIlTZiwTLjhxFuFZmWLg87ea3bNTFqRz64NXBdAeOJMXNNJZdZ\nynbazwkZI8TnhCJUrA9GOQ0xFrtLqNYdBvDCfpWT2H4YzxHW8MZf/LJWLmbo\nUIKqYjKimSh0go+Q8Jo0M5IjyKQyIXkcYQbydIohJFVjdt4zVsyplwPGZJB6\nyX2H7nJoYEFoSOV0meeF0cVC/fdpCbHVIkKYsxSlcjI0Cfk9T1Wq81HtUGoE\nSrxvoRg8A+Meu/i+gzueyPuCujNIVd+W4unzlQGJeaGrYzvdyNUJkF4VNzjz\n6OQqgD321tdaTiDPyHtNScbQaMBDndVrg9jfJhw52eT4NgHyGeiSEF/1Kwt+\nkRu333TFP95H9cMHYwnVV4E1x+Db62e3OgW7PvPXqMy78tiLo95SirEzN70I\n2uaEEULcwNqSOP5EGjLPw1u/zmgHQ0+JjCwNykfGW6Pp1AJGNtRg3alx93ek\nlqowzRvPElb/yB8RP7+V7OiUFFoQS/GKwahSMJjpSJJWtNXSKxFEyJbgY2WW\n46kR\r\n=36Wo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/list":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/menu-surface":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.1f636b205.0_1617402332148_0.04438674270731391","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/menu","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bde8f7c28ccb0712483c6fefa4fb42d76ebd94c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.94f50b260.0.tgz","fileCount":38,"integrity":"sha512-ui85/SYLrWr+3R6bKxjjLa6NmpNZWcqXrFzitOg3ps2wYkg9IqUozVJ71TWoxyvdCIO0wR9NKV0hRY0VB8OPcg==","signatures":[{"sig":"MEUCIEJ6gt5gt3BCcVd7dWLEyvhe2535Bp0XRk8iS75URspmAiEAuIEpx4ncRX5hNk/gumPb2bzAssQsMZT49IkJqUJyjjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayd8CRA9TVsSAnZWagAABDkP/2o5tqqq4Pxxvdx9NbMK\nTNqE3VvO/fleTdLZDxaWH+hMXV78piD53XNOp5xl1uAHxeXwkT/zTm5qXnoP\nyAXaS2+tGYhVBLBYK8C1RQ+T38BBgaZXfQqETv0+vy+UGD9VxIYDWvFNs6E4\nsIEgR9uZVsZvbiHOKUuz/RsjW/TEAHaeIdtVeHESCvzUKDAUnInR5cs217fG\ndyhtab1yhoBId7oDwyxh6v6UJ94WYglaFqfQoDDE4Kr8st5/FAsDR/gslxD2\nP0ypIZ9EDJRV8H8mQ3DSJhQmc0OC+aCxhqjCxkHUBxT27acxEoGxYe6uIFjE\npDaEnBY05COMVlZ1DDR1L0P53fiWI+LN0A3xBSbZ5V90rdb6TCZ2e+02hv5W\nB1ffkzE9LsDZABGg8KHKP6buEexQjXUJTj/W/6mRFPY+MaeWuOvEKkF76lXo\nWpIWBCqIPlJzdnN/hz40cpjAtdWbkaS9X2DtjtwkQyTDOQSyI25F+ujwPpVG\n8Dop+RHEJVbOf0JZnoZV2c380H4w2RgYQvWfmTtYIHPDSZiVlVlIOeQYEsBS\nuxj9Z2VyVvMBZdhU+3zOtRDjlDoLUyQirr67QgwfEvua0zqEyNAhvYlfDheR\n7llzAEDb3S6Lo4X26p8eo7E8HPYt0GADQgy9ppD/gsI/08WnqSoYb/vJcxK5\nD7bR\r\n=RsxF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/list":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/menu-surface":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.94f50b260.0_1617635196339_0.22032340245664406","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/menu","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b567c65b07ed25b3c76f1249afefb78457d39ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.a4009b80a.0.tgz","fileCount":38,"integrity":"sha512-SS8SPEWcl40VNur0+bQub424re8cMbQPwhPnp9tIDvjE1VRt37Uhm/o9G0cAZ6XPdm9wJpQVCWq0DixtEvtVWg==","signatures":[{"sig":"MEUCIHHOy0ZIO7vDe7gzWwsTsURb4PCPtA1LYPA0XTJBF+wpAiEAmvnywLMKtDa5Xxhv0JpO5F/NqmzwfQDj8qJKPN1TVtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jeCRA9TVsSAnZWagAAo0YP/Ah6FI6LRyaVzk4Vtw3C\nX/K5UsXIzfz8/JaNuB34hnflTOB+/1ar9b8tCDLPfN8XzXbX0XyXHtWRVK0L\nnSykDmtnYdJmjfmCcVwwkcO9YXVAGKhETEdg72hn36kMSOys46sEpxePad6l\nQ1Q9vTQvMthGFUK8U3FnF2yT0c4+U6p5+UvurJngUBcPtX1liKCF5Wh1Svwr\n9uChdnnJj9nVYFKd+k8W9/2bdkoKgCC1FZfc3K5AKtflc7VwUGpyTmqJuKl1\nX2CEyLzQNO+2baExMP8gSiY6d3EyLnRzA1qqC1bvfbEIiI+v1RQqRGkPHMm0\nbvbteflezEBybNF27yn7oEDv4K1Wlm9OfLG3HIhvXv7a14EZp6kqdafdA2Qt\nVLebMNai2UOt7BslMtEaMbokf+4+fyyUbHWfXre8esO7VzcxL0IpYCO0L1mZ\n54pTPbbZ5B8Zswy8PYbGsCd+VxiGcMxNJ6xyiamby2EZbrLZXBy6kfE7P5Yr\n3e0ZrJXTWCr8tCBYbXGYcoCbqP52avF5aKa4wGmBy8x0A9wiOha6VvtxYla1\nXH/dqzkjU+WK0xtLlys7VMZ7rqqOSRT8Y7/nQe0n7b9wLR0X5VcUpG340R5e\ncBg/ayKssZqvVpw0mp1DBO0ir/WobqdSEM17Jph0qIwKnpVU/Nkskjji4TEn\nZO7M\r\n=1sx/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/list":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/menu-surface":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.a4009b80a.0_1617660126264_0.6786987860312605","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/menu","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f996bea0820283eda6e65946097e7fe25ba17ff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.15604bd0d.0.tgz","fileCount":38,"integrity":"sha512-A5s9/dJd/1Drv2koxNYnCMvi+/DAk1mYDV4m71+Lnirn7mBTKTSlQJCGCAgK4lri0/wjc6PNxz01DBBLbRFVaA==","signatures":[{"sig":"MEUCIQCx2UKNAf29FZTtE2nTpvRngbzEfoyVOiNZBU5k0qn3egIgEzZ6xX9rpE1lJBppLRX8YbdneSI1iohJpFTjxVpW6RU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KWCRA9TVsSAnZWagAAi5oP/1S9IChXfYsvBkjObno+\n/JmYgVUHVUtDjplBXrZ1Y1QOKxVKHQK5P/FXstBWsTyrYR+wmf0Y/kBCv1ch\nBuhXUn9HxDjJ3UDis8fiL+7wSBwg5hiH6Y1c02tu6AEspXAFzkLN3A8G6e0P\nQohlSfVjLcG91+ycAFyEPXMRdn5UGxuCCeZT3BGcMuXlaPKhTbpdm2z86zn9\ng5ADbheX0Fy31kCRwZevL0sXz/4hxJ066bPrsQBQS5oxlOQXW6oi1IMUg01r\njdIxWkSN/OEBc9yom2q1srh1nFEMG6jtbzY1/FQp90+wDVsmHi7FH4LAtJ8w\nLV27I6fIZ3lm+5paO1d5AWHEzFICjHk0/p43VieFyOV/6cQFZSv0HOlPasF0\nortb0ntjD2XmCNNfSfVTko+DnzdKrA9vCcuUKUfKq8+eE/4eCsyRLxRXyCKL\n0aBYxIwHtiMc/ZuVwlRuzUYaU6hwgXMPw0u88X/mw37WOx4yD1jCBQjLdhqp\nY2FcQqHOpxQuZXi1EMGUfEo+AJeWskxBvN3ZIPz2tuS3nV/Puj4ZW+LAIr0z\nn7vrZiUa4d/MpBGKG3mjVYwDm7P9gx82Y+SC4OqZMLZmLbHvpz3LiDkutiR8\nTK5aO+883kQQlU0+F4C/vzO6r4f9ECH+pI0JXanesXJT/YRwcRMS+NVGVJp4\nGDep\r\n=PNhc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/list":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/menu-surface":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.15604bd0d.0_1617662614105_0.45578113744580895","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/menu","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59920fa62fb0cbfd692a7c6fc34d8df9660201df","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.76da7876c.0.tgz","fileCount":38,"integrity":"sha512-UF1DGLDFvdpoEoCpwGaPduvIoSFknfFK+YiCHLt9TMI8bi5TpdeyqgqoyCg+TatdF6K8F7udk59n8qvb0rlHlA==","signatures":[{"sig":"MEYCIQCM0xG+4qDHmWpWHFwTCJz8nmimc1BP1B41hjAUG3ADoQIhAPmCDSlnFgO5mLN8JNXPkIBLMXCaNL1mlcyOzHrNZ1Ew","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7uCRA9TVsSAnZWagAAn0cP/i/1fLMlR0sEKrBmlFJ6\nx3cdzLpi+lz0wp/3yQqfL3Rv/ZWnBJskzAXdEm2dGOKFFUzqO9rC4jHvBGSW\n6sdhdb2AqyaNRwjzKFI28tE4Fpg+Hj+7cCGWQzvyLTgx8XOjO0Wpa5KQyQXz\noxMVe5EvdnL2ozR8lTsc/BjLcud2BUgPfwrXCGa0qV2WeFl0keW240TAr2pQ\nvK0umFNOzOAXIcMTdpmKRPcH4/WMRU35evEBlBQHMYsydlHFCE9i7/nAyaD8\nssNf6+Mr6Ml0cnIJfrzdDRRE6LgelaTLgsVoIv6r1QuVGZBP1HPeyamxKuIm\n3pBpoFfYxlpSfYEwzm2F+neJKbRpk8RzszxJzXrnqtN6x4GfuFfTr8ydvQpt\nHchFX21gWx+Y4gzw1Kkxnw9p/N/a2IYSRkyg7400MIAtLn9FFHQPPiB84Fwp\nNqn/pUqiu8Jlh2/34olF7UIpS8zLoJgdnitW7rKJjfKVRZIzHRu1r0D7Ss8D\noozpgFU8eO/+zTZib36xasmx6oLYiDha3BgCHT40Ru3PEam8GcFOLrANkbrm\n99cp2adUPqh8Fai7UJo4tpLr3KZi6zRqa2g3UbsbaywrhrYmNcVSGfuiuOKh\ndVeP/BRO83Nj8DjE+xTSvnzJBMiLA27Bu0EIebdVcQzANJza1EnipT+w4VuL\nlfUo\r\n=9/Vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/list":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/menu-surface":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.76da7876c.0_1617759982440_0.4998781107203425","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/menu","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d363c132084e9d62b19e0b8ce23044274c28996","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":38,"integrity":"sha512-t81Cy28eylM99Ls0OUSTOSWtYIOryYD2o0ZzPNGeUoLUnemV895WEvdh5pixWoxmdCKjjvQra+5uzrtkqBAmPA==","signatures":[{"sig":"MEQCIHMSwDmAiq+wnVZazed4Npf7T09a0s9BtnKiUmIHGzK3AiB/cDLCU7SL7+6MbwY+s+o2xOvDMyCWT7eu+hkB/gR1LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgASCRA9TVsSAnZWagAA/MgP/iN1o/iioSQFoCrY5+wc\n3lWEGUuHRK5zp7Vr25GZBmoHLwaZGRx+NFqs0s1q3MhPZFBsnnAfJt3JeN8g\nAtXjBZzaQ/uzwT8+UMFm5pLpba6168UfN91Us8tXJJcTmobpUQIw1YoaNNj4\ncO2VsI49jLPUpt7BlvpVdh2Z/3p3Jzx8sNOaFZ15JPYFQPKpC8lqRBL74ra3\n5LrWBQBdQTwTYHE1oADf3yKb5Bf9RdpGINdKjKrcoIqZjIX1ghuwriRRHu8J\nqxkmS64Hnnsl848sKD3umVmEoTQKfwFyHtF5P4Z4EU9iBliYnzqzL2OBt0gC\n+UnlzjI2zxKbecfLE1uP2i4WXBWvUWT8Es0oN1lEvYy7trD734Z7Nyc2L9E1\nuZRlJxbc1RmoDy/2jInJNqiOAar3wzHiCVcoC8DWDtxwwaA0S9LNGMPomqUS\npmOc+hqsVlCk1Pneocz1k5OClc+bYcfgukMfcrvb8daRCbhg41ejaaOWb91L\n/+X7fNFKHJg40rsJAZjKJZYjgxQsUm+75bzwe4tgEyl0hg1g+K4B8uL0hmxe\niy8AVsCht83eCYZDiD/CVu+PRjWH1jkP8VFjIhx+Q/h6KFl/tsEpgRf1KJkX\n+Q1l9xP9Oe4h7KDCtQ6Tku+6P8xOiK/VTNfHRnMWwCu5agN2amcXZTe7kQQi\nS+4D\r\n=fnBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/list":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/menu-surface":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.6bcb6cbd2.0_1617821714131_0.5310362845647969","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/menu","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31931ef0dfd6bc28e810dc8a47c47070a92d45e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.c91e8d141.0.tgz","fileCount":38,"integrity":"sha512-gbRxWYiC+GYdnxXZ/VqUNWod8/uHcBihDkFkIe4On7vfAXsclTYM11ybDRh27x/5+PoHdvXmLy62I/dl60PTdQ==","signatures":[{"sig":"MEUCIQDNpaLs4S4PAA5hqAHeRXcmgQiYP/o5unMb+sMf8m3BewIgI0V8VZv1J7Eb2w4euOGWsP4lmJ9xTkJ/ZvPXmEOLbuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgEACRA9TVsSAnZWagAAazQP/RsyBKzX+Ge58YUzgDR3\n0aY8Qy1m1g1RtMIrxJpLzbIdysEpygWU32iZggO+xVebrgxFVilhuIXJMua7\n38AbAOMwWdet4eSav7TqcgdTRX1csDCUQDRQjMYpFbIW4P5qM29Do4mfVDv0\nj161IxHKevQT6zjAFBhoigJPcm+InWnmx1RcpP3sPFyKUqLDTqa2O7RqgDXL\nfH7ELPaPfy+fURMLjhb6iBuRmXjc701HzoE0+g3Wu3rb+BrF+zqRBkKp6qOD\njAPPWFZEDOv09eb28NW1WrB4A3j7+RfGq3Yt5/aSCcmhcxjUKfdlzacH0qee\n5qwbQoaHaqpR/4Wsp2gEuZxeK0npNHwtCUhU80RTgZ0yQwMAj79qP4Pu0zay\nn2PE/me698sjJ5t36IAQDYearfYTEcpcbnRVDP7tpJa26KSTRYJUKZbEu/3a\nHgm/UzdIS3bMfz4+m+y91LpK2J6+VIhvC9hryu/0YehVDdZFG6F1PpeJH01+\nHrKPlyTfiAUksjAeco3MW1Cm9DaF4l7pTQx3cKXcz+yRTVii7pbP3j2sfgIY\nQ+IzYOBeDpeoV+5Bs5HaWTi5eEemSnbvDtmm0EjoECC1apMKkfdxePBqyJJC\nbCz1zBBuj/NXLDjTMq0TkfhNrxQ/CUvZg1i7Kq+a24MXYL69qicvEi2GUkhr\nZcC2\r\n=vhdA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/list":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/menu-surface":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.c91e8d141.0_1617821952030_0.3944048768080748","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/menu","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d073f8c7563c7ae8bac7f5fd684b9fc9f5f7c01b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f77c50860.0.tgz","fileCount":38,"integrity":"sha512-iwGDFvJ+1n9FS2a5ZnB9906lXqQQwiMPNo/W6WtT9DFWP/LV4IEgz8xD2l7+33EFqBBcznhjuLlhmdYBaM4dzg==","signatures":[{"sig":"MEYCIQCJam0xjIfDUz0pxV8z+apV8rqLNaWfyBn235Kg4lDkYAIhAOkCf/+JVQLY4TS/c4jEIQbSx73yhUPvF3CZtePynrzz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMrCRA9TVsSAnZWagAAyEIQAKDXVwODD3zXxr9cE4Fx\nmyHafwXsyQHYg/UERv7t5PKKiQP37mbbcbcU6RMK+vxYsz86NWujGGQo0wae\n/kl+EkrpMVkESk+fF01waNJxyZve/9/KFIUEHyYqxlpe+w/3XvblmEZHxJng\np65lY6spxrdbr+DnRE5V9kuSqYfJDhzX5sTuWRl8pGT8IvZfuGm97qVYUk39\nXr4E5Tsn1nO8lV0vCbd6k8WRUQDcqNhCmy/0z5rIbg94ASs3mpmi5W6v7XSa\neq1TjI6NzJsRKqEew0Bmc1Re99pp4qhyYLFBqBr1TR9WdZUBXJl9JXog3PGE\nVHbxSuSjCn1OlIYBE6lKKa77XamYCnVBIfsyers8l2r4hu826Jvjoax8ZQ+/\nMulmx6DGqUb4pndIZGsARgfaqMYXy0Gsqy096mhVD0le6sD0oQcLaWuWJPlF\n3Yik8CLkFgGsVQ2bRaxUhSbgXf4vSRIrb33Jt9bex/UMPcpNAXcyrhU+6vpr\nhbtT8ri+ZRBOyv2i/mX14WCcJTTw3tUqvJB+/V3qCtc/xPE2VOjP93xzCcGJ\noxOmAUqrpUF9cl5Oj3/zUA4SPDqdW1OSB2ifhrEx9ld2kfYOV1D5nk7yzgdt\nEJJOBLMQTQenMHqhFfu3le27XC7rITXdMWTbOhas2HXmCl3Thh/T9o0KlHYC\nLaF1\r\n=Grur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/list":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/menu-surface":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f77c50860.0_1617896234563_0.07744371214388268","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/menu","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c60bc136914bbfe22163701b979a1ee1d131931e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.367d88bdb.0.tgz","fileCount":38,"integrity":"sha512-d/E5US1Mi4tEGPv3FSbfMURKLvIAgRhyDfpu3GRKa9y13UjNuW4GTw3URlGoS2j0LCb3DpQILKH5Fhk4/h9sWA==","signatures":[{"sig":"MEQCIHou5dC9DYF9NzK0wGO1mnpubhsxztlGWsCEVCoCxG7QAiBsFXUb9qDNtEQawpWFr0+X94XOZqrRoqxA4RURNwSnXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHkCRA9TVsSAnZWagAAAyMP/RFzqV/3McO0AsQO3xGg\n6vguNZX45dH1j/qWB2jyuFWAvfAX5A03S11YTqHTvpKZYvcg2XHNkG/mBO5U\nnXYSkmZVsHpf7JmTh/zq34gInbDL/ISb3LRcdTnhWYoRDHPHVrH2We6weLcp\n1B8jDjTHSjcWxgJfz2knZxkducZbEJ0HSQC2JqGK59nLCFP97CMwDSyLtbFK\neYZWQVj8uZLNd3mVG9KlqgPFnXcVlxVzG+i8lCbRd7h6dLYonWIiwS6onQjj\njMytNDXoiV3PgxsmLWnj5+EwpDzxk375WB+wtYXCaSDrwpprn3dC8Pgku9cY\ndv58VtMfAd2/Hr80P5njTqUhVydYMgkhRxCUl9wZt5NPn3OXhx6QQ5a+dz7X\n/7uGAKgAitfxqwpJ34TA6w3dIffdFHg1y8NcVB0oCO8z8IgaCS3a3lOkI1Fz\n+lqhac3+dDKNjmV78M7eMhsGrv7vtPkDNwMQvs2zT9ggpzDr+uaDyBeJBrw3\nRrdiYd1nJ/ZQlKjmLpbUMdWnAA1fm7yR/jJESl3N3ZWtnUlF+4TmPHpa7RF1\nFX4LJjKvJYVkPDLu7b640EBd8f2Xu2PrLxJb5AqfLkqC/oamekqu1WWiic2u\noAQCX23Eid2KIY573+bRQUAusACWknRvD2G1rHakFsgToz41S9vanWPRU9ZI\n3+q4\r\n=kyp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/list":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/menu-surface":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.367d88bdb.0_1617900003620_0.55840640078454","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/menu","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcdcf82ceb41ba6d79ec2e4a7b5cf83719641697","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.0ec437d3b.0.tgz","fileCount":38,"integrity":"sha512-kpU4sGM1pcVQcy+KSm8XSF06z/6CLgFOi+gZzbDMf8DHPs5byaBMqWNASGix5KvD6ao/HQtCaFOnI/JxLHtgiQ==","signatures":[{"sig":"MEQCIEm5z1VSpiKnM+IVfSIQo368klUan3tBP/qao1nXh/EFAiBjEK7OcnMwjsvkVWIha2ksjhSqFhzQ6VkEaAdVif7ZWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1tYCRA9TVsSAnZWagAADi4P/jpmokRjuyRQMpaN1mNB\n03A/Ga0RNUdhmjKxipVgBAUUT0/gHs1OAIRJFQ4YNSZArrnX89CE3/cwVZXn\nCZoQiKEETxPYMIIPDrQJNi5TiygUwjNYllXeqqD8dmavMNi3XITbWoQHof4o\n79RaV1jEGLSYo0sNyPMAeDYZG5R+lK8N4OZ6x8UDyx3YUe/dOdlS/XufosN5\nUtm7qUjLWgNGKm0dDV7TYEfPnqVJdND0pqn9Ib6GyWCal6uCn9Hw/54qXL8B\nWbpc/D+ZE+wY20xSO9ZlP1G9qvM6iuDXXLke7/h0NLBieqo0GO5HDuv73sRS\nsSeqV34g66sSlGRMpbM/Fmmvqig9RgCY1C4mkVj8HDHsv8mjUUPhngk4pKXL\nZWQrcfWc1aDWifz1XYpv1gLmX6QvccwnbbGMs4tTik+5h5svVnVjoOQ2/psd\nVD49H/TvBUhBLMJ9ey1ht++DesKgf5kqpqbf3XpE4pvQ/h8KKMf5qF6Yk5Er\ndZD6nY/kn/MACURsVZxZq+m9UN9efVBlKPDMeYNGd1UkJujTEJEb0pvojfza\nhaMATNAz/F67f0vi5omyponwz8KLDPNTKCKkn0l6z830VSngBlrwNhAfWged\nwzEoAcJMSppYOVsrWQUpnGiG5NrN1IXX0NaN70py/CaPPHoZ//NWii64KX3t\nRNT5\r\n=NZJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/list":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/menu-surface":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.0ec437d3b.0_1617910616408_0.879412076079253","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/menu","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45a3727ae2c3a5a501ccd3af0088deecb5c3fcd6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.b2fa996a1.0.tgz","fileCount":38,"integrity":"sha512-+TxjoNiKEE3Ul6jUlioBgEAdi4IeSlsoKsvrX8J9HY0UYcAn8JBmsZGegOPGsccLhGtZR53z3xwOzQDbMgmUJA==","signatures":[{"sig":"MEQCICcPH73ILiurTV0ot09Sm5WCyToilYUMlcIeS0HjvbFNAiBX/NRPwCuDEIc4xaPKJfQhWmcsM94pfVdKPCFfKYa5jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7kCRA9TVsSAnZWagAAmY4P/2ZGHYhRTLjC0yQkiRFs\nBykuZRgo2udh/vdnrya1l10D7eLcErkM4eqJ2RmIZm/0tTDhjE47vTs2rFzH\nnKGrgYXeKKVB6AqkC9TtkOO2Ws9C2vHBKNHeQnVQ5viW2YGsAceEFu2rySel\nSHQQJJtTJp7PStEHFuwijJ4A+5hrF8fn3mst+OT1n4Z27XdIQAslWdoC9MRD\nx1L5tn8kLc7anYcEX6huXXa/dfSSHTFN8VrmCLIE1pP9CeVYbNKCNqr2qji/\nGflmTdPnWDzJbhB6Fv+e7J62GotWCPOQHQK0b8cZsP8/KfMaffBTxmpqOCYo\nwraIDXNHec1Bm5EtQIw+Bt8hjyjUdqRuwigEl3Zdf8W1op0KfMYJAdWOmxGK\nMxZWgpErfIe8yoDDtNj7A4rkWEq9R/QsCM64xkNZGbFK5Id6UxyJgO2HJS/k\nQKmjF7o1QSyGV53J3g1gTZCtvBojVTWNxFf/DrvLhlp8d1ss05l5E2TYBixL\n8X2licBGP/GritQncGdLfNtdC6R9Dybb5l+kfd0wpQ4wZV8mtt7GirLLn9OR\nN8Ibk0/OcpKSczU6cuhuw7f73r4c0y0PJzl2DcGm7SWBiggrfQpgS1Iz9ISz\nA52H6AMTXi0SX/quM/ysfKLDlHZ0P8b1kiXnlnaCmHUo+dYk0XBwSxeTKq4l\nZhBg\r\n=USVV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/list":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/menu-surface":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.b2fa996a1.0_1617981155683_0.2833029427900817","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/menu","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8bb080ebab98d9c8f8eed66cb84f47771f32261","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.24255c408.0.tgz","fileCount":38,"integrity":"sha512-uGjb3PIntH/x11YamRuBJV2ba+SpySKGrx+JbJIzX2BlqLFP3zUKuBmsUvly+TLSieKA95NUe3ABPg2x0jGn8A==","signatures":[{"sig":"MEQCIEooA8HoFLdeKNQbkosEsW1tmkK5i61zgQU2YOdbeWubAiAqvo8FbpV3ELQy1fBumvlc+isScqPDhXBXjl7H1aCpYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLWDCRA9TVsSAnZWagAAg6MP/3xNCubvqR3hW9366TcJ\n1tNIHIQ9nHFScvcknXpxjVPzp/+pnpwa235up7XPmBjqnrLV05gnW4Z3yQJg\nS5t35hjOgbcuDpB9l6RUUQqk/dnX72sladHKarg1Z35UTHwZOYozKCAe9S/4\n0hK3Pq0gz8UTkb0NvTczWfZUadBw2SjIXuINMyfUn+eeclzCJbpjffCanGAH\ni20hMuf1RF3u1pu23vlSkQ+T6znneME8Ir769Lgbqq8LJlu8VnVJKOBXRoBc\nBOtj7a80vqrr/HwGmKQEc1TN25nt7OJtFFGVqs/TShCmMCo8TorHWwP6pPWD\nT21P8QE4TEky05VZ9R43r+v7VhD8ofjux8t9VNkU0ENuswAl8omvVjW+dkV3\nD3UzEd2WvUHJE8zW6oRcAkxBV83eruZXMN01PuMiP0oqi2+2/Awb8TPDF99w\nsrlwkAW+In5vZH0wLH2hg+sE3lhLLUATX8EVQffrjNqh+gQ8CWYSsVD0v+4u\ncysEWDkpsBCb1nKVKAi35Ka/5ohfwNrgUIjgZHM1kTdXWDxeYxy70+jgbRLl\nacdnIKAaFHuGpW36V8ORsYIMDTIFX9ZnpU0I7adBZLtwdTWsm5IXbcas8HI8\nD2lVXAJEmF1JKRpjbfGfv7uDxYuKtOYOc9bD73ldIO81D5pQUeg2tunksN4s\nOaKU\r\n=RUQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/list":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/menu-surface":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.24255c408.0_1617999234373_0.06377774526117719","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/menu","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b05da885980a88cdfcf6318c441c87dea2a3f96","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":38,"integrity":"sha512-iK5JdBS+RuEWSFirS+swAlRqWA7OBI1TuMh5tHTKGvgS5YuC/X5Z0BmVKF1Aleoc9mCNXxCZHizYn4ZDHD7+sg==","signatures":[{"sig":"MEUCIChaXWK6KyILUrxcoG9rAGcVuNgAueiuoK8zEtOeZ4nyAiEAiT+dKQbNYHTf+/1SL2GLHmCBHjO7wk1V1n+BXmgGoBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNtBCRA9TVsSAnZWagAAPAcP/j7OYZ4G28vM+mkJA0Sb\nll88UcS73qg16jZlMZm4TvpACQjID5TOdrweMw6ivf3U8k3U96ydmiwT0cBx\nxTEqlJhGn7xQyeSElKx3OTIPyUazOtY1H9PNKBykS7SGL8jcNwx349t4uX+F\nA7pLOjRVuM3QHgIRsikjspBIUWjeylsyWYvJ4601OPmFMVKFL4XXLoQ+DEvD\nHbGgyNWBuuZgqlVTOmfxLehH06mGMYns17WEJaOSL85DK0a139JtHJtbb+rQ\nupvS8mIvR9J8lCClCuGtuGpwzSWwz06acqkcdBUMFRsGfcc1oEOTZlh/65ZK\nfO8IZqSUAD/6iPVWA4r34wwM6MDlHFKbd5JlNJ9N3KoEx3l0HiVXdsTu1Epj\nXVOoJ2cZpP5TwTz5KBUBJg9wQLdFTNpUPwMVlqSnbvepaBMDI55GB6Tvwdua\nL62wcYm8NFpkD2zYsJoLcRK8fKzTaeRV2QvKjftQ3SLopfqMNjynvpCuJGqk\nJRFkmEk36lbQVYOVD9zSu6coMLCXEkBmDXH8c77MI1KhBWezWc3/SeYDMzx/\nEMq0Ho3SqBwSU7xAuJi6FFWqG41rbtURVjhfPWisKC3HVBDBHWb1pi0tQevk\nD/2G6NPDA+Y9E6fN9Kl3kCiodoHxs6Bua9cAMNBI5ljQQuyKEXhlDyAMhBbM\nxCwE\r\n=xvtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/list":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/menu-surface":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.7d6a4bb72.0_1618008896875_0.3709465355882786","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/menu","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c394eeb3e20446aa862e41db6e1c59fb8770b02","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.352b295c1.0.tgz","fileCount":38,"integrity":"sha512-TcCkFSOWPbK+p5U1K2BCDl1yjcsTr7U9MhQ9DNUljOJDf0CUcKS94cyqBP7kA6KMX5RxeHoGVrR1rz+QB0rkog==","signatures":[{"sig":"MEUCICFg72U5j4Cielqv+zDCYk1iD9ho2+TELZDtUtsjkaSUAiEAwb3oahsKRwcieEjvIquNUc/jTgAGyjPBm8L4W6XD/vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6dCRA9TVsSAnZWagAA+WIP/i6NIJKYAmTaJ2nkeB3e\n3h1pDQF2Ki+ungK7yXghAD3lt5vTK47Vr5v+LcHZ9QAOLJ6819tjnJdhtZEe\nUgh6d3CTmNMChwuCKEQ2CIK5fkygNDUxog7cYqbahCCtHL9jsopTfSDxohPn\nzoCv/45Om4Jg86xDiqRlS8F4D0f75JEJmsLHJsp7Z0Mb4WF46ZRfly4Vx5mo\nF1hG8G599fCD3mnG4LoyNuweLHWcmTcobb6EF/oph8iI7L2uFv1IuoM4cyNu\nnjtGfsPKopOGUJ43N2AiANj+YT/Lh2V1FSZWheRuWfVwSETZjeebwUjm1Gtx\nOIfgwJkzgDYvSvhLp3UrxPOynrGq/+ewa3zv8/geSOIENGIRGuknfY/eN3bS\nscwqeDVSXSpZKPFaDmNeJ/YIhh1EvyjzvVQ/Cb+2nFpLPoSkttcIHaOLdn66\nLr7L6gHu2cIiPr+s/EEoxmAZmFf3vEp+FkP9lprx3nx54BrgmbdC9L3Sl7/3\njIXlzdZ7XZ19naU8SzGexBI5zU7lxgVWQg4OGWlpIsnUexcw87C5NeLim0xo\nN2DJrh1tzH8sIXQBr26R56v1r/Q3poXzscFf79fCKqUXYrrGbHbnq7D1nQ1d\nopcg9nysyQCFSTK/uAWTUfxi5Ao5ULx3eAbF6KUs2yKVIRiWXvR/2iS91ooo\nx0dn\r\n=co7n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/list":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/menu-surface":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.352b295c1.0_1618251420924_0.21868184560142123","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/menu","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3939052844d319e20d566c86c4013d82f1c44d0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.ab99b8064.0.tgz","fileCount":38,"integrity":"sha512-tC4mDDwyJS1pYk5nex0ib6e0apRY31xyaxS+0revTqDmj5hTcqPhNiwhfse0b2bdgLSXzK1/SRs9EiTUjIzdtg==","signatures":[{"sig":"MEUCIH1CCWXBnrNET4auisCt8RlL0T1Y4lGDcsdEi9uzuxTBAiEA3c8A29aXn/6tNn/4sWBMMkY/hlUAHIbEHmj+KhQ/+R4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5iCRA9TVsSAnZWagAAdnYQAIdZskSJNRHNWeuIeeB9\nCA0IaGr/bhL4P8xHJYessGOlzFC8MYSWZh4zzvhuSiVFg1xA5BeJZp5NfjdI\nvKxEncPwG1Nh9aMsfo2wMeaIGdROAFUnQthlu/6zNbsUZzFYO3w/gIldYM2j\nf2smAIzs+mhKju/eM0tH2YcZKi1PO9yOGdnG7E5zD9a1zLsSBzKNK/FIFSeD\nkgLtCrz0sVJXOGA9mKJ1ZznXh1j1ddGtfkCmK9jxlk3oapQcQbOi/UJs9yP6\nYO3L1fGar0+wJEmJjJnDy00vic0bVCf6LA6heyG3ZjXw4iz/Vmj3gXxsr8HU\nEPsvWNflOgsxCgYpuyimNTysbsItkgXlxtqpzvZJdYJP2yleet8bnoSanCmO\n16xdVU3bjQJJZIG6YRjii1VPfbm7BOYP74yXgHbY4IdrSdopGVqQ4TPxXVwS\neeXVa5Ld6Fx9kSW+JZloM6bqZc6NAWfC8RVybCcdlc0RjapVnf5+99S+ZhOL\n+43hTUr0Opxfzv+Ty/Eb56Zr+S4NWA7hb+GhcA3qBF48WFcTQXqrGgj4psaH\nLdO5lrDIUARcSHUINs829pkC2XqPgl8ozS78CvkS34uHM3lbi5C4tNcDhI9n\n1qXVJYUxPAo0NAbFRV+HpK7uQZeF9aOh7pL1JJLp+wwqgM1cG49x6al2PF5H\nBeVC\r\n=DCOP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/list":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/menu-surface":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.ab99b8064.0_1618325089591_0.6678592776687742","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/menu","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac35a98385851cb006badf23bca1ef0efa6645c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.8f0a11e32.0.tgz","fileCount":38,"integrity":"sha512-RKH5SSjy2td0cIO3saUMRzyTHi+7yArRgilOJ9eMuFzE1CsFzyayk4NkE8S//GmIaJkl1lwUuSPYz02OUHuUug==","signatures":[{"sig":"MEUCIFp8tDsQLhQpT5pRGHurjiMgN1+kTTyYrRu3Er9t0ayKAiEAs5Q14gtwVjAShquYp002gcn/Haz22fRZXtgjwRjfoBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0rHCRA9TVsSAnZWagAAceEP+wSwOiDrGZzQW6reBYTF\ncjsubqEWH9y07MphdhTWwdXOtAtMD/LsA1kv4woXAD+2mBYl4IB5D6skuRnT\nKZYnDt61+gPLE1IY13tKE2aSVp861fTKaWBfDtrJqS/f+g8pBBMjHMdCK34y\nHRpIyLeiklMKqfMVkCWfZuC69jOU1UOw3Uo9VoQ6BnsMiqzRXGGePTrF8tHO\nPKVmhC1jKICVPEOuxoCLWCicTUcw/pg/goHu4aJjq644pi9lNlktmNCQGnbD\n1a94Yd7TOpCSfDzTIAOhxxZnVXrEQDp9v/F4hO/+LjUAbWymF1N2ywFCKkJN\njn9U+5yBEIkgCtJcjp6ozl6a11ZVHS/TrMlWp6sDe+WSjyllI9b7tpoxe5Qd\nn49ZrVvM8viT6w5CsMcjk7fo3CBE7R1oWAATPry69HRvzEnIN912x7A+av0V\nT04X+R2sOKjWJivLSSdWR6pQ8B4MBl4RtLt5+kR/kqBDI3xGeMXm4wlo9A9f\nMXFVyk328GEQXUhZyoUfQNUFOkMklbPY+g9Y5yZpIw2JfhyJozPDsDejYlae\nIdZHWVdLz6OiPm9Ta7GdQZcgMaieQutWznU9VdAX0o9mzAgOUK7uCMdH5rJ+\nsSaUAgmk0/WmTn/SStdqQ97xouNN0An9SZK5o3Y7AgYuq/25f177kXxs/zcJ\noLMp\r\n=Zkji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/list":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/menu-surface":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.8f0a11e32.0_1618430662939_0.449996338151067","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/menu","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc076064ae7b2f347ad3db591c3066b01ec632a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":38,"integrity":"sha512-EdK9w9scuCpr9A9XOnulMu3nH50vo1rqQD93fsofR3Y8eHLN5jnJkXN3XtmWHhSoQwMKmbBnLZXr1jcsIIA6ww==","signatures":[{"sig":"MEYCIQDZg5PCQ+EIlCVS8X1Amfegsg0ws7zNcpugI5XWzqF8kQIhAKPuvtkDnfzyJxm+C2cB2uAOZy7XelHXFQbQ5j1Y7Mer","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBpCRA9TVsSAnZWagAApgUP/21ChmU5oWnYczQHUUWE\n1rC8fkG0zw1H7BSI0oVr1Roa1YdoGXxkMfxk1oVBa6HMFSvB/7cV4uYt6eZA\nxCDVVWZQydPTQJrjtla3HOXbz6tx0sSnYpZ0LI9goH6M6jghEbTY9rK5Lg9J\nAqHBefrrQDeHelD+wyjtEqojJ414Ejf9vzmLQDhb9jRpMSceZuNYmsaJIJcJ\nUggkam48K15HQr+vNdWyK0K3YY2B4nX8yB/UgDGoccy/Fs6sXlxDxEpcuhux\nRnXhqKjaddvk/XBg0m/gQy/JfumK3aMogrWy8ivw4iYif/ybubdU+tsHNk0v\nCsaI4mngoLJEblf3Hlww7wfBxkLVgxuNp0e8h1OGShhWkljlJwk8aaCiF4+s\ngJXEKd/rCG6amkz9SyTS5KFi0RqEqIm2qEG+h23Hf0qJLw7peaoH7fI6mxin\nQqMFXIbTtDBozntRSLMuS0KHhoFxOYFoR6mXs9wLMuPX+2J03AcfNCye0Q0H\n3/f3XYo+WyHiXsneG+bP2hPAgEe9BHCIWMr9LD6XN2F1eB1jwep10gafjPN7\nOh0wwtM7lw2MrxB0sH8bwsvHC89M631YFCZ5PszIKDljSmlYlbNBETRSjEy5\nAVaA9UkeK6lgRwrQ2EtCWn8vuJikLcuT9cqK4l5stADj219aeN0oppjdv6NO\nYdZ+\r\n=U9aa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/list":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/menu-surface":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.f5c6db8fc.0_1618509929380_0.6142577627049395","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/menu","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c0d26526ca3482c3d0389c44c9f7072d9a596a5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.3793a3143.0.tgz","fileCount":38,"integrity":"sha512-m9ibKhUwlIrDQvBhARYUFBSCWQwHWADTSpcLE1yDhHhhd5E5J4XKINeoBaTA1qE6+9KbcJJPbJI/kw5BR4jJJg==","signatures":[{"sig":"MEUCIFpSbMGxiaqf3l7ICMsfeoaegd+mhj5rS+upIY42/bPiAiEA38RHljXWGzYHJbZpmklUys+WA2RdtGabO/50suDwZME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIbZCRA9TVsSAnZWagAAxAYQAIADn/nf1bjGidiY4pwD\nvAVtv5M5xaxiIl53MiJIlCdrIp7CqrI2M56MqaW/PCIIdjRp+nTeh+5hQ0ej\nmVO+wY5r/mQfVb25oThOZwsY0grGzP4uTqNZUdT3BDmQZNsgAfzq/VWmjj8F\ndUmtVP4/iaXLGeN57t7Zc7A2V+te9HUxwJRgSAurcfCy7rKaMIGCP9py/A1u\n1+yOBScM/CV7wnaz8f1Sr/tHULQwTh1o4Xf0Nh61z7B5Oy6bem3RH//AL+g5\nB8WOYv1uxTg+/iZFunsU4P38t5O7Knszqu2TtFlcgMB4gUsE6SA2IN1UagCY\n2F+MhuPRVTznicE6yFJ82NJk5eI2LpjWs6b/gdFYvS9q8dF+PSX/gafgW1a0\nJlE4dRGbt7fY1/Ew6ydboow9ymsrCjLNThcKEzv5hn9gM8TcsHLf9052nkuE\nz510xuVgUXYdrMVKn7bFGbRmUvFml/ybKQZK62tXdbcoBqJ1V5A6+ICT+huA\n2hMwWoinKFmzEQpCHYNhEEjn2jMe0WfNE8EkS6w/7e/kVdoo40lmg9HQKcsl\nKQcTJBedeZIKzKUypDVSS1MfBoyrzbkAod3Q8ttNPaNjFW8bdK/A+aw8jsIt\nmLamN/yUv/HNoVlXF1yv0GLL4Ec/jWUBMSACgd4e4t0m1+nUynyOGWj2DB4R\n3X/2\r\n=sDQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/list":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/menu-surface":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.3793a3143.0_1618511577060_0.40794836541083734","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/menu","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f88a5890d0c5d79c6df39a37a3ab3a644eb7681c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0-canary.bc104bae7.0.tgz","fileCount":38,"integrity":"sha512-5SHvkYm361m+Sp23TJJUTR3uVCHNaJTBi3QUBldG9Lmj0GJFBLt+umlaiciEa1f6c6N98t86X/MrcTYw+j5VrQ==","signatures":[{"sig":"MEQCICM9bobMNTAvJN6COfRoptaUCG/tuXUuV2wg2F/iSqb9AiBmCqGa4m+j1avdwBkOfEdplLtqOxV7RcPizzvlWS4DbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhbCRA9TVsSAnZWagAABjcQAJfHMHUTKLzPWHqGtsVt\nLqQwdapzU68G8Emrk8UeSKklb8hjiUAEcj32NM1Krguz6tmJ6msEvpnpTflj\n3xvBzWl5/5axtbRD6Ab6BN4/zn7EX3rBuAt+LABHnM/ynJYrefFwD9bm9+Mx\nXvHS/HarNgyYNay4KNj50MmyyKqJRg2RsIy2rySEleBDR/ZnyYOQfF6zNMPx\naXZFQNOln/LHfU8S7qVdY+xdBjch/5zRRymWUN8HVhyfbbBU32QLhn+d8cZJ\nj7HnbXapEJiJJocixbT+3BuOTIQw73UweP9aNNww7p3yIQ4qdGnM1xvZbOgD\nIFHB3MXNOtGm1Ci2OcI7Ol+POMvTc1njTeh2nR9AlkxOTENekbfYDq895flX\neMMzqdmzryi2CE801yh92oN8LmTzbuTMX5VbPi2fQVWe92+bXmwy7bMwKarb\nGK6qEqI4cEjYh2RVBIdbRO6CRD+z+XvMGJ0CkuK4TCqR90ixqlc4JFvZve3o\n0BIvKE7ZKWhqbLgC3xKN3J6ce2KEm4KJ5jIuPiwoNsp/xnNyAmPBO3Oj9GyX\njuvqv0mGrFz4hhtoZNGOb6L6z02FP4cV4fssyNKNGBZPqcU/AlZBB5cuQ2Nz\n2KNDGGSkdSjU/rAVA7/6owmUzj94I6meZ0cApNapM6KfiZhYWlK8JIfRHrQb\nmCuC\r\n=5S22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/list":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/menu-surface":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0-canary.bc104bae7.0_1618516059580_0.8642975818369669","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/menu","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12708e2636e7fc77a43b01f1b904da37021837f8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.3f342c3f4.0.tgz","fileCount":38,"integrity":"sha512-tXwBJ9fRutho9Do4rUQTlYaLAFm13raGh2fJA/wCEGVfMyV5mLyCl57QxK90XaBctPLcuA1SAP7euCqXDt8bqg==","signatures":[{"sig":"MEYCIQCrOtWo45JrEOndIPr99D6VOAUMk4cY9GS044xcxxcp7AIhAITo8Hbw1QtqhRQvh0C23wmu2VApa8jBQ4RxGA770VKB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRsCRA9TVsSAnZWagAAdTcQAIXw7DbJf72YUnTq0HCW\nBNLb5cxbQ/cBntwRazUwSvnGnOQ803XNKf/aYLHV8EJ67m90qzMqV/lkdSNx\nkcr6AMk7qO7tEK2Tc5UCCsBPi2dgm80c3KP1bRCt//Yuqw+a4wdFGcu6qLKX\nU83Ukfv8++EmlYqDkGvhTlA76+2NH4CpyrpyMW/Jj0ax83ohWnf1fNxRNDgh\nER2rLvtrvFtM7n37Pw2ZvmbLtmJmSVGxtBq1fJjKfJLRE7eVqO/OiEAsf3Rc\n5ei65jZ2RG71QgkrqUKS4zYSu8R7JcWLRBAtwydvU3G0W2zIJGcVnpXh/nug\nhlkX0ifGoxuOW0BVMkmeznN1mgRcY+B/XO5r9UvwliRjVq4Vkl8A1V7JSQcT\nAL4rg2qzaoojizKDlicTJCvkpWoCGv4KmD1Eu0tH9Ztp9ZGJWzFxAq2GkoLK\nSBzgB0sPuT9EJB1OuCb1RSisf4iMcA0hHlHpHcYjKGiQF8hMVQnO+S0ubPSX\nT3R3fqLOeTjl/umgXjkPwGL2ypKeL6hy2HzKWgjmA5FLcbscD0j4Qq5OlBlR\nE642VJkRZgzhVSZUvqP/1HUBqvNJIvADOqdn0byBzv/Li0sBn0Bcng+sPb4S\ncbO9JvAR1k/2Ye8wDmWvyuaY9nx61qEAa/Yx4Rl4NSDkRv2hq2Ld9TSVHV8S\nLfdG\r\n=Bq7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/list":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/menu-surface":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.3f342c3f4.0_1618527339603_0.8674037852169625","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/menu","version":"11.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76b519edbf4ed3aee85cd0d56eeabfea349bff37","tarball":"https://registry.npmjs.org/@material/menu/-/menu-11.0.0.tgz","fileCount":37,"integrity":"sha512-PnGNVLgvkvBaXBNi+QkSos6Y64DIpf7IW9Ep2tUxL42uQ6aaip2emND3kXNeDzXxhIGI2mm+PnbYXdDpQCdsfw==","signatures":[{"sig":"MEUCID8i9sVMRmZhG6lvIufkUg5AKp+crWPeq1q98IL8G4QiAiEAjtZxbpf1L/fMNLZm7eNjQw88oRztWh7FnNUF/Y3iQbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVeCRA9TVsSAnZWagAAyhwP/2gVVELtPVTvggH0raSi\nOUJFlfwr5XAAb+EmovhIAL/e03VKkDDFlOFaGkLKD4xQ8RkPi+wjYRYC986u\noULVeVdLsL/2b23G1BaL+XdosZJFrXcXT03Srotkhu/OCanl5m6btZGAnbGy\nNTHCZzmXm+F69Zvrir4B5f7yjaJUmydkHcJDoi/My5mhz7eJOdg2uMjbp7Na\nIlyODcZ2zVas06aFOVsWGZXw8PiNf2032Cegx0a85E5lEnHNEfGBbsyc2y0/\n9Kztm4U0CAL945icKMorVBJZ5vLkELYM8BEfq0LSQKwR3RfnhN13UZNQd/Qb\nn4lmqld0u93uhpAqvxCXwTgflDYpff+RUa3eVbY+WknM5ltMAUV4tzB+E2P1\najW1L6fMEEIq94IbIFtvhBR59JpXLrJwfp8Q+SDWvN42PtF62QtDhWtrRZm8\n1GyKXFofDmRFVXq4BcFq7Y97/8n4o3gu6lMcsGPY35+hWXZzQN1xsOgy1rjv\nhIUQzbABIcpIkuKO8Zo0TAWoIjqe+I4+CPXgPYQy90buOYkcrQoseodPiI4B\n1DNt8NQaRzqw4edBB2v/60IiLGw+Va8BKOs9kGJZOrGPw1Ugx+KN3t3J1jmK\neRHYbfPvc16/+s8gDXrMvVuliZxwszQQVckd4oSxVEeyggwh/vzwoKZoZSoH\nM+uO\r\n=Kneo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/list":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/elevation":"^11.0.0","@material/menu-surface":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_11.0.0_1618527581956_0.6058600262834035","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/menu","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de2fc57d0737048d32d67eca4948c7eeae448765","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.2ebfc5374.0.tgz","fileCount":38,"integrity":"sha512-iL7c1e63H/j11jayAcY03Dd+aY2UUkJ/hJBDgsrp7g2LkxBhiJ+ckSlWJep6/Zz8E6vW8VnYrDc/6Y/ZxNx8kw==","signatures":[{"sig":"MEMCIGD6LL4TOapx4bl2j1KaLGGO6lrFwn8gs+Iae8W6ptKiAh8U2qzXeFE+uGHut55XBODNUjXmqs4AY8oUnFVZNcwV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefejCRA9TVsSAnZWagAAk1gP/0Iq0uxCoCcRsbdbcATx\nv8grJJ5tPXEMwm2zF32GewEZxPaDonczCcDaFzbtNciDx02QQWfU5riJI668\nne17EBvK0/2opDks6iUVb5XDT9CUixGGT8M3n3KHW6XAa2hvKlUJzoyOutzm\nLu1xfvo2WT/qYtHEcIqB6TuYW0r7sbGTnp3CBcod0ILKqpSl8f86Vqo/7BKU\nqWLA5Lj+4+9rkQ+x0bHPqmTqyicV015dhgvsDmBKv+U9xBVrVfKdu/xTt70O\nn5ZxF2h5LhEIQ+IBwsv3qWro/2m1p+UjCib1Q/Is54Z+OngNk4XJJUVN72Jh\nCyCBtw9OF5BT922ksfYag8c8xZaioDi3KTBT5magc7Qf6AATt7JXKrJvm/Ab\n35f8Q+wDGDdg0QIzyRZKcqvBJX4f+KiT3IPVdB11k3ELWc1eLmLebjzNP6Le\nbOreKNfOtPir83aN71FkhFn9vh+RI/iivoZ/PviTqnfYA3V1dv9rg93lSi8V\nfzx4jdRnzvUdMMYVmvkzq37M7HsEdlqQ/3GvkQP0GUyLmbTheQ2pqgY4rRVk\n84OZOt2CuWihv0Ur/WnEMtN9MW+UyABR+om27K4+bI9XwP52MU0LQXj5uSUS\norYgrLimi+GVMDUrLUN6IOTU04+0q/s1AGZUcGbXuzw6r8XVRGw6kedRFHF2\ngCm/\r\n=dI63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/list":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/menu-surface":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.2ebfc5374.0_1618605987452_0.22917609409220097","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/menu","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"115934d453d8acd16e77e1168e82ab18984a6beb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5631828e1.0.tgz","fileCount":38,"integrity":"sha512-qb//AF9V+EbZigaFOJMUwWBCmnD9T4f+uBQD4wFEPbkHBzNxk4P2Z/QLaI1gI3fsy9e3f1codoXEHFcg+ZJPoA==","signatures":[{"sig":"MEUCIQDU6Zf9ObS/F9gSwGFr8J8gtoetZfUtkCi9nkPuj3KteAIgL8I/Z4OO+FhB+9ebmzFHeucLAF/fo60cvcgxQ+fw7Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepLECRA9TVsSAnZWagAA2/EP/1AYhooMbCNTx4Qrkxk8\n7qi1wukTZE+6bAp3aBtOS1nhQjdfRZq/C7ojV9Ih3+Nnfi4eWMsoBmYpubff\nqR66ei2yqbEbT9q8Ba3eI7Wocsp0q7zOhGyPGrafhBDyRXRKTTO4jlkEKD97\nsP/DNVY69fKjvYkohEx4ROVALom5miiLtA8zn3ze0SX3MtYp+p9pv8olD8iu\nAwTDsiTJS8nh7a14poKnPx1TGy6ZayJfOaUR+kmph0SK4bOmaUObqSFE4tws\nhsoEsFAh7oQpiUFax8mjxJOB+iONYPIGoKjESAFfUT4zW062A9/FtSRkImms\nvVreH//8OZqVfKRfubohFaRcg070ADb1JG0vqxnQ86rqN3idSJQwIx2TaPQ+\ncsgwe0ZvHqu+0nrtOvQ2Xa7j3MMscYxur/6irHx8sqku6nt7cA1Y9sQDASTY\n/xyKW6MbKUuUvLwxKQ5cnJ1VFC7VlMc1isLn+roxEsrWT8cjhY+Eak3Rthrx\npdVJdkQ2rE8lwqyWhqE/OaCrXihHMBKX2FYNpw4ll+iE2gjW9wblDoE7XMYs\ngzNBj2O1uvzWvfBb6BaNuvF3UA4t5s56LufZyRX8HEpf5D7DNKlWl8v4dDHw\neSw4SyzCZTHpj9m3v5mhdZOcCWaBcFKc2KsCvHqYSiA8/E9ryFmbWYu2+CZF\nTYdP\r\n=berz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/list":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/menu-surface":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5631828e1.0_1618645699974_0.6428771478024107","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/menu","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"471a74aef9ef42792328d9cb636484dfe9b7df2f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.bd685395b.0.tgz","fileCount":38,"integrity":"sha512-L9tysbkkwDBU3dGa6WgqTiQZdhglbdmt10QfiAHfEEV0QoZ1ZlqPoMx8sv3wR8t4I2M7qt9ceP/Xl8uD3Id3hA==","signatures":[{"sig":"MEQCIE4uKLsjIJ2HbqI/9CfTl3eQXlyBpIspZWOUd7JT2oZ8AiAHgcbOsoHar/oKOXrmji+as0SL57UtjXdiuKBrM3pScw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8fCRA9TVsSAnZWagAApMUP/0vK6eGMQ/JJ2Z5AsPfv\nhQRFXVrfwbYmRlZyEfxvIo/V7yb+RwIJBBgPXjEAbhesAljtqFBG2+hAc9qY\nXm/g05zx9xYg97omv9aBk4j9dnV3HHueVWGEt9/kkGI8a/ZVmpINuiNxt8I8\nR9YYZHZbWRj3DRIdfOOW+OSJFtEzyJ0zd7SDQmDCYC7lUn5gxo4BgLbCWmIU\nM/eKxEv6QLBN0qk1oUfyfzO2VA9QZzXJDHTelr7dHG7qkEyCfsuknuLOBzA0\nWL3XJEv2s0O7u1u9Aednq9qHdSZz/mfPYC+v+bRTrzpGXsaCI4Uomleit9Wm\nGzhoQtN4RfUAoiizRm5CUVvGLSBjUEo53k5+/xYIYW1JlzZZXOCmmvYuSEBK\nr63M4rZrTC1NJT3AlSyivEnWYLJrzxDLOchatNvjh6wYwse9ge9zBjZdmnsC\naY0HNqsn7AKa6de30oMJ3gMI/h3r744m1ral4Flajhs0CSro+Byh+qODyvts\n9roc1gGTnaMR1DX3MaNmqju8jHdz2ABswWOjRdFyWeACiArfvilw7n9Qak6E\nBGv8DIrdhjmrr0Xz4NV8Bamr5sO5kgZMzWAydyUnxsj0W57wX+uA/COtBTT9\n/mjRIdVWCdOrGevjEFH913VOw+7fUiv6cd80zIfCKJkYzIPP8SFL5N1CE/MI\nrfU7\r\n=vc0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/list":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/menu-surface":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.bd685395b.0_1618857759067_0.1453554039899565","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/menu","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b239cfa2ef2f68734931a99820566352d5123c9b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b52196498.0.tgz","fileCount":38,"integrity":"sha512-ncYl+SU421hFa8tG2PW/QQxpIe+ulIvR9xft1GJKKWgyXPUfTks4pRCRjXaP6nNF/citvUaGjiCRnfUC57LC8Q==","signatures":[{"sig":"MEUCIG4kgiTOs1bHxWxc0MZdsYm4l11dLC5x/L2iOj8oBidiAiEA47TiAe7wCe0BdsgPEI9aVwnp2/DK5x2v4aOLIg6iWKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeETCRA9TVsSAnZWagAAwU0P/0PFpTrZvE7xDb/97L4F\nxXRJLzVfasXe2vq6Zgif3TSB0L8f6cfMcx2oK/mYxhazBrkJY3FZQehwnrCp\nRYU3i2cm4+qFlmP/ED2wUCEdWa75wChjJqIX1Uj/Jr9B4uetUhPnrs7tXrR7\nrI4ZuQMZe8q5TeDyFeSPTC7ouF2CcWBYBZaJtbaO8MESYKL+6YcDBV2KMB0J\n9C15peYfZ+1l93x2N6H3xggldv9maOoxTNCDsAXo6mcoDB2RToM/+a5wqq9T\noAT8Uyode4VPeXIUv2Yc3njXAerv49CRxxB53a05Y4oTbwOzrMOKh85FUD7n\npSSXWwQ3ruDYBzLuEzbFi1ntRvREVdBKGuBVKdHiLFvBPVz5NUVgguO5jSVD\ndfjXtSv4wEVPvZPv3mF54yN/H3yClnrzu+eFxdx/NrJXVy9NLZzgFVS65arf\nTQw/COTYy82lIK4hLGqAS0FOl4DBfnU0xiyjVn+aUYrvxKbNZB7UV1jMeNmA\nhw75leZ5P8okTm3p5t46t24AqaBtxpmmB9k7g2z1gk7gkQLXeswZS66s5ZKB\nWWR01TO1qte/koOUyat4mFnOR6t0Ys/mQohnwMznHIJvgM5+varCfvyPcbDa\nyuHB+u70tb5vNKxfD8kvWZnSYlKJIy/nh5Xbq5Ndbc/6bHNp0axnyHaF/23K\nwdBS\r\n=EyPR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/list":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/menu-surface":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b52196498.0_1618862354416_0.15832863703205025","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/menu","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c3adbde46ea973cd7b50c1bbc52832119ab980","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8ba3e298c.0.tgz","fileCount":38,"integrity":"sha512-CGZdY9TusAEkXPOvFh5I0nkBnYMJfQpfQ/QJBKU7eF4TCKzOWm9q4ubOOaWcjWU3eVqo0fzNvUldaDVKoyv2gA==","signatures":[{"sig":"MEYCIQDT/f0x70CaD8rX12Cd/dDni+qCTV1aRmfaJza0LYP3VAIhAJWZlXz3Kg7159zEjdXRUchlkeNLKlRYt711uuqNKFHh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDI7CRA9TVsSAnZWagAAcVAP/1IAdSTBzeH7bYwq3EL7\nTUb/wQ4vNGglXQn1I4C2ggpwr+e3MXZw6i6FvRV9kwds0QD68LtlmExL3kXu\nY8DggbElUfroRRwzuYQ+1OwGFJGr852z9KyRB+HaQlHmVlHssS/85squDNH8\nt9BtdFk0m4sFByuvg4q1yXFB+7QxXIjf4oP8o8gNim/S+uV63qYPwCHpoZbx\nKXr/vnBPL5Q4FykOEELGmr7Pgm4sPGx315MLIeeQqNiivTEYPWuyaHMGD0lC\nNNvrp4HEGB1Lz+rAQdbxAbo+WGEuXtER5mZ8PE0KHS5OVmf/bFbGWkMovwJS\n2cnXNg3/BcadngG1dCBqqEtrO+rkRilW/S9QL/WleFhn8sJfY1qoBLn2mIWq\nayI+eenp2CcJWAjc0d5TnaUvdhb/zUF1R+1nj8Wjqkx57MfGzM8gyzYUCdb4\nRHOhfYFMIGd2oiC/tmQ+msEUn9v8KYievgtkCZI6m4rDaCF3g93dze3SaT9M\nhIqCcVTW8MJLOKEOfxuaNAWfs/M4nfVBVpo0Ch1btdSAqIgwkzxeCvzKxZ4b\nGuUOlhzo96dfGdvCrXAR2TqzvI3VbLoI4ceMqdI7F6nKA3XCebLwP8j0ZlZm\nLjrNayEUbL323QZxithUZ/+00G7nvmmeF1b0L+pm99ibyntu1Yk++c4QPvdL\n+RBc\r\n=olKd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/list":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/menu-surface":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8ba3e298c.0_1619014202336_0.049033969709859404","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/menu","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a2b2ed1fd0dcba764e0ae2aeadb295101b4d781","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c629eab71.0.tgz","fileCount":38,"integrity":"sha512-AtR5G5weARLuVioDqtxqig1rFQrPXXCiRFKrulGR43+MZuIieZxDNwSsM6NfE2hLDk49NvjPYdDlWHts9ZOnzA==","signatures":[{"sig":"MEUCIBOUFPeaQOHsYMDuwZjG+1B7TpjGfnnZ0AhYmhPHszhrAiEAuoVDo58JmsviIyp6ekeQrV0CBa0d0vu9kABm7wD7dfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIP0CRA9TVsSAnZWagAAid4P/3wLHto+x57Xi9HWA7sT\nLSN8wVlCXPNverUT3Q+b8Yn282cTvkatc5Fjt77eJJkng0OEWJ1YBxQHIAV8\nluFgm/ARcGiKVD1xU1tDHCXwFtoZVxD9mqgwh5WbvFk+WGDuyfSf5UvC2+68\n7I2bIP87C5MGC38NRg+0pi16FDReaMV8hlmJ3DINvwvicM4uTFJVY/bQngH4\nFcD5IKA1Qg2iQOMQnTr299L/VBW3CKwY5SuziYEHF+eeKTgN/BAkTnX3e5zG\nAGisD/oYmeybTtUsi/f+3YQYc3jCa2MIXtGqdroe4eYDA+wXuPEqKvd1/Z+T\nZQBJvsT0P/1l+jX8/O/YAfgcNRprfhzTsbTJAciNNGtNzZ7uTPmKp3WF8nmY\nLJgyJFK6088EJHm0NrKI9jDAt+yrkCs6uctXK0PJ0Z7yEHvdFn+iuA53Higp\nnT5rk/jG5ZseyVhNqbnchHfDDMs1m8GtiG5judmog0rLhu1f2KgJSWJwSsR4\nXuIQhLVLCQ4ib5H8di0PZIF6M/WUqMpIq2bh9oaouSvjrqwrvqxloa9UfIHZ\neCncefYGy1+25zd5mZ3C2YxMR6NyhfF/c3BF914dznVrKjg2pq7QhWCMV03Y\nHYV4SpyJtaL+Sq9p7pyq+g3rdVKt3dI6+kJ4qgJi45vnRvjDBu6mcqSiGQzr\nUd/I\r\n=Yzdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/list":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/menu-surface":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c629eab71.0_1619035124389_0.6274781016698723","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/menu","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9378c9e7d9f4a0ccbaa69e2ebcdfd0e94dc0bfc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8ace3b810.0.tgz","fileCount":38,"integrity":"sha512-J0+jXrh5DsJrKlNT2ZsiOxq3+vIUAJTkAelJoGk8LIgcG5+NfKdZNgScVqOhVJH199RbnMY4sbX3eQsAhRP/iA==","signatures":[{"sig":"MEYCIQD6pc/R8D2C8u8+EYKp3YsVDWQSvFe3hRZeHqcGazriqwIhAMIUEJLWl4XAAgWBteQKKAT3akR6edLQt1T8n0iJpbFH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1zCRA9TVsSAnZWagAAB5IQAIuGe++aQtnueoF1rjSV\nsilTj+UtTKLZLfDvw6+RxdxkOCEViSFsDtHgu1QlaCWqMWoXyCabG+g4Kll9\nzBDkMae3Zkz8KUQEq1aJJS9Jf7VgpwCxQlFJvwevFsSvzSJB51VdZ8ZpDirB\ntp0huLGdTQiQPfOkJ+qk+sX4vt/Z8TtPdQ8RFgRPPokYZdW1kMHFotRDiY4G\nWyOzfI196j4CnaotAyROtpHVFR+/7xF4+K/+Va+a3R2KbH5xQImSwdzMUCAd\nUbcfrM5J27hwtmu436/GDVFeTwTkxb1esHvG5Fn1AyXJZ6tSpJwF6+l88i+V\nHUOV9I0STFevbqVgOKOPC9AWjScivEWCnnkckq6ydLiGLM/eFTkmMfUlSWnX\nU19xOkAKJiqbG7OTuVuKsEItaibsEnelOab9luENJAFdf1x7R0plohPz/4uH\n1mm8BUhJKdOyG+EZl94k166ZpLw14kbAWXk4L2A8VZV4Fh6gZlGgBuL7LTS5\nlHJNkU4MGomZD+FyU+04xopx24D5nm1gupLyl0XdNz4U/I6QFYmjo6qH5vUV\nEXKl4z6kEuQwozPGXD9KhBBxR7rMbFBMw4lmwszkvQbhapJFxq9KZEu3uvJu\njj4s4k5I9EDGl/q3i8AJnwSvI4ZqMU/PXBXfG/56y4eMaqAV1VuVnBJuBG0V\nDRCn\r\n=iSYU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/list":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/menu-surface":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8ace3b810.0_1619037555322_0.023400335646030612","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/menu","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d4de602aa00daa8f929d8f98034bf1926794320","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.70beaf42d.0.tgz","fileCount":38,"integrity":"sha512-LpcLoRlf58rkiIyyvPrcNYwmFA3zcv28jzJZvlQa4/kov3ythpzafvBpNy3buucVVTMGf6f6QZivT5loIMx9cw==","signatures":[{"sig":"MEYCIQDa4qOp5CqjbTSvMKuSauNCqo0xuM5u1up943gYGMsxNwIhAP0SSfTpJg2Psq+uoMtHUZ8CtHmfQt8GtktjIp9p487Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAmCRA9TVsSAnZWagAAiEAP+QHvl6810PJP0KfKJrje\n3kfVz2BDF5zDqpjn2sgVhvIUwZpBESVx4EfTuZIeKyfeTNtRwOgDyu3WJ+0c\nvIxnJ2u4Y3/GDi9143xTxNCUetpACAVQltLdJxASEDt14gUdW0yhDgIR58/3\nPuku0/bj7muC2Ym/HAVVcKP82Ffp+JCwXzDie50vEy5VBPo8y3ZZpunnxW3B\nqS8ac8/7FC3nu9zx4M7Ma74DDG0jQJCqiyA8hc7YxelxWt92a32PhCUUXtwM\n2KTvqSrv1zAFG0rtxrC8Z9zFGeBuOp4MzQ7vPs9hHn7iCjiAF4mBFLV2ONYN\nc5HOrBpJNPzzI66QHcs8N7zivzF5hiwjBoxlNKU8wJ0lVxkH3Lhxu7/Ygwpb\nff5QArGLwPyPVaB4juCwsodHjiG1hNEDOZg2BZhqy5e7hRjIJpynSlCywBND\n4Umueuw8pBeH8qOJPC7Qe7E0KxJP94+A1qXEVxlc5+E4TifU46oDvS9zbivs\neaJlh91lW8FCVhdDYSSgobJFOr3i1XI8DaEE61ANGWfDB9/tJDNE9k+F4bx+\nO+P7dzV+W0puX6CKyoxhVDXNMLAo16X3BqIkG159bvX7nvAd2MgBBPN1ytIz\nf6W210wI8Orxjf71ZxHfyl/jXfyRJ6lKUElU1AuPR97qe21jzjGE0OMGIAAk\n1FJ1\r\n=w+bN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/list":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/menu-surface":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.70beaf42d.0_1619038245961_0.35213540207259664","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/menu","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3385e3d6011dabe688a788f1a2ba37499d0737fa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.cad489689.0.tgz","fileCount":38,"integrity":"sha512-qnJUDDeaCEMoFrL8InF7H+Bb3cAhoepkds0j444GD4I6f9IJApVtvKqGNG1/dh34tOi9gOxsVRs44HM0ObrUNQ==","signatures":[{"sig":"MEUCIQDYQfuF1k3dp/rh3FpR8e/+5GVUPcsxJ+kLQpa6kwH7iQIgD6ceWeiNpLKclPNRRIa/7M4B/pFQ0B5NTc4F1pUnLlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggal3CRA9TVsSAnZWagAAhrIP/15P/CJk9htahhph/95Z\n64df5I+EvOYbSto6w2fwOdn3d1Odj86+ubJFR19kd4jXXQ9zeqo7RmpGPvrb\nWrTGn/Mc02s0ZM5ZaHJ++x/URLhX1u5YrbomYEOvl24XQmD5cfiLMk4lgVDf\ndcKN6RZGVxjouThxmdXsUAAphChlFCZrtcRah5RKuC61zP11Boz2cWleRxIi\nXUr1mvmYUwAE2myyu8Qb8rRbMHOu/TUzga9/lhcvFEdfNpmdOTRbURL3DzD4\n7UA0CciMvkPc3jZFbR/kGEqLGW/D7+tfcPQomXqFUsMmY9LirAMigv6DCDMq\nSL9ZBacZhdu476LQL/apOCse5Ok40B3XylovQOtsazImi6xKecz6RjlIztbC\nr3U3A723hjT8XtWvWflBT9yGVVU+ggp7Ut1xToY022fwRiBH/JAHDRzOxZkl\nqLCV9D/J8kEj9DQ0Z0+HRybP3H1oj9Agffwhi1ygixt0khsEsEyOhk/zhnoe\nBVGhfa1X62M2JmLg+wV5xNFk++pJegQ+ld/p3RJN6zdPJUIu8G97shWkuZmh\nyv3ScpYa2bf6rM3Y2mII6QdReOqOuwzBVSCM2wI4dFtToISya76NOtHPK5JW\nLTRGnlfagwDiWQDKqdIJICPTBKB5ps7Wwo1pp/qgEUExsAfvuvzXrofVkTpa\nYLzd\r\n=lBKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/list":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/menu-surface":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.cad489689.0_1619110262518_0.46200527694380034","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/menu","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4464e418549982cab8c17697186d349ea7ec64ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d928692b5.0.tgz","fileCount":38,"integrity":"sha512-/Tlnxy8LUvLpQ8M3SeSrk3Ogvbf8+sNMEePdbDTvq0BPJW8aRBx4TMEVoiKI1wgfvgX4sWux9ROHLNTCdC5N1A==","signatures":[{"sig":"MEYCIQCPb3Sm52uuAtcPC5xzruJx/+pHypeUIqod+g9KcyOMQgIhAIK6pZ3Y3Flav8pEUliTAuKyaHbiYV4dxY2eXb7ySFMh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwV+CRA9TVsSAnZWagAAYicP/1H7+BuPv4jEdQj/79Z1\nhyw/UxEezCBLbrvVhuGmerrRFvaaYKP5MGksjnf8KFD0Enuv+n7JCEkKu2S3\nwxPkMrPea9kTyJhPFXQ3Uvv6yMXtG3cBCY8Xslq6/oK2tEtsG2yLKgEn1Ae0\nDakLDeA9TX6tqd5hrRl1TJhIO9TRw2w/ZxoEME+eLnN9p0hhMvZ1uMfQmrzN\n6lMbUTN+qAXn4LxL7eQVAhdQeQ015GE2KNyGf5JbIPamMAdce6ZGJ+6SoLNE\nSAtPwdoIx67O1vdGtM1//PHuKO2cpMLkSK0rZjmOwZvEXFsIy+9Wk92Srov2\nqCWTdhC3X/t85OaE6VpLFCqR18twAC2lS12fAaHb0D5Vn4TPwHdZ0FYnawFr\nnLJa7vNIJ+9HsE57PwJxgL7zb4zt9EoaJe/ULCKKZMjjfK13lSiGC9WMoR5v\nKRo6p3AtrpchaUOXGcMwXfjMi8XL/GbJZLmQGTiLlOVujgaoLY6DkOKCC4EB\nF9Z6yqoywNfJVjMk/C+l1VCyF7B+JBWQcd4hJFiQNQsVb3ZyEGZoDfZOsdsb\nEix9EZaIMeGJ10U2Zz+CserrKru019vizooM/63oAn22Gcsw2SvDLls37dQV\ntD5V7Uq9r3qGoY2CyYN36Rfuh9n6yBFeLIPGB7UHDe9n4fholveNjTWX/pr6\nRclA\r\n=nK89\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/list":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/menu-surface":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d928692b5.0_1619199358222_0.903449930379016","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/menu","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9f8920540c8b911d2fd6967e42de3dbabc1cb9e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8f68de8f3.0.tgz","fileCount":38,"integrity":"sha512-ute09ki2FWrX5M9iKnywDIgMODIVleFanNTCsb+OjJbePG0iy4oK1GVRnxNpwO0/OfG+8INpsef3HIeGF5z50g==","signatures":[{"sig":"MEQCIDuwaxuQggG5XO72+ugN+OgJs19TwuEcndy4aPTwn4dnAiBh4JNkNxLIq6PUmPKFNnELBiNPrXhY7mcvAEqqsp9lQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw6TCRA9TVsSAnZWagAAXSUP/3FzJvBTtbDrGgLkIlkX\nMbresSBVSWV/xDVG9m+OfREEke2xv8xe55tgKevZnHxEJfLvACJox3jz0806\nLPdjPJw+oSULzcHEAeeugM3TnzBwdQmbbJ+0h2Fsj9WMRCRJIEbtp7WC2qkh\nF3v8BVyl6ehxhajPNNqLJtQ7kSzjjakt1O++hNWKwbjdhlJeR7kzmNP5kwTJ\nOSgLzBHj6fkAs9z2cosVW1YmqAX2IbtYvwRmbhhPRAQl5SZFKqrvZiapz4dm\nkSvsy+qhW7ZLKO1jahSlNwnNXBSduD8/woD45U4R31dS+L/+pxvD5L3DFvTj\nR+03+CLHtN9cCvECeZg5mw2plxTy2QUpn6FXQo2L3nw2TOvyK/ZBqJ3TPf1v\n23H0keiW7SNyagxLQRR7MCzpozY10eQxSx9GCLu9qlJ4yzMlGXdXakAlFqpu\nfZ+Myn+16Z60GTu0XXiwEd3yTOsxCcpEQZ4nFHMm2mJfO/9q7vyvRX6iv8dh\nyZ2qHV0TzNObRqdhMhlda4a8gALdFwnV6/9h147OlHEe4Dz9sBrvr8huW+Xw\nplPG6MuYs4qoWimzudOG5DRNyduXDhncf31hPeU5I8cLrBT0rierT307wjOq\nplyRY8isqdTV/g7Br1nQP87a0Xx39B3+fT0ge/Nsau0eJmMDK2p+/ahApAZk\n1+4K\r\n=Hr5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/list":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/menu-surface":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8f68de8f3.0_1619201682735_0.9196833994537381","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/menu","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7089a25efe5f3dd43cabf684b1f88189745714fe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.05753cf77.0.tgz","fileCount":38,"integrity":"sha512-OBzSC5HyYPuzMwE/D1SHfjEFEK1B6z8WvZantK8ce60i4Rs+kOmR4c+ezvFroweH12ICMFUuFMDi4328EHYWNw==","signatures":[{"sig":"MEUCIDZSl7ByqVyBbSWE/irl7PE60uC3HnX57AN4n+iKot90AiEAy5WmvzznWa6oa+sYwpLKTzILhpLpIZQM/hbT1utUHBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1viCRA9TVsSAnZWagAAcRsP/3RRFz99mYT4aVVL5aWo\n5MtlkGJfsxPheWlCb+FNKh2brBMWI8yeKxQQBfNxlJjIFmmSqJZM8GhJoftP\n96oE8N/odcF49bae1poTxmfw9FeIV+N5/SBsz21AUmscZwZ7JTIWBBfpq01k\nafYJ7HLNU+7JxJWOvdzkrdsMXDZoOKDQJzm2TMIp20cF4FBypjMs3ps9Jndv\nhM03lMWfOkjMskhjZL7d3IwlcZpZGvhNlzRVGMWMeN3KLUszXl2FXPcPDhrt\n5qVe6sZl4gWWIo5XPXlUYc1vF6guPlOc4pH0rppQIT0jSWpNynurtLjw+7GG\npNg/qiSQtp3C618SsitDyhRYEpyqytgTg8nP+nMMnNkbZrtROK+nMA1dM4Un\n36W47QsV2jKHbXEu6ep7fPHNA2CBFqWWmt465uxOUssd/WoFCS7hQL1yWpPi\n1YN6+n9OJvYVdbG4n+Ab4JBjhccNeYj5OsqHps1bu/1kvld9aQE5BFGGa4O+\nLPVZW8f1xrhT6QmkMnIk62e+qTClSfUxqUK7vd1307267GxuCEq2XZ1gg8v1\ntV937W8eObBKwuCo0IHtbzpLdXD78ewRjMU8MXEv7Kiel5rA6Jn2OipCZ/VM\n47hDJFZ805J3qWL4aK6ouUxJGnGR2lZkb4JbW6UH56NdOF/p5zBJiFdx4wRj\nqVBe\r\n=dtbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/list":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/menu-surface":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.05753cf77.0_1619221474180_0.7961121512146998","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/menu","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ac3faaadff3eb1311bd84295b9d8175e4344f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ef43e6d96.0.tgz","fileCount":38,"integrity":"sha512-wbSExtkDECCtAhMIyqjTEFWmh6CfIwGXlfFwFMg3HzhZPsFdw93jVqg0kdWBc1y06W5WHrfFoqIz99yFrKTkeg==","signatures":[{"sig":"MEYCIQDyYoRm+heE72mTdzMryU+2WyM2c59jmkLIpyCsUo1ndAIhAPh4TQhpMwOvPbm3OYrwK+xg+l/vsIE4BHCWOMCMq3pg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11fCRA9TVsSAnZWagAAleEP/jYKzwoJrLampR5WQfXl\nkbVhLmIy+egYs8yJ+daYYtnJVg+hvEZfskCMLpf7b9eB54pIW5aS4+/BKvoK\nCtt1bQAMimqMIGD2AyHMCOJQESO9PGV3cCjqXanUjrRqv7HTXDxc0HzkVzlx\nroOzXnJtGtHBRy2yqG776n27cih5lLKIP3MmWIq5cEaCDhkgKLhqU0JC4mT3\nBvJWYlpQykWBIuBRMpJS316TiVdgnzw/uCCe1XAUFZld00TiFWF221WQ6Uxw\nr5DrUmjqWebM+4IS0K7mDBwjyCkvO0lcDHukcdBqm7Sw4SEsMacIoWBgg05h\nE9QotV+HdlEePB7gX4jkwNJboSi/YXWkMC5a0JjzIHEs7nmjsGXSYLZsTvov\nuwP4i0cRX0caF4yX+jRCK66E6Kq5yoK5Sos1iskm60tZPhScs4sn9ohYWhjO\nfkeq80FMBeayVqT7jzK8R5rnyRr4biUrYd7Fw6ILShq9g7SEXFI6GDxilh7h\nkT7IJdNLsAJUCZAcKuMH1+FJV6aGO1XMc+F2YUSzcQ1aSJdu6e06jzF2GR12\nfRnS3uC8H0LswhBPmPTAs0UbS80T32JMttbmLYzavGmUYdpMKajygnUpSlre\nhv1/5zi2ZU/VV49Ey3An1FZhna5rOrlyQ7cXtIGHexYxr8h4dt94h9m7H3K1\npha0\r\n=QW2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/list":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/menu-surface":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ef43e6d96.0_1619221855449_0.29717652224902835","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/menu","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4790ffc199b5686c16d052b064bb00c9268eb5f9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.197f64fa2.0.tgz","fileCount":38,"integrity":"sha512-U0+7fzMdyTPA+Wy3SFnguulGjWSV/N9O1tHSR0t1eZPOGoV7hloNaLlp2j0zohLMiKGlchIpbq1+KW0IqKRPFQ==","signatures":[{"sig":"MEUCIQDj2dcKQ89HtcvWU3F3EjddGmNU+wVHpeGdQNkhZ6Er+AIgY9DOvRke4dnS8nwiejudL2E9vj6t2JBjKosK6cEGSAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQ4CRA9TVsSAnZWagAAuRoP/1fuUHzWSAkNYw5Zqd9J\nU9kqNxsgLfNKwN55nvWm+D36y1JAJXwissRyZZ3bwZIc+N553C+i4HzlBqpD\nBnoCKBrWLjOaPePMWlwh23b9vpJeag6w6F3Ajgp8hOxB026kF6F7SQnksO9u\n0OFTj6Rd4enwYCH8pHKomtqTb0V3d+AF1a3swnq+dWAPZYKj1OpHu/o8lxni\nqWYiIUKoy4jFs/bIMFLQgSYN0YYOaJu8/d1fRo66k19TCfcxZ6BLIITX1V8j\noimXmZtWQkXdF32MlE+qHa38T8yke258VcbN9ejKmutaiBXXn3cqt5SwyV4C\nnJcTx+j1FPRyXK9qkYYH1v3qbsLHkV3FMFdSlnddST+cIgwp5r13qH61n58d\ntGr2EN2zcjz9tdsEbgI+hg2V0p+iAn6SydFmtYYOcwTQQM9exgYnMyM+kzGG\n/pdYHtte7PY/YGahwMioN7FVhqUyogKEsprfbENar2ILG6Gb31D9xNI5Xzv4\nVVT/PaUp7OfeoJcnyA9+jEQsLEKlZt+VbSDzj08iVJG2WfcBr98oHYEJ8Ir3\nyh4Kbib8dg2eobxuOiAGk7I+ENpXV+nTD7rE8/RsIiH+T6pxmM2tGrmctFnQ\nsNIarjVH7EpH5DhtuB4REXw06JTchUiUpAWX/zpCOncecinW6S9CQh/Bk8f+\nKyVF\r\n=wS5V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/list":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/menu-surface":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.197f64fa2.0_1619457078989_0.9629756248589041","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/menu","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95676875495ef47a3d0a7fd0b5588df66a700631","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":38,"integrity":"sha512-8AwaR8YR49MWxdI2bNNYRNbR3J1zmaPoAC4WTT/BGrrHblLYYda30uRj9ZJawHBBgpD1SDfESFYexqN4BaQqbg==","signatures":[{"sig":"MEQCIHshvlX1MaK6D27OV+ripI6UUQg0weOLGrcDZZxI0zhlAiAKuDPMINIke+az//+LpMTFkym+RN9ivEFVhNARh16jSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2cWCRA9TVsSAnZWagAAtkcQAIeuSbQ31zMqpho7Mw2K\nXAQKsAEfqaxn9FgCNqsIleTQD+gEbFIDb1FmYjRtp+/bCtxelR6ZvwUHrhGz\nsjQmniNskzyUGFK91szmvYLa2Q7eNaWyA6vKFRFGKr6AI15rHQZ5rrifNezI\ndZmE7Lre/Q0nAeHnT5xcWTaFVL/Th5MdjasV358dNFoi37JjcKZmli3mOQS6\nNar3YJERi55sw2++ULjiLHD/HBhhRqjpQ7Ih7lSW2h6sY8OUqbj/X1CbeEh0\nSgZ/PB6msatj/wyz9xWj/3JpJ/oeVOa/KMX5Y/F4LDtR7w+UelHCyNFMF6Zy\n3DFp2uESxP+h/6vMtgt0bk+0mHQvUa3WzDU7lxb1KdaQr/BO0c7HzfvvD5mx\ngp7LuOuC6BM8A0k3vtR2FBvTTYJEkiscnY2kyvtSW9gH9oIWt8/tCmZu/fu0\nwV/eIyv5rF1l9FtAhQTI2EKSP44zm8CN4v0Sc2JXs92ZgESO2zRqnyFNa/af\nBFqQAgDDZfgxjC+cBOOWTLjp/bDxA0x/X93AOlJ6Gr381LP3aAozEr7LAcTI\nfc9EayLELOjguG+2C/Sh1VgGWRKY+5vBarAXD8vfbhGkJ6nWQSfPyZjMfbj+\nec2u07t3M6ecfTwIOIWdR1HJUd1lL5r9UYKn702bKnAcBkHutUdjeBevOs8S\nnZSr\r\n=pnZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/list":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/menu-surface":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.55ad2d7d8.0_1619486486097_0.6764841189922737","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/menu","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca378e1e9a265dd8991e42409b42e1685b81750f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ec4ac5234.0.tgz","fileCount":38,"integrity":"sha512-rd9NAzsxcK9Xw3R1kFBVuy8n3UgbYtBEQgxGBj3ReNp91vrH2mgCj2jilpxH3VRIwxDRJ8Hwx7VuNsjE9f5wpQ==","signatures":[{"sig":"MEYCIQDnmLgey5TEwMEaQLVSJxi9L9eoR/V09fr4GHZ3zQ/XJwIhAKUjq9dwhHjLFTFmARuMDCoevw7avd1RgKfVif9sm/NM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8SDCRA9TVsSAnZWagAAsqsQAJ1C37S7oZl9/DFMZeDG\nL3nFCQfl6CahQJaXymw9SIpLLKo5dsu+ycicjGSJJcsaDdM6WZ1MMKZzFqhA\nIixLkmZhHLLORoXoCM2NjdMXLIbV2qrDmXzLh1FgWslvuhEaD781HHKxQGtd\nc/rcoj0Lw1owrWWKq7YyeS6KnJsCDQuz+JAwMTK/4jYHiJ1clczyy2tumwRI\nrLHHyJPcmkeBYXCGETrbZrq6/8WwecZjXV+1L6ADqoCaaPXSpGHgLJlVImgt\ncodujZYEBJaPKcmwgVi782UcL/8+FfshhsPU2+JVmtemd/fxKgNXEqmsVVHF\nFz2SbJ7S54kdSZs3+DkaElv4NKmKopArGFcWK1wHxGqn2qyzjRn9deBfUycw\n7lIhfOtF0wrmIhxenhTXtxjzKTVDn/W4+ajyFKba4MzlGeLg6EkoEok7+LXx\n2rlUTI7cJdCobjPoJgSFtZuzBO4Y31AFzowZOMTsivwI98HN+woJKGFgTxOV\n9XmRp81qlezug6+axTSQO1LLv/fbdvG+8SjpyI1mmwm+RXCOK/2IglxUnjJd\n4W3KmRhTFaQ35T4EIvT5ZaDa1ERHVfN3kS1SKCjKhKp38+Qdx5mGnePkSPh5\nAV9IAn+SbFP1kAG4HFFMsbahsYvp2rvzclF9dNz9irMqufmt4fqjFw/xG/Z9\nyqEA\r\n=5y7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/list":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/menu-surface":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ec4ac5234.0_1619510403038_0.29693432401711095","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/menu","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea9d148291a52c05030134222166fcbb85d4f9c0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b0579acdb.0.tgz","fileCount":38,"integrity":"sha512-RfauzCI8iwSFAFZcFeV8z+6aGCR3VcM3ri5T3SalKBUM6IuE0/9jo10N3k7r7DCffvXDArMD/Cpk5RR+iNa0vw==","signatures":[{"sig":"MEYCIQDCmMEIeVHIcWyBlFjlz82XbSNsAbwvfMMirjSfsmCS0QIhALNinw1C+4DObpfI/ERSxdgsxHoQtiPCN3rF0bJveYC1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81lCRA9TVsSAnZWagAA5Q4P/05W7QpaIdILsBbnehys\nfC2dQQFR84BmWdaIcvxvlKJej2uE591PdBR1udVtxLdOFm1TbW5QJSiJS35+\n5QHkPKcP/miaet02JiuRBM69d9BtkHOpZqYGm1ZvtLK7i/fsmH9RmT2rQnXf\nO8+y/RR1Rfqlknvb/mdJoNs2g/Ztj+U7j7sxzkNe2RBPLzp4zSelJHuHJ47M\nLjcVE6SqRyaGVsKZzcldM5vwu/VAq81OtRJNH/FDI1gfIh1MPoP2MCxOWM03\ni4D82iTU+pUhWhPcWG/hXStqQXhgakdLMU2CcqhxBXdptigWo9uSFbTd9UGV\nJmNHOpMTLTOTliMLZGZgWDGSuwgmc/VPo/MIw8j00rNO7wfBm3Xz7OMCP0gM\nEPCtbTDSLCL9wmLRQPHAEzhm8STeJjDQq1qb7dq4XqjCsuz4HeHjSyOwjDNc\nCLUpjIBYt465V4MvCAPUAEmtsUKV3bSqF66DnJ0A9/B4CQ1ZMl3HmacSUXSV\n4UwyA8gFFzuX60a7qy56RRIvkadmWBo6LUA6jCdjBpX9TrwtXl3kz7cBwy+c\nVybU3HC14NFphmyGtY6dpX1nskoZFV28+9tPZcQJdYFmRqksoMIyR+gBU4oH\nRi98/CAXsXGcUXhG9qI1bCRx0SdTRkLWYSQPGrlr1kmUT0rkINT/0ph6ebBQ\nXZ/2\r\n=r3dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/list":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/menu-surface":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b0579acdb.0_1619512677218_0.3463626793598906","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/menu","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d63baa2b962a55e8cabff6c2bb39b74f3ddc228d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":38,"integrity":"sha512-3uNhRGyd4Unk6NfFAEUS9Ri1HWQy02yV4mr099WOw/1ChdrKxUfwUvxf8w0LHzLOkI3Bv2cD79xk7GZOZgLLTw==","signatures":[{"sig":"MEQCIA3rRaBQn0SyrtyhCSmvUSfJJe8GQdv90VO+2PismXTXAiBGRGMHnbNXU4E5H2qDpRfkoWKS6JnyUs2qEMa1SIndrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHsuCRA9TVsSAnZWagAAg80P/0YdYINYIcxbpJv/vSry\nyuiJZog3uj26OKAMd1lYSXsJfv8QNglktV2HCet6uVsqEzBhEnrWQ5unMS2c\nfRpQcRHS+HFFcCQDQsHrClQzEqG5hrrOj5BcMRFwC8JGqzu/GAP3oiYyw9k1\nfMHHraDIHKQNEs3+k1+MSsHEa7UQfIPZ4HqJk8uQ+kIPfejFiOigxjYx75H3\nCxybsW/5ViZNi/Knli560JCGhQl1qItuxePNtC/TWRwJNkVdrkZHdrqp6+US\nUM2zRNTPvRay7DfHx9RYpdbc2UgTIxDjKGrCUDW0nJCVZ7nwThKQS/h+lEZR\nKmcNnxCGgTGtwUTVSCjTO1hVXnBUCsjIDzy5xKcUcnRsRoBdGr8h3CcV6i9X\nawE/ZvKRpI3Ns1mDtY7sJbo1zbkmLU26OYS4m+ZRJBIJHNyXtN+Z5HIoaX55\nTtol0dmoiDerapKGGbDZlH7SVEoMsNhXrhcwn8d7Mu5nLzhiGNhXLIlsJACx\nxBueLafWx6nPuAJ7C6JkHr+nZ3V32K063vMC9Vg/6lmBUpZoAt86XytK5uqm\n0F3lGdGFosjw+uPE52pS3gPKNj3e53M0Kd+S4MTDgFEc23Fj9mUHV/Ay4Fvs\nZc7Zx+fDtBetXKdPmqe/pT+1t257gLwmIVVmBY3nkeaG9Z9qQpIijT5dJN9t\nWxtn\r\n=KP84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/list":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/menu-surface":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.81e2d4ff3.0_1619557165904_0.44899194256297403","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/menu","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f17e6148005d55d30ac571fbe700823fd332156e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c8edee52c.0.tgz","fileCount":38,"integrity":"sha512-YhttpILDgHutdEh6m5OjJMSinf52uSraEH9e7IFuIpai1cpNHbxYkMwK8fwcgAD2q5o/Qzd0w0gpmrGZt1Hs1Q==","signatures":[{"sig":"MEQCID2VH4cJqHftLMPNeW47Tg8PapwiK6SG08HYu42gBKyfAiAoSLqCudwqXLngppQDZhxFVN5StoZa1rtlOfCFUaf4Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZ6CRA9TVsSAnZWagAAJJgP+wZpvQAUegBjRnnJRiIi\nhdgsu7EmOO0x1neklF1JDyjW3BR9o9BSUY1KDrYeG2FCkoLQDcP6KA6UYqMU\nURyxTosdfuegtezqBlJ+dFNSExxZAT65+tC3ziyhnRQ5Zz62G7KwH3PeIKcL\npshJplJylVp/Y6UTThVWYAit2OU0knBYeSu4Q1p8zM6EUMGeWMAQgg/jeoz/\nIso6QofdH1Fx+Ox/Wz5cmm/9P9uU3O6Eg264vGhGjlkX8rqaDMwoTIcWCPrk\nt7wYsV/w0EtgFEKdamxtWuH1/6XA9DwuDqAdiC4py3XOkxOpvWRC1bEBMzss\nwkbWg2hgM/FSvMt6aRtw2Fp7TPG3sZmoq+5G7tIWB3lraGwSUhRmLRSgj3mm\nhl+MtW5Qwba56iYknxBdXTS1Gknv5+THeBVIJbq/i3Eiu4WY+KVqEeGXZIwX\nLQzt91KMKA1nzvPTTr7QpRf1Im2aLB5bLwgApen8YMedQKGlKWK82TNXXJqS\nEFOQlRnM2ggwHmLZovS3vMtPqRhtk5HNjAfMejaI90wdiERAjX1mvHuU1mN3\nFgcCZNss8jDAai4fr960BGkukKZl++nqLr98GK7Df48onz7vCEqp7zlh5o7a\nLEm+LBZbeM9baDjIJ7j/WBEsXidy67i+DRj5aAEH5Z8HVxOuZDaNTbL0khYA\n0COg\r\n=L9Hf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/list":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/menu-surface":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c8edee52c.0_1619560057539_0.5395354572413074","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/menu","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d8b5cc8d393bd65f52c59d475c1f2ab048fb3e1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f5b6110d6.0.tgz","fileCount":38,"integrity":"sha512-LhqrdCPzoQf5McegO07+bslOAeNeAWCLW+yiwUx7Zb3DSz2qB7XPgQVtpwZ5Gp6vXqK10TQlvhSQWPtr/K8gYg==","signatures":[{"sig":"MEYCIQD295OwQueNRJ9Jyu+t4CRUYkWvKStcmCcTdz/qwjJsUgIhAK5IG+6VVg0APgVzY4Eb0+uMxHln5slqyYaq4tZhjY/y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIt1CRA9TVsSAnZWagAAuOEP/1GW1PMUgAlJv/L53Ww6\n3SoGLintIG+TjCkvWEG+lGQvskLEukRjn/L4xjSVh1WrJxrWzHqiMNPZemMm\nrJQaNx2GifulJ+34MdK+s7KiPqNf9RIPYJfw8jjFNDPo23X9UVB1aiOpI41Z\nrFHuTAMhl8Yy5GdSQFLh/jcJk4yDwx++BAMbcro7kwY9iJ5YLEzVoSQx5s6K\nsAIk/lVnfVifLs0M+gr4ljngVHv8uywpAI/znUVez2L9CxkSDHd75VizdSk0\nuoQ8Soo4FS6jPGKhiVNSiHQySaEc6uqmAf+M+PK2c9A+xoYMyR6iWgg2vgfB\n1cmHvSkBHtmR0iLVFF75QMAtVZHGOb9oO7ZIcncqAwKLWLuwrGTSIyYzIlSO\nJbNK9EDtaMFj1aYntrsOWT0vNgPVV/eFMTHT2TrG12qqVms5gQDzwQCwKuun\nNqblEPqs3dHEKbayH8QjktwLQ7fD+nA1qQ42saUrfOuE6dmhJRw6C2Vk4ncw\nSyLgBYPf20RyrnD0KPjeOgMR3PF+L+4m17dk/TsuorOs3V/g7jOoMtsJAXEL\nvqOn6spps3rJuSJHnwcFwsHhYvd9TyLCQqbIAyQ4qGJV1kYKki+MR1rh4Rih\nAwtt+Sa/WaQhGY0siCPebgt1/TiqXgToikUgWH6tE4lmzvvt82CtcFBJfl7E\n1kF2\r\n=mFXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/list":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/menu-surface":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f5b6110d6.0_1619561333293_0.7279661165423796","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/menu","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"619272b0f5a54d28e5b4c22a396edc310b98a10b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.cee9b9e22.0.tgz","fileCount":38,"integrity":"sha512-8KHZ0ApgJxLMK6DBeO5U/HCAIoy2PzA4OlVH0wYsxiEqdy4wMzXnSHaU0t1eKUi1lYF9NfM7MyIboeyusEMf0A==","signatures":[{"sig":"MEUCIAkIN2sMBjyxyEJa6POexGq+tTfhc/siASjbvS3lG0FiAiEAqQ5znXRV258jj+MqMwpnOA7xjS0fjE+fiYLIl+BtGE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjkCRA9TVsSAnZWagAAQLkP/ApM/KP5rErC3x2KJYAM\nhlQJgzNuGrN0wa4G/f+ePJqhyE8kHwvabhCkqy3YWJgZrTJhxeih/Lh0XulC\nIFfbYXP5iaAoMaM6XHiTIxWL9uVOc+y3iS2UEP7VXTFp9Dxv5OV4psxbz+q8\ngYW7DAGgdWWNJQfuZlpl57vhCKc2OPPVFFw31dPq6R+M9au1dz89zW2xhbcn\nxthD5blx8+HIIICcoa8U8iv3/wHOuk0t4aWWx3Ts2DfkfvGol3RFH1mjmHdd\nc1Pg1LWuKLH48DUkHBDWENOuQwMxW4D26Zh2KIWDhyon/3JgvAj2yDjOztlV\ntwAte6Nda6sIMbZAc9VWz3mHQpT+zCKWUQNS85ZjIn9iIQvTjgyRJ7ZQ9nDd\nlCDiWK0RN0fhCt9COa0uiMO2lGHXtgFm8gKzc5/HJYrwQaxm24lD7v6d2mq2\nQED3VWmqkmNMbHn/CP6tMuxXRXKPmxrjnDoi/9P8caxRFA8mNxQUuR5VxsP6\nGdRCtpC8kmYDnWJtxCEuhFlSQdK0r61CRPoZ7SSVdOUomH0dvsFs1y3sXcxd\nFxYomUc/ZIDcZeRleFFKlo9pO1WWaqbXTExPJj40nCyCukMAAizAWAEc0Rv3\n5MMBGuJv7Fz/zyryh9nj/DqRQayTNUBZDP534qk5+DJh7UH962ZF7xJd3+9V\naIg4\r\n=rhqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/list":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/menu-surface":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.cee9b9e22.0_1619568867724_0.5401838051943015","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/menu","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512c1f504f3245c359afd8fe01922e983f29d5ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.96e83fca7.0.tgz","fileCount":38,"integrity":"sha512-U96LM/aob1Wb9djWqQSrpeaKao8l78NP8gUnHtaQCGIwyWYWYZIMKPj5L3a9gX6j0mT5vZYAbmRIGGOzxWDgKQ==","signatures":[{"sig":"MEUCID6nn7GYhPT87rKRdDgKCElTnyb4+O9GFUnw775WyeyUAiEA/BuODlG8DRlO7vVtYVQ7SdUZSNSfRoxynTRK7hgMvyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0yCRA9TVsSAnZWagAACaUP/jPiTux8NyrcebRuECUr\nkBGFLh/QBJo2LKUakfwVMVJVHD2beuByb2PXws56ykaYO4QmYw9/kIAdme1N\n5o3Fjjt16pZRJkwd953zTwNsEgy8WG9za72km8HHOo9ufZ2jC63RJ5lhWdH5\nhcj4u3oBF3zGTFPvMqZ65ji71wqM+nK10C1/J7dqro5qVdVYVSdCKnnolTVt\n19t8Zz7eqFkFsbqjqWjFWK3GQNLCvLYVkYVbRX2LpTch+YZeD5uDmYwd/dvn\nYpUIrmTtguX7jo/aLruLBnHGfSzx6BKh/xMS8CLdzzboig77RN2xeXJbGI4P\nYaR220vLewCPJr/vyc6jnxPNIXJs3klFBSjciTKB8wuZ7iqykiz5Lx+yCJqn\n3U3Me29hqt7IqlH5Bf9FPp64ycJQafXYvt/XPy3dYBbmVEmSKWw5MMBJ8fWe\n6UXdPMBkHmfuwQ/TychNpzNx2Wlyp45RHjWPA/WxYzET56MYkRPxmwx7k/WM\ntCPcmC9zqAC1C7zEin6MqFHkIKzQC0sa0Q948Vc3ZfrmnQWreMXlZ+umA0Pp\n3glytZgW66ZVseMFGYVMN7wj2L6F6bRFpuWROMLO1qxeWYwQYxS4YW4exDQR\nrz8zGJyosGFoKppfQa0wSLqX6+oc6XxLM9qpsSvmnvgV5lWdW43X3w9NmKjI\nFoFj\r\n=+rmV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/list":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/menu-surface":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.96e83fca7.0_1619578161941_0.8077367903865305","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/menu","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c0251281adba5a85e7fb6cc887ad0e03b961e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4c497bd19.0.tgz","fileCount":38,"integrity":"sha512-+M0mGlY3hcO4cDPTgqHl2yr0VIRDtxKfisoYbg3qJm6IXRme65e7/vDzZxgjQvoTS1x3bic3dg4+/i4iMprnMA==","signatures":[{"sig":"MEYCIQCPYyLTtkrIFe7LW4Hqq7GmH87wB212eQnDs9y5+C4g2QIhAN2sMC/5DMj1dvxwQmVdkZIMcsHiboWF54Zv8altfoMT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaF7CRA9TVsSAnZWagAANNUP/2FXWmj2+I7jgM6Kt+nH\nMgoclW377nfGoel2YYP+4cXYDStPpHxJtMPIVv0Z8a+qOLCFUexPmUkKiFCF\nDGO+PsGmZUIfcMmtDQstVo+QmHDhDe+E0ypzqKzvCaA0kYUyHaJTsV0WEoVR\nwa2wFG/0qqVGjcJ5xjEenN9DQprCW99qfEVU5PLQX75DgAX0WwC16frqjseB\nh5F5W30YcL4U43D+3Wq8Id2XzlUfeITiUdG9Vf1nSDe1SOYdWeOnn6OG/IFr\nqBX26E3+rpRjBJ8nhNUJ+bWzdETiO+LB7y8Wp7UpFkpU7d0+OABdSgkbK/Pi\n3R4Fn9cq0b7DWySCo1oak77oCgTVYa2b8ggcOYO1apmNhabo7bjTVsNV1jot\n1gvxcx8txRqm3o4el5P6l59Y//3yUC1GCiwHQ07kWVnrRai8TxLedKPUGw/w\nu6sL3BhMIYmjvrWkSDTfXcfZY193hu1i4Wnn0ECpAeM06jqv9McJlbYHDTl7\nE9mxZRUq7GYJQjfeaYQ3QjLYh5W4ti+ek9GBX2kEoo0jkfQrZ34t8mwU2lnE\nuSWma8gIpJz3n+meYcey+bD69VYmHlTlG+uUnfOhluSoFjgJQIwokxhmdlB1\nG8L0LhUMs+X4XgiS9BQkXZRQcNaoL3njKn7zpIhf8i1HvCe7N+PJTrXktYwr\nkDA8\r\n=KTlO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/list":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/menu-surface":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4c497bd19.0_1619632506467_0.39653631888951124","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/menu","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39f6fd3b808ffbd1f82ebf5be3f9c4fb0efb7e25","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.105b15b96.0.tgz","fileCount":38,"integrity":"sha512-rID7k9aIpCN+TOZWVnUvwsERzJLsfcsGqjOA0vSTwkJKuBq+BsaeBjPbtQFX2ZS/svEYpMnY4BcdUe58yauLQg==","signatures":[{"sig":"MEQCIGiEv8rCQuwJcPso3sEflgGCZ5jr30BYC+qhE+3dN3OwAiAeYErqSHMarM7aTg+4wdWTmQEYDFXgqF7KR/lFf9IDHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidepCRA9TVsSAnZWagAAOG0P/jJXZwjzP/srL34qvpd9\nfTOiQgSRa1gMNskx3opcuf122sOzddUvNU8A20SdUcmiy6LKSZ41kUB0b23Q\nJ+5JSpM40Wnlp4yMH0is/Fd8SEZ14TRBgY+vBQytrrmqOLqRMMHKhpw2hqYs\nrERTybwWbti+54lAkOUfrCLeOeEHYm+1G4GUfF3JQTA/d59pVKCvn/Qx/13V\n9EqA73SUnq0Z6nRtyw0mjlbIx+4M+ZFwbfunWJ7Yq5N8Q/2dlkOGonDfQl+Z\n6S1jH4gfESLHLh21JmnJVgiVRJITmK5V1vB+u+fG/jTTplTeBshVRVMeXC/5\noDwwb+jB5axZAg6ZtMBAWlzhBeNMSk8mk+8whA2SAhgAJHKWE3ytxAp740k0\nd0ITHeKMIIb8vUT6MsBKY5KGlBnC0ZlN2QLbXzipIOgBicaPU9uY3mZVRgA4\n1vLKjSoB5IAQjNGvMCnth2xqHh8bsUe+4pLcFiny9yqZHPD94QZ0F+uGu0Kh\nKW4IdbHREi/re8E5hb47KSiqqecR7FXDmFCTguuqjkdFaDcGQu9M+lNYi1+r\nNxCuq5lW4mGsdLFI0aiPvXJPcBYIdpwuf0VesklZAdH8SFaLFQY7O6bz+jfN\nn0NEv4nZLEOG72755h77LUmJ3WN3Z0ZKAY7Gc63EIgWrRK9echc2LzgrfUto\nTLtK\r\n=Ur/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/list":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/menu-surface":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.105b15b96.0_1619646377201_0.6483984069383613","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/menu","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c77cda667b46fde611b7b0a68556ecef1657184","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.6e20259e3.0.tgz","fileCount":38,"integrity":"sha512-kVuoMeH71cU3ONZ4mxqymeQdXNsvdiAcQHe/RlGD61i35IYga3g3S79QTet6Sm14km+WlOIPyKQa4pgDyeTOBg==","signatures":[{"sig":"MEUCIBAUq39iIswNxEMkW80HWcLjll2oeb0VrrfpmEBrF3AWAiEA6oe09mkV/8HHDDEhwyIqeduWcDyRuni/tiJJjFBRi/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidi7CRA9TVsSAnZWagAADWsQAJU353di2sHLQ9SzE6Y+\nU9T28wi7eseevBmThgcbE86K5KfQSrX6iWPOXOcnWfkjLyPqOyh8j9jAFqQY\ncI884gxFNUTujWmwMsiZ56j1KO9BmFRZGrlzdC6zTNM7eH6v15a+oL9adY2w\nhGbOnUuv/Y06CtrBfGJXlUzcoUP8f6o/hZ9VQeMXKTuRAnFpxb0NFGeNYxok\nlFdOkmXyK1CzMqZOoDKF9tOltI9mNflZ+TcJ90ptzILqXTlRVD5x1TF6URcI\nawYpQawHUz/3uTbaFu+oF7Ps1dicnrisxI4HvhzcRIjh/PtvxHxd0ypN80KJ\n2gMbKkHoHWbiFWAqlP5nGLnm2Qro78MnpIQrc/p4NYRVoHTC+6IpRRaliIA6\nNs/BLuZZ2l24UNav01PPNbEZCntDimp5UwHjjdH6sPgmxdfkJ7gyT6/fo1ch\nb+8LQZHBk6yTS48XReftRCra4Y+yLWO/65GqplZj0iTCzF4AvWVb9G+IBvAD\nWzfNYcXvC6F3kB10VyO0Y5dLc2HRLt9B+8oLpqN2if4f51kTLTRCpVs5Knid\nA+ktIPf/nlzUwbD4cWUcpt+sdwZjVskJ6sB5ExwfuKuW7M9UVv8H3+zGM9MF\nxtrK4N8FhIvvn5uo2Jf7b8RezwrUhod5w59d4/oqhGS8pWHttUsvTlF3wIQv\n3l4J\r\n=zr8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/list":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/menu-surface":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.6e20259e3.0_1619646650919_0.2808170734567619","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/menu","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2249b02ee75b672fb3aaf30a2ae8e22b5c2b36fd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.0f79a5d74.0.tgz","fileCount":38,"integrity":"sha512-R2rjinB66jqKAyA86eI3Pun0WYvUr6QUZlwQ3nlxCACSq1t0v8e/e6EeoGZVb77+7drlmNrTUlJCFfhZMgmj1w==","signatures":[{"sig":"MEYCIQCqxBjRrYnpYQGV5W90/QZOdhM1nH8pkI9CgvWfrYfN7QIhAK5Lbj7wv8fiye9p4N4/+LJI6woPgXSsniupG9j5FojO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieVRCRA9TVsSAnZWagAAADYP/09Q2Fyz4fi8mClZIVP0\nB37Q0YZJBhPBnaZfMc5bUQ3S2LfdI1wxQ+sq1TfzRsUKPWaJ81/rLDLMU2J+\nJrfs6WXfRvDr58T6SIkVYiP+Z4iNHxctpeXbZ2F2goofFJDSyb06phunRoqS\nU08ACAxgH0ZhC0m0MRyo0FqPxE8xLKLdaQoR70u7wbhPr8DlTTnxnK73QAGM\nuUqCNu3p9aJ8z1UxWQPy/6sOXugr6KGA6/x1xBw0rNfIn2h0yqTlmoo97K/t\ng1A+pNfbNzrwSXmJb3fQ8fOJkosysznKdd/PjOGP8Pk/NfNGMxY0vEu9HR6f\nwhigOqjQoMV/ct4UeTVVbp3fRM4cTs8j/e6Pk8sYONsdBnnYL/5Mgv9Uqf3u\nbK6Ncc7zzjxAhQtQobbFSfBgCDdU3a1jTkgQJwFbQeS+9jx8aL/125i5I3w6\nl6rd7s1/qiIP3qE0ohT/wEsKhQU90ZSgyz1LTG7BARprmHRHT+xFBVpNwB+R\nu46zQZofnS91jbYW38f1kx3+rMNhLjzQwknO0KsnV0EOWfmGk56sd83RgSea\nhS6//5LuXk2jfyGBRuGOtXW4qtwFkLfI7KgXowk+bv3ZGNTtOV+SMG6ig/ae\nUTashLwLh+oxEOso6JQR14YNZDGOIvKnjQg1qz0+LB7cYxlQJkUZ5JjqK/YI\ns6ND\r\n=Wyu0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/list":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/menu-surface":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.0f79a5d74.0_1619649872559_0.5662059303776712","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/menu","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10263a6e3046ee95eaeeeff20961ebd8507a2dd7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.84f3db9ed.0.tgz","fileCount":38,"integrity":"sha512-GowSdU7P5OTo7yMg5u/3LF8dM+b1EvSgrfSEAnYNrrTVIRyIbaKpHibwCUnNi/DRqxS3AntXHWmwEQqWJ5i7Xw==","signatures":[{"sig":"MEYCIQC6g1u94R00x4bW4DGZQ+7ur2Ex0vvM5Nkd4jyAQg3uZwIhAJqmeL3wYMxIth6DABRi2y+Ln2+6nJTVQl4FyisA8NQS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBzCRA9TVsSAnZWagAA94kQAJpcxg/2GD5F3Pdl9XpA\ngBC6DcQyRFLfGhWRgo/jwmt/XRlZQQIEv4I/MtxwEM/ZBVxGSd9pyb63pOxe\nS/dB5ITKmCg8SDKuOIg3IEmVnZpWA59DgkDM0mj8/rdARmtHmsPvCC5v8VVr\nyXAWEOmYNXdw8sxMKw5E1ZEf06My6aL8DXo01ZWfuq9xXmTfU7TV1bg3mTOp\nP0W1GUd/iPeLUI9PljGYo2vE+BwaIxxsPR2nXiWtTFcaStVwaX5vQK6hrr6Q\n3psdNvcgZ1rK3r8QZllLDgYPX7HZDOjMGTedS4IX6noQgT+2PnVzTN7O2nPT\n21AuNcw2NcSEsOem53hIDUAr+Z/w8WRJrG9pmsfKZgJ4QUDHY63WNjlrbQ1X\nLQ0045RPfAVIhI4OvzugQKOy4nrXnYoId7lGMT5Ran7rWzLWvkCXnxWqwZhD\nkHeD52NvYqXxbc9CuCGICNuSMkP7Usgt6RmSfk5sssoodRFToIkf1ZuwNXIC\nap6qxYPXOA4Y+qpzP7HH8duFSrZSUvyeF4sFUtPFB8JZiR+XzIDG0iXPWpXZ\nleCLxKaI2k7VTziRV2fDZRtk043HOODTrqATjP1L2RKIgGltGWJ+Dsh2Hg3Z\n1KQ1XYa3lD4sveWenIA/ejfGGCpqxhdjm05Ht8YQy1bVjYDHrYPW2H0aTK9a\neImA\r\n=rvIh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/list":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/menu-surface":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.84f3db9ed.0_1619705970542_0.31029968248770556","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/menu","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cac65a77789f375486e434988ae51c513072862f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8fc29273c.0.tgz","fileCount":38,"integrity":"sha512-wyywwa7pmT4Xma9/4M+rzJ9yUteJiH5obN0W7eQHXRqC9CJ6543ed4eEEF/b0NCW2dclwcIozC1Isr+mOnYtQw==","signatures":[{"sig":"MEUCIAgyDl0SBBGd3ChGV7AHpBDKBLGGfr828m/CtYO3InifAiEAhQdplyeiImkDfKUKyacQlO4ufUh1d+itL9N0H3K0xts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQ8CRA9TVsSAnZWagAAuioP/2Dza7h7aqldOFBkUeCD\n8/ORnrZ5SL5LYy3QDdQBomgnsGsxmq/b2cUfYrYtNQH8X2dVPox/rZeBpYM6\nxbNCupSldK62OhM3Ef3Qptubze4HGonyvooVosG5kXSAtVf07n2Q+nBsBRid\nbKN6VgNVGngSiwKO0UBN4ll4I7lZR7voNdig4WFvz94ARUrTMsgHK42782PW\nQ4jaCvvDZwjQF+KDcH064nQYV7UdiqA+h+MFmysPJ/N8Z7cYesetCrdS7uN6\nEaJLF4TgCMvzrRMoQaXCcz3FCHJf/ddYO03+7GHsRIyAHHsO1stKx8d01PFr\n1mLmgUc6+j0T/YYK22pQgowwbQW/PFCEzHc9QhziXnqBfOYBOXmBJOWtg+aP\njp5r5lELyK2vUOL3MnuMxWK4lHTMTVLPqum0uGuh4Eip+crFsjSi66O1iyu6\nIye7TY0ZW25/Le+NRsCPR9mc19zjjrM+UZPQ8b4Qf39XWwt9tUP+6ceYkzMe\nBX+rRbAwwjOh/RtgiUT2O7R0CJxfV0DusuglI1/iddQctFqS+ag/tLTvVciB\nyTY8SBtmsQjFaSsLnMA/ypCIs+mVSTi53Vcj01zReuih+vlc4lBbIWlWgW+0\nBxeeYguif296l9jSdq0WCFSv1cw44QwDKyzJpf2/o4fQlVS7xVnjDHq/Evrr\n3CuE\r\n=UoBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/list":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/menu-surface":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8fc29273c.0_1619731516122_0.08595594529526251","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/menu","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd9563669576def1be51e04bee5f85c425f73f97","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c50d20bab.0.tgz","fileCount":38,"integrity":"sha512-+l1vWnx9SLrw87zkOPmME66VsP246M916Qjh5CVyhvd9JjtbK498wha5tCJEjI585cKgpx/XJv4xK3giowiARg==","signatures":[{"sig":"MEQCIB1hQ/diYRLEIltz34ZLFnTqQlPut53Mdd7Vget6BbpPAiAomaeuN5REVfhYDnqRTEWwEd5k9pcndGPkRH4nFnNJWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiztHCRA9TVsSAnZWagAAo8UP/1Tl08DTs6XsvjeIsbHz\nwCnoIDYvoroBaTdMFbdTyDvZO89buj12tHdjxkES7gYo4ydi4BZ1OzBk9nxg\nZ35fMv+sLfc/dpvvv9s5fZaKRpIs0jBCk8MC0noIw7g60UwlgZctXhzcPzJz\nmcI8ZkDHz4bHiKs0kFYM1fcMKAq6aeMP/j5zStHed0BmaTVdACb/zTitNYn2\n/CLC0s3/QzWRXyO5aIuFhwhngcNOmsWyD6U9OF6qaH3sVoJ4X6koP/V3A7bT\nEd0jBaONcFwfupSArnC5Iqmmb6kf4rjrmB72xyk4KVDau5Jh0hCReEOqvoOn\n9/kqRgdSfailCKzKBK4TrNXJyQ/H0zj0+tT6WG5WczezfS4Me4aB75qVH5iH\npQl45tLZi+ZnLde/Qmchf7D18T5ns64IWYjwnqSm2lZXHqFKBmn+UoNSvkhf\nLbDA5MJPwUN1cqL3+xBmn4I3RU7symUAZbM++OhAi+PfoS+EtxOnodN5LEs8\nAFcvn4PQFqXaW+e7+wQEbwZGftNTGWyzntOs3464h9nio3/CqM0Yy5h8ATgV\nRMJ9u5DdzceZ1Bh1w8a486ON5FW4dfNB1RIiOAUGEnmc8HYp+ILzzbedyiPV\np4DylGiuiz4T21xtAqJTD6A0bW4ieMA+ETe6zmRS7qJS2PW/63lNj9NBu2sf\ntpoQ\r\n=JuzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/list":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/menu-surface":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c50d20bab.0_1619737411297_0.2801212493120939","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/menu","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c839acc24e3fa576c9bf6612fade16fdfa68652","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.474836ad0.0.tgz","fileCount":38,"integrity":"sha512-l+euAHCcW+fHnpZI6rO4D1wbQl4CoMNMN0a8zUEQrpwWgbxmXuMFr4RBoQefwOaVzn+uQj0sgIpPPDz1NC0/Rg==","signatures":[{"sig":"MEYCIQDfV6UeP9Y9thxU8AJ6rnqYlQ7UhyKFLYF4d/ITyfkcowIhAPbD0yrPRGOgJTHWJqpRd011j/i1pm59BQlgAMFrnOgb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1iCRA9TVsSAnZWagAAwqcP/2lucsWFXN+lirRjsdi/\ncoJv9Q2DZaybQfGdqQGxHtSWGmxbgJfxZkHilPlrc1fmdTHosJaZuLuYg5dA\nrPfJZ/KXOJgznE1SSsd0RGR3ivLYIB4JdDwtczWwj3g/KVF1FcVmPvBbFNbm\nByUSCng3tDgljO3GBX4XpNDYjdLDtcfu8VVbj1euD+NhrJL7IkaTJNKhsji0\nKUWqpjHkXHyH2A8sq/0fiaTBlfJUzlBRYSgNHcqo1Yg17coS9lI1Y6m1Yf/v\n7CInEmuw/4IeNtutJWIo5wKCCfmu7d3A8mxbGQyP63pB7uBxrXswfoqTd4iX\nmZkfamkG/4m+yKjJD6A9EdCkiNy7ekSifrOxptgPt1sqo+19Ax3Q7gH+mZ2I\n77AMDDH4MRcteoxjE0s5m6XsE8yVlBlaIMRkB+vmr4azm5kWpuk+RfF3cqQ+\n4VSgEzfQ5N9SMe9gm4zvxSCLJwEh4fFLwthajwNqjLh51t3/mPoGOOuadDVZ\nRPaQfYXZlr8c78EkweLZmbpySU8r6waoDvp/ocM1Udu+O0BvEAQ8vWPLtI75\nExe8eXXNgqx7k5nPXAsIRRopQt58GYiTj5ZaPpPHEUiFlCgmhCzuAfZb9Z+e\nlu8EoHETdSBjG/IsjGguALdfONv8+xoDYPdKGmzkUdcaFPlgVRQW1Twwx/EL\ngpJ3\r\n=OThz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/list":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/menu-surface":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.474836ad0.0_1619840353476_0.1808832824067823","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/menu","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57646ddce260fdfe13ac322b8d4ecfa251d6b31f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f5ad92287.0.tgz","fileCount":38,"integrity":"sha512-0HYgqZIidZlVshqwramHMajag3/bObzaAqubVffxKHPJDrW8qXr1TK6f3PvehFZ/agekPMXoKvjqExyxcaWPWA==","signatures":[{"sig":"MEYCIQDJybB5lLf01pDeCbl56lDTvc0yhunyMtVh7RBEMjT4BQIhAOHnNAaY8RYIHgrYS01Z4KWppxnzcevUts1iga3xcCxx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+0CRA9TVsSAnZWagAAeF4QAKQVULR7N0a3CyBlSxmN\nStAZBTemnbVOWf6GUDf9bx1XPMDijirssGcZ/Qb4GAjnkSdFfd5XnT4EkrUd\n2sr6W/wBoa0sjEgknDwI3OzHPqkjRep6FXrlcOR2Q29P9IuT9YYh34l/XtNx\n6gvSgb3yWBiWq0uehlUZffGBK7TqwQZJVNNoOO3akzyGiiYB9eFrMI6qA4Tf\nJJRwedd8Wsqk5GtAtV2iI56x2noLGJqefjgjIy5CRkBvTjY3NXvgPptljMnF\nCLuR3yKD2j4T+mR8vmM/xtya8TmfjLi1FRUgjMwvSSFickPBq1p1PEnsHXS8\npACgL3iKz6q9mB/LUhnWwH7tiHqqqOlWFvAv1TeHe9DV5WJIasbL4JDF4EGB\nuHnu5bX6hg8lKzkyYqQJkFtDOAkpFdf32uxlZ4nToH+eUxD9krfkUcz6owPO\nbHOt/ovhYvSvfxwvq4eN7zxXIX9amfQ5pAoD260QIkHoQcW2lNjftLCzYEi5\nw2iMVUbzBja92pI2/m/jITmsc8daMANsHZgVZGb66IhWxToLK81yYCq8o314\nOaTAAErqPseE7CYEdlvhtokeTiiTICaDoPSYP87NiF3Dgutpmt1bFE8tXnxV\nWBzQ0ntDNvBKuaBuBfmSlar6ll+lzZQvY8X8vdfV8MT3ge6BugMEYP5If6UK\n48DA\r\n=GcMz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/list":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/menu-surface":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f5ad92287.0_1620066228354_0.1909456816201578","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/menu","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9b40cbe654188071e56f4bba95652ec9a9d9c7e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.af453daf8.0.tgz","fileCount":38,"integrity":"sha512-3iiHdXEYjHl3W+3gtC7MWv9NbKERMEQLCIi0muJSa+oBNgDAg64RJdJdirjVJfyMXWhWnF+BA46y1fmv8C/+BA==","signatures":[{"sig":"MEQCIFMrenyIXbVRhC4eBqc/+LraVI/0Y74ngPKdVgrtE1HRAiAYjI+9wn5CJT+Kvs/5fGqD/9eegMBTDocICYyj59dg0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEcICRA9TVsSAnZWagAA7WwQAJC7vJPzmm99l3249hqV\nAW73iHZVvR1fjITzkmr4LQTBL7Cp8rPBHzqCsW/YOBfcS/1p1Ef0hK6SAML+\nhH2IjPVBZ5cLZbg0SNWKDMPOnKp5r6vZmTp3iv7kueKpgnvMTYont212d2ox\nLpZZB38ASE2IYowP8CT6akPYPOAreKOGxchzrNH0K0pCTRpJF/DBuB2YEVLB\nzJcClzbexNb3v4vWNzlzOl+YRAplulfb0pMdY2IbEwhTqX4pm4AxqDYB+KfA\nVGR+tOSHf/vz6CVI+qnNCWqGDZirdaRVfRVtWo0hd25pcvPDKg2X6W0D1qhR\nE0oUSsiOD/PDSkWAshcFzv736zNRn+BPqSH0kS06qYDh5zZreXM61h/yCeH2\ndRhMwtHgM0duhYL10+yiVCOHKwioTFIW1rMD6Bjj00TN1QSkrF+q8dSwi3sb\nGFTd8VyxuYrVP6EYZCGb3CnT5eyRwg5dIpmF61iDIhy3TnDn4kr3PFJIn3jN\ne8j9TS5Yq2i4BREuos+iX439+TTKVHkytC62IXMB2nhqI95nuH48oI8Et2mT\nyc98avYUnpMTPDfR7xz+tNTSNyCL9uSk4AVrCSSgZrrVDUGE0FcBUlgzHPp7\n7kKv5n3GW5MaWhXgXGUaOEsdTDk1ybsLSoyRuLHFmbM6pON40zx5II+BTjoQ\ngC96\r\n=yaTX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/list":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/menu-surface":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.af453daf8.0_1620068104002_0.17957071667301627","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/menu","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a138353d6b463ec209de292e45fd0611780dfff1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.1f1918c24.0.tgz","fileCount":38,"integrity":"sha512-M1V94Nmw5p479ofUwgYtj2vNJjNCtkQqsx0JMd0oCafUmCLFqNCERVjnvJeSuSqqSrAknHuFwpIq92jY/L+PNw==","signatures":[{"sig":"MEQCIGXtOqTrydW23AjvF6N0B5uqkz5aZ3PW1LveiznuDp4dAiBUAQRpM1TaBjpb9H5tumIGxjotO0Tsf++95SLpGUEf7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3gCRA9TVsSAnZWagAAldMP/34a3ZEOeyL6ixhRt/08\nixK2C0bhJere0eYionZTqa6p8uF/eQEsaCo1XSEMYCKTz1b2SAGNx4dm+omA\n+qepYh29Ji60x3rT8ZDmBqxwVxNTcJqxK4A6UDgpZh9SwDoNMjh1P3qSH9uu\nDUDYTvBJv6Rd87QhSvwMk8qXxK8WTL33jzmts6eYD8/xw3efmtLXFCIEb+oN\nojPx8AI4S2UYI7hwfQaNCNM90ydVTjylQEpjQ1qh+TqIXdH4Cm7wlKj52hm5\nqK0YdmGJPUgHY6EwAAQKanPoSQ762OAsCPeVkOm8LobLEjqMOhxzgP9I71qz\njD0nQarFvrXsHHqIV5Gsju7JhmMykM4v0KLKLA/FpUzvaZ8WT74gd5AUvmoT\naKk15Axaor7X84fR2pr/bNmtnhupJZK9LEbauKncRDpwGIP0KVZvpQmP7taU\nCdpnoxDWi7scbyD0pimxkctTKq/DZBcopBQTGZv70l+OpYlVGh0+u9SFziWi\nJKngg7tjXCWdp3AezDWn8xR9V0osLtic0jHTWcE8Cpm3ZB1E+zUpifkI0LqW\nRbMsmX0HEWMI2u0c8EZWR6TUqQLT53ZQ+ism4imXvFeJScE3KoSg6FFu2SMa\nKZyCwyKo6xVWWnUx7Aha7g52+miIzaCbwEqtiQsYuzcj9VMsdc+hJvMeeurr\nMy0w\r\n=+aHv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/list":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/menu-surface":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.1f1918c24.0_1620069855779_0.920934161202867","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/menu","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbb9e25e6558a7dba5f481b9819107daccc0c90f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.33148231f.0.tgz","fileCount":38,"integrity":"sha512-e+MtBqwAbCcXVpgD1vjd524+VKIbNBqWB7KvHE9n/OuxoeL0olBfY5ilH/vrhBmAUpLv2evlDMFdypM0aGr4hA==","signatures":[{"sig":"MEQCIAV7fF3nsRL22BZ1FctmBOKcUbPcRB5Dgx72UcDA2pXAAiB6I1jMUhyg2bx7hkwl4ZrsyiTO+imIJErOzIDqxVrW8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGfCRA9TVsSAnZWagAAqwQP/1m29h0m1ngEYBFeIDHb\n9a64xEBvfUnz3A3buHlqG035QNecOX/u9GwiQwe4M2a555J6aKzCrfS91OIr\nx2WRpFA5MHruI/0Hno90c3jcufF932WqzoSvvKoGlHjCxe+QFN5Uxbl65QrQ\nzWD7fFcNJ4Rex93oxwmgdLZ+38pOBXEGAdXGhC2021U/pxkNaNQPjziLGPRS\ntL3dNcMJUKfk/mvRhRCm+JxtnKD/ZIOC6nDDJlusN7D/t9gjcv9QHnzV1A0Q\n6yv0mYTgK4i40A9LCFZ5JsF2OPwdF0/79asHanHylRO/EE9how68NiWMbA2t\nVdJFVhS0iCEBM3ql4/SbHnNsC5uCtDGzSzfWXjwAuR4EIthQSlbC4XT93/jA\nIuuwzi7O8SjVvulWRnLZvkQ/8JamlVdQtqmLOVzL/+yRmQ2cSeMmOW3hmwWC\nGTUs+JjOVwxo9I7BrVMU6xB9Y3Vu4mVUk9Dh/R11qlFF3anokOwLqQiE4Tw+\nY/yVDg34Qx7fosfUE6Ea8DAKEXN14vk6EYkOLRXSacRw+rC+SfMT25n9OdVY\nx1iTOmxdJ9Ww5WY9zswnJq3Auepw66Omt+HLmrWefUoK4b1mavYUPE5n4REO\n95CDdI2nxCWxyNmC8Oy0FbEIUkRabSaxdUEtfB3M4CaBDVdCOTT/R/H7IXKh\nd/YQ\r\n=9Ae0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/list":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/menu-surface":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.33148231f.0_1620070814916_0.6056059163546652","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/menu","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21102b4db63fb3e858a139c65eb27652d9cb70b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.06b76fa74.0.tgz","fileCount":38,"integrity":"sha512-HTAZrsiSgjFjNLKyAXOvPsqFiaUTYR0ox82184KV98ff+0MbPvUwIua5ixfbsGbSvV8mn76nu5mIXkqkEBJ+fw==","signatures":[{"sig":"MEUCIQDXb5FCCrXZrbEvarMEsdquUVnnyE2tvy7gptwSoS85PQIgKfNdBOQWq76dzdF6lOmRdy7Q8uqvSupIWebaSUSJMD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFNJCRA9TVsSAnZWagAAMtgP/RnVPwkOvk0dct9maCTA\nsDfJaFHyg2C220TtkVBJLBe2MFmmyQrpldvlNoOUOMVMYcpt/9GoOT9w+xmC\nBXWRocqgDiazrXM+tp2Mz7M9NaNohXuqOSxJFX5SN/s/82oB7iIS9NxQjekF\nFYKKLDIUoi5OGBIZx+4Bej8+QAPVQAbgX+uwAEI34kS8p75PKFFxddAFqANe\nB9dAkrIsPyL8OxaC7N5cfqQQvPejZnV6L8G2sVUV+SDe9dSLuxM3orWhpu3+\nSVDfkS5NmOKIChWaJyfFQxUQSLlJONoVhuyv1JtZxGs29Rq/plyVFIad+w1u\noY5pmZBbD78ourLpTAQ9WiaR3FcnuWwGBrTfIJF3w4kz2WR7nHLIxcvC6HBx\nVCq4EsCf7IOQmm6uiFyYc0KLOlKKhxUYB2GvcQ1djesKAvoECMFaXqWb4d0P\nkv869pA4lhqBth5KCR2tSD4lBCQQGvd6+C4HuJWgMsr/X8HPnh0rbDFJqPSe\n/I/wmh1U9j4cJZqb8FJMHuqpa/polfhuOUJsHDpuPRumoDB8d/Jz4ztTIzvz\njP6SMCzPQa17T1VxZpnS92HXUxeQFvZWpzzHebWOC3IAJmH7vj6fpThyhUGQ\n/V++GY2EXqkGSebPgtGNWrpEDMg9804p+aBjhCrYsMvCgFecx3MKCm0Q+3f+\nw6As\r\n=rmBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/list":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/menu-surface":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.06b76fa74.0_1620071240668_0.34440489321320666","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/menu","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e573b5adb3290ae894c282c0ec6e4d404d8857d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.7c5000473.0.tgz","fileCount":38,"integrity":"sha512-G+K0niT/494U+RH5kSWjwSTOf7cp5dQ49smt8V4KJ5Kli7jwm8ANxXcPGk+5Op4ycoQZ4e0rBUVMBpA/SfONTw==","signatures":[{"sig":"MEQCIHLDOvyiY0Ofqaqxt8CUEo3Jpl/83skDWvRvkKIxWXNAAiBfnXWyIvjtDKd5kGfxatKEAuX+riPEWqltkSnU3KewPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHyCCRA9TVsSAnZWagAA8LcP/2X9ofixNrMETK8AlbZ3\nvPKLPFZQg8svELpph31jnaLALI2TOI4AX6cbZmTpBQh3kuimrCvVlRNVFb9y\ndnM+wWhyIN55WG4FhrFjaTRFsF8rYnzGBW+oSYDlyFImJ2+iC9ftnFBeCPv0\nantBbO7d8qtiH/esPNkmiMWJrZ402iY+nUtlU5VFTyq6v6ooZpGHI1Cld2cE\n5O1hIiiTrERWKd+82L6/TJ8E+duc+RJDPJElCTPf5ZPUBTXByB+BaQSMdz5X\ni4rzgMFyN03MbG0L8CS4MoyQ9PCfooKz6/3U2XAmx7UT7EAu1X64EHTImKa2\npOWn7QjkHAObUiQNIPw4G5HcOnGfRvDdLzQkCftaA7FLLWPkyU13EmEGf5Zu\nBb+bTPRnnkYc+FWMlW9wQMor9GM/ocKLrqTFawzJpu5IWp3N9vXXNO8CtkQf\nMTFCdPb4TrvvMbbiDJWlq4tA4sjRJj871FL4DJ6ls2SatrC6qrvsITNzL0Pw\n6arL6wt6pSu4sEh/gPZFLJ84T1o6F2E3Lbd9BqNscQA96a3Bz03BmKGR8J4n\nzdpgNQKEST5bz6m+zmlleQsmPuUpj7T9KkzFE04kta4dq7b8ZlFqTGfLG6Ru\njL7B6wthaWXEYHBCvZ848FPkwzkGkVJ0GqFePgm+1+hcMAMen24g+9tjHliN\n98cZ\r\n=EXKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/list":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/menu-surface":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.7c5000473.0_1620081794042_0.8500503615458119","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/menu","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8effe1a206ffa4bd3d60f1d0c99541626e9ec85","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.de997644b.0.tgz","fileCount":38,"integrity":"sha512-Clq9oh1R3WjDCwJ/Gq6iG7Ut3xJlflLU1r3nj+DiKLtGPICWPn/vgcZaeqZ/ymh+0vjFsUxlrX2W6rX05evzVA==","signatures":[{"sig":"MEUCIQDL34ofBI6P93iXolNe8m1csICVSNlFBUVgDe1jUQcJvgIgWEpISst9XeE1Rt+xlEq/nA9IuFqp7PHaUlD5eO6ZEoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYSJCRA9TVsSAnZWagAAnFwQAJiYtXNJYrmUk/LFKeFE\nGi0wfURQX2guqRguYO6z2EUZez0v4xz6YxYZj36VmlVTPKnhCL+N223lO24N\nyU7vzMh1MOr+aIZ5QY2m/7/cp6+bRNax+zg4nj3rU6jDm40NUClADoMTeQ2i\n72XeSxd3g3T1dGH1ooc3OikagvncNounw+hGcilo3HrfpVwLl+7GahFFIdMJ\npt12lkqt8YWnQwWnd4rwE8BCUJZj5Ta5EXRXmQ56eDB/njP+NRZUiiSgpVT3\nYODBNyE425r7DATSSnPkgpe+rittB4gXI5PbUKA9Wqkc73F8GGzaqD2WEpOc\n9jJ7hAVZL+JnSvsBGjiDgk2ttqU4ypsXgnxH+kvsNfp2P3rMZDZSR1JkP+R9\nambAUBMw/r9SBKB6nctep6xbdMMa6ruEUIZR6tguYl+HqTgjb6xwYbeCR624\nByjVGJtPjTwuD+/UZo3QtLYHlePHbwbeUQ6LMPiD9Yq4rh1Oy2RiTyNLJVxR\n2+219dyzylO2bngZNgMb26KnojV/N4gmwBmzJZip6l7hddBXuVK8j9fq+3/W\nALk0rqd/+bpWqH1n/uP5PRWM9FdDV73oO+5dEoUGQCVqmljUZBT3IYYVDYoL\nlS5BJZ77EMf98HlmT5wdhqxzvWn902ICAU+M8ML+ysH2w1mU9u/N+alQKapD\nXChw\r\n=764c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/list":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/menu-surface":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.de997644b.0_1620149384409_0.9782248285036403","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/menu","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8995b25045407825d836760cb57a5aa4ec5fd257","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":38,"integrity":"sha512-Slgsam5SOkyTZeMJxn/DDMXYhnMCRxKco+2WBPfAWtGzbhWhbalxCYpMSeYhKi1SNu6szDq8EB7ma4pweJJJNg==","signatures":[{"sig":"MEUCIQCNoqZM9IsdwpHbD142Q6oqmDCEFi96ENNN1SEMb017cAIgfkeImQjKhPubOzeTSY2/t3TBdqhHJE4e4jvqGLhoSXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrZCRA9TVsSAnZWagAAWtkQAIaE89mLcXpE/DtPSMfU\nYEzFQtJkbGKrCp7o+vtlfFdiTCixF5cLgs5xNXudWfmtkZVAhJpqRnuf+XPA\n3ZC/grpwv+LGXhSkZe51z00s7rFHspiQRI/1oYavGl7QNRWaml2TlVthtI8a\nzeSUdRSo+WXISRF2qV1vjulIkADw5J0Zx+mluR+bulPjzYV5U/Zh8FdXflxn\n2wMw+YaWUWFM+d8L7fWfhZ5OlX+1zAZomdRPqIVD2fyZfR4x2k46K3cAyhyA\nLd39+S2zwGaLBVgda062vFXUTlmWBIwqQspD+J8lve6ObmUAjbGQSxuH8tHO\nuhx8HBKFrW5frZrzh/QUQTV1kbD1r8pv0RVqLdLhCWbdVGhAo/jk3PtiNYCC\n2ML++8AOdsJ4bPvMofcSItA8GJouO6vxBQ3XsCu6BLqGz8gf/cmYjI5hpQZE\neMaXjsxdDZt4hEMekNIC0fDFgF6yjDzjTiBXHi/IlKnWuB86ccdCiysAOYOt\ngRremksQNREUpaUkupRQlF/VTPUeHDSokMCnzOyQIWeTaTTWm21XEu1RwNjq\nb+VTlCCYp748tWEiBNkpp1g479SdJV6UtcHiTZMVGO3Vcd54SZRWWXNL6DqY\nO/v4J9GVuCEKmunXD5bzZmhersyzQAeUix6ZpmmauiZI153s4ePudycpNhmq\n6vUE\r\n=ZJC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/list":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/menu-surface":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d4d7f1cc2.0_1620151001176_0.25676207846277643","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/menu","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1941a0c30060f6d1e890c939081f3813c1bf35","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.be999eb08.0.tgz","fileCount":38,"integrity":"sha512-9uB8N0h7zUyFhfNYd1Eu3YQeaGAQplw++A761A37xhpBmh1p0SxGZVJO8ltOE9XSom6sBJq7aNE0msNKz644pw==","signatures":[{"sig":"MEUCIAFowFMNKfPX4qbuRJBBfl92GC1XufwZZVmSFnrzz02FAiEA3qdnjrh9UNqgHKsR6y/jh+rTp1BuoytSXRcBnNhyA58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYwSCRA9TVsSAnZWagAAikUP/2VjP8Ci0yHmGWLBIDZJ\ni8kPQCs0fbH9FprB9KuEihljEOEeKriQHRVU9FVhJxrKC5UsysUyKNXXFrPZ\nIFafFXTReaNrmGy+f0SK4C9YMMD3DDgKpISySh3BBWaTd2kSpb3eESrxNapJ\nJ03Wu0Y7usRE4mAf85+5l8crY0DH3Q6xaoZyhnzoHH6cY7tRb4jDuEUdg1F2\nd9jjr0FJXQ3p22X+BPvM2qzombTUdMhgqNYEU9iPhHZWAxsre4e1n6yKboca\nwbgP2aElmqWLcfBv1cw23iCc4ARgRnqN0XSTbfljBgaMfy6xf+325NGKEM9q\nkjmt2m2gS+hSsp/UXpK2f7cB4T9Z0Bdl81nnz9QYX7yJjogy2sH+/8Qzht5Q\nG+attPlIObhAbJZ2gL8GX5Y9C9izuetAiRjTxxEu4xTTBqyW4j3tg7tP5Bzo\n4xI47HRTKl0E/UEds3HX+k1dCBtpl3rbd6Nju56DfJQRP4cfft1Bg2/T/gyp\nlqskFKeVU/p1+iym4dey2dWAeL19LqRiXM8zUVfTMuwACabqIH8SRzGh2Pqc\nSC7Gucjp6lZq/BjbV2SqheTM6uQWWd2a0TIChKGnkZKt/IYlKLr/x9dw1KoD\niVDN9uzxazjLLlbfzheAIvq+24ojfJwOcY4MyZp3+YMc6pgyq+Yg/lQmYPyM\nO+gV\r\n=KMbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/list":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/menu-surface":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.be999eb08.0_1620151314383_0.5657052910581777","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/menu","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12e5e205366ae7f23dff32ee539a4b9e8c6d3632","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.eda1705fc.0.tgz","fileCount":38,"integrity":"sha512-Bgl46uy6ttAEZ9572uryn28T+G/kTlwQxCcfFgOnJZT+t7q9iSK/3ZHO4gPR8PdwEUVwunrgMqSKLSpPB6iD3A==","signatures":[{"sig":"MEUCIQDK2mq4A7Fc1ASHyrYoM/ayvgilPPIQUji6wjRZPSX8dAIgf2VnhWlfElVhn2ZBpL448WjSzo4HxQV0E6x9AMftYvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZx+CRA9TVsSAnZWagAATVMP/A7pt4MQkXLEwXhUDyEz\nAHr5ag2rtovOShHKL1nCv+M6u2GjUerriQ+q2BB0zjibGP9rwPB/XaByW0bf\nsBg9z51loBiUyXYlCn7x+hmNM7Vm/ZlVWqFLlZUSrEQ97TOnC9XStQXHf/Jt\ntHZPwU7qvY+T3l5xsjg/Mo1OUn+ZevHYz8oqT3cMr9iwki/gMgafAFA4v2OK\nObogCtDJgK001CnLet8PHIlTG2JYxuTQKcSIkVP/KOlGt/FJ5hzMdZvkyGgH\nv+sYloAK/WxR0i1LJ2KgQ4FgU7hU02rEDWKtEXn96ZRGKPAoqy2b7T+Vs7+E\nAsZD55NPrrkg5CjN+smgDxSSMkMr4dPjAX/xvt7aiypu8rtq+a7JPvH336W7\nDFgbDRdNVYP5J/JK3j84n6abb6lyhkrGmDHtTVT0zM6qnjmvTqAvEh1s8CbM\nxczAnKwSW6wCbG8BhagUWcbQpAFIMDM0gXeb0E596UpzIqjTOsSO0Yl2bDt+\nIsYseVkHNbiBwSSWoAb5O6op5Rxm3jERYWRn48QXMdXogQB5lAFPAVW064Nv\n11cofB19IXyItHQbEPp5JVZpWe/BeLzmofqCSuq6H4rJMAwU/y8ieSxKf1R7\n6Hh+ImtbOPkR3K0G+IWU6WiZWAdHkEYe2BHCnc6fUvz4D81GDimlFLTn6YxS\nl3OU\r\n=gpj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/list":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/menu-surface":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.eda1705fc.0_1620155518449_0.7708258401086647","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/menu","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4440de90130827ba648b5d17a0cb208b7c7a16d4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.718c90178.0.tgz","fileCount":38,"integrity":"sha512-gBSt6wK+q4d32ziWiMRlTLsKPj6FNp75Dh+w+6LpN2h9PRdefOfoVJy3IG2zRJSXZ7umZrLWojThV6LbPXi3xw==","signatures":[{"sig":"MEYCIQDq+CtsyQFVdS02LllJ7dvHGzN/9u4ibGGxZviioNbuAgIhAPBLsl0l7vGUUa8md3bniUMC8jy+ktWiRefRf7RrOA/X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCNCRA9TVsSAnZWagAApBQP/2NnZGvvxzlHSkdRLNGD\nOx4D5gfU8YMFpekXZf4RaQ1wq0lmiB+lBokRcAQ/kSu0KBBgBKgkRQC4BhGI\nOkNJJ5pE9xgBZmgl3r6kWbQuuCgLL48UtxSiKomnR1Su6fAwzId+gEQGmH22\neDBm3QajlAYS2t065g/k/L9za57FQcDJNsnDtJ3VLD5MCTiniOfq78RMK739\n6Az9B865hezu2dNtVzf59CEYvBvD/Uc/hwdkj6hLhBZsJXku2AjAqkq2uLIV\narTmftXXaV3ctaSo0zJh2higcqvUv5GTt2VdLc5A37cs87fxD5+oVDAK4M29\nCgABpqeQcvuCtIA8P0EVSJSI7wG5xJvmL0gp+U0ek0TLYGCq9irrkpvemKHv\n/c05+rd2/BjQDZy46x+okUaKxv/vy0atE7c8WyJiEELRoniPJco3wqNIuhKR\nlbX8LRGKZQBvlqI+jx5niw8M9VdbGskhEr6qAsDwepXOHOYrMgGOsNqHYwGA\nUylcLCgYB019lC/tB0Tga47ITBRrjLjc8pMFa9eBmpwjtlC8j7SHEvYcES+b\nI39ncnU9P0L3sygxbdRwPDxlX80AyrFnK+ErLj+uWtH3ujAvu/zBjs5VD2Hl\nYjGxxnuFpZTy5k16FS0R4wADVUc8zrvYlSk7R3NtcAQn1Bi1dvPLi9L1QYfU\n1RGm\r\n=ZKZ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/list":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/menu-surface":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.718c90178.0_1620156557313_0.003720937000867952","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/menu","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7941fe298d92254e9e2e46eff1256723dc0edd18","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.0e3917299.0.tgz","fileCount":38,"integrity":"sha512-z7o+sDV0OG/yQQ30urmT8TdC9wr+RnBJZMw/qDafB43wDp4JBZN05rvNRyquldNXKrVL8ANGodTIaIOxBwGusg==","signatures":[{"sig":"MEUCIQCAHBExUIM5wiXI2SEiHpnrcfJjRxKyI0faki/f3wxVMQIgfLNVhE8YBgl8AtvnO587TWibUCwJVqD5EHCd06ZEiSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaE3CRA9TVsSAnZWagAAuy4QAIbApfjr73dpfmlyKFse\nAhVnHQSP2OWb1alqt8OGOh8SEFNWUeSLBDc5AXWsqLZKTCUYkeXfCKDBFwQM\nWfbH3bc4eESSlc06krboHsEAqmF+PgSSly6vMCk1byjMxOLKF+jSC7bzGt1p\nYZjmj3ZcpYxYEaKFAxAXtwZUud3GEBk8hz1mEpi02ckldaSjFo94N0dla1Mw\n2xudesZ45TtFvoKWybSo5Rndts9AZDiz7ifP8QJdiBnSht/MzKGr/7F7pDcn\nkXh7tEfYioYBy6NSpvF3Uf/lav2OgzvnSN/LhaDPjD284CSSwFEvWh3QMfaw\nHOHc9/vMPF1wwd9fVDSWe+jbgsSOvNDOuOsyblPkr6vW/Zqx0zczM80UbYxi\nUnIU4wZKp4hSC0jdXOKV400wDOScSAROddWb8iEYsCf2ZD5WUvUY/yBTcMNw\nCdiq40Y6vNV9ufp7sQrmqKx6jBe0qrG210Z3yO72l92+YY/M3c9aY8rxnKcz\nw3EEL9je6gIzOj4rS8AZbCt7NlJElz3SyU11Yev1PYeseW3j7Vasom4LKpOV\nrxOOrafKKmxB4B3zamuqvkrN+gEpyEC9hWaqI08H6bJYl+dtKGfFx74eimoJ\nodGfQa4nkG2vsvQnmvKjAaU+P/+oeUoL7ddleFcFYoSWW0DCS7g+3floE5wP\nrw3m\r\n=iWf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/list":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/menu-surface":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.0e3917299.0_1620156726746_0.0978594551615053","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/menu","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7caf2495dfb9f96a280da83479205ca4d0220919","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.836b3c7db.0.tgz","fileCount":38,"integrity":"sha512-tqJVHp7kkW6+jfB1dFUuGiH+/JWf7IlYI4uhpAy0IM4Yu1p0JPRUKerszH6PJv7lLnBz9E37D9z/WxvfOyUeag==","signatures":[{"sig":"MEQCIESf00myk4Hm+KNsoZrja6R7Hg/a9NzTbFeysc0mzI1lAiA5VQ3SL87at5UNvtbhdgnbllE+gXX98abtE1k2AqasfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbAMCRA9TVsSAnZWagAAZ/cQAJMIJQBZjkEnag0/H+Eh\nPWBAy5z3GHscYzCpkcCiXOxSBgsASzi+cYTa7CePGqe5jnjRKE6jMObKPE/r\nfWVMWBfmTRfl34unWiIyGG0C5VAD0YnPOIUeBLl15AgtMNz0lnsaZiubyjsq\n4farBGSKfG8Qql2Aqo2+FUEaPm59aPvJ+HbCPnbIIDOxZPZ81+xmrYIDiZiE\nERvJgwQ4p/ZBjckHDa+VUQOzQQum311EHqHNk44pcf9QvwiI8I1n4AiPNMR6\nAeYPXUHyrXyNh/e2ooltD1aJiknlRjYWF9ZeaNNdjNrgIQx8RYJuVystSSN4\nrz7gwr+7v5/XKUSnLgpwAfWh/U8kJ7Dkh/jVADlIEO1ANsL3ip83qcgvHs5l\nSBnR8X/YU661SKxoxsxBYvNNNwBMMhiEDixDGpMIgci5M61Ug9N8OsPuIrwr\nmAxI+TSwYgIMhbEAhxdDReHNkgRIvxIt70gK6+RLW3L3+Cd1kovGRownoNHF\nTN7V55AkCQJfhUm9JEpUV/FqFMudbN2MMObwVgfGVJ5L1pSCDNnEkAU2chbO\nqPiead8icC0XKROw8Nb5z204RWDlknFbqcAuM9Y/I85rdafydE1nbnH3AAiX\nayrHeLN3Wt9B4rQvqv7yb8oJEXXrpXDxv7aCx/Rvvo3Pb5CEamSxx7mzGATU\nUAPe\r\n=VVAB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/list":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/menu-surface":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.836b3c7db.0_1620160524220_0.5960880613033517","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/menu","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a440a82206d72cdc851d1198def1e0cb4b48dd2d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.53d4e6d59.0.tgz","fileCount":38,"integrity":"sha512-vLQOgmkEd0i91uTtOrkI+cS7EDG4jCceULrZRdQCQGoiZ0vpEBHWZq8OiY71ylyskOlb6lXc890JBPB8euPC/w==","signatures":[{"sig":"MEYCIQCkVsr43bWx94Z/RYKFbVEE9TvqZ8H56EOfILyR0ysNuQIhAN8wlTzIvL/rFDHgnp2iLkGKCoUvgG/k/Q8UV4s2n5ZT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbPACRA9TVsSAnZWagAAt2AP/0wKuAgzhHB1yu1kHIfP\nbKPFf/rVQB8q7Y2TUGzaFzN5jVOw6eSyOS5tBIzQB+xSzamg6D1CuUZds0g3\nI6KZ2Zfz9oByyL/l/DgKFZvFSJwAfLKoOe/I0HBwx50qnJUTeeLbXjUE3Tu+\nDo6N71xUgB8fjKp6svC7O1R/OU2ehmpHK+bYqn2Bo3BniWe8kyHaC/SBW75m\n47INUrSiQXpS0mI728eWtct0mv95H81kfEdNLHjEhEhsukp8H71DSUbXAWs4\nQS5b033bVHm0lDzH9n8cGLYY8buKBTwhvwxS5DjzoNRqwpbBQ0MxFhk3sIwR\nzr8bgEEM+bLZLGIIW9UfTXy53vF5jJTQUVsGdY3t2mscI4cA4moRfKMz25Ey\n/uZ7+os7p5fczy/G95vkSbg3JYAHaggpKMm4vw2p93nwY7RG33hHQ8XLou3/\nBvRoT2QZ6q9d/27E5DaJE10Z7aOfbqVoLLMnY0H57W7Z+phqfcf8t+1D7bRn\nhvEI0A/n/SBMYNtePySXzdQjKacKTAwXbxJtzUrai4530tm1gpeR7YDqaiCZ\nLGXbwxMhtbNXs8Dk2t3ljHzcuO5uMLnHMSASjQ5TfYE/dh2Cb30i/0FjMtt8\nbcuf7rVRC2Tr0W9FExw0MAkGpLMDkvYF4c7tRYG39Hf3aP/rVuHx9UOMmphR\nP2qL\r\n=a+zF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/list":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/menu-surface":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.53d4e6d59.0_1620161472521_0.1487946182355575","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/menu","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b0e6dfbcf2e7303adaa543dfab1166aaeacf862","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.18d147e27.0.tgz","fileCount":38,"integrity":"sha512-agUs9r2UI1MCrpJSZQHJJWZem9Ky/avz27kqkfAI11d/6J3CylY1kkVG+QR/6WjWG+oDMc31wpljbwDMKhf/kQ==","signatures":[{"sig":"MEQCIDAtoSsKsv33CW00StwjqlMwv0RFz0xvNb1hcDjvenmLAiB+mIvrj1BUEJaURECnU4CP0FpEmhLqN7g+q4cyGEgb1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbW2CRA9TVsSAnZWagAAZaQP/iUYl4VSMFjWXGoSlQpQ\n0B7YZtJuc7+y4U6YtQ+KuyJqh8n29zzLWSD85X3XcYziB8FlFsx6J02HTFZf\nVUREXY+50BtY4dbzO3qBFLoiViG41xCM0Hq+8TkFBdJfrnQRpAR0nhLel0SA\nMIQ+2gcGrt7pFi49fGjaKThQgETyRXjnYZARy6/GBJDnt2ymP6+GuFTqopN8\naMhozWIVYyUpP5ObXAmCU2Bt0cgXkFEvluDu7KgdzNt9psvPDseLc+W4d57F\nV6GFHUY0IRDfusgE9+zc0CFG2wj2OGHqKBdsie3Sucd9Z0LhVGDWym1yGpYi\ntKhbv6ms5//KWDRu5VusFkv4LxUOOHPHcHgCz/uR3b/Fkjl8fk9SMvJJS5xE\nnj81AH9aByqoZZN3Awuf91ZPissWRFvhA9qVv530Li8AAAqHXW9VZNCMcvbH\nBwYVeYkyvCBP+rPHa4aKSxmq9tHwXl4GF38YfvCNHhSg0gOdKN6P66wdzULS\nYhn59jAsmdOr/4ON06yrQaJzemphrjWZBpa+MYK7EgCTuni+1YYbfBbuH4xB\nU3mZpHyCQqrU89lhVJXty/vWT4xftNNHty/7xoryCQNLB2zAyCVsn3CyimNi\nQPfD26vAV1wV6J7uo0T4WwLwfH2Dbr8aO7unmzTaRkqT5b8fkHH5zfFkmoV0\niZsb\r\n=CjoK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/list":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/menu-surface":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.18d147e27.0_1620161974068_0.7083753320465238","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/menu","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44deeac8d3948511f49628c4d637244bd0797bb7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b9984794e.0.tgz","fileCount":38,"integrity":"sha512-e2lw0NDNWXDEGgQfoemfepPsbfFlMwYjr71swDktKpQRqw8jCOG+AvVupApf5OX44Q4De5vksNp7sdu05K6JBg==","signatures":[{"sig":"MEUCIQDpnmcE5ZtyGV3J4PBGzBjfB3/XCrEXrtZKGomChUYuwAIgPC2F8r4VAoe8cjmhOA8cuNC8QskpONDmKjSt51h+LcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdMHCRA9TVsSAnZWagAA1DYP/iK+vcGU60cTWKHSRTIA\nypjtLEz6nkqVwiJPI9dXCTPjEDqiZpNYWVrBKGdKpdCNHKFlKK64EU0vBFDM\nkeMirfcB7h8VGn39MGiPg5zUlSlBp8SukECstC8yE+eweEp9jOLV62bnRYq7\nefjqBug7hGH0Frx/wN6fVd9KE+gwYpN9T8KtDlRyMVoSBj6F3WplLaQ0ZR4z\nUB9Gl0Azdi+1q4D6AiS35ByyqDmuBjpuNLJ5m4FGhG2IoJNb5LDhppfatp+r\ndJFj8lydUc4K8v53RlNDPC/wl4NS+TGvfMor0nNUnTBW+ODYMNKTKdNQ0XAS\n/CxBSidylmRXsyRKJqe/+NKD3cOuFyyBlsvXPRJiJ9Q9GLCtTSdQIEHAYjv1\ntPNp/wfB6k7gQvG5RAipUol6j1NbRrfLO0mFdzrQ/tD9skgn0ZFB17CqkaF+\nLf8SLtUSgin8bYjw8rLaLvrYw6cuTNOMKbGQJMU4rVqEB7dLpo1oQ5bWXuCu\nqgmYz1Dk8jlLr3gYiPWnJwHRQlHAbj3K2nL6LzZqymhBp/OkVyaCh1oRfmVU\nwkRwn65Fey7AgmBxrN7PhdCUYQ3uHdBz0yWaxAuDLA4NPPEwWb/knVf5ubbn\nvXY4Rqi+OIfHZyOz3NNduaAWA4nsIs58naDzeH674JzYsZa7Kt7LVBtkEClf\nEqVj\r\n=YiXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/list":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/menu-surface":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b9984794e.0_1620169478551_0.7701516421229562","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/menu","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6fb6979d1edd7b6f9dba779fc6641eface817c8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":38,"integrity":"sha512-5hMABvrqVlm2dmys+fBLgQpWzgS4QHIkArT5YYQz9X8j9CXdVKBTMGRfJb8rdHEd5loKmNGy+8rHyAE3t1n7ZQ==","signatures":[{"sig":"MEUCIQDunbFgPYmvnT0/3F/2+Ocnagd/Z5CskwtnAivkL+7ZKgIgDw0V0ZrGMqowtTHs1EB6n4uWo5cIBXJ/Kv8wkVFMxoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPXCRA9TVsSAnZWagAAfvwQAKBNwoOrcUttWCl/4h2U\ntXCnb+q+IqVFPeb0ssE24b85TTgyKWKOv/3JA8xcx6Y+8Jb4rlX/ZRQ8eipj\neaPF/H1DPafIopFADBwZUAifQqldCcHXXG2hKq5kS93yTK6C7ZlgyfyPERbk\n2PMe4K5xcV6JJzhhU3+6O5XpSOGEnqUSfXnoPZ0jBFzUhxObdTt+Z5+ri6Og\nlwTVmi7pj/AQBG0zrQwP6D3wtAG7cgqWHdZkUjf4covDUs556uVG3k7b07dw\nNSLao1Sm+Z/Cupwhb9nnt+EJn6xzqwTQ38kHL4IC8mI/DkoDPAHXa7y9uGF+\ni4WVGYfrX3CePIzcWFsQXtJpfu58/gco5yrznAxNYihEhxx+cWw7dJz22pcm\nn4x/oj4Q75GpscUrKewaxSfiW6TVewLl4aP1aSEPC7XEQlmf6tT7GbOmblWQ\nud7GtCWuSl6+9onbRF+Z/9VjXq1T/9Jgepy4us8h6P3IpBiG+6XIuQDuKmp2\niJxt/7HiDs2rRabRIFpf+BfNqUw5W6jy51UgyD9bYE7MSEEOERd1kP1m7xZl\nYnADyvqDO1gUPsHWE6qovO/6Z7CGqD948dBBIO2QZm2wRwnftCnKeKhnMSoY\nwyhIh6phUMr1Zthfa7HDSp6UW7cLLFJ2xHbNgr5UzKtUKXhSXVqjbpVUDRTx\nsBRi\r\n=jjLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/list":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/menu-surface":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b76f5fc9d.0_1620169687008_0.5556258154135338","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/menu","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11db91deefe8fdd161249e95eccfa086b640af4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.055d4f10a.0.tgz","fileCount":38,"integrity":"sha512-tnhHwAEg08H7bmmbEYXarf6y1nhZFO/P0/knqwjIBszHWSxPJn2BTMi43S2jko2aqm64IszjgsnGZzF2n9uhHg==","signatures":[{"sig":"MEYCIQDeEfY0oBuBaxvLN5aREV3epw8eNrwRZpd5jjjaM35EXQIhAN0heRMC6M2s+T87wCu3GeWHz8dv6s0703J1haBaRJAB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddtCRA9TVsSAnZWagAAzQsQAJJSp5grnabaOc83XOgQ\nyZkJszKMmFsoz/AElI7uFPC7BUnns0PbM/Lw8wZA78HyKUQn18HMCWU+/xme\n7sJmmkdjhNfuDvr4D9DlXdqRG72/ldYPpUnRskF/cqOZ0QuEXHCwVkrrAcXr\nPxgpZdmRi8xy8LtSLbUBWWbdbqCd0B3FE1GGMzcieK+kG6QHHQbIkDJJ/e12\nCqOAICYssglFn3TdekEOJd1AEYV39d9HDm/4wME5pGf8Nz4lod0YNkMCAW27\nrZSO6TQnHMwqDwfZFjv2OEAzgUNOzY3d37sITSxVycWTdKQ7wPs+U1L+wkDZ\nla+RyBw20MtJeXOtGCQ601jGp0a7biZL3iMxFmLcHdlYzOguwO0rKChZN0Qk\nEfZ9TuBQ4rJHqHr3PxNh4bXaOPuasTro4x5+zQ/fvRObWwKUtq4TaeemfnqO\n0mzqON5xMFFED7PGFqyRC5jC3ogvPRni32zvaPZq7o/VpyDB58hKzKBFkitA\n2a2Xmh+H2h7h/cpdIe2JUTXDE2U9QhPwF0R7iboTMRMX0s2U1QrSk7+3IsIm\n1IWTeu/Skaz1wnWXlPD/hQKjPORPMH0lqEj4LiCEMWpSNsmymzPB+Bz7k+jK\niaVdL6Y1F5rGc3OF57LonOmvheyq4qgf24XcUruvRSwpIVqOKE26jO5OmeQL\n1Uwk\r\n=P8W5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/list":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/menu-surface":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.055d4f10a.0_1620170604832_0.15565376305443057","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/menu","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5da6aca19159e781d3885b9a0ac08d13a995a8f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5b6a46016.0.tgz","fileCount":38,"integrity":"sha512-xmUiq7JX1P12Y8KWyzL0OSenNHVfAIRFDF0IPqZJj9/DTYyKtvrVVeedpi7xUkBIUl2EbKZgi8rJPKZRjYJPyA==","signatures":[{"sig":"MEUCIQCmsZr2++cnIqKXzJo8U5Udp+tjQptsDN0PDoIJziJ4UQIgDIXEynToulRDr2NsquYiXQjQkhd2rmXNwLOIbeuZuPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUyCRA9TVsSAnZWagAAy+oP/RAJK6SPS1HjYmjst4F/\nAPzdE1vdDTXdUUDV8SyHoaJM7zDCNXKbnGkc7l55Qj37deQBaTzUuR0SGecT\nRKIkkbfoUvVUpcgUrUz8KkC4orrw2hDCxsDEdpVnk1vWUrGlcgZMCc1EA5IH\nBGFk3duUpft/vcjlPSX2XAfqnzeQ4LmvImvzuNUwLuUFTZ+8I1I3AGP/KKVa\ngXe7p8NM2Ou+jTinDVZK5qlhdqO70AaRha5zU+wIvK3k1kaqFVyZtKC/3NjD\nXkuuBhfsS4GW3plseuAiv6+hPQbKX4PSy6NaIj+hdOcJcUsyGUlhL6VMjh6a\nqIdsk4YZQcpmrrYXm3VJn1jh9sf5gcravnWXOTBTJ+Qy+qthFSIFBO19DeRM\nBdU6FmWLUlTWzX35GbUpblGVxs1gveQRzsv7R3xdOnRkEDSKGBMwYqawvyck\nbT6VgcavpyKWtfqEc4GG/xD6sqvviMPObfGt5arU9xw2TJMxk0UCNCqCJn6k\nwdoJ7dMBK5CXix2izxklwJywbQRbmDjie5/gb48KtlApc3yjQ3t0xEyKiwWP\nA+WAFt4m0AUERimu1cd5IA1ZXOrppK72yqQIvgsK3zJVQY8h31QzNO3tpLas\n3WcHi4PSe2Sl0j+rbOPoWHZy0ryNlpm/AbPaVcc/+41Cv0jIt0rAEnNKlPFK\nRE3c\r\n=uwrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/list":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/menu-surface":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5b6a46016.0_1620231474365_0.1454283281764044","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/menu","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09d210f96ef4c7749607d90f02780d780cc014e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.33c9a737a.0.tgz","fileCount":38,"integrity":"sha512-ZStiQtT7TkgFjpQLvNiCdjd5nQjpsxGkLB4xjHsJEHzzTZmoKgEEv20xnXIJcUMgzep41U1GsEug/qFqHLk8LA==","signatures":[{"sig":"MEUCIArQdi8eaZA8A6ipC3mzop3sfdpr8Ex20rWZf1A2+M2BAiEAwUxoxDkaLrI8wymKb9OUpbgPn0X934SpjmcBsTM3YmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktXSCRA9TVsSAnZWagAA25MP/jA9lAemTNcjK3O854qe\n6tpB5ES494aNVQaodHhCZCzdN1f1EqRMuAGPpMI3NboOlxlyp2qcqpUDydZh\nhKtv5DjbpG0sxyMRUToBYIIYNDYYUpDB9IwlQu1S5DQY2tMdrIuuUXevhxM9\nE1oGj0p8TXQH7nPsVNCrcEp8ig76clW+b5nN8Lht3KnKutvsvBCJ+lFKMFtu\nlW6VHeHrR8N9/bAnzAg3kpY84TqfwjgjJBUJNHSIJF9SDvgaIYlkEDThBWe9\nPFjwsQ4FJsG8GezB/t0Yv9SQd4VrxOwLqNVxv4oyZ6GW2f0E+oCzkT+37D+l\nAQJ/Uj7xOTAoe8b3AOp+hTKDzlVUWWcwfBS8luw8LX6T7QXnFqVbzxKTa8Wf\n99v85Ap6nCrM2rRwnI+N6I2iPgzlawAhYWm5mxMa4jhTvvg4AHEk7NfLgDgV\nsDVgPc6AZmS55egk2kDa++YgxAA+5iyefTWL+NDDOGjD0o4OzT862tkNcmuW\nwOPnRqmGG8Na8MllO4BAAhWHhCPy79WTEmB+bTrlY8FGkYDhgDQNtSGzKpIs\ncmC8Hae9kz/h0nCtHyPegARbEIiM00KtJgg/K5eahEwn05PrQzD+K4w7GoNC\ncvGlof3B3wa0SduZmJJQvUr8PqA9tqGE32Um80Wl07Ohj+1BpVuVJsUcJOmm\nWLPx\r\n=CwjT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/list":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/menu-surface":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.33c9a737a.0_1620235729720_0.7103034633153165","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/menu","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"398e559e85ab8a21c720f33b8ae3168d3c9b2f12","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.9bc0effaf.0.tgz","fileCount":38,"integrity":"sha512-yD3ajt8MNkfXR2FiRO5kfKnyAGFWf3k0i0oNJMs7Bkiy8k0djo6snIKAShRgowPSjwI7qUSy5L+xzJxGvCYFAQ==","signatures":[{"sig":"MEYCIQD6iDb025J9mTXVgMpMFRdF2tSy1IHIYoyUNoNpSUaGDQIhANAp7fAKmvJdHnO2Rs8dnIP7rbBynm0GwYRZ4/E78FJE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwe4CRA9TVsSAnZWagAA0MYQAIXf6jBj6w5RGQQ7D0at\nrea83O9f/fYDq653NSAhz/3froasGNVeB0IyORp+Kd7P6Qlp7ZYkITGwR2C1\nd10SeJKL0vOXqrZYtZgGazS3pzC2CjHFCVNqw/KlRSjACs6ffwLsXRMwJj0I\npNMIpz1dM/gPudYsHadxCgUQ1bDwT5akFiRW9ApDRE056cWtHHUsa7YxwAvS\nqPvXhjuBlDbTI9+sZgDZDbciUvFfllm6dq6mJbeXiFEjQtHPsFltJYolf6i+\ntdSd9H7IOcXUIUc8ZtYTikpLsVyraxXQZZTitIO6YUuxKpxnB8dWVp43eX+R\nxpAOCn4JSbrpTlhTicLkWg+vfBY9PK9M86z2/WZk5TlpGD5+TGK/xPUOLtKC\nSoCZuKPZoQo/yk7RnrOiyZvxjTbIHZdeP9sZoLqyKn6mQbOW7hdvNBS0qQEe\nn41BCgbb3PC2hXLZKxcvVdsC17RnJsthnx0VEHXWJh77TsKwssDJGA5p6n3B\n0oseQUDUG4yFXE+dATk/zate3DVKdiXk81IO1Mm2Qvw5RB9uQlHGcj+zfBg6\nQSTE/f0R1idlgqgCIAcbyZh5mTRZhedZN26yJnbIs2FN2YkQm5s/AngV6D+4\ntcs5RBNdA040tWQf0oWVqzjy+gkF2IvOZUFACm2I1BPYSJ2FqZ8Fk+m6hygF\nVmER\r\n=1nJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/list":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/menu-surface":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.9bc0effaf.0_1620248503294_0.29649417010769463","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/menu","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5df3c01ce6a6d0567e6f1153c5b18d39996a1436","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":38,"integrity":"sha512-M3Lr4iuyRoWaiNHy6YME0IIrtYd8ee5+foo9hzqhYm8BxzkVW+D5onBZe9iAOOVKJrAwUrEchHUT6ii6P1Eq6w==","signatures":[{"sig":"MEYCIQCZBR1txRM6YmqJxm9nlXLJNQGVUsVXi1AAYc3J7xRPowIhAIkAYN0Yhxe8RAJ2k3rqodJTE9qSR58GqxULO8QtH/ab","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxFMCRA9TVsSAnZWagAAon4QAKCQKAkWCxhoAFvNmxj7\nqEuEmxGIeB4MgULRlWlii8cm5P3WzFolc0kzmD6/buzpw3syN3mP+Sdjg3YH\niJgZ1kC2ub9sAkApHjy4e1VOdyiCkgfxQt5pHSjgOTbly2R+BwZSG+F3mOVA\nL8Rrt+FgKmv9RKt7jMM8BoAD+IfMcc8qTsZVyHzQv5vNkFrycmQ19e1LX/Hb\n8EvAgrYpsnlUq21KR6xfLRUxpnQgs/Is4BALoD3xnVLlCEMzCF7AHMiKOf6B\nppFrtYtdB0K4oP3UsQWFqEluS3OZFLfWL3CpkpNiIe+k5ZYH5I5S1Wu3/iLD\n6619/23W7/6bxSp6HCroURFPKHDOsvE4v1r1sVxV06KpyiOAMyODJn6zKUoo\no0LQZeYtO0J42iiuipiOHId4gC7njRtrhcmYnQO4rdMow//ptEnImHdhZcbb\nolc9EJIyJVA1rOSnluNwI3KyehuZypeDbnjiSwa6UFbttzgmK+7Efdp+HrjM\nEQi2J7CqHfKhJ6r6kwHiw/UnIjgH3/W5pWBuXB4HyIXr+94Jtdxq0Q+Syku8\nXnjlL3oDETLjURCzf/upp3qTZl0oEDYBk8BDTzDCSNbL2yd5ReJ6p17UMae8\n/VFXobZzVc6ap8L82HRIGYIzGSfnZAiY+hXkoLy2/t7ZDLpAXQtwjTXFUTH7\nSZ3s\r\n=q39Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/list":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/menu-surface":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a1e0f2af5.0_1620250955859_0.9255754275948469","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/menu","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99eb5dbe08aaf5698e945aebf2570bc89a22265e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.06930c96b.0.tgz","fileCount":38,"integrity":"sha512-0msGjfJOv2NyDBhyjSYUHmoap4N8rXHTFGwh6uenpjUMIVYH12CV12ibfKPjNa4+G0oQj356oqDEAXBJ8NEFwA==","signatures":[{"sig":"MEUCIQCYh0XO2rD/fs3ZN0vOlX2nabP72kbGUT2HmhND1hjGgQIgMt+/pIBzFQ7cwugni5t3nHFzqpYR9mJjNPEmsJ6qBHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyz+CRA9TVsSAnZWagAAde0P+gMEhoihzWDnXn3/hgnq\nwi8NBOErhniC/uCJLycxQ7VosJtuOl3+cRtv8mx3GoJlZ7ek7NjRUNo/LQVh\nfsEETJv+HcdVdNw4BxtKn0xSf+0qKm+K+nhS9UNDgqXQYR93nvu1pOn7HHcw\n3IDieh/KdcpGA1CXS1dFzwBKPHRhIwVgZhOJn7t+YgvPDF5ZN47tXpspSS4h\nVQvCgJzSV+WOvkmF1pvagD9Qd29efFm0ToEe9EfW8NgPusaTotmanXC3jNRJ\nUdsd8E8CIKve8hAJqaifRPWuOMEkBj5um4LdLNUUUom3wFe//k1M1llWXtdR\nqCM1fcTcI+pHX7800DS/p8kh67LqC70bEMnp1/KhsZ2XoEx1WjOkwFjw+AE9\n2fBkp8fK0mczkFJPGUTY67BuNKkCBDDzbigxR3R//Z48PwiV1pCLiXcINoXy\nrixXRShUbAqBLMZW6wamaVBmDedws3AWxJq7HjV91QkGNtJ5rY5oVXAn6aSc\nOpnVPoT2kDLK3DmJi8Nn+y4j90O7XH8EdNIPaO+j+RXwDH5Pfp/XijSnVihN\nK+bgzh3jm7TstDTMN6FxStJS9I4ysW6+P7TcNmm6QjnniR8D9MsD2L5GpzE/\niyHt06pz0Fr0KAyLBl9/Zg2gPpqFLlfFx7kipjbf2QXzSq40P15KAPq3Ayl/\nxPur\r\n=PaAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/list":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/menu-surface":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.06930c96b.0_1620258045779_0.8483351318510746","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/menu","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fe2a33d84469fb54d5120acbc05199df38465c7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.03f525f9f.0.tgz","fileCount":38,"integrity":"sha512-2BMgSEYVNpryR+zOQdsxWzOVmbblfFrIejgb/eI94kC5lx1a/J/1/j++wE/yQlKiVu/+iNiFnXh7G3HDMzUXSQ==","signatures":[{"sig":"MEUCIQCJSZqnphFbH9zGpIyjfTjpo5HJ7usppnWexx6tgd98SgIgNDw/mf0f2eRfZig9TfPTdFgt6ROQBh5+WbMN6Mj0evg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjuCRA9TVsSAnZWagAAmL4P/37/ajKkQNeVVGFxFWag\ndtqaARtxGYeBxCXwTZ0bDxe8PHEIsB9/wwwWG8LJSitSQwF4B0/Q07Tome7Y\nQHTk5SzhZ1/jjBg5iyMw/rVrkq5NQVfwDFp5v59ToeJKI2qp3vlVJyo3L4Si\n3xiV7KQCANyHLOViQIBm4HOP6fienYK5tfzY88V1VxRyjuyuzHDfMnPnON52\nFwoc/Jq0KklgYBoq91kYTSEWdpHkhIRTA3+NRmTl4XHtJLhJjbyukg/I1SFG\nZo54D4J2bibZyVLpN8nB3cEwNTeI4xTY9+uCniwhuR+y2NA67DdEsvPDagnE\nOp+GIOeuYb5Co131KIM/wPq9kK0+/xrjwMcVsYe7HrGsPX7lKzX2+/8VDDll\nQUOOSFiuRTp705bkNWg1E/4sXFHIp40oFjYRmX83Elmn56p6UU0PttVelOPp\nAkAEnhTP7ZqB9J4zBZR2n05KjgKIYBKWGvxHH0ycwxNbOFfpRpwwnavKDOvC\nHkM2NET63jQ8LaB6/mVy52r2rY8/Mf9T5lX2qcsNTHJcNA7ES2dpTESRN/xB\n/HJEsAbf/HO0QFozrHmpAy39tDk0uiOKFEVYujnuCfAJ91oqBTygAfXvDswx\noE9lVuQDDJ4tHGOFVL9qRVn/AfFBLQ+j9Vup4cl9+v3gKXEO+96SvbV2J819\nDQ5C\r\n=pTv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/list":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/menu-surface":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.03f525f9f.0_1620261102263_0.6129896134489725","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/menu","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0452c24f5963885d78a650ea199d8cdd0e9b6d69","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e82ba2a26.0.tgz","fileCount":38,"integrity":"sha512-qH2WHFLLZJ1IE81765HATcSKslJilBb2GGMfNmYwQzwAAdDj8Gu018vuYMB3MpLFdYcTsLpOSWhSG3Fn41Gjqg==","signatures":[{"sig":"MEQCID0H4RrNCn1uPeviLnOJyrRWrkQ4RgQxWyKWUT7QFOk1AiBv78kfHGAUxsVlEY5kudC3ZiAbmx3XHB6jI9AsnJ4HbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBIUCRA9TVsSAnZWagAA05oP/jO9LLb5X05eI/52Y1/M\n0s3HiTC1BWRxZi6KvvyV5YeqlGJfK87EnSMe/znnIx5pQjFWCAdyNsnt8xNo\nUy6yttT1My39jQR7LTkDyHxOFwYnbgF2UzCuSu344nZ8GHOF5wzzGk7ZH0Ym\n4UB0WYs8XyGxn3+vmIhgp/jgNaXfK8jaTK7GFvSQbaPlx9kfHWdLPiGJTHC3\nVkrCJF0xM3JofeqoT0/mvEUYSGe5IeC3El3hY6b2sHJuwmi0j7kRwMIRgioc\n+lqHSLI7rv3xi0dcoNd+g1ipemQDIiJv+GA6fVPXrR5NB3H+TTVifMeGV7Po\nZgJJb/1Y2P9QXjGqDAsYNtNFdsfOPI2PNobPgbpf3vaYuxDgQYsnSjwbSXWt\njQteBjqQ0q53gzKWSsm3TTUUXfteg+87Xz6Lq+2GXmoTgp8AlLidIHlzpp0t\ni0o1ozisGAjGzxUqkw2wEQGSBDv/B9yKb+IU3FSeRrEPPIBK3lPllixojJ7p\nEp/uK/QD22TVXYCHoBt1a8r2Q+GiizRhCNFgjE3Y89nHtdb3Vfz/Kl5meHT/\nhAMCamHz4WBaxl4tOOMCAu0+9i+2dI/OnAzO4sknZG3TenDIDAAMggFD+LeU\nhvsnSKmhQgETk1T5w4dtYCfZySz81cnuL/GbzNQjWMOdROUhw/f1jz778QdW\nsUGR\r\n=DW6R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/list":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/menu-surface":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e82ba2a26.0_1620316692033_0.30912717085119357","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/menu","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007a1b6c1b5f659cb77e295ad812696da390ff78","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":38,"integrity":"sha512-y4bDP/x4RiYdaNeCsjhMO5o4BmmavshUVUmvpwZX/6pFNxbJnD/KPGiVSbby/nYlwXf3JtQQOSRBueRR1chbcg==","signatures":[{"sig":"MEQCIFLHPDCH+iBWos9n4pS1JV/wS8WYrWlMsrYT4Sdg7ulCAiB8yqyiBRoA5+cquikeWHaTLJIr8Ayx3oNWC4PRQ0fbmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfYCRA9TVsSAnZWagAAoCsP/2pyLtSNE+rF/xqsNJ5h\nm9MHQLAX7YLsxlDXX3208WM80Gz6Xk/0PHf652xWV7slP6RnN6yFEvPi4vVt\nCKISpFZK0BY3T8jicAuDJOXixfCJmiUqtjp9bUYAw/jMedb0isLlKdsBrxZz\ngXB3OQnRGBqy1Ddq+Mw6kCORdAFvmGFTHH/lEm0INKzCroPYVwvdM8SxQ+Mi\n6Egh52AfOFhFhln6Nty6SwdCaaF9KHAcAHhTciDlCUju0MrweFe0KM2UzZPc\nYQD9a5hxk8gXEhUjDgLC7uldVG8PAS+3spxJskkT3uYlW4sTa0GAb198oJEr\n8PICgAb8WchaOcRH3ypwS3itslaGvBG7bIVlxJrMR7CEArA0QJKIu7y0rVbf\nzygJrXrkFB/fUEs7UKoRkiWAQgloafAIaaceyDCZkYXOR9jj8FWrbzgWwfCn\n9NQ5F+3FmBFVRANRpXC1ne2PlyBZqMVueumzhfkxPOzAyY1DPs5oHaMAz4x9\nGq2FYMKxGRpj5v0alGNXaIBQxeE3CMHXAMWzEz+Sc6sLT5ayDDOlohDzsPjQ\nWXXO0Zv7dpA6JSjMFzx4KZAvo6cQ7hshBlqRXjTOOnnIPq2/awf71KM0s6IE\n010qyLjdilZkI4wE2VxQ9TqMg+JzRRKMpE76RhYjJb++CmMGKO0O8eZj1cLE\nEkbC\r\n=xA5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/list":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/menu-surface":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.fc7c4e5ce.0_1620322263485_0.8274579561091076","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/menu","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35e1461a86a99861b0de34edaa782b7e5da53359","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.65c04514d.0.tgz","fileCount":38,"integrity":"sha512-Nn38+PXvStQeKn8WXsrmEFPE1nCVSpXAko+sY6tmwBsZXvcLiQOGwtZVN2K0/pdA5uQ4uZT7af7h3Sxn9Lh0UQ==","signatures":[{"sig":"MEUCIFrmIv3hxDSozikZ1XacfhRd2QFP7o1OqmGrV8iQcTxXAiEAvtJPYTjvTt8hhUYvLzlMtwpUHI/fSPAwonZQ1bVrIZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDlNCRA9TVsSAnZWagAAFuMP/jif6YuptAIMttqy/Go2\n0zRSDBdnxsyO5vUZHvBFPyit6p8P1xGcVfOjQ2mPX56pjGBGRxk2/ZL8Ei8q\nIRZ/HM27U+i+b7VIV8Ug6ofepMxFWddJMfpi5guIWpKd1AO/BLdSvyCWhJVW\nIeHLjbvr7/GUeWwlVfXtCyanaF4aqTDHIFNqTnHYFsIwpjo8AhecAQXSUIDU\niqTFWcorTu21ya1hB0rHxoBwP6ekVykB10lVc2v86k01aUNZqrbORf1orfqF\nmfjS3yG75CY6s17CSmECxyD8VUIkNC8xLO2vSQsiwoGiN3VKgrAcsH9Sk08b\n2RIwPz02CrzaXSJYjHLlu/pqRcQLuDhYPH7EOxaJRX5zdehdb87kAxz4meAp\nxEu7NMgiZJHFlEV7sp8DNw0eSE3lMPq0BXnB+LVvQxc7iNY9I75r6EhOsqaB\nXoIYZuOPaDczxQlCJSpWd9W1phl2AhlaoasU36z/gksxwpXFgm0Ke+x4ESqZ\n79DJL0rAveEwHwHMTAPNgiItph9GqlEEvLcfxAJYuBfAq56QZRq/87jOiS+w\nj47f290DminkdiYtgzKWzupevj9GVBsL8NyWVuDTDCnum4uh+zWr7bGcNTvh\nzW2EJu6NjvhDNTDhc6Q3NNP2D2y+O+f7yWAiLgPGbWDmhSlxtgrjKty2Xm3A\n6fIP\r\n=E/i7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/list":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/menu-surface":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.65c04514d.0_1620326733114_0.31645407301288486","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/menu","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e175946b9c99af02ce0ab3862cb27ae36126ca9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c97779ca6.0.tgz","fileCount":38,"integrity":"sha512-41Y/+/8BVw5qdXnJf1JwSweslsGnKbKi+4QF1nKmNFOwkG/Far8mfNiSrER4DLzOUEULEUard6WwzzYUbxr/5g==","signatures":[{"sig":"MEUCIFUTPYn3HKkQA+bQMslVf8aCB9fl3YFDenPHgiHKJGfjAiEAkC89sgZLrt9giWEKjjvXmw4kinGbzcMCESRyaU44o6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGNSCRA9TVsSAnZWagAAEbIP/ixENHp/3vXIOBHGdJUH\ncs+mhYqAYcDSNJRifULeP3+EvkJFjUYCbR8su595zjsQQjYERrbOJGG5R7ie\n3NPv1L4z0VJX+KlgRxylnf2XSeaMDX7/pnUN/PN4XhlC6fPh+wNLfxQIPaIr\nZYj/3opxFwBKTfH+ijZlB3j3ejGSChYm4A6NXUyuuBXyVyH0NQVZ+iaIW/0h\nFCLHjc0crYtO5Kg5pnDBab9kIAJNo2PCEYbOYBiAJKX0XlbioWhSiU4lB697\nsvkTjOtXQDUnSLMcYmOOwCGwj6tsWMZ/g/X0AcoNyYOIzyYexgUEtVRhTl1s\nIFu170YD2/OWnai1WKeQSl61u8UOcaeq4e9PRMTYPiPA0Lvvci510s61Kaj5\nOq5+6yXtR50/G44xBMad5X7ppO6i3FEFIKgVQhmdaqVsNhOBKLCXxon2PW4h\nlK6W2/I70ss7EuuhHS/KZxqHERKhCKAQaDms2sOt3UMgK1e35Fzm7bScIV0O\nZesS/CIpaNRQbvWS/hR4TDd5KK+7RrNm21z3R9crGxEwdb2I8c+CBSj3gR2x\nvp8limrt3GozMKRU73r7gV31DMTLR7G5RQyA0bCo47VpBOrp3Uw+GTGSK3HT\nzzVGWajHik2f+aQTW6K2udPqqeRWNCs6hpA7kwiNxdYq9FwrhT5KCzEYC9QJ\ndV/g\r\n=g8R3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/list":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/menu-surface":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c97779ca6.0_1620337490120_0.8371560323907572","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/menu","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f3a3deae545679fe9d7dd0590753b6339510507","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.869d890d4.0.tgz","fileCount":38,"integrity":"sha512-Pe0YBU4g5Pf0h9H4JGiE9KJAjawpjVdQDbm2VubXKjN7TQCo+95FWl5BB8xFO7/lZEh1mJjH+8XQ23lOexDFdg==","signatures":[{"sig":"MEUCIDgMMX4Samc01PnuoxEg/6LKTQSpONMWWALOPggxInzHAiEA+tmj6NGs4VE8dxerKk8bf5/Gmwj6f+NXxLYnyM3Pbbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVq5CRA9TVsSAnZWagAA1fUP/R04fI4FpsmdX8fJxGXa\nfUBmTh+eLpqhqXDFbz0VGXnWYqouupUHNWl75KZUSVsSi275LBPa0NsbYLrF\nZOmbhfdQD5/AIt+NtCeOcM8QSQ651a0xqbjtgrZvrCChAtI8raZwaf7FJ8lX\nGfFutxUrIxkS5dl1vHEcSAsKrHqQ75+mUu1rNtA9hiOE1Ea9Al3JYXCu3TF6\n4B5676lyoYjD0w082IZfR91+ruq+yBqfOVBCwgGD7/YZPLBKrRx9zIdqnfbO\n4vFtbIUqhsq0ketmMnnY74B9CtUijQemFTsSI6k2t9MMAA54ow6VLGY2/Aig\n8LRSeVlt97gzkRChXAMZjLdAKRUdVaBxVLgcQ6bwmlnkxht/YPDxbGsjU+uU\nU/bV7iXRSOzce9UHd/w64Re+czSDfQsuwG6uvwgxPC2Egv5zBN9PjeLfh8OL\niHg6aZvwPeszWcCqLKPlekDcNFUPW6BJyri9cd3DxmKEHMIo0sjsBkS3CBq0\n3iaTlAmbjxHNyBz6quy5T0ul8TcYAk4Fl7Y2QsSsV3rKOgSiriN/y7U4XhfB\nrJLWSqt6nP5v1yE5dNYh6/TG3YDgJB50+stkAowyDhslld97Gr7PiSVTChoS\nlLMmos83JG1+QVdSKEvl5+aOfS1YsuYZwmwMzsZ3m2GPwE1P1E5ec3EMWSV4\npyT4\r\n=7qWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/list":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/menu-surface":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.869d890d4.0_1620400824611_0.9131872544138222","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/menu","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc37b69c2824a4b64ef773a2f2c3c84a7edc8a59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ec22e1da9.0.tgz","fileCount":38,"integrity":"sha512-o3mMFPbIkbgC0kUa3p4ItpD6HZzuf5db9xoZx1VQeInKLcw4rX5JfS5KtJKJWHhybDaP3glX7BdLZPYeuhHGDQ==","signatures":[{"sig":"MEUCIQCOuSUCiyzTtxPZWVzvLi0v22ASI+XDNXJ3AL/DWvzp8QIgfDq0A8Lzs7EZDC+obbhEGCpLadgi2FWa/3j9mbP9FG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXqFCRA9TVsSAnZWagAAr/0QAJUBy/+dxZ1gg1bwsWVG\npS4VuS/VtB4b2RJ3dxjr1O17RhcPqRZLGciqc62PvHkh4vINyMoO+6Blac5O\nPw2md9Pd7Y1IUUtOyri9jGrOOqc1LLg3aG5OcFk3czBrVkkWQcB0KOVCBDIr\nHGZtdb8rZWtKVdyuatTa6j0D6I0s+bHlp4V5JUyJ+6LS6157r0LCKT4G9zjv\nGKdnGF2pTuNbJqV2rJ8XKx2wcbvvRWe4lboEV+DI27yYvj/8IGuFJcYjJ5KU\nCenH8EhrBOJ/nFoULYpA+goJGMCk61QxPsk/5j7z4U4ood/pHbeypUB0mE+I\n3nJPKqjhJiXV7ceOQ64qQkDNVwDImPDGlR2Y5Ql4CFgpgUG2vRbaCEzaqfQH\n2MftCvD9gmSfGKAcbLu+2t88hF22LZKKnivt8/xHKo7IxEHeunqZInvRF9Wz\n23xWoW+eH1thDv+dBrM//WGlkoX0XtxOlcW93M8e2xmk3DdkIOFxm0u+HAr+\nmsQRlDcID45Dmkrr9j0DENISd056WXFfxdjwqj5wg1BoOQ9JENl24CLLgatK\nDj19M1s1/OF8cozXEdDYerANn9O/CYrFSaJRBsnvglyhJV9g23OZpRN1rtdu\n65iOhc4OY+jwWgKZP5NoQ6vtzHfF8XqR5VhbeqN2ti2BuusJrSd/VGTtfI67\nrXDp\r\n=aRBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/list":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/menu-surface":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ec22e1da9.0_1620671108673_0.6403718366139337","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/menu","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea5c37e1189520837854f11bd5e23af9e1985c7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-nightly.7427449f0.0.tgz","fileCount":38,"integrity":"sha512-YkcweocObtkjcHotA2DPZBrDeNXmbZfSCxwfC3JYnObOwFA1YLSvNJbb0/XCvsNq9rTV8zjnrv0fjoGunJB03A==","signatures":[{"sig":"MEQCIBn4fjN+/EMbLXTIZcvYm5YBNrWsds6P1kncQuBuXx7tAiBksc8EsO9kISaf7YH4TDvuarFwz9HQwUpZQePXNcVNmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX9GCRA9TVsSAnZWagAA7iQP/RyrdJ9XAjCSU2cDby5V\nfMW/EwYcuGMNGmEInRXWcOGWgtJk8XPDzoH7BU6/zVvTQWtL//s9FmHp5oSm\naZsOw6RzbShZIAlvy16i8h5NCdZPln/DZlRC82E6xIV3+TkmF1EI6oOYaEc1\n2edc7e2URfMS6M3/n5wT6GCppP6Mav5L2747dWuA6cuJqss0lzazX3PKTIav\nHAGtqj+iRuczoqusYP0SRglsDIl+o0LzrVFnszcP3EaGxvNsXekFawUpxgbY\nr1GG/cXfNH4mRYaiUl5v+NKxhYlxPH1b1x/IBTBTFeQnGlcB8VT+VyL7hhJ1\n533vLe0lTDo8vl51ZG7xRHSBYkjdHQN4VxTXLD1NOUl/wf9k2BzP0cliSgC9\nOY443VSPY3wcD5kM3aOkqu6wg/f/ITfeTLHKFt40OUSFrw7GDoQ2yTZ9Z8qk\n+Qq3Jr7fgtC/UhcPG3/FS4EnmhdZLwHHjz7pB7dD0Rzg1DCqfZtb2V9iEHZG\nb3HlyMUCDb9SWmaMWiFxUyLUGg9EG4LPtGV36tZN82y0Po5rWzDpMUtN51mO\nhcque3oN6s/C6Gou9/ikuKRlsez7EU31J2RVxBZ2hpNRMP7eUnd3p5YUQBvJ\nIpcDOqfT2U1Qgn5ViAPub060VJRexYjvWT/IiDfx6IJY0NtzpsZ589dUjVOg\nQQG+\r\n=RSi3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/list":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/menu-surface":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-nightly.7427449f0.0_1620672325652_0.8445689243689272","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/menu","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"462aee27c668de0589b33252432cf1dfcb1d5268","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.957cc3bf5.0.tgz","fileCount":38,"integrity":"sha512-OZ1yAhBHtn+gKEiEmM97uHF5TCTWUmjLeV4qUDmabn1t43eoL5AAQ25Haf9z+apJoGRguOyJlZX7GNQmU99u6Q==","signatures":[{"sig":"MEYCIQCo9/FdngEPQOTGBHLcT4UEoC6UjW9WehoJnDp9UXZFqwIhAJ8A1gjZzoK7qM01/NQewEmOx82OngBSz+Qk4MQkBjpK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmayHCRA9TVsSAnZWagAAi1AQAI2JmJ3H1yJLJCxF672l\nOzaWyV4C8t5G9AUWg/sbOCXm+gXpkBXQCBf1b/ugGPET74HyfzhAuqRVsKpD\n1PPf7bwIeIPJ2TibSGDRLLTGeOCiyiw/Xea8ddfed5w6u0pc1iwAAJAWVO6S\ndE1S2YOrnrChW/1d7VRQ/dsBot/Hwc9Mvv7/06pBOl5DNfGJgocNx6YIZ07P\nhjK4dMxZGA84QYMmZ1wxNgdKrAnyaaSik1VSTRCraJ0SXNuF0WrWbSGiKoNr\nkpppI3x9+jSAzlc67eP2QhqsEjsc0aTxWI9NSMkCERDJ81X8qlFW8Wn/M3Qw\nSlBvDWN9YUPqcQZ939gcjC944dwkf05pTO2AJ82DVsFkMHiMSBGwugSbM4ZX\nZH4PIxD0LSft03eDmAkhey36/d430OfcA+BkCOAUpuoBhER9SWGq7pzpNwnE\nRkJtHDLEyU5Y7cvVRhhlBob6HI3+Rj3Pf/MLq5LqZWlgsu42oyXakW9/qDzB\n4+Jbo9ud72PZZR8CVw+84vUHJ+1vOGke+0LJwWa38VHJYepsMSGLAV2tGsoj\n5MGGCPiSHK6wZTJIGgH4FxhdYoOa3V1TZd3KjWOHWtYLyA6Nq7XG9iayg1G2\nI2L8/ZPmG6R+5SS7BK4RYh7zOJgCq6HLR5UQ889W07eHIeDyCvXq8B8nGlXK\nfdS+\r\n=XslF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/list":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/menu-surface":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.957cc3bf5.0_1620683911250_0.12451941627189211","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/menu","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a6e3635b11f2d76a4328522e6314a97b3ea5598","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.88a33cd70.0.tgz","fileCount":38,"integrity":"sha512-WirCaS/oNbrvXjuZW2thjqSgUxSnUlfeEnSGRL40KqMjvATyybkUmeR+2bIczA2+BF1zHAiTgGEpsoCxS86Edw==","signatures":[{"sig":"MEUCICigPFNny69V684bwneNxVD/XZ9/ejEvUgpUsSMfnxMdAiEAuOLKVwtvym83frjRCZxoSFykOo06dxIKSjbmCUgmc4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmct6CRA9TVsSAnZWagAAHJQP/3D1X8eSnbpGDuMthoGH\ngMCpgngiHbRwTYISlRo2RDUVBzzq09vnUO9/kCeQOptMp5RY8PJPu09v8WYc\nKu/Mfi6CZZNbT/JrQDdH6QMRIAr5/XoMT45q34Lqw7qI7GyqtyYOHDJefcFD\nxL5ntPKVgg7nc3DkK+p7F45saQeReCS3Lk5R2CZluQhURO9sEb0fqAbLxL9H\nNdI3N0uwhBBkCtHO/BqLz0Yv+WI9lYz/TUSYndJ7Mx+ppnpNvLDe/NJL3XL1\nsvpII97eNf2TEJV+vw2gi8kwjxbj53muje3GiKcqoCUBX4D/Rigp/7sX6DKu\nd8GYXA99rEZiF7fBv8pDM7ZJv55CMSfU93XS5LBTjrL+kHlbswVricYLhZyU\nBn22PaeziCJngkOyMtTwvzsMncoGwmpYbNDNIZ75tuSqDdkdYXFpWmuPCGEd\nsjZPvZZ0KxRsBkL+CLVzchwU0oPVK3eHMfklSOY8TS0QIxbbgTXGvZoApqWL\nMGzI9WQMNVS6LtTQ34nObv9gB5JgcuNQ3u60UGnVIV0NicrON59ZZQTH7hS5\niuMJSSyUi5YDd+GfvFqVCjWpFgvshrrRSxCK7MV5qkgU9oWkrwpDn1qUqAe8\ngggqMMUxxCaQSOqZU9D1ZAX9UaPgPtO3JI/8hcernUSHpgo30Xbsh0LmHY48\nT6RC\r\n=yq6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/list":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/menu-surface":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.88a33cd70.0_1620691834314_0.7289481883697402","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/menu","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6767f3abd524c744fd1c3007955c1e86e86fecb1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d20dc6dba.0.tgz","fileCount":38,"integrity":"sha512-r+FQYFE5g+i0W9D4zOZKq4WBxXZ8aG24chl/ahYmRv/YnypZ+if2o8UHdE4XYIpvraCrsrANICJO4tVD3z2XVA==","signatures":[{"sig":"MEUCID34fEox1E3VxYu2AUow6E46CAb5Bu0YIuZCNYxIGyorAiEAj/U1TMCTOQjA2prxQHGBHe2y9fOjBzD3VfJNxkAviIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8xCRA9TVsSAnZWagAAYwwP/jH6/wOAbtGdvr37+D4H\nNJZO8CoLAQGKph5GOZDvM9j9nDfVwjukKFmLW5LQIaR98CkUvDyGRHK9Ncqc\nukV4UkZXje4FsKv7+Js/4AGkiEJbjbY8Rw3vXKIZ11gtPvBXKfZ/sFPUYj6V\nFk8CR563LrlQblTn4fn5xDsl7ghQ9nmXGQiOi2AUmKVESsBi7YASwRUSd2nx\n7L9PoJ4euUrjqdj7J2TNPKLh4CzBf45KtNV6WL7X99BTVHX72LaEZ9OsKYdG\nJtd20R82S0f0FA6PH/86g+CD+VUk0D4byAt5Klmj41adCK3+1jdd85U+7Axm\nFkfRPna/3G52792CUUd51Qvy8L2nhYAP7QOfn7LHyGOrYEROciJOCPGwYFMy\nuWbty7dqvbg5nY5QM4vJ03+Eq6N0LLmYqAYage/8PjMtgwcUEM+glVp24C8q\nZwb5vzKcv43zV5BeTCGfgoKkTyXFiRGjt9oC0nh8yVOIOABPIoaa5S0PclcB\ns6T3qmwTG1gB6TEJ45WQwFN9hkbPO+9UqF/T3hTVueIpfSwlLaoQE8gOLpeS\nsQ3xLVVjJ9RPFLqqao0ubvfMsP8WDLgqqyr2kSwE37+hSkD+50j5SJfBHy3p\nBFY9NFrizybg3JpMsUtQ1eziNcjhu8SJWCvnbqoqG/I3hc2sHo4nQwQEhsP7\nLovt\r\n=Kxdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/list":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/menu-surface":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d20dc6dba.0_1620692785123_0.7271254726467531","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/menu","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c171b2b1fb26e6b33063cc5c4652abc45479c6e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":38,"integrity":"sha512-taA2ITAmByhrdTsFTjNzBdSLWGWZp1gB7m7ru6/TnSjiFNXOg2kCvV5g84NwkfD+Pn1t5l0yKRyxw5Hjbvk1+w==","signatures":[{"sig":"MEUCIA0C+AP95cpn0JBAjs0veAqsaOw6lOjzpdayNbUqXv9KAiEAmDRtJwKw/6LBw25s7iTtdmO+GqSi1d3ca+IN8ccmJC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcfCRA9TVsSAnZWagAAfbwP/0AiFkJqXPiKn528SIjT\nGupuC98hG1HsbENsp243onEDZAWDziYkxtoHBfFPsa/lClW1shiucbGfnOR3\nHBtsBmumR6HB7LvJeWlqTdGHjS0+1z/tj6T8zRc4J7HrFYCGBJkdG+OTUEIw\nExuvwRX3paPnTRNo7KhsU+8nHR8eJy8PPSnh3qFhlgI0YuexZdEX/+B69Jf4\n6qI3POxbgZJ7GY9qUEZ4rlChcUDtSwprI+Cl6dqJcM8wVAw0srt0/JrvIMZr\nrNVv0pVRFdfwItGuHtQy/gaOfxH2HJn+NHwM+RxieA5SJHCaMp7Jx64haIyH\n0hqESqxwr0mCWFC6eKOEBS3g16vEqdhS0P2On9/KbeRy2CDBOnTffskk/mRz\nXroazzoKU74o/5uvJsvz18fJpN1AIuB55PDS9bQTSyakLsInKFwSZz2KhYJP\n0VMzTWSLKJ75GO36mCH0Y4DvTe5By/B+KCPLrBYvQ9T/2QY7+K99qkCC5Lb7\nqMmKQJE/rXdf8jsZ3CZkNQBBOVVYUxTeluRc8WcGJwD3b/S1SpUo7R2AUZN1\nEpvDql1qsS3ItEbIq+TfWgoCUWD6l9XtLMYYWiOlE8hUW8yWaftpBaPSdW/n\nHOga8N08V90EQawsobgXUaeneMEMoHnWY6n4NaqImKHzspDRrHZCEZU2dVcJ\n3kVj\r\n=qHlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/list":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/menu-surface":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.0ce2fdb02.0_1620694815462_0.5193680968844085","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/menu","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8313ce61193dc3f6a99dbaa2b4389376830e3918","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.cb162da37.0.tgz","fileCount":38,"integrity":"sha512-qDoorTnjtRmxBAklw2I3m3EKr/xmHUuGpTghOHUKkBCNYhJ3jS7Tn1aocOe5/QJ8daZ1CQO1Jo0y3sjCwdTQ4w==","signatures":[{"sig":"MEQCIBgCSrnGS9gTzn5U81VCXNHZaX9C3P1BrK/bmlRKUp3IAiBfg2JVzroohBXONb18q01U3bBZ/i9pXPfIyYLgjdxN1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeU1CRA9TVsSAnZWagAAeP4P/i8kA1daufO00hrdNHRk\nHag//MtRNHya/cMSCQPSgbqCDMeh9lN0Ui8SamPutj9hqd5hN+Q9MCHKFHyq\nDpH8OoX6JFwLFk3l9xSrzlW/5AZf3NKY5xXT8ZKIg7t+DllQ0gLDUEJMVmY1\ndcsK35xH/nGZ6zJxCesAv37WE+WkoTMTiPY73To+iiYgs106UJAke23BLhs+\nrIc7h/R3FW0hCj6cr+iJnuEh2XFAAlnM9eXYWQ/PkeEstWgA+hJtf7Hh6ehr\njrLlC1eqKRgYFqxLIne4u4qPZ05W2iGelK0B5ceJR8IkyNPnkOCK/SJfMY8y\nIILpgn/i30ccADnVszPoJbcRh0BbepXwxoWUI5VcxqaXVA4USxwlnTvQChB2\n4H07BrB9+awWzvVRCm6XCpCugH3wElKP6glBvsoPsocM+FeFnbskVnMVRvuW\nPPvA2oC11/MexshlrknylUrsv9drcuxqrehep0vI75FL7wXInTPNGrXWcV8e\nrTaPSYlS5yZviZ6Pxs1yDPMisVVn+xC+5/06Oij6a0wIZuWllDCmyKfya0wY\nQvVQyE3ymZWePUkdKgsBGF4fy5Sx0i6zXkUc3KEwuBTZ5z1xcqGlJiN9E28r\n3xU3bZ6lod3CUZAFcCsWcUP6bFMKQRuUHg4L5QkXa7XnaRTm75tVsJmsoNE4\nMHBY\r\n=DVAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/list":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/menu-surface":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.cb162da37.0_1620698420591_0.20766877939362582","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/menu","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b44abc123bb43ed2425d8b9c4c449958269b4b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.573dc7ffd.0.tgz","fileCount":38,"integrity":"sha512-c2xQUb+ETceMjxWE57xL2Bf5TuVpBpBgjSQIal7Sr28zabV8G+Nh0b4v3n+zRfnMh9P4rVpyDvwdx+ciJ3Y7Pg==","signatures":[{"sig":"MEQCIFuu/QNEpj84N0/u9+jX0P+NKe1TiikVbXA9ansjA95jAiBThoVao6t5MnawT96yym5mvzaEyzdOTc3waicrPLy0NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemeCRA9TVsSAnZWagAAPpUQAIi0AxLsCoPbcJgHacqN\nKaZVPMvHlGmWtxDpMoOlLJ1XG86fieJJC6CJ3CJxjMipSDr0P6hNejZyh0ZW\nYq8XGiPL99hy+Ffcn7svoBIdAsQnbz01m/bZ5Uo/rrAWH6OmqD2FpTM5xHYu\nY5wfbbNVOlOaRGVpHA9ldTtZjpKYWzS+8Ar/3fzDN0ezlCHVvTFtCoq8bH1s\nrzK/6fuJQNYAMi7Yhj+yB2iwEwO8CcrkNLYsCISrdVEpKs11LiewLyMlqTkh\nm/TZPV9ky9q0XNR4Ozpvk9T/rTJ3MwNnOQpBHCbWWJAST5P4Id8c4Xc0oVx1\nVAF4gVGsqI2dXvMGMD9ivkpRTUfU3TUyk4zj2j1DUkDLXEFSVioQYIvhipHK\nGmtLRFHN7ZoRh6kG7c/3b61uHu8bwkoErdfAYnygPgijT6+TQYLWK+jB/QvM\nquR2WpB+rUX+PCGD9c/q9VpU9z0TBcMTip/x7K1o4qdCCB6u7iLXlbSZcC9C\n6vOPoybkUlX6F01Oh96N/Bd2YU2sXTSaBZvXJRXiO/egDLhPdBI04eBGj5XM\nrdEk7FS0XomzgxKuuQfBPXE1zwPxegGltce4p32hmCDthOLwYU+Xw/cAd4Jj\n545nhqbDgSFY/6YrRUDYN/lc03PURQUOzFKzRTxahIlyAiu8EHBdInAvYK8b\nJVOa\r\n=BiV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/list":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/menu-surface":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.573dc7ffd.0_1620699550338_0.4270058371434491","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/menu","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6539cec1fc21c81ef7c4709e77ca87913e1d72","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":38,"integrity":"sha512-XFbh2N1YHliJlbeyysdr+wXeSIOytagXm+iZ04LAUApa/SVs8h67O+jcTGLlSTwFNrndvGUkcM9I6WP4LazTCQ==","signatures":[{"sig":"MEYCIQDoS+QyNXAS+naTkh0/tI3clAoaNeY6/lIYf59KSd+YZQIhAJW0i3rl4tpv+E1kfwgEP9KVzJdUad3AigQv2Wo4BB11","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxIVCRA9TVsSAnZWagAAYHUP/R5XXA6OgvEUfrrWzh9/\ncEb6KDXoXN7XyPy09JbP3tECit0bcQCarKW/KEHz+Xc8baVCBo8uyuWDEkXo\nHpqcPS7YzOoKmJ5LyUCDly/xooqmgajKnmtXuEcBJN8Z6BJvvQ98crytvnhm\nwVqk6OsYedmtp7Qs5wJTXZ4IZZQoBbtIQM8SIsTDx7vsXbbaFdW7YJaXbXPg\nJnWD1XEnkJe6IzY2W1cmrGgwLnq1g9fg5x0Nsna5Pi9wrRpViSTqsi4QfPlJ\nEmgP4mE5mM1vTnVSLUu3DXTj6xMo9Fmch/qnksc3t4LJ17gAz7s9tOupvfP4\nveH5GB5z2lU+wkhirGyoflw+6CXl3dxB+AO3AKJuC8SXTnmifgUF1GpYUa4L\ngg1nYoNPAd/hT212j1tf9otfxz8/d9W4DrnFTzyJZskh+YTWDijczOH1WVt/\nocxQSxXcFqb2wQW4FiFzInVzwuwS6Vh77L8z7M75eR87TxIiU+LgrJml/m4k\napCuf3nn8L2RJJE/tCqNFpkaq7d6MURUCJFj5oH2zkVdngwOOwroXIF5xO34\npfsiORTaMDrv2UW++7TtTwTpse028cqSl5Znb8d0+yaun8i/5oul/F+80fxH\ng45hQDmXYA9zrf7rFbpBE+q/tkR6xk3uI/AuQHYfLRXl//OGo6R/1BNgJHY+\nwsYh\r\n=PlGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/list":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/menu-surface":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d5f6ad3fe.0_1620775444748_0.8436206332533431","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/menu","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b326d6c47c35d9316d75384eb01662971bbb31a9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.25751d2ed.0.tgz","fileCount":38,"integrity":"sha512-IcsPdQxdERXM+ijSYOinuTn0WgwjsTT/fzkW5CIG8f1uyZus59P2UhPpYCngngIphdzR53ryAxPrl+rFKWJClA==","signatures":[{"sig":"MEUCIQD2zF0KyioXLn1TZmPiBALdjarLlpjd+ePHRL6v/h+BywIgQTJtXlCdpPgNBpSC9Eoy0bNa3YlOjuSQAXQ/GqQTY30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnACPCRA9TVsSAnZWagAAL/cP/RARsP4xZncsUU9OncwE\nLmM4k/GsFpwrKWU3GGqdw3+V+Yu2vleRgi/Wl9qawkHv0qqbHuXfwwd/u8lC\n/U4RXtfydNAhwhfDc/QXzuzLDrFqzovNm3c3NVgEsIGvfEXlIa9STzOArXyt\n1kBShn2Y+IQjR2nd1lNCJAY5WUg0mMofqrDYkutylS7xYmRKd+e40rWHonOY\n7PoG+iUr9disS3KdFVNHGVS3/HHwhM8K9nFjfyDJ67yJmsARVhG4RNmssflP\nAeiZsqz8yYydH12LJAQ6qZwnxXZUpdcPl3wxU3J3ypp7HaBQhc4h0lsIbumA\njcDU6JY6oqvvUw8vYcuPCmehu7k6qbrCfsSvZdxQettkgRrkpsIusAUJkqWw\nA/U4IE7bJWoVJjWV+Ad8h1JgJAhoTPDZFZdbMSlRQ4KgBSl7kbuOYR0E7yz2\nDKb0UkjnesdlkmXAWa6O5o4Rsd2l3cR46vaza2xC2SwhExIP8TU04GZMIef8\nn9GfIIyjIBs8K936ojtVjLrP+RdakMP+rJfhRu5CMv7Lnvx/XkwN7Fc+O1Pu\n4Q4r6Wn1rKA4ftTPIUFd+YHltEif2n7rO7/jMeeWlbqTkO86+AV1hgXgU6dB\ni+yOdBXk+a3kVJRtzHlxvJBZVj+7lbz1bWpQgTF7NogdeMTeq5dwN939Zzc8\nQUa8\r\n=X5nS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/list":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/menu-surface":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.25751d2ed.0_1620836495416_0.06496539062317708","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/menu","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ccd1af8f83b5097eb17dd211871da1c117ec750","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a23ecb682.0.tgz","fileCount":38,"integrity":"sha512-3aVit7LcuYdah/+be45yuZoUvKhZBaZDcQijoQV6zXGIRFa5HeZYvjUZdJAxUZezKQqInGCvQ3vWtENcf1RTwg==","signatures":[{"sig":"MEQCIFbkx084hse5CNGgK8vrVr3crVrwc6xnhEArhf99QgrZAiAcKDuhGgqtm1tSMqU4AaUjhNJ5MeW43QifNrFekB+d2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB17CRA9TVsSAnZWagAAeQoQAJzUrvZZrEl//flRZ0RQ\nCmKWQd+Kf0mioDfkSY3vmAEj+gyMU28/eiTlenp5wt5Bz8m2VPYLMEdW382e\nQ93zi30TcVIpfaVAqbxB0l9eMMhbw4ruy6hQm4rxFhxGBNWH14byiqt3GSF3\ndQHzPSy1/rOfEPeqVllZ+WrBcDGrSkmp4EqZAw3rX6LinWNaP/OEPF5EKICU\nd5EQAsho4GjhPiPLAwjbsUCKEgAGLh1y6wQ8E6xJDG7FVeVQ7KTct6vxq6+7\nnHmu/qelp1JJBVLBqBukNrMi0x7OV8cHQ5dvBVTMRYJngCUJ9qKjANePft9u\nlUSG2HwMgNm+8AQi/OV3ICYNxT8FsJ4bbXj01TJoo2jW2Hq0P+6d5UvtX6fI\nRwt/d9ZQ7alZb6sW/ToyaL/5q0NiWkDSxwoGDj/FbCBfQDJxF+XqQXkk1ngu\nP57scNTNU9M3rGlzuGImmKzWCXTUhplXbHnnSeSSJq9uBeM0wifZWS+8emC5\nI4Oq/XTTmDngigoXVhJSlEsw3/xACz8YbPIO5bCxR0DsTd7VNBR1JSIJtZEt\nt1lq4zKl8fRLVCLbjpAWMeVie+Tz1wq0aeoV6j2VTpJym1xv/W7YcDUbrXZY\nQ1fCwYBiBTY6Axjl6WN7qSm+/su11b/yS6s6RWOWJ4y3t1ux4X1Wv+c7oOah\n96w6\r\n=lB21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/list":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/menu-surface":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a23ecb682.0_1620843898672_0.9002898566892357","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/menu","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b912b9a38cf199bdc71f70021f367bd3e339232","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.33a954852.0.tgz","fileCount":38,"integrity":"sha512-/FUfazuRUDcpiMtnao37PXmQG7JKnyBS6b9biUcn8UccBA5/ypCKIz/vcNk67EUMtNoKgBcAfEydAIlzgqBUNg==","signatures":[{"sig":"MEUCIFRYVQiw0QMJ+9u6g7O/60Ob9dHIl3sndSzuNyfNTWC1AiEAqaA8GyHNr2AWLxAb336+DSfJcIEJLCe1byJlSeAXeOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEoCRA9TVsSAnZWagAAms8QAITRtLTM7HTMqqknMS6c\nEIZhnpqwaDM3GCNJMTcj/uPWntrJkoz6JdgYwDBYcLnzd5QTKJjSqy0emQ4+\nGKURlUuk5k3hr8eiHZiN9DL2TNEkmhBjFF5Zic/wD6n2JL38CCT+Owj6kUJa\nUa+CLq1m05Bez4gWIrtG3Yox3v7YEpNZdMvV9SQet9QCUlH42jHFldx8Rd/G\nB6/sxQiMDyYXMu/dxElmzs5C6TPTj68mnF5n0Pbsg8vphZZvNrAhTawkJgWz\ny+lUncjpRGYt99lrkVZMbrBI8wS64H4glK6th+flr42HdncarqWEulgxpYWv\nwLD3OEicxDlQLcSC7zUBUnTdDirkqiRfXJ7ljoSPQUEIHZ3FYJLRDI+GnOtG\nVjSTCKkiS6sZXjftKlS7/p4dQLMIesexcDxki86GVMuus/Xunbl8p1HgOlq8\nYHZjDgaBv5KuyFMQQ6AEMwfJA5Lo46aQhLc5AGCrfbanb/EfjkvLNJFV/V5A\nvzLn2h4tYMlwd3cUAMqrlNm7978inNKSlEqBxa2Ho82Ws6i+Vz98vyW9WN5/\njmMK0gqL2QvgvV8+pv8WtO7qd0LdNpVWEIseErCD6rCXYN43oswmGvrtMXns\n32zsYtvf8JN6OVG8TyDxKrtMMykgZztentDYk86NqUALi7aNWu3vYD6QSYke\nCqjf\r\n=2JF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/list":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/menu-surface":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.33a954852.0_1620918568412_0.0004140548495283891","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/menu","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11126d782e6c189d511236f993e198831047f1d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a4484849b.0.tgz","fileCount":38,"integrity":"sha512-9DXLiIblWlk6812UteqvMuy7Lelr2JYkQdiPXEgnc0+lAxmNq1jkT4B2TyBC2+BiYbinI62Jbyr1P2vRldaddQ==","signatures":[{"sig":"MEUCIQDQ4A236A+adAAww0rTuM/YDLIXDc1F9v2Kz4Ks7sQzPAIgZVRanEm9ScFkbwB+1y5Mp2bNKvjtg5SjCNiUM7NhHNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaYCRA9TVsSAnZWagAAMSYP/i0Ds4tyZC8V5g1NNimj\n5lrQeitxa6/IdQsJWcr9mVLUB198a8nXiCH1V4TEE9w0aAoyT173dNjjmAeo\nRk5xrnZoFPefy171DLjSnpuvtJxJ+RxI7G7kUVG2uu9N2w4AW/cZeEwFavEg\nXhowi/4RR+uTT9RSG6fQOmXhH0nfvVDrMHc7qxOSmOT/jI12tl6r43ESpkGD\nc130S8NG1UUP5CPDjauB6KDLYCaX1bG92Bq9EqkS3ODMTRtZ89FVqhVBxclW\nRpcoxRY4Z4mQN3BvmwMx6g3YbkmQeITZLvPLlnKWQN87eyJfl+DONQg5LxC6\n/USha1lLxv3qwl6EIuYTd9fo+YspK2boxaiHDQB4VGcRFgNxRVSzV6xQE5g+\n+jz+RO375q1Y1u+zdQyZAyfKOggSc1s45ziRmFCg/DFYtLSNVo8wdZXQoWYH\naZwFV8/noJWPtgVhJXEL85dhDlCamhkv/+ySwcl3VZrLZsyB9sUtZtcOd6Yw\nQAA6DYsuelDUoaehWkmSHIay+3PcWBMyxzqbEAoTqA5sT2ZHEYjS3721aYTd\n2s6VOq4HxYJ7u6Xj/tcswgv0DpoXMTXYwJg4VmwZ3/tsfGztN3HFx/7YPuIx\ntg8x6T1EsAomH3LU0ATDQLCrZI9CavxTYIiMDYQ40VBZ2ZEJW5vwY4u9MB7n\ny7Aa\r\n=tOQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/list":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/menu-surface":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a4484849b.0_1620919959600_0.49207304891586956","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/menu","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bafd8f02887391c9b459ffb349de5e677f7ea9bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b4c3f513e.0.tgz","fileCount":38,"integrity":"sha512-ZGCBY13tNHDqTQ65d+nLD3Icf/PIiUCT0TzAv0/l8q25J8XXqXZYmfgyleOWnLvomY25saIyC2slyhyOeMN3OA==","signatures":[{"sig":"MEUCIQCExpW5PPPIHTkeVJCSzjx3nzY+FoT2lwkQ0UTDxb3+CwIgEf+cO3TyZQB0GEfjtvRDgokgPXXxWE/f8wk1RfrG0Ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU9BCRA9TVsSAnZWagAALOEP/2TXWlZaIrCFkx5NtrZV\nyHHwBMrYKDdUkT8himruWjT5bZ9wrFq/ET6y89zLjP/LVqyxIgT9ayt5Ccbs\nzIU4k/4dtLA/OFiYCh52U8aIL0qS8Kp/k2LL62JoQgzSoeP5HwPnPKOgDcor\n6+RTkTk5zSNz83Xuc3IS41cJqIwzVUFcE+Dv5NKRJ2VSRrMKAvuMv+lPjgeH\niWRx91puSCiju+ggE9FvPwtq0LfWM3lKni0mFHWEDtx/lL51V+Ktjx6qk7KT\nNzqoS6WRpbhdgJOJDkWKUoZx8ryPBQ9PzuLIh0zW1L0sqp0M4t0kzqe81/Xz\nIADRx4+wujISDBjyuCZ6xCgK1T5eICQQ6mtPMqGvPKYe1ZfIsTzZTK96Iyr4\nWflmcl/yJNCzxrvTej3PXn9nYbg/Qqf/2taNaE4DnNXjXlOG0pPx3ILnmnkv\nPBjh62o2sO/rPxewvZBcGY5ono0+68RAqgWct0w/NKgFprwakRIlanZq8ke5\n0la0xejqDPsGNyk7IVCOnB/gGsk9yqlCr6RLSse83mGb1FBqfx2hclYs8511\nvMlVak3VUw8CoSCrt/zddFUO4KewkHgMXrFRUsEqtrLWRNbh4PdOMKupns/c\nMPjvP42gskV2GU42OlHO1xlQY1hsW1vJeswvvX/cMG32itdVJtmc9uvXVsBy\nRbqS\r\n=RmwO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/list":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/menu-surface":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b4c3f513e.0_1620922177068_0.032833450340876924","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/menu","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f6050fa95c138a6454b84d5ff7a5c38d1fe4c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.1a8d06483.0.tgz","fileCount":38,"integrity":"sha512-DhUNwiEtPyhvVTW6zpcWsupiLKq/Qi+RDJJP+B79ZY40/p3BoWjDymULOtYGndDYduR5lJ6ScJ5MMT666nelQQ==","signatures":[{"sig":"MEYCIQDcuQIwk6NNb0r6PeF8+UZwRxVeWp7IznbfSBWsH/a5RQIhAJ3JyTL3QVx5lA7YaZs3m4A6GuwX8AldMRJhBRqvu8EZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVCYCRA9TVsSAnZWagAA2+EP+QCWTU3mDbw+LCs9P0fQ\ncMRv+zRhpNv2a1ejQRPTMIKi5LCryiqaH8IUxQWHXIqaZVq6rVFzauXl2cp9\nbslYR0VjCl7PkVsJv2Bj5vhSpcsAZAWRIbVI4Fvvlz6ZXqRNBKGXi38CxJ2u\nkshDunMB3ccocismMCrYAUMM5RUA4rvHIjCVLlhEyFNt6FKcJ9XtzLKDNvSu\nEkW58V+o9WjqAf3SxL74VL06PsQkHxk2VMrkP+yjzrahXs8Nb+62ASHKesT7\nnImIh/Xfu7bRR8y8RIPhyBKPn0WtWkpm81XqBdsEU4qiB/3kF8MBkNkZmvl1\nbWSN3ud3PkYV3FuVzk8nwxAOuLMb/5FFGAwb85wiI63q3Qxt69OOhl1bkkVd\ny9p0aNEKzpqU0XxoLC+PpbKvxu7LYF1mt9K6KbL3jP7g4aU/fVjP4y0Dn5IX\nrQwlg21Y69p2QAjsMpm9Ls0V3HdiSUQP6US9G6LxJaAlJCRhCg5XER1FNHCn\nea/exk9LqCBCx+5ovZZZRg8afJwnQNA5V26VfGGCbH4gZAppt1Igg2qunKMP\n0UGSWWJh1Jem3bYPb1qctvC2xqirKvjlrFtMXMsAH+sGL7u6H6fgV32eZTLT\nv8jYV3TuE3QC6VkacnlglBjRQSavBA+K+DbnrISRj9b8G8IT7qPjzQIkLg20\nHAye\r\n=5uc9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/list":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/menu-surface":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.1a8d06483.0_1620922520045_0.7838505602313122","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/menu","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72a176feaf2107cf3131ecddcab8199a2d48daf3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8e6081836.0.tgz","fileCount":38,"integrity":"sha512-gSgX6aW4qV14OsOIrsA22TjVwF2aQhGjp6S7hX2QhJoGrpM23PsGkyT2lHrD9VvRbBBdg/fcxB86F6HbzoQMnw==","signatures":[{"sig":"MEUCIBsQQdMCZkxK0OJ8BonlmNPTuFw8iOFBexfWCt9/pO3FAiEA8cqijPAJ47FlFw5gAvM8LQZUUUBHYP+RWWYuX5KakbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6zCRA9TVsSAnZWagAAt6YQAJMklukwDkOO4gIV7k5+\n9hnyp0P7WYpOvQuVP6iG0i1pcmBIoxVHnnFO3Y+a4cGO0dP13DiKB6EzOsdo\nn3m07D11CG8yX5nhPEK7ODX57iTk4XIifJtMMHAGgJQajE8hw0Vnq7SKDz2M\n/HEbqeHv7IStYkGVAQbA8LhVVfvYwyZqNYebENEV1plWOG7Q4mcVWEOqoBlb\nPwDtdRtJFHTgMI2Au7NMpn7pP2p1HwTAV0Ij7E9w5DAoj/8d97hlyF3X1l/B\nTEcZFRBDFFzmRILNPhMmg6p/PO0ZHeSWyrMNbKPWDYWQHvkgqEuGlA1zXkm1\n3SVPArBkrITVYHKS86UZjzBeYe6Xf2po7VrkABnwximfrQR139OpoEZqQoaa\n065CdiyYvuWTaeTH2FtW0uMONNE9FZQ/Koc5hlb52gcXxKHlR1L00MwUcZna\nQc8cNphFIk1Dk0P8xiybAy/65wHSp1Qjk4uPlT9yVuau/sW6GaGaE4z4bwXH\ny9thG5JFDJSYn6jOU9O8AxfyEicpF4U2iDfCABIprUBavMI7feUnEWM7xCbY\nJNMaaqGw7YSpbETdi/bafIRl/7MX8YjGYQCGsyFDHej5sWB6GVd/AXZF1H51\n5lteeCFXXMmoG/HpyeuBsdKqUfjKg6G3iaVVMJIlNJJrZP3SCXs23C0Nti3M\nWdzf\r\n=dBkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/list":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/menu-surface":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8e6081836.0_1621028531310_0.6566211823001247","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/menu","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d6cd7a9b44240c015e2b39a89c57735cabb5847","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":38,"integrity":"sha512-7G+lNOPqCTHt+CDxcvK3UHgXVNFzbzYHalhl1WOyoGZW2UBwVF+vZP7+DUOIYjDZGTh5b9Ob2bLz5VOqrJqMaw==","signatures":[{"sig":"MEYCIQDIGJguZmlWB+n8MhATscrRj1NWh9VFwsuugZnf5TO4CgIhAMvC025/fAnEvy9+3O6qgBYspTAtVOtj8X8IgIMQPbVU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvHUCRA9TVsSAnZWagAAJlYP/2rhnDinHbcwIOuLmG09\nF6XE92Dgg63pzGUZ4Dy4LGlshJKVzcd+9kcX1QNo71auMEGNLA2hBg5TUSj/\nULHyYySp1lnQWBTlRzD9Q3aN88WJF7Vbu9DYcn0scTv7P6+YvOsMnmNdTnJV\n5luJtRTOPPsdQmfZJUp2xZctq1JZnRhvl35YsmICpa8DO3MBGUaYM6cndZSo\nr6a517sR5L+uNx6tVCJIlChEn0tBf12c9iffk8oTVKDFDXDc6mAyHpi4rAzo\n58yF2/3lJMVEuL7I5RwZV0t46/nSE7DnryJkoHL+jTM0bAvQbmzAKvDtK0YZ\nzfPy8NeZrtxovhIxM72jMGesihNAxcgT8flwu7vRjvFfSgYEpAiKVbx2ybGC\n51ZdtUODfSKIF2MSC9cJ7BrX5/FnNGkfpeC6PPs/YI8CNfznrVAKXvpdgum/\n5JsgKU4kbyEXn+9nRVAoGMm/FckwdntiyUX3o0yMd1uQjA+pvqO2vZF7JqrQ\nQpFgaooKkB9ze544p5UlYsz8LYKKWI40TZd7JLIRMOwOvQTmxfIfbQag+1ZF\nLjiiXyh2RSsNT8CRKUaPZheadrIhzOmN/p9NabK3luJZHqITtS1vJZthdzzO\nNIpCTkDNBmEd+vFLysrKK0Kgf513fTsHO8ELyij2oIODlfLv7smEfz2tgeLv\niOjx\r\n=elUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/list":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/menu-surface":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a2b0f4cee.0_1621029331589_0.22517124380496067","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/menu","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0af94c156cee4df5bf625d134462176aa66562e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e8e39ad19.0.tgz","fileCount":38,"integrity":"sha512-Ep8sZZMHHluD0cVstp7zC7iVmFtGw1JCM+QDazvz5vFT3Xq/7Z0LM06FZ4nK2FbAtw5d+GgHLPwo420sMup9dw==","signatures":[{"sig":"MEUCIQDntHWyY+CYSuEtQ9wu7Wxt3PG0W3PfeewKQma+7dq6jgIgSw16C6bZRWyw6fPPTEv/y7PdVzt5RT50EkYGtZ1tcOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAxCRA9TVsSAnZWagAAzxIP/1XCi/MH4OAIkcOe3HCC\n9UUQe6Vg+6nNZw5leGgq83QVwTReOngTKKRWsgOZFjBDXdbpxd271IuNpQsm\nXBp5ut7x1+Glpq/lqKbEfMy7buEx/PkQA9hekZyah09lvlV2O3HMH2kvs4wk\naSm9b1JFErTDZt6s7WD/ayxwXMrLW/IXUbDJGxfHTdZOsCcnrfxelC2LiJ6t\n0wtEaKvXiS1CsTxCVQ8UA+eYa/hRcCN+spAf0yyyYJwl5+tLAmW7Vu2OPt4O\ng2N5LPr+jrYf2eIPoksMs3FH8WKExK//QvRZOx1kTrlbNnD54oS/gsttj7Nq\nLh9wRIFE7CuUyWl9zj3r7ysHptUhuet9uHznSGTbaNH5bejgGSbFgjWDiENs\nzeiC2la190lfCIQOtrUMvGKiDxtazFHxyUQf58Iha7KexfBnoTgbQLWXNpNR\nnLZrGO+QoDnXJyU7e/kp33l2UmcHRFVMiBhqFvzNQGpwDZiF1JsOzqk606Wz\nvtnvbfUsVco5PiejZUPPjcxVObp7H0XXaaAXkNa+a+wj89nqmZtCr1Z34Cre\nFJBj6YDmzis/CLcSQ9aSNps6ILfQS2G5fRguE+syAf1cQf9/kotVhxV0Twja\nnDA/h6aiM308UCoa3K6/XZLrKcQ0xRId72G42FyWC+pWNEuydZma8dQG5l5L\nX7s4\r\n=V/3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/list":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/menu-surface":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e8e39ad19.0_1621368881173_0.1266582024177012","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/menu","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b96f9af4e643dede68df3312d619fa14c070f4c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":38,"integrity":"sha512-+ArDo0/DloKFf9mlrkZPHIT6g1MSuW+XgPFp0/OIDu7uukr4c722YIl8rjcqLbGgEfBcWMv/COmBui38wJg5nw==","signatures":[{"sig":"MEUCIHtD3Eef0XOMGSMEGVWEpbcVckyW14v501WG6MeKp1m/AiEA3DCaPD/ljcxnqUenzLfAeQXeqG/nfy4vMr/e8F1sHW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7yCRA9TVsSAnZWagAAPHQP/2ZMKCzAqDRZEuG73f+P\ngdExr9QqhDKAk4Zv+CMtckAgEBuS51aPOfhrNVPEonXgU1vnKHwpk2YgVBMN\nrQLUtu9UnrOFcSzJ25sD+o3dY99UPL+sMNst0dZytczL4+kV4/1B/5OOh/zr\ndPYs7+ls5z/MXlpRthtosw41+ZDjbTwGTLiD4zgKUyyUmiNaIxde+q6URVRb\n+tvh7eapE+LZp8K9t320obomDB3jgW/ji92ce89JU0DdpLdIJM0RSY3+PSuI\nLWBn5CDaa+ElirQysLnniFv/THFUmqPTrP9PwJHpNuAmFWljWj+4hpBwb3pX\n163BYwfRqop2Hcq4AB8w1zLhtKuexdwLZu/vnS0/SUri4rE/x1bEcSAQ2JEQ\n/6GFGKtKs2m+RqV1gGd+7HfZ+xj2dkcLqGXNctVPuFPZfSh3x5r987a3viiE\nHX0IhIuOW5YKr5AnlJNJiewC05UGtxEKUHtE0ogbjrLvQQE9IdTl5Ky/Spni\nX5L22wCbTbKd0pVPi7iibxX1Zyo8K5HbTycC9qapRUrpdj8ODUIRDD90pY+V\nyCmFJV/cQeXJ52faLKANtZOfFowzSCGsTe9QqyxLrojE6biyynYmFHiFzIix\nQsG1fxl0pfxyf52ejHokZFuT/rTdB/UYKQBhEv1F8EebObLfpcCfsmzXI23x\nDhI0\r\n=PcIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/list":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4bb5eea2b.0_1621438194323_0.6003987189999251","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/menu","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32604f421da9171c65acdf2dcefd556fe7d30aed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ccce99cd6.0.tgz","fileCount":38,"integrity":"sha512-73TE91ynRiWxzCxGRBtYv5c3dPFpRYCEIz4npb8AMtlU11Y9LHYB40B42c2Lyb/CXL7DxxGxPOEvMrKPTaIjcg==","signatures":[{"sig":"MEUCIB+PKD//vYL7UpgU94QIUGGVz94LcCKJYCHUsB+J4DWzAiEA02qAyIzDLMv+Gf8Im1qBxAlH+I5khU8zHafbSPAoecY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQuCRA9TVsSAnZWagAACyYP/AqCJq3uNiM1fQ88v/66\nhXDwMIjj0S7lQZVOf5nShPKx6cPaCifjUuFGlE4OS2f+i/eQbn7ddqo6IQXu\nUu3Jdbb06ImXrHFnT5JQ3KxOQQ9sLk6F1DzHdUZDpexb5wTX5tu1faAMBkV6\n0lw8AFw6UfNOzVy3IXZsIIMCZxaltCaEEhw54l+FyXtqlnMDjbWGzzUkfHsY\n79etp+6bgZnugiG2l5aJppULArA+xbAm5BEeyWRs258Ws4aCpUQlUIVaR1r/\njUJbRS5pi7+ajJGIl894vVoNxcoZd8Tm8kETJHLv4rV0l2Hz7mGBOuy6bFOJ\nw+RRCYQnYajI/LLJ8RMvT1118jcT40uEjK4SwL64Rw0kGHp+XGnKE1f8gyJS\nSj/yI96AC+wqI+DgiNUpXD2v10kDVhOaRoS3IOd6RdmNgoEI9UreDfSUJHx9\n1ngX7ydRLcLkmRBEabw/jagiOqaWaT42ZYLtO6BAw5F47fCIrXUqxkwIfuQW\no7p/DuLyVZ0LdY51+hOcFu0ueDpsP0jeCHK8jfNDgzYdMLQW9imVnnrtc6lU\nUwxduY+drJ+pGz3iu5aWRtWAotQ/H7xYTA0qYuKEuvoodIfJju7KfgPoA3vv\n+skICz3bwYMzsx2xF/8DoaFTGcf+2ANeMoGKwLq+hTP+/JRMSmIXDdUCx5b1\nQClM\r\n=394B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/list":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/menu-surface":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ccce99cd6.0_1621472301650_0.26129175181443265","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/menu","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b48c9bb63c39d509b7dc58b62fce41653bf17af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.14767a8db.0.tgz","fileCount":38,"integrity":"sha512-GCGOoigBvF1U2qwA4dKsTGT8Xr7Dq74WUkSpQW8T8GWI1nWQiPiX2I5UnsHB61wIgTaKHj78z2QJ70gQKlVCLw==","signatures":[{"sig":"MEUCIHnjmM+I3dIelMCiF/pMlEXcGORJANMpuVPnt7Bzwn/iAiEAiB1uAOF68e0E0rrN5IMz9zSAsowMp6lzsRa2FBxRA4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswbCRA9TVsSAnZWagAAHoIP/1lkwUjY8deWM9z1O6Pq\npNwt0mYIyPkXHTzoK20JLG0D9XBQGDdzpqihfLpcAWHeTQKJDzQxHJwt/8DX\nruPrXTkBG9JAgfa3HCkkSSwD39/3yBvv3qyrywEy4qpmOxtVFXUpshOGBO3K\nUMUS5oNYYjkmdLRM4pg3od6Z4ZjpiKwozCg1xvy/CtE2viV2vsePH8BZRcv+\nqDsI79VNkDvi8LIX5iyODTZ3Gd4l/c+nLUIKH565ptDWy3wBKhAXYoC63zGO\nduNzDmhbGRu2w2EteoPmxSoWvCR5Vu345PneVvewjw+IAnqbvsV5jG4bzmMh\nAFFzJhmZGxfLo181erJ88HL2hZpbMUxWNKxLczrMa2p25z7E1JGReRMaW9pw\nGSFk3/sgq0J1MW4HvRFbzjdc21/61uOm24uCgQpQ3AvrmF1wWN1ebkpuZOhP\nLQbtOaRw2xWdyTuTRbDqGriMQXRN5SHqTd3Mz7r5jwlU1RoeMrICUBodxVHF\nUpSjlOOnlZOTxxcEcw6UeH7KvGTEm/vvd7My/Bew3vrykoF99UBloTxbM0LU\nfqi/DrzDWQjl3EEDraP2AoHgN4XrTIMyMe0uPkzT2d3aGs7ptdEDZetRqfO0\nn3GjEWYgD26ktFW8xGczoI5+2QFS+aUGLikJxdftHrZqUqab+iv5gkREA/k7\nLdfR\r\n=b7ls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/list":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/menu-surface":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.14767a8db.0_1621543962557_0.7894382124103518","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/menu","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db40e2f13bb83e4b1fcde282df41db6c7521ad1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.22c6dcff9.0.tgz","fileCount":38,"integrity":"sha512-qqRf3/qjd7b57d/jUSncc7fHXnbS2kQldBacbzDkrZTw1DDhDZ7lyp/lYpE2pZTg7fN9NtfIba7xKmhsuJwnDw==","signatures":[{"sig":"MEYCIQDTuU7Kv1f2Hm3DbNKk7/W8a+ci78KCpXCgcIIM8E3qHAIhALZnp5kxc82qFXMbynzKJgLx1/a2qZyvtDPYZjW8In0T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8Q3CRA9TVsSAnZWagAAmKoP/2/hksTyzHSJFLjvtwmy\nTuF5llWG2B/ia+BksmwDnDThBaE/lrqw2yatMayMQ3htuC8H4JRXzdYW4p0Q\nExwPC6G/DtHxT1jXXVMg+HrR6iJcwwnXOkLJH5MTYAwjOJL4l4bRj5Wu72GR\nKqrmtLs2w4gKXM7eOhXiXAxLZMmV1e7fXGuBhepweZzTMV4gkULaxdmSMFiJ\nOS6ts/xH4IxIOB2M65NckoVWrvh4RXRV0GsOxxUfLABYi8K26T+CpLqXqyKW\naXYakh5mBpt8RdeOcunAvdUYfh+z7ip9vATSklB9xcdnblx+eGoQ4z/a5mi4\nSoU6FCGv0bc5pmLO9oML7C1Xi2e3i/tZm3vp2mYqrKDu0kQH0KSDNDd6mjYA\nbawETXFx23eZsjKfqa42TTP8x1DSQBf/D+SgbScolM0TyudKpL5iNiX/folH\n9rS9XWDD4/P3oHsdbQAK0jmH0la0pw0hF6WxoKbSIfC8Dx18n/46e2+ugrp7\n8SkPQzHwTBy9WefTLkA+/CcHIPh1FKvYCoDvvDjEKCEtVKIPi9qBk8rsQqh7\n3W8iC+NJ5ffarX2JRPEKtCRYaFBRKn52UeT2JqrMuae0W9OwtYnmwoD62Dpk\nfUFD4HUFhNoKn5Ga64NtBKqt/cXKKnCUqkcm0e1a3FTyjS+GSG1uOCMjCwh4\nui07\r\n=WbM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/list":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/menu-surface":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.22c6dcff9.0_1621869623222_0.2632690583385997","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/menu","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdcbc57a1e58e74c3b3aa00df5f033de5f283ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.fadab3372.0.tgz","fileCount":38,"integrity":"sha512-PS4xsOeNhDoVpBm9LpSjADGxFhKg073Me+caboca1vNjj5NHGR+bHsJ1lPp7PRR5oWJ/FXEiX1W/uDjTcmCB5Q==","signatures":[{"sig":"MEQCIDhYNYtk0YkJJLtKyLckaPklocLwrUscCjpTI0V4HS4QAiAZsljDfFhMIldLlxplNVx71ZEeY0BfkWbqCYxibMHNCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88+CRA9TVsSAnZWagAAc1QP/3ENpMVZ2jVI8bG24J/X\nYbfrB6+KZMX0krU33On0hAnfniMnO/BmMqVj38q6+WQHjA2sPfmW1NCIjWOg\nG5kbrDXpN2ek+GKktuP5a6/nsR1/D6oCp4vdZ7iLbIqm85gyM3rJc7VWNnIp\n2vGFaVqMPsv3iXW9tJhOXpzB/XJ33bpmdYSB4+kX7M79oFbewZxSIFWHojQV\nbPF/TSWpsGRFK3FxkDQxv5M6t1eXjbho4DjiuHyZY6S+TK2LEot65hxiw8Q8\nGTzuD63Q9Q4WVod1dESjTgYixDis/YUApSQKD15amIMLRFeig02beB9xVtdR\nGaUsy05M0sIqPRCQUyMBDLRuDYCHhk7t9EKdy5l+R75QsaU8oj8tyde7MEJa\n2HDEb4XX7umSrzpuCVDhJA1bJmF8uONCYLV+CeiRuTmk5VEm5ln+Oy0yOxTh\nwJtw+nGMRZ389KKhDHDzGhOCgh5kFoETy/uSkyiTo6LZEtrxD5LskFcmBRiR\nxz4lYDQ4nd5F9asPEbS22Zab/jcjf8OPfGM/xlDUjm8JTinkNL9ZXd1JShZB\n1o9Hf7Z4nHztVFCGFC6v9NM3aek9WG7df0g5pc5/+Doub7pj7TVgnLUdOM0p\nZ2r5NQxbVxfIdOn7ERHXCkTShdRL0wWNCMXfeYPlSRIkLtjyXfGegbXNErWY\n9XBs\r\n=MCfL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/list":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/menu-surface":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.fadab3372.0_1621872445798_0.5527063018367946","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/menu","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0e714269782fb9dead93786e539ebdf2b2e11e6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.caa73aeee.0.tgz","fileCount":38,"integrity":"sha512-NY4lBUjK3nUyH6fDkbpSH7e6rBjCRqRrJwSY2YcRWgQLXI4tcfGMW/08I+Y2RbZGgqhDZTu9pOm5JSHf/JL6Sw==","signatures":[{"sig":"MEUCIQC+aWJBqVmBO/5qfvBbmd9QYldFl4qQVjEYtVmUcoWZSAIgEnJBXqtbC0pZAW1SZU7JuUnN7W3xixl3xacNPYRJLRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQagCRA9TVsSAnZWagAA/HQP+wdl53ZPEmcL0qJiCLLG\nrxTQviXQADRhGhx75iO/ZKr6dy6oLaElCiVAmViCSgk47cgIYLGfWUL/TMuZ\nYR5TjJuGf8p6lunGntOjPAizUQZJIBeBpF64zF0IyEGN+h3EZy2YiUz49cRe\nkbYBQAyLw4aitrh3o8mcyuGfw+YOEWmWbM7l7kG5KpzoNEDF+CrbNo/B0PVT\neiFewwDY+QA1+AJspgpn0XT5z4ntgkrDeF51zZf74r3trZHd+M6ET+UjP9ys\nKnOm0NP4aobPkWmjyGtEHx+t9+DGIMpKZ6ozKEbK0d8pWyrJl76Y7XZg/ThA\n6SP6flWtXUjYIvaei00v5xz70Rl4wOo4rLxlighL4J3ClXT0jy5I30+OVC9U\n0GjaPBMAX5CgSN+efRRIn3z85ABkqS8It39fky017/y6AhCVWg02MCMpe50i\nprrYsPdQAwKao9fbu1gZ5Ylf/0p7aZGU+LnmtCC+f3MJHJmvYTxJcOdiTDv2\nBeHsS8FR4uGupt0QX4EA3b4PYgyrkWtLFhZrt0l/z1pfPFObthyTRnaXai/U\neLGL29AjHI0HiIGm1/8YDO2j5m37w9sbgLhm0PZPF7+rGG2DJcgOMKxEg/Rp\n7kKCZhUMK8uSrI+pzBwz4PJ0UDfZ0ptUmIWSvFEglVIB9Qns7eD2JRxM/Hk3\ncq+X\r\n=OuDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/list":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/menu-surface":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.caa73aeee.0_1621952159793_0.9697162527517305","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/menu","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af9f5dfb217048cffc2c69d62486a70d4dc42bce","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":38,"integrity":"sha512-hBl9sPh8OOkDz36S3S5vq1mNQl83zsw+RXmWt8LcwExwyO6ckjLJqcd6e4x1OZWCEfwEt8oScg6lE5iiNB5fvg==","signatures":[{"sig":"MEUCIBJsLzAiqsyAbXti/Ini3BKx4jL3HSbt/TSz0+9ViKIxAiEA48oFYn0lTA7qvNr6NkYu6ENNPpWUaNi8XkEpzYyZpv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/tCRA9TVsSAnZWagAA+5cP/0ScfMQKz5+z8FJZOau+\ntFex3maoc/HdDYUUn6OpNAHo1ISwWIHxUZd8hE30Sh4896L+qIL0+ftUoZfr\nsuzHY6kzn0su6ycW1tz5pQ9GXs6cgo5bdkDjYq+OCcdBIfjIqBnn6RGR9Tob\neWalZfnbl6JxwaPG1uVTBrkn0yCBa5YCDdZmffDI+n7rUuwKt5j0qLHtgHt4\nV7f7xBWUjEjReC3o+81BRL7d8K0POzuaxzHX5TX8Ag4q5jMKpfLDXTUvJAlJ\nWY/4zgl5ojAtxnjZuXGh3kuSFwdIPArirJodmepTdDPftHGfpGUDQ1lAPUyU\n1FgtIdvtrWsvDNE2MHUA53sKmR3v+naLb4l+CCvcaMIZ6KHz7VfgOhqo9M14\nozQfz5yDBTnf6dByMtZ/wdANUzmarvcPpPWeGFEixhAKcbFAmN2VmMuTmNPK\nrBLXiiXKoJ/4Izzlo2JLEJ4PbfyK8rxWfx5ITs+M5cNDfjtANdfXvVNPvRi0\nfQ3KesCGOtEit+UUmCggOaNl3u20zzCe1Dn8EpsdulIUTdGaDLSSAcPRhp2i\nXoI4lbc6cr8DJxexwWh2w9elbYUK9d6JWygILSDYX5gSTDdB1bYTZ18WaNPT\nbU+IBiS8IkTnlNwqNhEtyD7iLzOHK9d8Q+tVJGX5JhvDFO0cT2B63OYSr/2S\nITfX\r\n=VvqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/list":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/menu-surface":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ec31ae1ed.0_1621975021267_0.08766856164678982","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/menu","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c980c7585409a52d9e6f4e711dc8efca4dfdafa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8530d3514.0.tgz","fileCount":38,"integrity":"sha512-p8z2rCmF/HfFB4fhV46IGYvEJJrPcHc92drlpm4d3NtcC+r9ec7Pa2avMMyC46TWHhdWN1PAE6wy4DW4jvz9nw==","signatures":[{"sig":"MEQCIDzhgYKldowoIlQK3tzGlJewmUI3k3K1EC6m9sAa1AjyAiByzI/aBBcQNFWgr5+wNSc0x2Hy5V4Jp/17SD2P1vqwAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8OBCRA9TVsSAnZWagAAfiMP/0GXBtHvJhfYknKij2RT\nNMbjkgC0z7jrA8cYPZfEWZ/lT2IqGsRcJUJX2Yxq7uBYAtp+QwJ8PWUA0gGK\neuOsSWhGQ2wgqkob52giA5NSD6odOjCtMznb/kwKv4PN1s2PEpvy8BpuMx/e\ndYTY4mHaEJ41gixpYYG8a1UgaHnBDVul5piqwjVRG5DzIWEb2eEWZRgUgkG8\nIggreTK4c9954xUzCY2rBxMhL4sOGmwghvOkzXiwupM0MpEvqf6bs4xP3Yuh\nD8x2Za2kMz8ZACa6VKkU2lOCQnVggJtidtnYycBWlsDTlg8ulpzpH/J9J88h\nYB5BpxEizO7zTNPtdZoS1qR70FPEbN4k7tx1T2M/nPdoBKumi1AKQpbVeWBx\nqr2CdJ9lRnIjqf4V4po9l1/Z9lkivi1uiShi5KTUMZ0bJZpTwnx5ttXyfieW\nnlc7z3GBQFRNsGlhJWksRaqyzwJ/Uc/xbQAZA5dXA9zs13AgyzVEwu6yZ2eC\nrLb+wREaoO8k9bNBS89oc/dETMXOT4ag6Vf9gxdQXy4+5JtQMjGQEWJipmUO\njgl1mdNx5rMwitB8clHvGZaHEVYA6ZaeG33yzwSUvMEFGxH7xzc6CW+Apu94\nRNfM9YavQOL1hL+AOweO2oFCXQSTE9PgMVsDanLGTD68VD0Vx3HN0josvHFa\nDzT8\r\n=zhKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/list":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/menu-surface":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8530d3514.0_1622131585519_0.12416049033304688","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/menu","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7592a1735f2a8aa0faa03b0fa1f6de4c055d2ff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.00b5899dc.0.tgz","fileCount":38,"integrity":"sha512-hoY8Xi4a6M5A7ppzUR0GthafA+ZxnvalPku1JtVJWnZXD5ggCm7rVkq/Xu3+AzBUE2bi5pckYScfoaJpn7KiuQ==","signatures":[{"sig":"MEUCIAkYMHQOTk9PxZmB/DNurBqwXp6b1dJR0YbL9Yza0vybAiEAkb2gQgIU90XfDMCEHRJ0d23dvCc5dwD3NqRM2FxK73g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjuCRA9TVsSAnZWagAAjyQP/At9bmC1mM5DCTBnRyOv\neiDj8A4DxbM51HGlbiTqvjdfdTqpIfzdYxqZD/woVqwg5ACSq23wW9zhEV5M\nZOQ4dUTtpKilCx2RoN+nkABOog7nG2LSvues7qc0vZ4oGXNF9JwDUaQU8oKK\nckFRImXg7VlSPvn1YO1+Q1x4fF1QFhbSr1ZxElAtFFOr0he/RWvQSVpNuhSC\nz5vdynO3RxHdyleiJRBmE6687yl33Jw5Za/FA7g77cZSkDBWJrQneteKqMg0\np3InbUcjHmV3yCkzcIbn+fNzkOqoHExmGhGkV/OsDLp/phuvCAZIGC+zlqHy\nQEGyr20D+LEIhCBpLOsshjDWLFB1PXJZHppQ2PZASdTl8jvwJZRDZe0BCtSY\nJvTws1LK/zfOLzSRZga1mEOYz7cZXrX9byAGez/1ugP5OJzZLFzoEj9/JKMr\n5hUHTw1WsFhUDRu9Dy+mf1ckawSdCsAk986Yzn4jZ6c3lMbyCnRME8IV73n4\n25/icjvJtqIWqPgIc/OR5F5xCj21M93hNtAdciEBO+416oxWRGbW0I8XVndd\ntl3iAKu0vxXigTSGn4E8vaUeFFbZQQy3S6JP12qWtGxVgAFlTA7KCgKoO8qJ\nVssO5vlRCiTMwFZAAEDnmkfF7aje04CFZRrebRtzbiDU7lpXQYXFLzWXa0Tl\nB6d3\r\n=aj8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/list":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/menu-surface":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.00b5899dc.0_1622587629781_0.13012354531336956","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/menu","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"583b92565c8748858f0a46649b073d449f71a7bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f1525ea3e.0.tgz","fileCount":38,"integrity":"sha512-JHxxn5Jz0+kRLhSpnZFhh0FHleYYmqqrvOaF0F7jIzZP3CwYf9dgaX9QX5o9H9Uxpgoqq1StJwWnFORmiSSWZA==","signatures":[{"sig":"MEYCIQC3JQ56SiVvMYc0uP30KHQEkAsc+fdJz5x/xMhbEkZ89wIhAKycX3iJ+wIl3RzLAdXyn5fIcqs47EN12s1YW4y9GpiI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9uCRA9TVsSAnZWagAAb0UP/0yzecewxdr6fX6pHqvG\nbpd7CfhZA3ljEvUTBEQhn+4aWJMFZwwvsn0y+x5M3SJLmmB9wFMdqHk3QvhY\nGMfertmJaJ99nXEicbbj+8XlGl4ZhtszDbVe2zWzuFTBFiARy0hM6bPxTpGF\n+cZmryOaIEnmT1QN1oLnsLjYyPIt0Ng75ifFlKuCil8FvOMLTtBNtwCJDypi\n6IZ8lXA6C2Okb1D4dy2lwUquymNZiMO8idqGObnQQwvzD0NKNmJooFFrsTwq\nHJ99XlNv0gP01byMLj/2Nq9mH/mCkdu24Gb3q+QdWEu4zyVXF4ShpAycQ9kb\nf86DSRY/LaRxy2Q3wyHKZ4imXPTTrtdhOditLFG/JtwddhHMQb/Xyy0z41XV\nsJbne4e8Rh7cKk5zm0j26unCNoed3Ap+oOeK9q/0/G586cCYz/wQluNSun//\nyfpOf+BIZ05eTIUhElCSwQErWwbSQgyEyNOCdnPF08RBOnbPuqqrbqab1wTg\nBNKeF/BsOWRv4g5MiET0RSFR2HLkI6Pk7asj0G4dM7M86sZVq1mCb42xN+an\nvVuOOUr0cpb88EqBGMv2Bg1kXWiI9dSMSZJDW0uF/UbCYilPy/rB2ZWm6Gyw\n8j4uGiFUBjLNa3o7QKmQTtmz0tgdRlF88uAGDZVykVikvAk4RtgGMhNTuYxJ\n2F1C\r\n=Cy6t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/list":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/menu-surface":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f1525ea3e.0_1622728558002_0.20143697720725195","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/menu","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86e6d6b3d12696012e7ce03b423d4df26d838784","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.464a00286.0.tgz","fileCount":38,"integrity":"sha512-rCYzLsl5loZnU3CkpWCe45B6M2v/JtXfzD2jm5vhkuhKIkKhO1F72EixjGtZiTfYpXxbYxtAoxTLq8s4YhW0Yg==","signatures":[{"sig":"MEYCIQC4iDNFCqaqg/16pR1Rq21dn+Uz0ChDUmowI2W5MvUOTQIhAIh0MVcf7YXWVjWOe5k0790QGXT789SYTJP98D5M+txZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuXCRA9TVsSAnZWagAAi4kQAIIYEU7Yy/VrJ1mpd77v\nPP/DDA8qj2LFXvtL6/Y+dwhlgPjXfLr//uXLCLBXl2/STEoId17ZHyE+6YUN\nj6KVTqTvz80/R9NfqHKaNMKNSEY8/LqG13ZZ5yS3yd60CK4wERpumLNaOino\nmTgPphH/NVY1EKbK/ekaojk/DhFITMJC8KQIqse9AuhlaYWTERs0YvjmkmqV\n194/2fAMVMjmbbNDxjAiDDJWy0gdJDwzc7W2MUgoHShr1bwchREaw0tEJ+1J\nlAfizAM8LCt5emsLYWE2HKTUIST/E5f4gdDWoj2D6cKP9Hqj6sHG3sryzmet\niJnmyQcH6XZW4XfD00pxzqPWtaKoczPkTvRsxMXC7OhqWVHo97hwOofZ0woR\n9MpiC4G0SKpfiSM8iN2q4j+f/7AcjzT+9H3+2yRKbByr2orw7oftTde1TdgF\nPrA4wHD95FWYtStJvL6l2BhaanBC8rIxUo8PZ+bZVzSMqimpFarob3+R7ay2\nVKGnrsdgD06y5Zc4pD3MUpZmIo2Kd3fVZ0OoOqErp2eYnlnEoxPVSwMfrhZq\nS/HFYrr38D7jhmFBaughlK4UtrCF5Z9lO9zPrUPGPZBQw9Ruz0ydwDZ4iuyl\nFrsWVc2Whzmr5hC3ZmjOY6M6M8rc1t0hzNFfJjtSpqknBBs0tBh9emgTqrWI\nA3rJ\r\n=PBN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/list":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/menu-surface":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.464a00286.0_1622731671822_0.8273989723203052","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/menu","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa20c378498286f95d5b6eb1ff6c94545f10c09c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.474de7878.0.tgz","fileCount":38,"integrity":"sha512-wLMOJybeaSE/MqTT/rUtfE1VmDGtAWs1R5VKoL/Y64HQ2sfbZXbeOXuQxFJtuli+BRE0uiEkF1I3j6C2omArpg==","signatures":[{"sig":"MEUCIDdxHbR8pniaCDIPZ066Hw03cPTNyCNCbfVDr8OSDjCoAiEAyJwvLXHWxQdftVXu01D2xvlxUZ3K7RMqo5lUPPTJBJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIiCRA9TVsSAnZWagAATEoP/R2P26xW+6wwS9ERdGZ/\nuInC/NqlObvtbfBlndoNqSdTIWcURNRkq43ZFLVDIY7XzX+H56n80D+wTnig\nDaz6rtpxALbKu7WMb171Jna1h5iOMfnrCcOZi3wUhXnf05+ZTv796z7C4Wam\nCdzz2mDdV8jMRXthQZ9QtYnigTDvSDGgL96/sbU3i+s7nQqncNLqS9MWS+Hz\nefIADPIGns3qk08VjJ6GogvjblESw0oMqIVGE1lQVMQh0caiESUkTTGizyxz\nOaoxj9ziRXYgfnVEFnu5ZMpri2Lipx3Vo0oUN/AxKD35v3AVFTZT4cLXvGRg\nn+LHFhasEDPXhyOU866f4w7ycoUn529h3XPwZQnWw1LW3m/eSwuzQO5pu95l\nbOcLZioMzoat7CD2Ub70L6UMhtU4/nhWYH6EtrWAo95EAZpq3kdQsDuwMnnL\ngp+1EgZd0tR5wSI3DyDIFp35em2zyeEDvMmDz2Dcs5HJvxfQvzwcwXYStyYF\n8Ok0yHrlr6ZLkNXtpBv099QD0wEL6FG9tn0E3Y/HVLU8TDKRsCrWW/SuauZm\ngyRmMrOZ0kn3M01g1XWaG71NZs6tP1oe7lhU2orptF3zWAXtvSgF+wS4yX37\nxoog0lziAtplMKB/e7JFzHtU8Kbv2HIIiWe8OOhTrKRyo2pdsYtK1+woIvkL\n4hqj\r\n=vbpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/list":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/menu-surface":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.474de7878.0_1622733346704_0.2745152673700788","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/menu","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55974039d6644d93932dd5f27d9d8c244fe92591","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.b87ebf74d.0.tgz","fileCount":38,"integrity":"sha512-fVfvB1IVApksCDk/hPkSMyzVB6ciNuJk0QPq+QeXyPP3hi9/uQUPeCbR7unO90Shb+bygsZ+W1ZmH5muvQbBdA==","signatures":[{"sig":"MEUCIQCcxTZ25CnMa4K5wiYc5JJTUvjd4b0XFPIW1+2sl42/xQIgLXPUg6ZHQtsgwLqRhO1oVen1F7Vxaw60f6GS0GuBlQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRXHCRA9TVsSAnZWagAAC5cQAIu5PCJ5D77dYDMIp613\nTmeHvSxh0ido75xeJukhm6A6Xvr9xYvRHFXghktLUd+lRyg5ZQdlssS8QWrv\nhJVZnoYx8Fp1Z1gIndiou+sw7mAu1mimrMn9NfnIq2Qrq5fih6Fk9oeydDUP\nNTSF/8Ag0ZYxTnrBzOPaD8C/kHDS1mLYA8EkO+9GLkR8VC+3tZffa40WzhZQ\nzkOR8XnJD0XgVPNIrKdJXGBOWN79fdkmQ+5nyppyl29drTZuZc4sxQMhlnrg\nOd7NawCIvtrgwHcNwOS/UiI9PSVXmQrL9MqgvofWgpPrcyyxqgkQ/VJar6cA\nsgbNingdEeWONfHXBm9X+qvF5tLAQaCUIXg+WMzrIsvZiO8A0S9rtZcaGi3s\nIgzlzKD6suC7GDCy85GX37tHGouyWTrwmGWKkTGFe7oycVGmc8Vnz+tq1BV/\nzaegWpswI+8j8gyphmyNhOIVPk5W9vPLjJjRnOJARyWaxvDOC08vmX306tzZ\nE38BEHbdhhoUWMKHS4X9l1SkQau1IeIH/iqUXcardcm/I8OEvgbWac8Ib3x5\nIrC5nEkFS9SMs+Ph62WNzatLwjeFw42qAcFa9F5BSDMz725MT5Brct+wVKXw\nUkTY984Sb6uMmt8+3gMyay9xZf94TXeHeNRFC8eHrM3UQeQGkY9vk8hkoDt1\n6YwM\r\n=rjju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/list":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/menu-surface":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.b87ebf74d.0_1622742471274_0.44922688195680704","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/menu","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bef4208ed416b041581372d5c14a666833cad740","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.2daa49b35.0.tgz","fileCount":38,"integrity":"sha512-YbYWmZyg77DocJRSPHg28JFaJDmpS9j6bcnEwW6cIyCZ+NAIbSyQMkxkFRaVq89sd4fMkQieg6gvlHKKXXlJEg==","signatures":[{"sig":"MEUCIQCfXf/XmMhaTsDQpdJ3A/KBiCgjkguQ4Gcjjj5xnP9DrAIgFKXHvGerUwWKTXRT8MI6id+t5/TiUr8cVtlerxf9s+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGvCRA9TVsSAnZWagAAvQgQAJeYEDzebDgQwoE++0ZH\nHhLeBtTR4eeRJVgnZsaCSmYo8HehTYSAVkQgrHm/5V1OAxB0cSNptINED6He\nBb+K4wh903H3NNQ5PwoZOScZOfMQOEvE18AucOyVxxUYK2XTpK6HAny8YNpu\nVAhrgfOEoIlUGeCj7n63RqQ7UOOt2fRtja7GfAozymouEt4ZQQs3tVl9ejc5\nNIs0kdqIXv9Vex/mA7+qbRv2gyWq6TntqPGlVNnq/CpmNQYagHV0Cz5ExO8V\nz+SzAgW9aDKiAGIVgzUnV4U+TY9lirrUlJiTfQTKh7F9DC+LVy7G5PBVXUXp\nhPzQTUcAXRvVGr+MoYpkmjijiK6Wsd09NByPy1HZHJd0AvrY8I8EIB/+Rf3W\ngMk3+zocLgaTs5TRdt+AGOc7sA3HJeSoq45ls9BntU0NEAW9dTy64x10Udlc\nmeBNuVOYM6eRM8ytL2C9QDoaRfTiroHQyLWYY3QX+VfSKST0ukDbNkQIfrSp\npYUzxYRX7X3enA44FveBXXjG/CfPhV5MlOJhdi7/yv7qT8gvs8D7SrywWzKD\nPhDs0N7kob2f+cTj437w0KHWuriezfP9NgxtuT3hJO9sxkxMk/OsN80wW07k\noZdj8H/0h97EDWfv+OgPqHropbLHWIQjk6uM2hDTNXFdyn5WY78GkQs6zUDf\noRwQ\r\n=9+qr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/list":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/menu-surface":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.2daa49b35.0_1622823342857_0.05556377635675247","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/menu","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dda62e34e20e7214fcc134cd6d224baa208d4f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.08db3d737.0.tgz","fileCount":38,"integrity":"sha512-E/Q1R0vpqgQNPe5Gz3Tjf+2bF5bbukGgooyfveCSYuZ1rrmNEIUBJfjQtAQOejOXkr3fhHTmSVIKNpYgcIgeMg==","signatures":[{"sig":"MEYCIQCNdjF5dVx5D5rfSo++icjvItR/E8BMxcw0v2L6/Y1sTAIhAO2qnJGkdpGvawkygU4iMFw9pMwg42EQZ/gg0d4tm+9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoJOCRA9TVsSAnZWagAA+tkP/jNJKR2QRgAjiS4f/dEX\nOy4Df3nYO1bKqacsHfGdvoPStl4biDC9aQuxIVLKKj6ZrCFuO+sj/ipSIzez\n5oW+DyDZhS3x26GjV4rlhDXzOziIAbLpDM3+ndXDe8g7UIOSnU90BuVV5pat\nxWMasx6uxRSf8ZGZNCYGcP5f4hm6iYAMJJabb53p+xKFTGqieDTWWPrR11gU\nMgbPbmpfIFpb0XHZmSGSuGODmn8uVKekUZVoxkMcrmLb6PHDR6JQLeZ9FRa6\nTqvkcsI/bDg886y9tmFB29QkvuMJGr/Vpq2T2JhOmI/cKlUMTfUmdnzKAGnc\nbK33aFTMhEzyvBQE51wlGCEoNKotmj6UliV3qYOOVyREiFeo0fG6OCYyPJFl\n4WlohsEBVX2A5F6Fq9LvKDKzd/F5lheUPjJsM7JleBQEOhaarcUOzNpyOzPn\ncS8fSKweSuc4L4j5YBU8uYLN7yTaw1hbQiSjbOYBCA7QMsHu2As8jq9f175J\nN9hSA0aKBGd+TGT6GguQOEEEYHAUl5akQZDBD+NC77sXLO2KoarnoI73sCh1\nqnytfzihlu7ib5/XiW7vdTXzF88pKbAZdplc9t3mHXTAiWpRsr4uLdqi7LNv\n2FR2noJokex7A1uYAWwsL8wlbqPEhyYHT/+PxbJaVOIL/gPRX4Cb9AmcmU34\nUV3O\r\n=V6CO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/list":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/menu-surface":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.08db3d737.0_1622835789965_0.43466263904194635","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/menu","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27ac75f3c04ea6727ad365d1b78810c36fa515f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5823407a7.0.tgz","fileCount":38,"integrity":"sha512-WtILgo7Vd9DrdWH3i5KlBAGq1qSAJoNpcsMFNRDxaD7NR/ze30nUDgY1VHMKtktqW++MrwcxQYlOL7XWcCk5FA==","signatures":[{"sig":"MEUCIH9Aj91ZjOL+6Gjn6OOwNZdZM1huy3PWucP9pBbkrzs3AiEAhsDjWMpcxdsSc+dgqZO1XOZa6ZCzMbtV8Xw5LDHJv1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr63CRA9TVsSAnZWagAAkkgP/RKvPdNVSMQxVg19/LHI\n0rjoy84Ub0JoW0p+hpwLwdGxtlbMx9GsJQn/g2EV7/8MWVKyvDDzjc2N6Xr+\noWdCXrxEDCDrSf/uLUmF+5CqEfmXS4lDD9fREc/509eFw+etGZTk8G+HB6KR\nehrMG+AQmvLsFPB7sa17y8Rslem9NfVe1saokeZYeHOPBQMKdgvfjL3UIdG2\nxQEgBOnmSwG74v6DLKbJVPYe4NCjrqoeA+I+921Jtjqlz+LZDrxtPZOIRl81\nnI9kyvsEmIdMef7Mvbb+Qi3IgHidhx3AiIUK7smTu83cIg6I84GVMXMEW/qr\ni+8GOu5xZeqwzhBaRVKo+g//nuk+Ovw/AOrzM3LpHB+wei3QaHmbIByK7fS0\neEUHKneZlrmv0sDT9ygaSlgA7X6vf4ShbKfQu4SR8kda4Jkg7bDAxzNHKo7l\nSwkJbL36qUpnNjys34ttkSxHKv+FLLB5ckcW3xho9xWSNjl5sGUnRNRc4Nil\n1tqMtQe+T1EgKJ6Zi/za2raeIGQerLUXN7psReU1ysZ0NkpSXKyt5DF1vFWj\n5OdVjzMpjyI6HPJvA9MHzVCjGmEFl+oXbhuvTi7lv1raok7jzX6Ru82vk1UG\n5MNslcH2Q9+cpPdIaDhNdKi3BKkIRYyViq0yvAOax3UD+w699WIesd8BX8gx\nPUhG\r\n=P0Oa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/list":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/menu-surface":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5823407a7.0_1623113399411_0.2774815110317055","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/menu","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2775402bb343f0152c4032702e57420f003530ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.23b0c5e22.0.tgz","fileCount":38,"integrity":"sha512-14egRSwGl2W2CyNPyFUWp4aJQ6OYQsjuhvhfEejACxq7lOvPRheU4GysdIqt0s5S8bcE2ZsZtZERaVo8Tam6iw==","signatures":[{"sig":"MEQCICsAn0e2J3RQdiwsCEA8p2zrlKHlB31Q030cLAcpWWE/AiBYvwrZeHIFdjTL3aCfyWj0hBCaWj304GVyd+aKEfzKHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5mSCRA9TVsSAnZWagAAMMIQAIkefs3w57FfRneTMntN\nuOrxyCbqe0Hf9oW8yf/jVxQpHrH5onaHaRRZrEy34PjsoaBTM2iaL6trX1Zx\nO50msoHlp7W7juM0BRLKub/7ll+YfgqRQo7OWhjZJCcSJ6n+FEk/gn8UwtYu\nQkSC7/D6UaDg8OPVQW6dwjcKjHVQbWMhYs3m6p9rftj1J1Ic/H5Jj2vy+zo0\nhqTRvfQJlWo9xeo8pplBE/hQWNY/WyjWjS8VJqjv1LeLUKHr+TBxy69UrHCM\nmx+MKNbjejYk/2qkd6jH8SE3ycAbJNj6RP6fBVQl58jmJRQ51koNFQA5+/xg\nLIUVsVj2VYnklhL/MbTxER0cQTKKjB3V5cGuR01RXjmmUNwhAoLxHbUY4TAt\nv0lhURcQ+AxDGP3nwybC0vqY+sRvnBoU7712YsqRDZBAe+yFPZlHuIeB++6i\nd4+P8p8jeVaTuZOphAm/eeNEZRdPMRuU1eiVGXU7jNs9dGMNq/z0BILNlcuU\ni/+ko7Jc4PigSzd2bjmLsMZxgQx3VZm9Bpk5VHzoEpUsBFsx8c2/It6N8Kjd\nV2V1DMHUZ1qdEePJfOORsGQU/qD30NZ89YfwOmYd4Su7MGT1SWmgnLuqX8o4\nNgEAV1cHxJeuKqMIGTHY8cZUXN1yD3mhYK/udqYY1nqi2FHVpMD9Elfw27TN\npfLW\r\n=7gF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/list":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/menu-surface":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.23b0c5e22.0_1623169426618_0.24000791784423647","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/menu","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdfc5bc3b9759d1e3bf39b182259dac92fcafdfe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.2952c6a76.0.tgz","fileCount":38,"integrity":"sha512-wGxE8IxrOAp4NkVSyMuwU3k0UnHtchZ274/E9rm3/nAFkAuI6peD3u2tBw7uu5BUc16mQSIhTdoGMd/J5eYt3w==","signatures":[{"sig":"MEUCIQD/WeTLpMDx+vRYTfWfyNf9Ya41G/8LrrGZhEafrX389gIgepYkrIwu3OVlDhhIWZauOLPbezVEuinvKK0Q3aq5N5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6wACRA9TVsSAnZWagAArpoP/34TBJ2ZmmQR6YqfyLiG\nHwaI4ipfBvFRZmnaqotjSR7kTlQZHDOX+JJ2Vi4HBg0h4B+Zo72T0bQUsetG\nZxtR1rtUMOjtkYmpDVB4k6qluGHZ+6NkuTerM+TzZXx+kMBhQxCxAWmZT+vA\nAmSmKr0qWYKjecDE8iUxENwADJdjWtepmfVNXdIyFZ9M3CDqIWtGvHaBaAW8\nOq3N3yvyn4OAI4KsuqzoNx/na0PX4I0fWNvruNosAWjP45MVn0VXTT2GWkIA\nWNOnbMowHspI/3FuFV2uAPGk6WWX6XU00AiOEGjl6dK0le8eNku4iQVlGCBh\nYqfDL9Df4GqMvKZQc4YlCZtpHOZauEsPFKmApBuinwF4W80ACm1EsQoCNxPm\n2d/y/BfqCZIVc4VTxNTIv/jQcI6BR+WPYVopnTduWymQYvPICnUqnczn80P/\ntF3mZZ/dv9vLAOTVdEZ0i+mp8lG2AvNgZFOeRS/etgJTuJsZW/09zS6Jgi/p\nPin5APOE00MdQm0YfF7QtCEPOSCwmdcb/2+jJthGqOqk3m6tkNxja/qQEdMX\noOSEWB0/RxujxTegww4Nb0jk5G9FlaMROc3sLGHMvwTHmkCY3hKX3rdrKqe+\noK05CWMDq0C16vjeqY9sQtvggB7u0bRl7moUA5uh+LxcuFAUD5xDFRz8uc9o\nYlsU\r\n=a+uf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/list":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/menu-surface":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.2952c6a76.0_1623174144653_0.3468499239034415","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/menu","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dfa1634a27c76b4dfd323892aff92da1da99a49","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f12425f88.0.tgz","fileCount":38,"integrity":"sha512-WDnHryq9fOwE0cEHlQCb+5gC3QCNnTTf08tkuLgp3AwztH1KLfHM6HwDJn0uYioJEOAqHy+n+a8U3QOZpB3c7w==","signatures":[{"sig":"MEQCIGSYDS2ZOA+CoLwPi/C8I+dWG7ZIFKZCiY1PJqpV4qQUAiB61z5hExeRg3+/as49KVjPd6vMNs6oZWGshDFzhsytVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXwCRA9TVsSAnZWagAA7PEQAKQbORbUKjTMMdyX9evr\nQhCxWUqRu7SLTG8nnvKXYUW8lDOm6a2G03XIyic5ufpqovk+f/Y8G3u0w8Df\nJUJ6d87A5RmfHizo5AMs6RNGSRcX/iO8ahSds8gAYvLveqn+pSA76jRvlY6A\nsXyVdymDps1do8tkrNw9mNhr3J9gOa4TH3p761FNlfO+z6PSWOY+wnYiYIdv\nQ2RTo2aOaGu1hbPtKuDMjPP4NkROg6B92Sk4jnlE1NBCqt44zFBqOjpErJ9s\nf3w/QJcKsZHUnQ1RMIkC25QxdIjYusw9EnjV34G60U0O+IY+NFhnvEFn0oyP\nR+jz8Mb6nmUJ6EiCcd2aX4c504InBuoDlAMZZznhGI9HB1w9Te72+XyxKHbU\nIqhAR8g0oGXCdhNdTSGdGKgFATtfcyXgphNRmSnGWpO5B5+MfLgbMNZlJheZ\nM9r+q3JhhsO833VNuVG9kpVQC2Nzp9H3JUC7/fwOUznfPO1/FtnZRUiMa+uD\nPMeTyie501A8bsEPwALVc1EbIgJnJ3UI6a8LrsDXCbZS7J5VEtIyAq6B551H\nQIp8kBi3Wbg2krJ0dm5/yEYBlquPI44QTbhMMr4Be2sRfqv+1lG553PSx9VI\n1GJrwRvHydDuOFdpyYc5eWqGnMLJ58It7tGtN9typiHj84LApFIULPWcHCVR\n8VM6\r\n=yGeo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/list":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/menu-surface":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f12425f88.0_1623287280045_0.7928550020146095","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/menu","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d87681858daf34e6da8640cce4fc15aef2222cb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e543628c3.0.tgz","fileCount":38,"integrity":"sha512-KG0jyTMFlZRh49qY2u4Jp80UBl9TY5FfCwFQoB2nU3VbILO10aUC9yPB4FqCQhc+AtMy8w8eAXr3Og+u9OvKgg==","signatures":[{"sig":"MEUCIQDU1U/c2uKO7cSMh0bpa11GOBjggeX4uLMycm56CpLMfwIgEuKP0ufC/egEVzVanGKx4iNnmkY6A+aCQpLJlao30ZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYpCRA9TVsSAnZWagAAhM8P/2fzfzqplsEignPJ40px\n2l3IXXsgWmflACE7cWwxMf0NuJcFjIeceqjWK002dPpt6utlwyzf+brA2UH+\nqr2MHmNXDNWnGlmajPxDHJcFWY2X5Bs0+ADQAjpj+Jm2Jm4QFK7IxyDCS1JJ\nUD8gK++X09iqUz0XwbvEpZeqNuA1GEAlIq1CK4lj/6tu11ObhQ4StS5AlUn4\n089Iy/IT8qskwowa+UwQt0f0E6L7jw8jkgr7m3D18ldTXn/dPBhAphwbcQQp\n1YvGO4kxAewdfOfVzye2dkMIGPEiUrlKKC7Ht+0jksWZun3Iyc2WP6/4J65e\n0lPtV3vQxhvi87an7L0FDy34YIZ/Vqz4HSjxeEElw0op+RUu6UrvpDZBvgVv\nI0DgaSrpE3VJfhHc7r7suSmQ8+8qiSS7ucDDlVsp0L181LDUgCylC7D/0ypr\nWEdQmeuOis04lJv1vKChQktw6uWxouPFBgvt80qC+E4Bq9tgywBva9HVOY+7\nAyklwcLjwe1Z2gNK5fqcUCcoFe2n6OaE6epq2dKlo5KGM8T2aqq4ZLo0aBiF\nVc80FZD6u6lvxa+px1FXO3dhfkTht9JBXkJ7bb0M33iSyqM3bmCuuPk3saTd\nakcx/+UKDPLixRsBqYTh6z7vHSE7aNn94lyYj6Dy47ZqTPcsdulCupxBnaWb\noQa4\r\n=IjVv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/list":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/menu-surface":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e543628c3.0_1623287337405_0.8096911159389673","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/menu","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cc4aaacd61cc66c4932b6a207d0d47922fa3e2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e0c346286.0.tgz","fileCount":38,"integrity":"sha512-3z9psf2dl/QJ8jMD12EC60+Wrg3PzQCg69+FHyOi9OYfSQe+YVmDi4f44Ede7xRRnA5lUfyHyy25Mh0UE6pRhA==","signatures":[{"sig":"MEYCIQDOMBAQIgGApUeWVRXz+DY3O8xy8kqYSoN2hVvWqKbLLAIhAMxujG9Q6ht16bvywVxzw3O9QqwhnUKTP0ndOsbnYiRd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj/BCRA9TVsSAnZWagAAqNcP/iPnWcQGP2c87dz0Ls5H\nEqbB8qMVRmGZG7JZyqCA+aSBgc4a3g0Q8vFC1V0ZoenkTsPS6LWjG2gnTWIT\n7qPlWFNB3vWoK/4XBTdUjmHGdtg8vAAdJF5NWhVccF/RjxCeS2OSu+YqKHkg\njTcX0IUmiHd4P4H/ziZFUhGxmTbZKjaQt7ZxcgcS/XLpOpcXC8B5D5zCK7wl\nmvFtMquJh9SCzP7qCBoqF+rvBOyDVt13aWBtPHej4hWVZG8WGJ/ClNlXjYyX\nSaYkke6scOlZqq6mK8h59eDMdSpmcnmNEdn2jlFMS53pYlfeJW+ZftrA5C9f\nN1agYXGOEx+AdHBredWcTwqq1g/v03g14Zk4xegRpUnKqrMh/6sTZzWiabmr\nbBVaevwan81L8WJ8kIgV3BA7isD1QNo6nh9h+Pj+JClusVpgweyHsxqEPTVQ\njGMPE6f6TqJueEHW7iTcewqggvrJTxGaxWpGc0oo3/1yPA9Th+If9vXsdWS2\n5MBL0H0kQEzVfU7Ov9Fp2mMGXGd1ko0UVCmlDQDV81e7PvZImhYJW1+uyRo8\nr/w7wdrc6TnL3miU1cHAIT5wpGHcJI+WaKQdfHDsOBigC9C4S0sw4/MCRrWG\nDnYLJnm6mbtszEthE+aHeB5kjMSWXKvG1KuXGbZ0drpYA69utC0jk8bWyyWp\nvzzu\r\n=yYC0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/list":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/menu-surface":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e0c346286.0_1623343041393_0.48338034124414286","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/menu","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd6903a1bea88de778377ffb2498d2d8aec3208","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f43af5633.0.tgz","fileCount":38,"integrity":"sha512-+uPMVJc0n/Fponhd2G7PmM3EDwVZHSY6I+WIk95Bc19z2poDCPVRzpJ6HVwct5efSU9Teyatm1uQ9O51+B78/w==","signatures":[{"sig":"MEQCIFBphhOWG8Rn564bvRTpj4NKROdbbTSWC6hJVlCB1vV4AiAqP3dmmhB9oZcA8TTkNg6lyQECVJNWu7kjakGy6FWYyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnf9CRA9TVsSAnZWagAA4ZkQAJA9HLAoly1gBruRcvvP\nQeZoZNOb0Tz/e23yT1ZcLEAiST3xuvIAHBaDMj5PM2ild6rr+7HiX67Gyb82\nKiPoQiIq1TSLkWMJMKD8U02adlQA58EjE6vxtXR4P++m3qdrlqqgKLWd42n9\n3iHlq8+DBrD2Yb1WOCkeC3sZJFMHZicipcm8NyAT2NQEDlM+ewhQm6PYqwTV\n5UHgzpuHWDj4mS5uPvzl57lfMqalATcbonQ6vqOsERgSe9cMB8hUCoOZ3xqz\nkS7DimYFHM6Op3NpZoqun76wTP6BJofYIOue7FaWuU7vbaC0AJj1SUtErPus\nY8ujABgWP8Eyd30jt/GY3tsgofJ61R2lAbwoy8hZpQvKYgcZcPfDs/bdAx2x\nQCf2y/Lku9yC59oO+nFE5miReW7DW+znA3REfZUPJlN0k5JfJEE/kXf1F+KO\n/D7ReOddc7Mn8N/9qnBJt9tyTODH6kotfE4f5DXnCmBDdf7cMfoWzdLkJPHs\neRFjvOQpgRkRrtL/hAJaYqASjpxxl0TYJayHT2A83aD8C8sLYfZPN3KI206B\n2208PciWXTsd2p5UtJCQLK0KiuLMpRL5OD6/5b9R3Mm122FBJ6TR8C1YOocW\njz1ji062P6Dy43zUnmPU0cHGJcmOYFjNpgfRcOzRfSaiezNiZ4+qBn5VLAU6\nJkpq\r\n=aPmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/list":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/menu-surface":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f43af5633.0_1623357436955_0.7081982024946658","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/menu","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f785c32ef5a0b981cf212445ccef28eb2bafec0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8415ae585.0.tgz","fileCount":38,"integrity":"sha512-yZoXnakDP0gvYFjYlXnRxNfhC8oFxW3JTHTy+Ipc9E2MLDBr7+vqohQUkgduSyIPjge7NiGIEKV5+tlud8acbw==","signatures":[{"sig":"MEUCIQC8XGMqYXeNmsvZbz7cuP4F6V3Plu//B2hzBJedcU7kOAIgJUze7wwE5yKzvpbBzC2GH89ut5NmzFOqU3i62O+43Wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4o5CRA9TVsSAnZWagAAdkAP/3sHtj1d/u8oSiWvImcZ\n30dkET//aNp/mlcipmqK274Mu7nA4gb73R8B3An8i4Ah5LlDuX6QzlUn8mSY\nROf6JZ/7r16Dlsr6kcJDaEl2oYAecch6ay9YtDJf+POn/+lLsA+CmFmj4m8+\nrxHV0HDO5BQchYoAYeuOSg0+ZvKIcJgohmJp+jaC8DM73Owt/Mj1nbz2S5FT\nLCuMdVetMbEzb65aHF9qjZtpi4SZAAzU7Jnoh+qIA9wODeTr+WOQOulJnHIb\n0Xi+xA5UOFw/0UlidnyiZe2Gc+bFffbJAn4Rj1jn3bXxcrr28W1s5OWzqEi4\nM9bMFQR3JCV6iPbsd0qn9mOQKAi+aQv+3aacm00l9UHKOTrmKiYtOuO9PoI/\nU7Z9eGQMQDlHEVLzWVvW2GYId6gS+eCi4sZHq2CAg99sjvG4Dc9aE8FdGcpe\nEBXj90Qh1lBuFFMOY+FH9jSHQ9jscnqD65O7WY3KshJGLnupSYyHTE8T95wo\nu9UPHHdM/iFkqe4zXhajX4JKWPD0rRl2ugj1F1i/yMAvfLIlN/0KAH3Ijr63\ngCCrDpcj3/GMQA7Cile9CIB5WubqumwQUpZk5iJHFclbiji/ar+WIzH8K4XV\niyIHNcR5gO43qJefspTFe6aH/anaYa4Rit5k+uK4ScggyM991OpalZvJlYHi\nRyIG\r\n=rBmG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/list":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/menu-surface":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8415ae585.0_1623427641772_0.5147121652350528","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/menu","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1429f0bbdee1fc7ac67da50505b2d2eed6a3d260","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.598fcccc8.0.tgz","fileCount":38,"integrity":"sha512-nT4NLcnGzHqeSgjyhmjyWZJqkCoFbPQYrzbkYvUUKgw7cUXIqkedM5H4fj07dusD4iQDU0+r2jNBcMZZChhaUw==","signatures":[{"sig":"MEQCIFJYKw4Zs8sKnU/P/Xgrrk7i4PxrEA40El6Xju6lCBhPAiBnOVgEhkszxoQF+i4w9zNiMDdpsmU2g86vwJdbJKjTcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9oICRA9TVsSAnZWagAAih0P/3fzMs0tTSMJhyLf+xSu\ndphJJLt7Feqj8UxVJVy2J1z7/LZSW5epA3oPPXtRs68+plRCog7qaSlQqZ22\nlTMKCyHH29nJEl+F17fuB1ElH9o751U7BzX2yESHgPLjRGU2PECkc/0Sccwe\ndOx00G8P4uwRpvQJPv4fNjHINT2KLQpgvdcZQlP33WwftzItwgcswIgIzH8z\nhDlTaK/rgH5r9B1+OgOqXvw1hJDKMNTxt0GpmcvJfbNLEcR9g6ZN3/dUJwBW\nHIoCxHkefb6WgkEWgU4tSeEv+JXFCZdV7N7BJ8wuuY2lN80JFnpXeZzcQVtY\ngdA4JKub0LC5t3+fwaTEd3R6ghmENSwNf87jorB1ObvW16pDV9i9II9HGkYH\nZ8aXLcvz6mW7TOoxnKMRl2fgfGs9l3g7v6HSD/jtF3G6xcQKwYLWZdnHknlg\nlRDIyUc5Ia14tvdnGfahhcf0qpx5HJa1xi/71MIbCTQQWnfeC6AK8CmEjJUq\nPyGU77BcPq2Fm/EpUB9lsXf4yKgGcsl+RhiJ8Rj9rHkWcf5aSc8gTw257Uhz\nv6vgkXuaq1cWD84XRiuSI5ed+2dAClKczytBa2uJFsHdQUzQdolmqHm2Ky+i\nZJsCfrW4KBGQhtquz/ANKlM2HaUrzD/7HPFEUG/Q65Zh8MI1/W+peYoObiJd\npUKl\r\n=TqRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/list":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/menu-surface":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.598fcccc8.0_1623448072549_0.30066385776265103","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/menu","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e1042e25a28350910d73e0b77fde1fb7ae8b07","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5d0605188.0.tgz","fileCount":38,"integrity":"sha512-rMl5klzBb0GiA5TR1IkoxVfYto3SaeDd3kg5Ig19hXaJr05CRfODjKEIaFpkF5Rpi0j+T9XHDhKTf3mhFIvsKg==","signatures":[{"sig":"MEYCIQCRaxKcewNWWdL/2V9Yx8Bu8vCoJyedd0BqEQDLG657GwIhAIJb34sUpFqDR91Colv1OvlZRlafegaKPMVCbRj+naHz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SiCRA9TVsSAnZWagAAX7oQAINTrwUelm9fkyM2/gqn\nUJTz6ZoSNBlRYKkm5gB7DNi/pwbMUPPF2WfI1ZUm15t9keuDfgO8fmTkUxHi\nUXPKa11ym8+dy3/i9X8pSS1rycdaSZMWiytd6RV03f6o/3DfkP9Hh6YEcEs7\nx4/YCQcmMgG/1lhDvNTEvR2F9clvH2RgyuVWkW2a+LjgdXQI0u4cyMjA0xDZ\nFE8kRpVoPIL1jA3m7edJIetdpZvycx0ltbYRbc4uu5hWkV30WmzEvs5K2Bes\nIQD1xNOdmgDxDtMpijiLILSRh2Ul6Lx/4neJ1Lswx7SxPNZawA3heW7hDxXk\nLh2wRIcZ52QPRTTzlunkynwgUsy5rH6KyTP1r98qRZaCRj06xkNNfirwis9X\nay8jyN+KMf7eLsrBPSx0EWwDuApHbUf36tVHoB45qeeGQOQNpkL8+a4i+Vhg\nqCTSetABV2rofKdhCXjKc6oWeOj047JUdZX4wJ5SnuoDPhsqCXKQKlUnX8iC\n4OQPbO/vDGu12pxx8tVJK+pzns7UonrFRFya6QaU000LObpUjtsQtYBHkb1N\nIHzPbYWRTMXeO6VdsMJbEQM7IvtY1dUqVLbIWnJswkjOIKuj7tGu6mb12nwi\nmqNAZkRXdUmTw5GtvQPGLSbPTE4rs5NMs7akijXFjAJ2Fso9e2nJ44NgrGni\n9sVP\r\n=9/Et\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/list":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/menu-surface":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5d0605188.0_1623692450096_0.10647636593680998","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/menu","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ab7bf4daff384795ff0719fcb73b3fa2fd4782","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f147a2271.0.tgz","fileCount":38,"integrity":"sha512-eT5fb2BqDrGPBLDirKVxkrGAZ91jeb7x1wXdmNfwkbBOtUH8ze19FlHJ9TyqbfuAC7F17I2DUal0R7YjiP+MXQ==","signatures":[{"sig":"MEUCIE7eGMI9z4PTRu5yMs0YkQx79LnHvOLt3+HehS+zRjUaAiEAkzrS/MuRIdEbPGmKVuBgNcw9HRwECH3+gdohQrQXxpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6vMCRA9TVsSAnZWagAAHdIP/jRa/IBtJmxoZldETtbn\neKOXeeZygzcL6Zxyr67F5NUahVRuLZaneP7hTnrT865tBF5KeFeDcswt6law\nQDlrU8x1eEo2AZqTMH/hH+JIW0/rDG626NLBVDZZBXP7XpC8k8kdOwq5bB+B\nptpysambb8n7a3WqL0Lv7wOJoAqFTTBHCdlgvRnz63yFX0f4mys7cqzwT8D/\n6WPt+zvXvII4uxywRSTmweaEKM560xRzWOXVuPJaJKo7dNKv7ByWZ4vnQYZD\nVpOysI0VoqzWbnbWDYTL1JTb8DI99S9u+3aNfOT/aCUmKlW883TZdOWwP6ED\nAkp7kTj3DvXvh6PsHrLjixgd0SHLSpzcS0IXFbUeQc/qvlwydvx+JIZuyACT\ne//ovKbkaIjJOw8Bz3zbTZKVvg+wAs5rfs9UsUS79F0MsVEgS/5TPUDGty6H\nNRzyiQqZC2zvtDEN5UxX/GqF9Y0M7tpWHlRMlK2reGi9Gc+r4xJA23hWL/Qr\n5BAvCXT+dBlZWpm8p3Auc4+CsaA76XWylqHP591UmBPJi2+tFKVHQDHSpHE+\n9Sbw4JAC65A73EGasr843tcjchDabpCRgJs8n9wRJqqdIT4uoX8REUdsxre0\n93H+5xJQaOvDGPspRYCX+L1pGugFZtS1YTUpWUfps5z1DYlQ9F8Kwy9lKIQ+\nFkQA\r\n=VsA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/list":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/menu-surface":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f147a2271.0_1623698380220_0.9089814027323613","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/menu","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2275f12162d74a33d908d9b76a39cf2101f63b43","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.33579e00b.0.tgz","fileCount":38,"integrity":"sha512-J4oYEXU/PFWYVgNOpaBsmFoj3U/7NOoG2QBdzP/6Z3LXIX2Be1bEx/ZqdHh49mb7hqhanM7XH2q29BvytSD41A==","signatures":[{"sig":"MEQCIDUZGnNvyi15cH/rKP2HnMwOtwzBkNK22nKwOASMMAYgAiAxlKI0xVbX3N57QdTgbWLSiC4BtMgvGjf1ZGpL3JNCig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/MHCRA9TVsSAnZWagAANHMP/Rv+7wmJhsOtRRhs5m1f\n8BuI+MgNlA8MieFYLkPNRDzrKI8u40rzWapOfkoGiJcF24fDQttajShskH77\nvcnhHplSPTlHR9h3OlidNNRYdV/okPMrgyGs6my/TUsyHNpmEnvj1lT4aOkK\nZ0QbLn9zVAHrj1kNqV+5Mrz3XIyw+4GrZIz5Bmlnu0wOUIxQninmYZq+seek\nGSOGeWcqu10vJqzfz7PhUEM7VACwxNhg0zhh7GOQZ+xh0IK4nPndVl9UAa3H\nO6P3yAvI+oohPqpudgrRf345kTD1bq6pW6NeXhU+qm+1kRGc8//PM6fqbtbI\n1uLUIMqymCGz63rmLm90qrf63mefqewqdktw9lP5zHMCgE0VBrub9Z6obggq\n0eY+kr2W2UyWTZ/iw4Hbxmu4e+W8qSLmupVUOUGI9X4crELuYCvcwBS/bAaw\nC9q44VpIyfg5LujJgoRZbVc9wT6nzkYaHIq7F+1YDCa0QVaeGyRRCvp5v6Ii\nFLckeN6RIJy1hh+z7PozyuJnFvBj7Wwrm5Kyk8all9qGomcJhlKGKgl9fQic\nm3nKTP9HFjdNw7ulZhayu/9qONxGvpMDLRRvj6p4rKnisK88VdBSzPhsLlwy\n9RdJdXHDSJL7gwxWbNhaiFkhpB45siIIewgrm4Hybsmkg5puGBvxFW4RcTIP\nL82e\r\n=tGrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/list":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/menu-surface":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.33579e00b.0_1623716615063_0.05002043208521134","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/menu","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4d194fbd2882e02dd214aaf1bd0727e5beb08d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a6909c0e6.0.tgz","fileCount":38,"integrity":"sha512-ZXWuNl6+ucQ2jPNEwg5ox2YDSwvWUKYqCrLyMstVHlDfm1ilVz388pFXNmxyLQYosWDg89ZMiRZDdUV1JZq8fA==","signatures":[{"sig":"MEUCIQDq70wRjiZrMPPT6kiA5Slpd31NEaPu5rF3946581sqEAIgAhpjBBQrax3z01qWGwCilqPgCTRnOg0YmfeVygmcEGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPIQCRA9TVsSAnZWagAATCgP/jWiGBOhrQKDmGGeIrfe\n5nYg/2uxZfW2DTIrYnt27a06GFhV3v2cAelkNWG/q6+Tm4CaSGGIDhp8mXuT\n5y9mTXTQpulnC5FUj/Y54QekNdv01krtOL0oVfBltYAgGkU/tU+Rx4lWX5Tj\naYSqydGXyRtBpGy/jp1d84tYJS1rfoJ3dMoP7Cggp0YW0bfI4mqP69O5XPnq\n6o8/Rjr8ODGUl9gvDwJnLDwrxIln2rgfoQZu4t47X7O0mzw4rCOh8kkpRp4b\nje7056lO8sazkjrdDspSEuKsH1hWH3NyhJl1lBEvX1wFLTQCvWYsklSnwAmq\ntR/gcfYeIxCfkMT5Y7ycv1PmI5UB7ZFEFEOZg80tFT88xnZZSTo3YL2yHldo\nsHFvzZwKwXShcJhI/6ZG6oPuvs209QlH5tDHOuMkgyk3CWQx7kh5e69gKcoE\nfhEasIs8/M2YbAJR0GgLuRze50A8znbAsRbol/siXKayNfMLi5cd541j3dwV\nOVYAJ2al+rmb1bXRtRCuig5p1j+hT3ce66dDxAZA+6VJEelQ7BynkvRP7xJh\nzT6C0N1ecaFJ9CKOsyp1Y3FkttZU3vy/S654lt0ZEvCUQF+ffGVQyZzbPvzA\nGTq//mQFVDwn7h47eCliCYl7A3WIU9YjVfnIvxBishZ0oiFIdo/1aEoYO24N\nghTr\r\n=dGVv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/list":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/menu-surface":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a6909c0e6.0_1623781904501_0.7873795789867735","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/menu","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6bc864a6a69f3186506ddcc79dbaea19bdcb79","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c18b5925b.0.tgz","fileCount":38,"integrity":"sha512-R0TJcdKHE7la7Gct0lFiiyjXvLZLB2OryBTSg2Q+9D4YebV2K40Fji4pc810LEVVNFyfzc98XQFx4AhZBjbHGw==","signatures":[{"sig":"MEQCIACCYIp5xLkT5UK0u6RbXgQgL7fCUE8tLeIgLFGI7VB8AiBUhFXVz0yzejhXyExWkDFKxQC0UeANRKpFrofOJ36nmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRYFCRA9TVsSAnZWagAAnFwP/13v317HkeljPAgCmNPN\nI/wtSDYfUYGxXKiF3ve4lgIxQOBoKjQZeseu5DQIBYvFadx59NyoZuw2thjO\n0poIAw54G0gXptUYvheEUhoLxjOdlK+TrWMoFfA227z2RvnIvpSnnzMAaHeW\nVHHPhRqvvTbHHQa2BBSenlay4r8iHBw7+JVITU4I/47ptmrnkKK7iQO45t4z\np8zn8RoJWiUFXn6hqclhdMGGWppFFkuoAMAUDfo9ijjFA+6hLrIOJjG5aGEw\ngU8iBmuahQSALHkbfAcg7svZN2SE5JBrNWsqNVfe5sqrDI2EyziLKVESrLEL\nwOTSS8UhgZfNSadN8PVCzPs8FTvv2c5z70t8QRUeF3sN7kOaowhbiB8u7BQf\nrnCOHqKecK2GhF0o+bCemTj/NTK7mPCiDoiKXlMtiNDX1d3u5YAtITRUYapF\npiBMyBn0tAz9odas7gXm6oqB2KHwNyvksWH/oNawdRsZvaXv7LtbgVpQTh+H\np34icecfBBOly/v5MLjTSquAntw2HjRJgnZ7+yVsjIxqxs7Emzq/AEL4EnWn\nAGJ9mDZ1YarFEdXVzLRDq2JZYmfyBbWK1kLCSP6mTemHgIMLcL3nDXAZ90nU\nrwvnbycykxYHsAnkLcvqgrP/UJbXU5kdJaFbWe3nyuuAoj5wooChq1Dq+nL8\n5gXt\r\n=87kj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/list":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/menu-surface":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c18b5925b.0_1623791109551_0.341824000703534","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/menu","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b9d855ccee546720432de56202169d950ecb48e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.271fff902.0.tgz","fileCount":38,"integrity":"sha512-KipkfAblw4908LtHB7x6cnizjoepFKz9J/kTbP+6Iz04GWKBVw2vfwpiewaEeNqENrbuUDQUrYPKKz3AkJ0WSw==","signatures":[{"sig":"MEUCIQDDWWUIiUnDXA1N+Monjtfod6Sjg/vbjT6c01JtfoH/KAIgYzukx3Gu8cs7FRLjXgtReei48E/1S8oG8s0oUBFbFhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS80CRA9TVsSAnZWagAArpIP/Rwu8xBjJfW7rwtcRgC/\nOIiGuOeR+J8o5Lbb3xlGojySYgDeTr3unEMXSeO4RmZMwk+Vva6WMGy3ET7c\ntOOl7HdEc24rh78yQgyrNtQauiNLqT4I+ps3e7bZn8icrX+v5zeiWuTMBnLQ\n56On+Zf7mpplV9xwO+doDQhaS8M/SB3AmeKoEGd0jgowvNn5jT/ZhIX97MBs\nHNyg3WP7oNCtNk2ATTJiogFv3mY2A+zuj09+CszCLDrbTaVWnbZak1GCi2Lr\npkK+2yii2eErdCDoHhtmH0EurfHHR9aEY6lDE7TxGI6hVeD3fypZtwjT1blm\nEW8WtGgjoqQ3LQVWncW3dcffRgJuInTIN7x0o3vCAF2iubzzEUJJTmAVvyi7\nOtPnRnv06Y7fk78IFOOg2HA2Z5olwe9DdBq4XFC0Gx9z++4VUytbrGC01u8y\n9yZ9bw8Q002KzT7ai7h9V8EvqzEP5LUeAIZmyq6MT7H8FloQIHnPyP9tNw5I\nrN16Rk1xnDcIYX/onXLYmr3OJYHVD3FsyeHKHm0bRb573EDHF25ahGqksn31\n+yItb/1JmQscs5AIiZtAywgL7OhMe7yzn3tKqUKYv73csLOW8Dhg/P3tx0LY\n0yCu9FkgIjfg0EJjVrQQm17ilWJ0wA/+BTqSyszH3lbtEpnY6qtAS/gmKd+V\nAWtX\r\n=fkXa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/list":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/menu-surface":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.271fff902.0_1623797555983_0.5430074468414372","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/menu","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e050a1f74ecfca0c0e952af3f05e2762b3f7dd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.7ea2e830d.0.tgz","fileCount":38,"integrity":"sha512-u4dDZQrGtgNv1ittPr8UNOW7zOSf9sixenuwtt7gQ7Q9zAiJqJxGR0VPmFixOsOwl93Kzac6Hw+BH23bVS58yg==","signatures":[{"sig":"MEYCIQCn2QjgUpe3Q4JNJkB0CZ7cbZZxrQOlcgZSRiNccY4UhAIhAJqAiWLEpGvRqMwwyY1B++FebgVYIirqMUylGJ9ST2Qb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9uCRA9TVsSAnZWagAAIvQP/iBFVBLG8DU8+tTmE2fR\nWI4Z/PoXX4T/XulYhW5SzPTXGk76P9gzp/SefiolIGGnR5mZVDhBt8iQSRrH\n9rUXAvWMZzkhemwEEPtdwqHu2Oj2dBx2GdFv1WTKXRQPeqG/bMTP+xootB8b\nkj5fKzU/jY5Oco3ELKzDuWSCxxE/uZCaCNocJD9vSkUAE8ODmOi0s2uW5lTK\nN8jqJNg8oRMU3vBARyLkBC/TYg3dVMwA/eRQvCwak+5dV12AF5P+hRYPcHC5\nBSrSGbHhBaUcOwcOiW711GAEF/GGhfBTOgy2OZ1+5TqnPTCwRBPqHcqmIhwa\n3ch6DkTg4PRhrD1WsyrZsfd5MzGvWxYgFUxbb3LWwaiF1laLBgu8s2cRzsPG\nxdbdXqc1A1uw/NAzEimHmr51eMaTXStEnQE/QOu4wv+mlxLve/JtTaiXUFPH\nw3vc6gLCjJsfYOlqDLwRCL6oGiBUTlwzuc6VybSl+rsnPnmdQrfhLcgzOXuf\n6dFwedENc6MBNTCWmn0BoMVbtz9PVWvFTKxkLOos4wG5JCSHHNMG1EXgFji9\nLvZmUBv/w9xj2tFz/Fe09wOE/Dqv72QV1oAUd+YvM7UJc0TGdGrBFCIdlXeL\nY7Sa5cl79QPN/yhpBC48e9w1YBPDJf6RvnYy4BtHcJd+LmhcnV7NA6uK4GNh\n3d7X\r\n=CL2g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/list":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/menu-surface":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.7ea2e830d.0_1623797614190_0.2609063792323436","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/menu","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee929361460da1fbdcbe802e8830b7e522f2c1a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":38,"integrity":"sha512-XsNlH1/zMpTQFOLr37vXCd0x1UhH6w2M+CL5ecFidp1bFFOi6ZANRMQGZ1C1gKZm9I3OR3ORYtC3YTtXQ2OyYw==","signatures":[{"sig":"MEQCIE444emvIEcOWJrZ/oMzIabCUvfI7HZJxWI4tjEC3NKiAiA+tAo7mcJvyWp8B3OjtIpsDr9LhmdIYzNumEA8rW59UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymguCRA9TVsSAnZWagAAFCQP/1R8yrUCjmtmx5QybAa0\nguOlMBEzDImE/QFlmKBVi4qkPtIYkgD2cwRGuDwzrBahEoWgEa99JODQj42/\nXyHR15CEoWBNYODWrzwjk5FoXDLVIDrhKKsKT73ULH5pobwPyYHYWu7uJ0Yf\naO3B8vSi57nMnvv4/P7lXOG9n6CPT1gSdQkJl6++TqiK4QYd7M505DI/WNtD\ncR9l2mx1naAi+VWpvtSCczXEAUuY/S8PBqmojGZCooeLgYOxuOIoCtOmgjF8\nFxbFTqgxHWAFphLbryxsuDRMCl64X7/m+kq0sQpwxCMBPinzpnDQq013cyke\ncOuOJo4/QDuxplaD0u6Yx/mGboVKdRoskT3PsgThljTcrj/6Yz9m3M4a+nji\nrRHC2+FNjI+ESYI+L2yl/5f0foPMMGjThhHS6h8XUb7HTv6l6h7raQpK9anq\nbLD0MGUMfEt4e6sOdq11zIqEkpInEJvnFNw6qT5H41hOx3tNdge4Ic7+Skob\nUeVZNtAE3nLAf503s0OHCead8AI1LPjcDk5rMVJUrLSUrouKOcw9LkeeJq3e\ncJmbmye2iD/rwVaypSiJfFsH9SLFVICOo2jtCpt+hVOx0ZNV0MAYKhgyogXN\nkMryDZJ2usgi5RkSbLI3eLV61fhBP5hf0miDI1D5CYDRgDCiCBNpqMf/r/M+\nbK1r\r\n=+lcY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/list":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/menu-surface":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d96f0a1e0.0_1623877678273_0.3353294850415094","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/menu","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06111707b6d834a69dd7a750cb5ff32f0e30f7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.a6183801a.0.tgz","fileCount":38,"integrity":"sha512-YitefcydurxLoqZe+5JndHsERHa1XvjJSS8OedzJXKzbm8dQcGLEutBkYUAavSPl80mg1iUmmgXOtT/IlamIaQ==","signatures":[{"sig":"MEQCIDqNjEzF75dUpsE6dKczYbAztDujOivd1IHwPt177utXAiBAEtYY2nis7GqD4lYxh+QtpVksHHt7hdjqaeuxs2g/HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynYDCRA9TVsSAnZWagAAlEQP/icYcVaE9MzAuDlurnBP\nCuxepGbEFK1IrghOIN3RtqARSeAzqIassj0L9T5DevKJ7A2X/vS07rVPTNCE\npuAD3vYVJjE0UnjS3eqjC4oTFPR1w3dQOzOxgr2548c55/v0MB2vdt2x5U8K\neHX3+1rxQGzYbmN4+0uoTrOAtslCdUjamUI9uce5jVk4G6VPDPMMmKMavTKq\ndtLUqoSQ8yNk3FWv2cRVE3sigY5udjvV0CurlS0hHS3sKhZis9DxumryGPEN\nT6T8X7YOEEIxEZUjVf+W5LFrNG93mXU4B0jLm0QUQuvuLTBSYlkzW0ifUdWu\nJl9rEcH6ZmqEQcDFlNagHaTmZ0B+GjVPqyeZRgAYqagpsjvbsYRJj4ooUliz\n6ZQyQKJBCDM0QTToCyHn8z4C4l5KoCytCd87j6BQFRGnziTtybomLHefNwsh\nqnqUujnTVjWi8q3bw2L++lfJhf5arS9pd7fDHDImrI1t7jYwfyQHPywDshlX\n/qXlJHggFNQgSBw0LYoAeOz6pgQQ79un9r1AHIojg0UMy/YJknCA8bK4L/kA\nf3bfvF3U38nSOL58I9vzBNPnpMyY+EKV+EAK6DF999ZDozxDPGtSj8B9S/J+\nG0g7ADQs+ZjK3mYxqnc0mFwSRRRiug6372ZJUMOz8xSVIkQ1xJmRH+Yxa8h/\nIn7U\r\n=Veax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/list":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/menu-surface":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.a6183801a.0_1623881219148_0.3260842080286359","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/menu","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9055cccbb12e94247ccebb6017bd4d3442c53a7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.940550232.0.tgz","fileCount":38,"integrity":"sha512-o41ZcTT5Rwy4sH3N0Dm6JcfyIo7AoxPEW0A4kyrZnu460u/qSo/oyhQZ3W7Q/worE+BoithudHkr0aViPR9Pfw==","signatures":[{"sig":"MEQCICDWxtCVWS/e55TGB7GaQePTLaN0qWnuMwEV3QYJXF9xAiAnPMh5JKU3euO8VKDxJnJ70Q0BO7hIolI7qTLSmuT2Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6V8CRA9TVsSAnZWagAAcsYP/3EHd/kXLhwWDz4hBP4V\npxgbGEYyleoRVaivaZK058RoT/bL/3MMtiEMTrf0rpCgGCsNfpcxgMVq2zaX\npKkooj+ebHj0y+DJqQyVfUF7qn2ItySs6iB+vxpvB8rSeGJDl0b8oeFSpvFx\n75caQpxmlBp5RSWTQhmh1/vN8cOW3ykoaykNkS8TC2dkfcGrHYwQQG6Mm20a\ny248YGyBEbK8BorMuBU3bOnNQz/0sxKTe+9T0pYQtWbfp+xDheMz2eNevVdJ\nkn4FlCDWkF5oCdORPjCcCG+xgjJ668025U3YGCdIO+C0/XeRPIFwdfoKRLeV\nAGJaSMNwZLeykgD0SZOPBSMnfI10R+K8zs6RRGYAr2sA668BXBTTvn1YWYyd\nmVzqPB+SM+PmvbnzxIyTl/9nk2ctQvDIP7wAghKlpBMHQ7D7E9qaJy+XZXLo\nyhMl4assKwbXjnbCw1oZij1jjUfezmYRGqKt/7wR2ZLn6Wq3jXOE+HOmdJJf\n/wpV7asLs29Vn6j+l1y38iRmA+3oulpeUsO+Hr0ehXZCAPd912OWukAcmq1e\ntcchShqLcWcva+zsKM9x6Nk2kDCOrBc51b5AoRmWVNTOO5J/6spaCM03GxIY\nrPmpKPX7JMjUgKQlH+jZe2yXx9o6DCOEbWxYI5zuRPnZ2nmjXBR8fswqzZZ0\n9TTp\r\n=HEtr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/list":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/menu-surface":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.940550232.0_1623958907616_0.8126541509636778","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/menu","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652d1ec52a04a0fec296616813abd5c82d3d1fd5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.f705e8048.0.tgz","fileCount":38,"integrity":"sha512-KXw/4tjHp5fbOXoIRl89DE0BV/8ne8teJ6mY3bZctRuUNg79wEksTb1QPYF9f+lDfOTK3uK4K5vEgTwN26Z1xg==","signatures":[{"sig":"MEUCIBRmxbcqeqskjh8omH0eB77egnbvjkqwomj7E4LYNcPPAiEA3aHGlBjuX6EnuxDQPPX4XqXhJgA+hykn92rFoMxyVWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLsPCRA9TVsSAnZWagAAyWAP/3aEDiOIoLb0VJmhIlRX\nUd/irvxDLvQ5EXRUGj5QeP0J6SjT3rDaNOIr2OMNvl4s84fPSgpMKMo6HUsX\nESW/e0OiTGqL4tZBJaBPjkVyeR56zmNlo/4+iXE9m5d41e8mpICPpIMecb8q\nsz6ZlOqFP7Dn4CLivf9v6949l/lkADyj7aHAAQcEsKv0pL5yVaQMMca7SKMv\nEvxZDb1g2cV7uYMiQI4sgYGwT/6cFrY7gC08Rt4O+ZXF0omaEGU43GAYlB4W\nEWrKWkdyBcY8/FLflCdecMP93j1twnqffPmiubI//BmrMszuIjVRf28//pIx\nlTMGsE7oj3ULnQUuWGGP58g8qmvCwP5n9PUrpxOOt85LC6/ZeOP3DeQG8mm6\nnRqHemuisR230oiAI6/rmR6B537VYlibHjHSLdbzdBTLOEz/GqpkXMafi+cc\nE4q2Oa7B8mmuGyr1CWbCeFadZ2iv7Lymuv1dRNU9ugxCgPNoX8NfBX7wQNAa\nXMViBFiwm4SRNP+DTQts8CUuZAjTCZHHKADzpCZHTAgXMFkjQWBnBOTCGJYI\nUcobDzkipyRDroibweM/Hfw1JVJRvzOwV7g4hDPOTkigOvgJa5Hkh/yRr3OC\nVCgQZkXXzCC8f2WsuNR2jSJyznW01X6iQvhfKF0dalYrI8BODDQh2adU9BMH\n1vEp\r\n=iwDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/list":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/menu-surface":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.f705e8048.0_1624029966816_0.46022249859963926","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/menu","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c04556fc1ccdfcb1f80084405260fd0e7673fae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.08d791f37.0.tgz","fileCount":38,"integrity":"sha512-AMq8KE8FePG5s8OM++/TVNF/kDBfwV5fjG1vQLK1zMHzzdDsh4i5Rop9JBZoBp7XU+PByNA3bzastv6qYqiXkg==","signatures":[{"sig":"MEUCIQDGoYEOTmggL4B1wQ2ZCrDroWHXjqhj9VUOgBAHTtVw6gIgfG580Ay16aRjnqx84A92Z7NQuiaLMgmIH255kjSK/Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxrCRA9TVsSAnZWagAAnfsP/3lNWWzhY2sQVxbbFA2B\nG8JErGwKrZj8+UJ13Md99sq+ep2r0LmZu1HMW/ptTxCwBFFZogNKEmskYcGc\nsxeAld+p8+82gQc8LgAzmGnhNq0/1PMM90tyk3lOb0lJQcwRq8lmPNT1z/Ta\no9/8t8pj8CKoazX2yxHulQU1bwCCOlGdqez5sZgvlm6r5cnPT+WwrZMcZcsI\nB4vsWCnv8OprsI2Pv//9TpSZrQsveEG+1wigUsi82CRvG13mADaPgMlUAj2W\nQA18Qqke7PDF2UUzC5pqcs/Q50QYxbP3b2M60JFHn76QBjn52XZw4hXSoNtM\nqXHbLp9v2FXZW9eEkFHuFqs00+JOgA5f/mVkSxfkiDO0CAdPPJ8hS5FMF8hX\nZSKZTBM4fKe3YK42cNdkl0eJqzCH6Hi3hnlVDcKeZduGi+4YLC1v3dlZl4uu\n0evq/egv0Qtb+8paw3CgH71qBF5BV5zA9kEO475YO+hU1u9kmx9IkOC/JKQu\nsPIZ5QyR4iX/PZ7pcrKu18akcjyaxfMzwZBuYJgIWwjhp4R+x9vR3wdIHKNn\ntx5XvjYxUb+9M6YWp58FynTFaoR6s7BtqtiZ07CLXDPb2jVIfuGluCJ+dCnq\n+ZYWZNkp6n/mrG3JFu5C7dh0ftIn/OljuUqeI+8UPDvy8H7XdgQMkM4xc5lC\nxSmc\r\n=98Bp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/list":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/menu-surface":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.08d791f37.0_1624050795086_0.19709502419220226","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/menu","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5125054a98a15b055becc49c5648605fa829bc98","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e38d7440f.0.tgz","fileCount":38,"integrity":"sha512-Ff4BT4NB/pprVhkMGW3AaGgu743QujhNCslS9X+ZDsn7b39+4VjrfZsDMcxodKAIcXH+EXlGrbF13R5ZUzUH/Q==","signatures":[{"sig":"MEQCIBFEs00xqRT8gfGIot0SU8l6kQ5AwRwDx0PGmLUV2E1LAiAgt5AWHxE/pl1qUk236rL9i4OMJAUHYWEYlMld2n5DKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9vCRA9TVsSAnZWagAAi3oP/2FvsY6yA+dzYEU6ISDA\nBJV2CHnREA5zh4QmLrcIWcNSNKmInwupWmZ+mNj2X+2TjXi+Gg7fDDQXC1Ad\nX+Fwmz/oSghqzWjAunPrkUzxxLTsjylJIQ0gdEYWaln+V77Ndp1+Nndw1oLa\n0MNTZmMxI7KY/EscixIsyiVzJwMd+UyiBhfWaa9PVC2qRKOYF4BmpDaNqEkK\nITpNJHB6SSwLS80Tv4Id9e1gv5UGvMlCaHKJq8NkN9MDqAQ3qseFWXyNmKeS\nDkbVW6H9hI16fv+ZekmkJQaMcE462sLlQbmph2GIHnEK87FIKU/9oGgm8xZt\n6kJJTqIGbpPPKLDKXR9wFcAZva0f2BBwZAYcxcy7ZGyHPJxjSSjTAqkDS1U3\nAJeauCh2rBgZHzkmVuOY7excFyQ3k33d2KQ7gCtOkyw/4LndYI5qPwsgogJG\ny/M93MOrFg4fMGlUENtH8f/2kY41rNHcVUKosZf5t/dX+lhyqePAffaRqi0y\nsF86XRAoglIbNJYnKj+Z6s7zG/pmb+KECp6pHsMnD/JLHuutgADGjWpqQQmN\nTAagnNy76vT7tvat1Apg7jNiV5vujfe74o4JJwz1vsco5659COpkzTfJfLKm\n/XEL1GgxAxkljYTJVWGNTD0JNZYRDu9aDQRoBcdBZo6RcOfHFcVQM8Ksg2Lq\nj54G\r\n=eUqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/list":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/menu-surface":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e38d7440f.0_1624297327255_0.08765352746274857","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/menu","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"010f286b927ca16bba57e112372483ef7d055374","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.75900a5a9.0.tgz","fileCount":38,"integrity":"sha512-6xPOO09w+u8rD9IWOQ29uYXcgY4yqKnovZX9XAIF/rmZdvziZmOx0GZurtCOcdaPNd6EOnxIhfwABAQosxF2cQ==","signatures":[{"sig":"MEUCIDlApr6wwe1vU1j1HnW7ONLeGB2BLDDDpQGoaClcgDw5AiEA6FQi/f+pj2GBEtgfNvw8b1nFxCOALcOVpsb5ljCEL5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NywCRA9TVsSAnZWagAA7MIP+gOIAo3636d+F3poDunW\nCJmCCaCT4i8jrZj0khYpx2F2oFmzwAo77V26UoGu3feUfwpMUcj63pujjb9t\nYM6W3xhmXjzfBlxxOBgmGTGjfZShyoYlTrs8asJJaG0F9pkJ/t7Ty9oOOb1C\n9OFQFUvuIwpTFcQsCazrbvWWDFWYnF9xcOvH7A3i450ZJwTrR41pXei7kbSt\nwQ/Bj7Eij78EMwmy6prWsIpM+VNmtf3tBGATdPVaCSNN2eqDU1znnQN4lHXH\nwAl9jqb6FtYx3MkDNW8NQaX17msJYZ2QnNBvNMp8nLkmGXPd46ggqoVPSB7E\ngeDcxTqSWJJUcx+GVyi+AwnkQEfjZJMubnQC/gZdaM4zfy6ECzqiuSnKg1sb\n2n+oVcHpCqmslONUtbnFSuwY2KfQWknTqRDNAJLg8Sa9HGHTrI8aGUlL2tiL\nL9onA11UvLPS99IMrPcI6HWlE0IfQCWnVTU5ewv0Jo9AHzoz09jnBf8HT2+U\nUvkHgzPaDf8iPOlXcDCgggSHpefRju5wqTOZ11c9k93mFH/B7UEv4rRv/w1K\nr8MR6dAzcAIhG0NTB7DPI2nm1neeTw3NsoR43nzBmtha2zQix/VfVHkGIom5\n+oXtBeibr9iveKJGXgsX54tYewLTTuuJToWWimQxmW7yE/tl8VCphNG8WqYV\nohbC\r\n=HR8I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/list":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/menu-surface":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.75900a5a9.0_1624300719809_0.027281208701199988","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/menu","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1a1e7de6c3471388439e45067b98cbb407d1b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.33e6f50e9.0.tgz","fileCount":38,"integrity":"sha512-LLZXKZ5FikZHZV+pLxNBKAOyQD4r3DcGofuaU2mk+dlHpBQ56eSXySCm+lf4OQ2+fxiolRlT9Fi6V5+4QyPHOQ==","signatures":[{"sig":"MEYCIQCgeTX8+t7Rquz/p50PlpvnKTeRPKfCjzPTNHkl4we7XgIhAKK/DQpS/FdD9tXULsCFO54TykCvOtm5WSYWt+WncX2H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyyCRA9TVsSAnZWagAA19gP/0RUQEKTlUX/ZKGas3gW\nqcdwE8vU6kanYRtjIpUlPJ7hDQ2bXpal82r5VIAvPWYXHjoltbQJ5QZq1opv\nb+h8zumPrdfZ+ofE8USCOrxa06jcdhGRv0Mk0oVjU4C/AoIzNRLOR12aVFyV\n6D3sze53ArZyQyc3v6eU+kons3hHIDtsRDErFpN1F3JWzwtzfc3G2ylxj2Ju\n5A6wt4yHr6RDQGgkSQ6RfPxR3WHRYHa4SsaHvXP0CKPU6hVW7L2tRuXwHgzc\n7JkIsvK+AKxNFx9nPHz2S/SGtLltBFVhBIV/I9Yx+jZVz4Oc9iJJWBUzWRGA\nTBe0GNzU78axHwoTADydnFg9SEGLgaRMDBoQnWWH2jTYD4ySUceI5c8Lo25m\nJNnVumNXRNmPF3SY5aythWPDRIljqRGiwF8xGKRQmpxKV26T6qf3Vqpnajlo\nF1ozZOTXx5g8xfh6C5MYKdjQRGA7tu7nHhOVHDud6AKXwLy22jsfKzQgiQgI\n1So9+spp3/n6CxyCQFYkT5z0rfuYlANNVk3BmzhZQQPfYb5HhH9+2Da7d3JH\n7sKxSwmdw23PucXiC/AvmYmh8J3upscAbM0daY4Xa8sqY60zVoUmc/cDSUVO\nm+fEi/gwxLiHA85u0mVckTwZzDhovwRHU/beuXyPElajg5ci5As0laGrEXNc\nE4v0\r\n=5MRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/list":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/menu-surface":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.33e6f50e9.0_1624407217507_0.9937094799896611","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/menu","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327d1c077550db5cb8ba1b07d505288472076f4e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8c685301d.0.tgz","fileCount":38,"integrity":"sha512-dguFlBkN0C9+OOLNQVk834mv6bDl3KK5jgypHXyAtQLj+ODC4N9bRgJUIdvoVsc6U7ITHOyKmaM3d+fjw1bDbA==","signatures":[{"sig":"MEQCIG12fwB9xovM7ZYeInx/fFicfeISm3kWE4L883XYGY7uAiBK2JM0VVXN/yqmVaL5sjBvA4V2hRrUi9x2ITzbsUWBGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03zBCRA9TVsSAnZWagAACd0QAJVWVtZ4COIjEZPSXqu3\nE0bd70/ldYYWQ3OcM1RTQ03kzkmPsCsY4fG2qdetYXUcaOuyGfV/b+k8MLHB\nfgwV44ubALVXzFjabftl1yRJ7P07ox1aKjMrvCSm3zV/Gu4ZZKFHNFHX3FSr\n+gq5Z5GJ6HEK+dI81Lr3cB01F7broKlh/sG1EU4Powd2Q9nTUowmmVyDDTx0\nN6CVFSRXAr+1gzey++fqVbMM9xYCZ+jjeywIxKilUapy7m23YI+2A+0GeY5a\nunc3wnUf8CAbKPqwUycVslZRcOkb32/UtGJVJh6ed89JHr/8Vj/ZrlW5sa3A\n83TptNxbzQh7+z4cSZhwvnCQq8oXJXXAFH7G84QMPQMgrj8VWrnaoFtZ2voY\n5q39FdWcfKDT2wx9+l9jJRIq8z3LwEGysgGfW/ILS1Q1upMpESdaLm+gi61R\n2iNFyLm8J8k+Hhclfd20PLpIPCFjsdy1ORDJ/p7ShLR4CJNEw6ZPzukD0WJj\nCHv5VwPKZkv1vMXTly2Hd76iCBET1NUZ4lAwpVr1LDJ6wKZRuMmiHOXkhBcs\n2C7d3pA+nbKDW5pJtSolpRRPOJDLb7OaWF+xpWyWNwEj8haK/Xp2FRxPhfjY\nKT/Pes4f5eJtYVJkYirlgTP3OtyOvQRBaKW65IlzrCFdoGhk5hBx2I//w8vQ\nkqKx\r\n=DIgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/list":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/menu-surface":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8c685301d.0_1624472768231_0.3302357463020018","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/menu","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7208db922949924430a1bc079389318e1af99a79","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.8c7d994ae.0.tgz","fileCount":38,"integrity":"sha512-Dd1OV3Ix4aXAUmAdPpSQc5N/8CnsjDrm5xVTV4ILcfSoHd7IqBnpRpYm7seWdZ3Tqom1AiH/443N9LMHp2BQ3w==","signatures":[{"sig":"MEUCIEtNVKBGsmU2lUrElW4cyFMLYsv6PRkWNSEOBzch5zgYAiEAiA77Y7jiz9Hos6jpsHTd8OWRhb4Pmo+Z0a6fT/fpD1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04t8CRA9TVsSAnZWagAAJxgP/3boU7qmappwzmpS81LQ\n2KwTa+E1yVHTlf/fYsBt9onZx/yycVy9iXbWdQIdwO42oqNEAUnOGfUYH1E5\nfOXWNfJbDP72U9JXS19r4jKKUgNBSkEYwtn+3opghxbzg7RsjnbI4AM1VTNC\nkBEBKg0U1e/icyBguxKiCJ/cM7VteOH0/9dO5x+7v8YwS5mZ4FIVa4stiMEF\ncQrS8RpA/LZW/szdh+TUo4Z7YrFFRwqxUa7LHtjnkcmaW9Ip4sJKMZC2UUG2\naYxjrroM7Yz3MMnHWkXZWHCWOvcenRW3dTeA92D0VXisvpTqqQkRj57HBuEf\ncHWqP5uOxd6MdS3hRqEVOeKmznSKncCXasmE+AFQMRuF8y9rScyo4ONqbkrv\nM97UJVmuQuEUyzNnMzpKC0BjMclhCuBkCfN0v7FvJt2w2rJVbzqlr/32IohQ\nqrH8eofI2V1NTa1k29/AdXhMsyeM9/rROVbnrJrv5/gAbTzQ162VJpCUOkPa\nldD5Dv22YlQ0dytg2xUFiMMrkK4Bw7F+CEIVbQw4hkBsB08B9U1z80PKLFE3\nlTJN3HLmvNNcE/E6Cj6FsbmCSE/BwaMBO2yKeYunb9EHLV9q+C7p1Ps91nlr\ngNeDlpzOHxsk65h4hPbogjqtSBCZLhLjQeeqG0OcKqhZRI4N05YJ68qINZu4\nmWnV\r\n=Pv7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/list":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/menu-surface":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.8c7d994ae.0_1624476539651_0.16230479614028637","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/menu","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"844b29adbd1f09d6b2c6c4f2edd67e5bd6d3a619","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":38,"integrity":"sha512-fwXw8fUt40eOgt+StpHuiJ80ohEa0NW4I5JN70U0U1F1HEE/AWrIdHA+xtevavgVhAVtfNMS5BV+qoyHOg/6xQ==","signatures":[{"sig":"MEUCIQDemJfGOo/C1X+uU7J8kWj7qUVZSA41ngZKG3I2fmhlWwIgSsiRspGZf5McBzjhKckziHPb+wYi33yDrEuVvH9AOa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/hCRA9TVsSAnZWagAA6o8QAIeSXpszn9wFAcMvVzlR\nOW0DHGiA4BLssgcjJ2L0v+epISe0ALLeAPFBB/eFsjD5gUOyz/q8VsIqkNIh\nV26EFCNWIHJUq6MZQs6Xh0mKqtwikAm4wDv4FgTN31gll+VnGk+aioeS3NjB\nhP60g/6o+1YlI0UYGJTerTZQgKcsJdlPCmqpW/wInFsnzjDv1urCxz9JifC7\nRhfoVg/iEntRyW/LWZ3O9utLGtnSY1uG3gyvjcArlHelp4x4ICYt08zLymyM\nrZ9MF/PYraERnO/CRTgPLupFJHrA5+Kg96kBsclHy+TUNUDzWtUyb4sSX9Ij\nxnEJenq1RPwQPYYMGhniTPpwHQwAqPfm2B7DaVe75pDZAfxLdkIdl3hPgmzv\nZRtPYsnzvvT33Qmfr69pWHtzpHfId3zBLDQ+87efvGfNsqEmO3g+Xl79AJ7O\nKdcOG/xpikX7vLB/gs78Tv1I/jdBJlSyaemdHg1stgAJP6KonsZsVDvhhAZu\n+/CMapdpMtNIVJ1dswtlbt93JFfKtwVHI/beCaPodzBfUNHoShllcbbWyhEi\nSM0ZlXsW/aLpU6y/Va7/mZMfINpXDzihz4kaTynRGY2yx1xaV0GTj+DFEPiK\n/k4ABOT54QzPVHmK0PjaNQ58g191e7KgvmbvP0mYSBjjuhQnInfPN1LgJrtQ\nNxBp\r\n=EuK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/list":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/menu-surface":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4ccd39bdd.0_1624551392697_0.6244692877857627","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/menu","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f6125c636133421ca9f26f2436743275be59857","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.17553e9f8.0.tgz","fileCount":38,"integrity":"sha512-o89ciI0ueyAxqKcUHL+tx6OA+b2UsxFkXHN1+jTzlwPlcISsnCHnhYaShUOQpVQBEecQ3RVHNnxpITW5oBG0nA==","signatures":[{"sig":"MEQCIGDeLs0CYnKa+a1ikly0lpwJAWDLbMHHSITQ3VLYCDi7AiBLweJDYpmUkXYR/o8OTRREvLpmvWdJoAtg1J/1LI4Cdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lMNCRA9TVsSAnZWagAAB8UP+gPMibFaU6tkpqJCIwF3\nUMThOH8W3Wj5md5NxBwQ8Ogjr6YoKeX9z73vySXcabosR9XkvC7gwaYimUZq\nSEhQ/9c/Y4EXDQPEdd1V4yT/W5DmkY/00/xJvXoTOrNTWpzWUMyZsWYCf2v3\nfWNQEIpGNB7CqRZEzC4BvYXx732Wfp8T7P+wjm2dhbuF3KoSU6g81IfG51AZ\n47gsFrsXq1xb0QNYpofIqU+HQOBFLUqB7o1fSnd+qHjTskyJcMichdIT/Ufy\n7bnpU4O86h5FcrvFheMkYq4zwJVUS2490wtMOj7kAW5LyGWcGbtVIYEHoyeE\nJ73dh5ap88XJojHFWKSWJatkdYQGqHEi+4wpEFyIMrwI7CovaZshSMAkD2nP\nUgg+Q6H4cYpKdSZt1B9UJfoE2iMM9vFw5H/TQlPdee+ehToOrVJURXgC+V3R\n0W5Ig0inHa6vjkF0ZWdmn/xjnoOH56Zop4WuGhMTiQt6R6OxwlpLcL3XBiU2\nnWupUGK4XHLrrOaml5xveyiwPJFZezylUXd3XYjV9gchbl8gvc1EdrdxWM/i\nOGrthqvjzdeq6N9rEVT42kCmbifW3iiT5XQJotLixIVbh88Y6Xh6tAOrSMrD\n+ZrNwjD8WHTvrbUD9yf2I1/yOi67ckdB/d4q0cxihQsdYUJfWJonbBpoAtKq\nZJ/+\r\n=1LT/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/list":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/menu-surface":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.17553e9f8.0_1624920845356_0.4452955092554931","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/menu","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"073827e1997282311f4a10c4b652a676452693e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4c80072fd.0.tgz","fileCount":38,"integrity":"sha512-DfkoqiU38QN7xbthaAmROmAGhcUez+xiWRPkON/1jvPTFwIMVB+IFNK7lwCVPwEQznw/Cv45tIgfUieS097VVw==","signatures":[{"sig":"MEQCICGKo42YMObr0zakkZlGQnc29dDmJresG0FycFVAWqMHAiBlNpNwg18U5cccI0TfnVk9KAquvjSJsT9Zs9d5RWEpyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22mQCRA9TVsSAnZWagAApjMP/0CA9RDNpTOCF7VG1Lcw\nn6RNCwaimL/SaDJbQ75kYGLWWdYDQNwxnxTXSxojoRjX/v7kZz1CU8MyJFzW\naLCnYsG4+vhTzy46j+JkBnJB07+2W9G8C89KYMd4Zmz8Hcy9oGj25t4uUSw/\nRDXekON1Z/FIL820Np/aNppK0q7FKf7vkpDlaqfwHKJawhPf8Cby8dlzt7iK\n2ZODOfvUsLqcc0lyjR8N321VgHJ2oe8L0YCqLi0NDIYKbRfjQ/cY3OsA8UAX\noLGvCiKTZU6/jkHWRBozOlLv6Kaq1/BArIOMiFj+70KJosvJTWQnDqRvpWy9\nAN+eJPd1Z4Ksyz90ZhAuyNWI7lMeI/W4mXJtnhXhuTPyBjy3mBK3j4y4vVR4\nB/BgfpSlFQQGNAPrInoli/Atek+Cqugtm0P4H7xMlofQD5wL36aMriJZTwwn\n2q3XWgoij3Hd9Mbmkr3lnHzGMxi55jdeOwTVgxwvmy8kvjQ84Si+zIS/cmHA\n9as3eHE8dsGLjiVltZyXnMtoV2ns0F+1vEbeOcBehnTnk/BZ4we/nAr73cDt\nbCRASOI3AhfU/tvU7wYigFapgaca2lVW5NnE4vl3WNRQcoh2H8DPxIaTIZMS\n0QxKAkdv/PUgRI6Q546YmFG+VVONK82NcxG42B3UcQlFzhiF7g4l4p0S1+dV\nuy5J\r\n=KaqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/list":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/menu-surface":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4c80072fd.0_1624992144299_0.7390611401810003","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/menu","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5332b351c3129ae9780b6af5096a60c9bb995c8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.796811db7.0.tgz","fileCount":38,"integrity":"sha512-xXYTw2kVmLtuo0JCCAuQTr8E+c9sMUPtx2yOIG2+oR0XCdAQ6rc8Bj8N/ovFN8pK+OipCgLEwaxUzFWgnfi+vA==","signatures":[{"sig":"MEUCIFzXhvkUXPeIMM34cTmglEWkf/WvNsOu2tq67KywXk/VAiEA0qvqYuKo5ihu3iXbMM1i0BKfEcvhZSVFwUeQzbaUS/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QauCRA9TVsSAnZWagAATR0P/jozdNSuEQfHZT72D+G8\nzQNMGoR6UPN+bpGKZsLEiPe6cD4SKA715oJqp1o3r39FBfiMddHkOC09ZyD+\nGKhlopZy4n4s9mfqV5R4k535fA2cli9TPriAVojPxSS+nhZGrA2B9AEDnHo5\nUqSC/iqMQcFd0mqyWaL9KMARHHY+9FmQ6K+Bwwdm6vBltbF+tkBcHyvAeIU/\n1+sgisK+T3rYCVlF2VRxVOskInc67mN17hnzq3dReiPy8LfvXPul4zyQMjbH\nJJ/7wXKam9zr/CjqEBbq+hg6bBo3XDPQWl7f9iLIwyuwD2MI7IsADdxZ8WmY\nOIyKQRSK44RWxGM/S/otbB4IghVS72JNKOKh40CXqPW3O6LTBELcOiHpTsnx\nbemb58bhBIyYY9CZMqqvK5J3DzJTlqPHsbfKNlj6LuCqoYB04CUCsH4rL8qs\neZSVY9e4VSjQukUIyly/YpTUDrKweJv+NLQPFWwWp1q4Kd8UDViNynID81DV\ny341btS+nOHzNT2eZ7RbpLTat4zY4T9Sisl9V1GqZ1a0b8GTTKQfBTsOX9JI\nxssTKUhgedeDZpFTKzuF7YpKQHbRgEHfu0E3rjMUUm7WGB5uZ8wMiE2oIqUi\n2uLkzpa/gi3IHlgdQSgS3xhDkkIpocRhBBglTWQhBXcaoRMRIi53OuAj6nq4\nLCeS\r\n=V+MD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/list":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/menu-surface":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.796811db7.0_1625097901722_0.3212018908376342","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/menu","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8f4d9f94d54267981eb5ce5788dc2270cd44356","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.70e1efdca.0.tgz","fileCount":38,"integrity":"sha512-rvBIs6gcs+PRIP8spq5IqQOGAQoKnGFLAqsy9hAjgVNS4q1QlBoWwCDFfdPz6kO/I2PJ7BOtCvi9qW4UuzYKZQ==","signatures":[{"sig":"MEYCIQDVvQ93RyXhUAuoeIhtSgVtbFE/v/TGXAKDPo7UA+v2nwIhAMD+EFsnnKcJ93Yq32ft62gayi/DcrD2vPj4/Z7rj01P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZ9CRA9TVsSAnZWagAAtncP/iVkXpnMH393+omH+KpV\nOsviQs3OCFBjLpqbdPVgBwirOTsCYom4VG24x+sRRoO8906O/4zEOZo5xFfi\nm7nekbHUuczWz0EORXQCPRBCahNVsIabmXujy5Oc0GHlG99nSRb3xuY8mrCf\nZW1C2YTWZe+Ta2dbJToBcDwkWyNY2nUj1AgcVJ9bGJ61mNZZTAWko8fkRCo4\nrg3jn5e7B9M+nZOhQzkUjD3qVAwa3JZR9nhOLJ1WlaryOtpvJ2MNR/9Oqx3x\n2A+a8VmRCxe2b2TL8t2jdeYX1/CpG137Iz5mHrbVIYDUpaWWPDucgpcbcAyO\nqGGx/Jz7GbvU1DGOo5lNRNlUObItzSQPrFi3gFDNl3tGbK7dKtDluYTPwSPA\n8f85xKfnpOrBFa7doxvYFMoAWMU3ejN2ceC3Qbw3VgexWGH8cqEucODElmcC\n68xvThZpoekIvA2H/lfcfVd7PScDP1BhOOYZTg5MyMUsDqUKlqV9z3XexlLw\nubrk7f3PXkf1ZnOTNsnNeJ7F/7d5Lo8rCquCffb+/cQS5IAM0AXoJWzgMu11\nbnYROCsw/oPsqxk4iJAn/ZD+EK91jfwdazFpmM3Vvc3iNIpCS4fCO0TmhJu3\nyLYeJKbOBc8F/aFR2zt27Xf5N+8C1i7ScEBS2midixVWUqD9LfvUOPWl4ruA\naDLx\r\n=8NGA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/list":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/menu-surface":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.70e1efdca.0_1625159292859_0.3078284477628914","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/menu","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22596c124100778ab3cbb735f275249d7b7a891c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.435866d32.0.tgz","fileCount":38,"integrity":"sha512-QmpBXG8HNdpLBVz47Au2YygyVgOyCoPecMNf0SBSWBmKCFj0nw14j3Lt1IZQuIL7USAnhiHY3r0ixovc0Dumsg==","signatures":[{"sig":"MEQCIBeC5PSuTRwJujwjrMdxyB0Pje4HZP+Svmy5PvSOg6CaAiBIcy+CCs2L4UuLZ4o9u+X5SgPE3N/klEuoBJHxG84l2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31l0CRA9TVsSAnZWagAAoksP/jBGGSVQ/cOkc+x5ED4K\nUaq2dnKK1W605ya8//aFLf0GrTMo4lgxocS2Z4PWRsEckEGkir7dc5q+UG9M\n+JQBXlXDOmFRLMDv2taqcE3KJjXQgFHaaMjg2cEVUyGZIhim0Uas5ZwKIMl8\nhAx0bHGQOeOOzWeLtXK1ECPTdGLHKLjb0Qfum1I5IHLC6W43kRKGIIIqTtwZ\nVGLkw2jALy943JAa//jbHKandVCYYdu6ENsIdI6WceObGH4wh+zyWVbZoxij\nJaPuj/oBPWVPQhgAQw8gBm03XpWuI2WUj4uKHmFionzwzuh2OoumrhwqS0j9\nmHzBtTkl5Iuiz9erjRYFdKQigsqbLDrL7MHxU6fk8L7FkLbJ1YnVyjiPo1oX\nCQWtfLENCixsDZsU91TqBXY6iQFe7zuT4KmTvp4uQh2jsIQ+SLy/dtAtiLCK\n4ppd20VJVGpY94eRh0cb4jeV/hBZB176O6RIZQdvUrxXZ3OFDjIN3FrihPpM\nAwKdnN/LnzCD3a870kFI7JZTirbUZcni97A/8WiYhP7HQZUbDOsxtfu3PKw1\n7LxChuE6O/Z4K+Eilh1qGjdlN4ncWjA2A10Z0lE/8xUoZXmH3pBYB0QtuOOK\nsPN38XdqQOeW7P3gmq3ElracokI88KiTV8rbzsLrm9DNG1bgAFrGT0WH/Qxu\nVaWj\r\n=7O3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/list":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/menu-surface":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.435866d32.0_1625250163990_0.2830291372088538","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/menu","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af943fde6be161a35f8b79ef46278a7ed8f7fa45","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":38,"integrity":"sha512-au9Q9amc3NvpLstacxp4DBe7K4fNon4GUh/1pQcm8BuAqZ5XwGM92FM4Rs5uYtkE6WjXHnopuDDMTA7z0m9GiQ==","signatures":[{"sig":"MEUCIQDdtmkTRtHjC3Cdzk8kEtGc1aFpURDCkfaZnE/3h9qEvwIgeTwUWF0YvL7URWdI2UIhtWeOJnT+uCydZek3HvlfNJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jiCRA9TVsSAnZWagAAP1cQAI3BnpSTRxt2Ot9m+rV3\nGHmDqkwkYVohl17ixmEQsC01wfFDCf55B7c2pA6Vzic1lmvsqp/aFDm38G/3\nAPKWR9CjEqLdUkrYohQi6GraeaFWVBV9wX83CCGuKwNIGWWWePpWvSuNXn09\n0hjs6H8SXl3NCoW65WdJx83TSHWIew1DAna0Pgyi5ZzC9FxKGRULlqy2qyLz\neFdXzLzDLIphw75u2P2AA8W3AVoNhQudTyPglBRLxc8YNPt0TXz1yD59SZSK\npabLiXrVUbv+HowPXzv9bOfu933LfOKPTxT9e9ZlmFpr7utJofXq1k5IAZ15\n+tSRKnnutZ5VmwByyj/PqiaR10qFGBky0fzCpUuGw8ivKdBI7Lb8Cw0oJNsM\nUmVs3fBOCvWUrqTHFcLLiFOizm+2/nqClzlVGtEmJmgXCpEtRRgQlU/KVBLF\nBlv4k/3PPzZ9u1U0AFT2TYG+PzFog8Sty5D/iDuAhmdfQGp+nk9gpXF2FS9h\nPMnjNTBNQYHWsFSw3BaVK9+2OijHTWyY/6UNForyXZo/nHOp3OLeDtVkFcXh\n6gwBrmYvjXFulJqvirGFpY2qjuwertiMVpDTWF/1acH0zzphVxrtPtwvd2mU\n9nO0kIBDjEkVLMZIrPC0g5sOJ+uIQQbWiLeLZ1vGXo9/3dGAB/PV5Q0an+zr\nS8jd\r\n=PsnL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/list":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/menu-surface":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d0f9f3f2e.0_1625270497666_0.25702334631974266","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/menu","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe4984adca9a94008e662583eb749cd8757e5ee","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.adeac0549.0.tgz","fileCount":38,"integrity":"sha512-TZA9sR+EoLZ0+4KlZmyLJKvGFbjggJ1vXI/xwjQjrK01CXnsDBp9Z7pUtWfq9txrcCfWAQ+1VnIj6Fsh8UEACw==","signatures":[{"sig":"MEUCICnAjvA7yJBgER8gohayXP30Q6niaXj1DG6yPmgrUkVFAiEAr6lx1Id9JY4DBwPDYaEA01HkQY5k0NfuOMJBemmpTrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xWdCRA9TVsSAnZWagAAo9kP/jhYYNwuBWY5fEQOIJHs\nVCYL3O+pI3Y9nNA+CC+tmojLTMWDhZwvlAe/38Cw4d997oDSuRQiVY30gn7W\n3b4DL0duEljZwAXAluTCkpJjjSGxMRIL6MUQ/9vmYaopD87LKxYPHDLgwwHc\nSzW+R/5CWqm/Y46wOOdBM2iMOzXHMyLVBDr1cKjG3ZHPjxrAJIJya5ak031O\nrUXq8aVqBY2diPTbkPII8ScEmdUtmlqFl73ZXb98vOiLnMIjZ3t3m7gZszya\nYROblI/LfvosdjXOURtxm6OfJXG+JFz5paKp4j5AL0YteuOXusMM6Cf2hf59\nzH2iLGh5yNSIKoRNTj0KLZXdDUGRgL6v1jGD4QrvCQyKvDWVZDoOsfGox9g+\nDhfq2l65AcX+B5EYPW26o7KaiayIGqHXWfZho50rkzQcWdbg5qNu4o+jqCBb\ngfotsjV0/2GCD2WJ6wIWdczkjA7dlUufdq5p484vNLK5jadz1FB36pV8QTam\n29LTzjbNoKFdD5g07NdlIkJmsjpg++3YqK8lw0HLWCm6gWMjOEU6rGlwfuk6\nSJqaJGHEMIo4BTBLrxMIZ1f2ehyBB/mCOxBObK9LkApGVW94ehKVXqcuOlAF\ngaVufAsPr1tk4YGHHjgntaRGFfs915JhpQNcbioUtaBdBtQujevmpBcD1io6\n/rul\r\n=W1XQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/list":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/menu-surface":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.adeac0549.0_1625757085058_0.9726999562891601","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/menu","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b519f5463100c503fd036f33648453d87f7f5f4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.068fd5028.0.tgz","fileCount":38,"integrity":"sha512-V/PRk7CP15fkU9AsA1bSktFmg1mZ5m6OCVCJpC6dqFEuqsyZuBKDMgwwIg6pOz4k4S3cOZIIbw1CgXrz7kyCXQ==","signatures":[{"sig":"MEUCIDJ67vMC+5ezjLTTdi7zhNiziJyjnEEd0QkVjB08QulOAiEAjzqAgxGQbHXCk2obqbK1r0WO6L9D0Y33swVMO5OeJvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xvCRA9TVsSAnZWagAAOuIQAIdJSvYo2/n2UgL1VZUQ\nLdGeRNxMtLMcF7k1eUPDO+Uo41sP2QlyIB4iMnkkw5X+/T8wtiA/Z/GLhUJg\nRJJKw01HBqtAjlO5dWOMOFrNp7QoIoOAZKLvwWbwu9foAQonAEsGhM8bIP35\n/Syh2BqDkP8EpYlq/ItVDFVqI7gPBy8KR6uVmJf3myG/ZY9eG+XeLoYfjvJ2\nfQVv8oCv92GkkbdTccirdHZOLYlg3KUH13mKkzxarTagXgQFeWSy/u+9tATS\nQGJW8WMZI75ew0kvDuY4f/18KzmwSouVdwDqvpQ1CTg0Ktkqj/fA3D8tOTeZ\nlsFhdXuVOAvk1fFniZcIkmqR6zICe8zODW1X2R0LQNFhHDBQYnTcu3bf4Xle\nGod3vfPgBcV50yI6Gbt8jAjcebR5+Qmi9hgNDt3sTf9+dJkeSyha5MMtpHAN\nIyY+5kZUX54Vp5g4NRxf2P+kOqKiGzn8/kfWz28iNr9RzzzwNKcN7N6pmfaV\nSjj4sVGm78UWML6gfiTvKZcTMYzRLdnsxyTrFaseLuyV9rxeosm0pRee5loD\nHERBB0vDzd/o4g6gSi22ff4ELjpciolKdxjGKfn3E1SQTGmbUERKvgg9WiwK\n/7vQXgmNQSuHeL5kAaFxyZUzWBaMuYYuPM3U/WJFBYTFF+dLFD1DZPLtgiCK\nKSAX\r\n=Lck6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/list":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/menu-surface":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.068fd5028.0_1625771119203_0.11271848446407784","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/menu","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012ef818d085cde18a4aff242726f109bee8ac8f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5dfec7a14.0.tgz","fileCount":38,"integrity":"sha512-CCO+rqdIdgFmZOiqBXPcFw3QUm9Lg0RbKimX9Mrr0NZJPITMq1DpNT+NaW9wFVAeASLHewWFfhq4OhVYEnhpbA==","signatures":[{"sig":"MEUCICKZqLH8oMEKcPhaLVoB/P2Suvrrbt/39usIBCqUeOU/AiEA3uSOZHQLXNfND0xwMGli6NTpQsyhT/3sLAKzj3pg9Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":742509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCXCRA9TVsSAnZWagAA0C0P/1tLl+m/Rh1lOTGjZult\n7HwgpIwytNER01DYXb4wRklsJ9O1Ntt31Kw7ffuNoy5IEboMcoLKeAzhfpwT\nRI1eHQ49OdqOReluTU6ZFyL8/aKP8bjPhjChs2UfCm2aPkJXcTZWcMz878TA\n1ZqDwp5sCeHC3DV96pevXx2DemkHC/MBdML39J8oOQSeHkonlSOe8vO4uf6f\nCn0+QbMxe8W9Bi1Z3GCGIrN8mVsOgWb+Q6AKdagxM74/sOEm5wRAlg+DO8Vr\njVQBh8RcvrBXWMC56wWbvVTFndQpy0F1AhEUwuK7FsnWul/eW44Ue/19cKOr\neO7eZOJqAPeHL/V3JeeQh6wgU/qIGgUo8ADRIoMXA3R5/dvSLXXvKtNtMVGY\nYqEi4Fi5pt6WQKiyI1jQKrAiKmbS7JY2YCqWheaw73Ff88ixpaJwDEFoOo1L\nU3TcEoAhgsOzG9RJqOZ7uLQ+mS7N099eKgZMr1x1lSgP3+qS6y0rYJmihiFG\npneMjETktOEPp/jJVUpyYDhmm0Fxa1LuOdatEbggRAURY7grMcEJzVKUxeuO\nDOlQNkT2nlCZwAYXfSvOinu+elJi6SQW0HtmN2LHJpND7zoC0RxbJ+I7gB6S\nt+6cZJeXbW/3FewZeijr6kKMOUaG7Fix2ATQ3O5S7JUUz92lcWpOBG7t6DY8\n3Jse\r\n=OC4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/list":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/menu-surface":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5dfec7a14.0_1626120343233_0.18501652441907734","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/menu","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9422d1aa33bbf917290307ac68777332c005f0c0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.07a73750c.0.tgz","fileCount":38,"integrity":"sha512-Sj5eiUZ0zdxL9iiaW+xCZ5JUu69yTbM3/wAWKsPSMtCjl9jcceHmvoNSRBjGG7RiAeYsr/xH88072edfe241zw==","signatures":[{"sig":"MEUCIHx/hJkUeMGp+nA0gekClnGFAGtFak+hvacHJYfpli58AiEApTdmfx+Iy5RDWSneqyh5A/M/HBD6MXLEmvN15Nw2x0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWWCRA9TVsSAnZWagAAN0cP/jJiKh/6x9nvQE2eNQ25\nC/AfC/yW5udAn0q6M1LcPlVoOfq+07+VgypuuRCuSsN0wvvy0g0rRjmSQdyV\naI+mJcRMdDb63U9i2s+B6MI6aT3t8zEXy3yWya0SFShVRYPDW1EZ7bNRWiLy\nGrKooSHJmGonDOqhxIBF0UE0HQw2Rmldeoxd6bUucWmYWpaXAh5tz5jdizF3\nYk4uH3blpDJDli93Ppntkueneqqkt9tZ4iLZhsNDHnF8P66bVXH/2xJfkWXk\nu2ELATSaeqkGSoLk2C7B5Bl8dgwmozeYa1viHRQEPFDfYqsx04opY8mURwI8\n2t6QAmkjb5AfAIuD8EBj0ilpsWDBk7Y9dMHBpIkDK2v5YLdDkPr2QLR2/7xj\nkOPMiyy81NzK0l4Cpj3jx8A9YNQgeJ6vOLrrEz6CqQ0PDu4x1y6NJcbs5UMI\nf0YVjabTss6r6bQ0ZdYmN34SPrkE6POSjCqTeXv7HFbxcwpIex3RrQvbpEIa\n9FnBft3mjcqE2tecyAA7JTEocHq3O+EDwhxEQIbTfyoF71++WxjIuvTxnJEq\nK+GT/05g/aHubSsalHCxIrgD4g3jO9qnU7kYy8ZxY/IOblrTq2ehxKYURaSh\nRLr45YNuDzZ2jTiw5Aojv6hL/arvgLymoU2eqcive8aYbpMYeKGNmu3ov5QX\nDWmq\r\n=di9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/list":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/menu-surface":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.07a73750c.0_1626121622235_0.5992819450178972","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/menu","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"182e292c32c76f67ba20d79b16986d8e67e74977","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":38,"integrity":"sha512-Vp6Q9nqf0Q4vynvl9Ny7BSFHN9avFSp4SUtgT6kGXQbrb7CyB9jrR4KzewXleMTztlTwfRN744nqvMo17B9IiQ==","signatures":[{"sig":"MEQCIBwY4zeZ5CNS6ueiXwz4Tnz6WWEGBInCwvcajE741D2pAiBcYUEb/6K1+8afzHAdiR3IoQJTsYWesdnbGGKsQeYzlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PH4CRA9TVsSAnZWagAAOeEP/iRFQf/epNiPeJcYz//9\nWbdu2Ys4KdNMRLfE8kqqMKdJNpxeyzLe3+9NZJoJDQ+Uh05KjAGR/cVZU3ts\nulwQyLuARJ7A+IDFMEHBF17RBwP+PSizIlHP1q6AqyNQufiH5ZqU3jaH4+tp\nN5GytnZRfGtJsl/xRM3XykDK2AhDlATxnesyoG6norMWs6Qk1rrSQXE3V5R6\n8xQX8ZhaEMBOP0Y+MaOmRIWm+6NDXItWanedo20ZiX7/89zJXu36fbmnoH3Y\ntod5Ov9V+Eg0//QMjT60iKB93/NSZLq0uOsniNO+Vczotrf/0KIjLuMIJ5ax\nMhtutIquZmI7uXeEyT+AdHevTa3Vfpk2daWpgwBWIKFZPJC03odmLhCCAIoZ\nifseXV2D3zVic3MLVqYNBUxnWqZ18fC8o+MwK43g0So9TFRBciGxYN0tnGg9\niR+i84TN6WfHYMWI1ZZX6oT1LXmpazFh/uMsfIyfp+GaGi6VvtDoBK+wVFtJ\n0OVh+VrBX9pJp6lKHqsrSQqM0zmYloOhQXt9ISOCjYPD9JSyPugnlV2n4Pmz\nmJO3aqusT2B59Fb15jMzJKcRo6WZxXy2Ffl5fwkB8yW0J3wNHKK9Ys7pRDRb\nnsgN1o+amnvA3YJb5ld8mvvOKuaPSKlV1hoECzV7HV6Nxd5PYojXebx56vzv\n3ouj\r\n=04bR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/list":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/menu-surface":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.3e4c6dca1.0_1626141175895_0.8191989694337949","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/menu","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4ef650c4fdfd2d12552196405aa7475a2a35bab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ea77795b1.0.tgz","fileCount":38,"integrity":"sha512-mjOov8UURXK48dj1AU34GgaoDEOZ8G2cAlQ7KAlDTlz8w8zs91RxI2TXhzzpaYNW3ZgmsAJri/4g14wDXHnshg==","signatures":[{"sig":"MEYCIQCaQ8kBOZjw7eOL/fE2mjlfc0xobi0hrgomKr32Z2cgZAIhAIoaaVr5VLAeBynV6QzCbfUEiVqXhd+QDF+PuJGWUlW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZkCRA9TVsSAnZWagAAebcP/iLccml0FLWxZwYYyzSM\nN1QRKKdURv47GSnEOT3sn9PQJV02FcRMqFZGHlgh4hzQyOWnC8pl1EFqkmGw\nd2tZE+tOjvoln5xESaeN13JB+LeHkqyjvVE/lHt496n7ijE+JVIs+67JSy1e\nAFRvNFoviXhqQrT0tfinJkE0qyLVH3FdPk4QvvtgCb/OS0cR6nwcXU/jILch\n9/91jn+K2iJVImjxiFd2bfAuchZVNCxS6A8xUhfqknDMGG8bVPPbL8mDGykA\nm2SCG8vzNWASp4QrbeBauvjCnv1zsIoZB1WByzHSuOLgiBxLHn0Qm/KglYGW\neQ5dJi+zFP5WQWCUyWgalR3iqEKVQqy2Jxm2BZuqiPw8J14CAs3urE6hiQOx\neYpT6fCxnFxdcUaBNiTY7/AgwenpgEOZ9YwHBsTFgOLyQ7frN1FTJABpPiZm\nNufodBzcAiAalFGWL24ODTmCah1Hytgca0gKJgNLZKkXxMgBAie749TB/u7+\nsDxiYhqUoI4Qxqfkvb2tust47R+fTR9rbz71AaZmAXN9XblCj8zN05wu/Wge\nMgjqWp771tmPksOgajfJsc3XXlSPgO+t8ygfS6p6y/zi9OKknG8YN3+E6+G3\n0vti/cVCnMzAVJJ8VRRsUqGvQvfIxDb+kYNxQFBYHadOyeeFq/erWcxovUFW\nhM+R\r\n=wDTk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/list":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/menu-surface":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ea77795b1.0_1626191459967_0.8578966298819832","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/menu","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d136be99128a2e18c5530e863e2c3ace5bf56166","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.15a179fad.0.tgz","fileCount":38,"integrity":"sha512-BJImwceKoRhe8Ft2g0zDIv6AQLaHljYqoOYMqJ3EZ5kYbVQHp3p9+lQ0HvUliStDDEjKtTUNg5MNZxHEKY9+GA==","signatures":[{"sig":"MEUCIBbcj1EUwQEdWiDW+PM0CtGwOLSeRWzQrhWq7Y2rEYqtAiEA7+0s8AbjxisGG0fk7cUOjKjfAkCCealUu26ebK0KkCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dc9CRA9TVsSAnZWagAAcLkP/R5i7LJC3BFZQsys1U8J\nVEqVW9OsIeXfYkNagpetgOz3Vu0U8VO2yn/TCHYQERei0VN4/KeVYNIYXkbo\nTXMzr9+//Oryh1K/UBC3NM1S4Ve8UUxHwMvXjnZQJ4tLrX3gTZVmfqbF3671\nwu7J7AbfkyqmYAotZBJ/Ev6RGUsM1UtzUk9NOkH7Ec0vsWxC/c5j929wfopB\nvay8eo8CMCt5+x6onFSV3nI+uvnfjJzJTXNXhXC9ykaj3uGmG/bxghCgoIjM\nL8lfu3LC++RnakG/v2klzMLLdJYPpQ4y4GdvyqHdsTTAGV8z2out5gHBlAhW\nACutfuSn+xJpJVPAeGfk5RmXGSI6m7udC5L1aCZOFlGVK3bTzyOeJBO+Fw1z\nnDCb9/EsOuiE6n8yZgeimI66NvO22uidOiLsXcr2JH1TDssFcez3Fh6KP5pq\n45b5moLiq3Gxf8f5qyAJfTtk5K5bgocgVOaWI7Aa01f9bsZJnt2r5+cvETTT\nSgXPqoZ6XKCJu2Xsveb1YfJiENzuEXFerQx/6DKhnnbsjJoDQytPmV6vgjK1\nn1z1KqpTAEyXmT9Tau8B31yi0eLCKLj6d3OeI15ocHljJYBZno8mtdgRwzJy\nWJtwD7KG3F9odU9OXf5i8iecF7y3ans+y06Aru4Bd4sfKsUySFjTr8ASOO4J\nO7/9\r\n=UoYt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/list":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/menu-surface":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.15a179fad.0_1626199869113_0.8514084795634098","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/menu","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05e44a19964629cf74902ca5af1c91ac02d4c2a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.c73142a1b.0.tgz","fileCount":38,"integrity":"sha512-zq6hwYKfAB+JlVgmyh6k8iqkPrtQhd5LxAiGWp+z0tZ8N8OTmVm8h6yDBqw42t3lZ736b21dGFpRfllnS32Uwg==","signatures":[{"sig":"MEUCIQCwPGaGZ9bmZWEWpNI7mrRncTiEHmIVIjPUcoJZXaSoeAIgJLEVR8tsLP60o5wpYwNpaLA6EAOZkL1S40imva4oVVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9hCRA9TVsSAnZWagAAsBoQAJFww9EiXue2W0PIvJQo\nmx36cX7cuNbNBJjwiuUZrS6EwNYbZ136gf04SYM5P44rRwiwPIAfnQSJH5D6\nd5ZPzWcOoShZ9qJQMSyhN0Jd3KxaoF8FkJIuE5DM6HIneFWDzd6FsxKsB3MJ\nY3YeaNtnzSUywWrOKvozzRlI4BjduWsZrHUTnIdlhzO3sMF8HSPgUxGKAes+\nUcH6OoXDkzjhlsqFWtxH7IZbx4rVKnvq7giQ3SEmVNRGEOG5C6kNeUeUAN/O\ncSjyftpSzsbb9qv/A5kpzsIvrrVUC4MG82jrdfvSDfaSRsnMT4OS950Pkq3J\nikkd15i/hKDfKIVVCfbQkmAwdbKYcPZ/pStbBmmGMSQCJQRtFhQxa63u6wDZ\nsNxOY2Vs9XCPrjorHOWI4r92hwxC1XkGz0sp2vmcGS0uv19fG092jmaL1g7W\nVhb31MILMEbVJy6tt+hPcpCcQE6qDDDJcdSgAeKOQkoiOrf1KYZAexn12SOq\nRtxcJv9ZBtMUo3/HXeddjw/lFP7DutetqOlT46W/1XE4WwDVtz5Ud47yYz2M\n4ba5IQHEk5lduNi8BAwxscQ6kEoXo5AODxMQmcneyiwzhITJWcpT/bOOd5/2\nrgAL8FhLimzo7X7YOMq1ALWB7uNnjVNOWUcoukMXMkxrVuZKzNsRaryxMdX9\ncQuQ\r\n=pheQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/list":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/menu-surface":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.c73142a1b.0_1626201952509_0.19322409824839748","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/menu","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aba14e5067518456395c9c311cf6c109e29622f7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d923db73a.0.tgz","fileCount":38,"integrity":"sha512-kHwg/BP/vDG8w3W4sc48QnxqUQBcjWGWYbhNrM/UV1ovdibdJw7BvbbUTXDeL8H4f6TZpcx8L129Y09mPkMB3A==","signatures":[{"sig":"MEQCIAFm8xsvNGQcejOPyZzmqcC/IVuVWBb606INyABAoOA5AiAKYWnVMQhfknb+Cpk+nFAuFLPne+BTKCRgJWmDohZyeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f3BCRA9TVsSAnZWagAAnN8QAKEdNbftrbYlbR3foeOb\nbbYBKANtJ78+kn0QF4un6+bvTzQXUQoHlliOXzdD08xZv4iszSFO47r5b5Ww\niNhu1RIaW+QYky/Gy/dgNmQsyDsovABU1ewNBBtkLYSAmlmvpm5S1VOkYaBO\nRllwPill0OGTJiakrZUw6zFs4yovHi+cJPGaqMGiP+vOrei/JVXWkmBLe7QI\nJeBQBnHK5VgI5ti7xUYxh+ZuOjLJpIPsgZW1PBGXEzfl5ySZp7TUBa13NRSu\nT267MUo61BEIyoj6Yfux4jHVFzI8JFy1QTeYsZQ8MKdRbzC4tgB6PK8qoVTf\n7jGJZb1eSu+YETg3CfRtZHIWxyc2iWIJb2kQOmHrd/cCmVAWQFTytyJH1tKr\ngkZTXbLw1CGVvk3MPgbxchkk9y5hlR612ohf0Y8vkambFj7QmqZuMkOYW4qd\nse9FKTO7w4F/0GA6yMDSdV725j4nLKjSK85tYB0RbUUCWblJc1XtoWaJOVTk\nNYaBd33ClYxUDS5c9Ip3XYB+rEtmgZoj7Dqh3FSf7hCl/tlGkA1CtO22AqF0\nLnTp1zeqgKOwXJN+XHfyXSsQrute9cBkTQnsJSoDu7LSFpKuIjtBLMZ87A7K\n4SzISjL4UuEZ0YuK0nUw8p7PDMv0mVRl2uhDJH21FWs0CttiQXANqM5HzBqx\nZJtO\r\n=r4+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/list":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/menu-surface":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d923db73a.0_1626209728698_0.9291829259558457","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/menu","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11ed0a22ae8e0a7e5e08d3ad5335c634da9a3399","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.22d29cbb4.0.tgz","fileCount":38,"integrity":"sha512-8JMFM/QdIC+CRDf79uSe5b4/kCF+3Re90OYlCVaT8LyfYGzYNtBQ8LPKaWlmS2fRN0eIBd1faoUGO0bvslulhg==","signatures":[{"sig":"MEUCIHwwG71xVHh66YK9zdGwtPLlBJSsEP22JeJCm0unbINvAiEAon6XLmhQlcXk+tDY9c04G/u44/uLrPMVFmXmjJNGzN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkoCRA9TVsSAnZWagAAxQ8QAIciYafqSoYvM0LdSDtZ\nOGwVskiCs5FWG3Aiaj1LViQxl65GyJ5fK/t+aE8DqbSeIaI6eDm7H4RX2EYf\nQyerwjgRIBZKuWIOa1+SXv2BCdLVp5xcJ6sUsDZo5t0/EnWgMww4m7EDr0z+\nMWwY4+IjXnvtLVS8NkfdEbauo/5/NUsZYFGrWO5EKm+Yrghqk6uIUa4QA1CQ\nnuySbkBphYNYJ/p5EgCHJAKoiYlPEa6RGWS0OoYpLm/sjqVGX474l0SKVYXT\nr8BDzAIKlgiLwnhlhgwh1g96rDOI2MupbkJVSKbH6YDiGrRn8baQCazSbZiC\nBuUoDctc/TEq2g/KCVQqL4hCbujZbt8WlsZ0RdJt2PgLgUC8CPk5WRezUHTN\nfdOFnPGP5No3SL7LtXZKGfI8rgJccuk3OYaN67vErEvK5kwdXu/QpRQeD05+\nHc1MJbgBQQcPIjyDknTa3lysPwyDCyx2WCFrWYGstB9KXEf+38Nifn95GsCp\npQcTmwg1M5MCFW0tI4OvCtjTs+aJO5cZr68zNQOxF3nxsG3p+axKwvo6/Dnm\nOSbtgOqDzUCZEXv4D9z1TobjyBuHpTXmJOTcd/CYNYqG9MnT3Pa3LmcyH0S4\naD4e+7+kBjrXu0YX0sPY5AuNQfpC06o/mAdbkvjkN6FZTjW2huZOjsWucvD0\n6C8U\r\n=xmp2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/list":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/menu-surface":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.22d29cbb4.0_1626216744214_0.5612198246270539","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/menu","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dae13485593e4a7cfd90174d8bd9551f27fdb160","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.2749604bc.0.tgz","fileCount":38,"integrity":"sha512-LwMCZ2422pnvYAy+oiLsbSSmKbp78MWj4nhOx4Fi77z3xr+gZFOcjM2HzmTZuGAgL9OMGjLXurLeeVQ5Ez1qPQ==","signatures":[{"sig":"MEQCIGFfneGnIuijJD8GPShEoxru81hrHIBtxmi0LFYHIDiiAiAwK/WxP4Jv9o7m3Qt2jkDym50fhCbd3+JyGiOJB2qEYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+nCRA9TVsSAnZWagAA5TgP/AyOYv4u4ddUnMiTI0PA\n9o49xeoxsEGGtZRskHKFRGCgoiZw8h9xY6CblN3CJtB3XJjJ8AKJz1Wo9wFF\nurf9kSMCLUrB2icZvu+DloBqLJsEjKXIR03G0vLsLZmWZmA1YhxeMErwgzRs\nuUMyjeqz5Xtck4ffkhS68Fpjxa/aB7cQxvjKt/iD2ut+Q6up2og5rw72SrAj\nNJeOoXrYoNzrA6qYX1YbMrzoSniHYjJfDBqrYgq+4xiccLHVgzledz4pqQlh\nrm+8sDt3aZi9ONRjR1pSTyNfl30yWlQu6ST+l4/+9/uEXVXKfqMppFxrJuhR\nxYILxyVxAhLuyQdMgg8SCuzAgBxeqPUj8RmX/hWd4olJdZ0gdUvvjCb7FP3q\nLByXtkwMqG9z/SEKMZ4t9S+SInVtd8Z3bHMcPlMYXX1o1ApElg253tXGEKmF\n6U7f3dqhNnBVofOK2ZToa4dtuG7vQSmtj/udD2sYUCEEC+gYnQRrZ3g2HUn9\nlm2upRXnWQUa2ZvKr8j6M/8IA+Hx+i01y4YckCDmwMDQ8FWtm3HAxuH3KbL7\nP6Ee+8GxlSpREU0ZIhh2pVvkIzXPOYuXMKQgvQVd8fP+jGtLVWj9QsPt0HPp\nELFq10PvRFkNJP/yTMZ8tHl+YtkIuB6pTFZfw98RECZRsP5oGXCRCo3rFnVd\n590w\r\n=tvoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/list":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/menu-surface":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.2749604bc.0_1626279846465_0.24047068707133312","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/menu","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afe653080c807c3347087ebbc6e6624abd3ebbd5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.e1703bed9.0.tgz","fileCount":38,"integrity":"sha512-6RfUp4O32g3kV/kAwvdUqY1qTqPZbGYvnnfqJHEo1mq3b9VSbEmqsXunlRcELZq8uhpyV7talr5asL6tIX0PUw==","signatures":[{"sig":"MEQCICPJCOOcBxaocjO9CeI1X0KZQB2tozmCKUKeYbde9dYCAiBA62y8V/513pNKIITL8n1NpWH21lotc9DVIszBQk0r8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71wACRA9TVsSAnZWagAAin0QAIt1P+BHr+qVNe7J9ias\nRIgMpBUyXN9xLW1LU3JDuOywjEf2RuoEEGUMV857aW1qW/Yg4LV6yIOmqibN\nPAUgb0LStlXAgi6yt5Phs9NdiwT7ZCRMnpPDiOvCGOqFAgmhnuLTTnPHE8bo\nDoP/XqV8MqeljshfYkV8Xz8cxqpNkWlDqJ2cTsIityCKFvmZGE1JqX8vXCVO\nu6rvp0oqKji7osQgbW/vQs0+IdQsYTG8yXRFJ4g8oBwhe6YfzNVfaNAYaEPq\nrsUWPdiTW9scYHDOiEkoGIASJjSHCSaWYOHPfCgZIeHjqwEXyavHPrDVn81Z\nnSwiTtCJcxtHj0nQ6sAO5CllBshtTtraYUF/YSRCiwWuL4jA8Ctf2J/BgTI8\n1vJQJ6p0yKmFOJ+fKhgCo0LLAXbj+SrCNE0oN1t4daRBMjmcfRZw7DzPcpaR\nn5rdbARkqUfB+YQF/BHh1o74Zk/DDA+onGWx4Cw3uSr1gCQABdlJi+aienCm\n9NGbysUBM0EI/eV9uljHIcCXt7bL72NX3leVO4jtV2mIN8M1bUSWeepVK2mp\nE0IscXCNXAOg0Z2ISwv+m7qWpcRhAHVP12wIPJ/aXiwGywmBjacIa9vhRV3n\n/4yeMIalJLvLN65nSldhFzGWMnlNpOhxRjPmErkG8fiBTHXb05fh71ROK8dY\nrzWr\r\n=AT9/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/list":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/menu-surface":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.e1703bed9.0_1626299391821_0.028971356903843226","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/menu","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e74ac5ada6bd2921296ecad2c5e4fe0d911e1c4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.de48eff0d.0.tgz","fileCount":38,"integrity":"sha512-uX/WpKs0WX5YNbe5rkibXY/NHDBzY3pi/GIR9QrmjnMZwwRVRqRG+CHvPnO+NEX/8ARsM46Vj+zwMudkwoziaw==","signatures":[{"sig":"MEUCIAWgazrISgKCO6Fv6eM1CGNiJuMW7HLK6vN2+PI6h9qVAiEAiR2ivwkgzRO/OtkvRTUB24egbrdZtzZvMVOMeXXmWVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvaCRA9TVsSAnZWagAASmAP/1oVbJwGT/xJJ4++zJ1Z\n50m1L1/nrfcnbgdXC46bTg+AQ1jg/9re1I32PtOT3jn6yvv6jpltVoO+KGFh\n60AeeS6/rjjP2djJCEgrWv3oHuGdyDzffkE+BHrbJU3Sv+WKMpwyVlmXkfYN\ni9oYiHNLIOyMVp5V4tqYzGaJAkO58Q9evrOOyBb4IjtXfTNFKi0bixIRcFBD\n0j2UM1wU0rtmWLfa/ckQH+rZru9ol9CcJ1hIQrFfaPJkNTNl3QfQ87XxTFtm\nrLuexxW8KNAWBsbcUG3FwKXt3On+NisRE6aFpBnZC3GWHaQth5IyHv45eeKm\nHQwFEnfXRxaAkP5sVeEmJh7CJHiMpiBu9j25CuDk8NcxqoCGTNp6LuuB4hkf\nVQEz5Y3RyEhXJBIYdPulZHXfsSKDxqCa/DJds/I5Fdtoda5XGehgHqnLQ9e/\nHq0PKPa8cz1J/T40D21ClDlhKKRgY+N6TOal+sjScTZtHt+fgSnbf6wZP00q\nijNoP3n5ZrGxwUUqpK4HLVM6X6FQk7pcs04AZ/KRCh9+RmzxeDMTW/HseEEH\niQKAJbIRWmLX/cCSoLeLcIBq7O3qC2XaoRKbA/5rZFuo5ohEEDCP0tVFuhmc\nUD2WG3CmtHw8WCW7GyOLBBTJsx6vRGZN7dlUUtVava8BAy5xyiIZOtvXGAgU\nr4gE\r\n=tsax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/list":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/menu-surface":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.de48eff0d.0_1626368986547_0.3823938897399586","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/menu","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08fb6ee9da12d508ada8cc5b892225e3da39c915","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4f060adc5.0.tgz","fileCount":38,"integrity":"sha512-rtW7E5xiy+5q80ougUz5BONvqEXAw5ahyDxJ3eFQ+96J6ALK1Bc7wLkBk5Qe6b/UedFpD9Rk34zKMviZZi3Xlg==","signatures":[{"sig":"MEUCIQDrLFgJW9pReXZE+of/RMj0KlyxssrIZnbUsUm4aML9IAIgX+4DeuVr67O0OBOFAVjTngSrKi328ighFoPwxB3Kw20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IszCRA9TVsSAnZWagAA4f0QAISls1yU/mwST6pR0GNY\n5MelpmGd2AvijsfPGqXO+J1hln5LsM8Umn2Gx+iUmrALfpcgxm69i3OrTEdT\nSBW8SF01xIKnfrIrzvnjUa0OXEecXG6geTnQ7Z3qSkeI2cqX2f2QyvvtEPqS\n1TONcPpRtWTCv2HV7hsovOr5IAkGywxdU7gCuHmO6gFmzHvOKcIOW6fZD2nX\n8tV1+7TlXCZ5P9J4oYD0BGYhGedttIRHAkLFNz22jv6FQQNQ7QFCUcGHswLO\nV7NS9TPgGR+Hbk7hNoy1zLvZfC1wlQ1tnDv+arbqf1NMlIy7xombv5+R6ZWq\nFNb/tNnqJnnFMVHqOTcyzLCpQCqQjpCNRlUZT+cicPRUbZRcAgieUiZGPwRM\ng49e41CRNNQCENm0YB7WojjBdXSPU04j9n99jh8k9AO+TxknAXYK49t3IF2g\nUcIPtSEAIDzOx5RK8PxRZQwnZu4thUW4cCZYehYkcYphjoh9bQGWuainxRw8\n5H/gStaWRKcoMP22+kdgZJiojMf+V7iB7uA1JqMob3jwUMjLaioOO8NeDvQ/\nHEdBoBAsxinaZbu66gFEKSgXcKPspiC343aZvypgup3ZjXzWrHBkV7WArTlN\n9Hwdt8Gv3lvSdZ2w27PS3FzjbgwkreP1zyOfKUeAgi08oIPToIRq85iNi58V\nKTmj\r\n=Yjtt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/list":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/menu-surface":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4f060adc5.0_1626377011609_0.02312550222123466","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/menu","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"978677f94e35dd057d1d9e09004a7414cd7ba048","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.bd25779b2.0.tgz","fileCount":38,"integrity":"sha512-Ir6lzKXepUUJb1UGPMRAHElIS715Duzt5qDLK7TQRbmx8uYRGLOGkiUTdcXJ8X/75jnbI24P2wnAC4IyD4cZjA==","signatures":[{"sig":"MEUCIQCJED/RK6RxBgXnVNoG9HriYfZO5LtiUjfszwrvYWydlwIgE8Vu+H+m2wBv1Z0ABhXIPdBcwNMoIOb7f+n+ySBMy8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J4JCRA9TVsSAnZWagAAVRgP/23wMIZWLSead/zNup3v\nLm48MfiYMQKXYZ8YDNNSuCNsR4SFjsnpQAjxI5FcGYO06I0BiAyd8Bk+EVXe\nxyK0x1LmGwSSTAunlokZ5wndoiyqKZFy8cXMjE1lkTOerBmzSQKjX5Jfuk8x\nvPCzvYe1E8rkRKEeRGrHTbUdosLvYZR1ZIVI383OIJ75ql0LA7tgU+r/IzSj\nfqiHnDyib8bYUwrgpNfC61BUfTa4vyx0x0A661ywMKKn6f+hMkRHsnU69WZN\nUuxEnTdb4ZmyRiBEGh2fmjNeN6r8tSNOpzmzCENzeg4Mz5cgeORuCq/6mDPO\nt/v2IoXn3syqakq3vTHKHNSHIoQJIcqfm7FNT8jyH4IsH0/PtvJkdYuF1owi\nlCKy6YXgozIyjQaiO8OSxxlbC8BF4gP1YpNP4syOdFQoHG173GLnm20zIRCI\nxw/0tM42mIMKykLc8w19IDdYutnKOVRlIUwW3XjDoXn9yJQJ6nL3hXGWmHaH\nAZB4VwZLXy00L2rZ5XJkk/ZiaXWMzEW1IiCdTQpK/sRHx3MVVVHyiJ9WTBt4\nAWKpQd9w5JpZ+TGTlhvznQMfGjehT4cSw9RNKeSA7K1tG/M+o24TLLdP5Vya\nseiUJKRP4VsYavB8vKh0UBfkiV0kU4WBCBZvrTUZqdCjN73tnsgAMFs41wPT\nSPRy\r\n=K05X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/list":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/menu-surface":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.bd25779b2.0_1626381833675_0.05225765089314116","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/menu","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f538ea19156ae9f9ac33b513dc9f562c16cb0ce5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.9f68a932e.0.tgz","fileCount":38,"integrity":"sha512-VzldRmzyFfZUIjUpp4Mu8B8tMwT2S55/D+Mm/o7Jf0wWPoe+tOHwS7cOUKRV0gV1M3UTQJTJ+a8xm6wjn1HzPA==","signatures":[{"sig":"MEUCIHc9M2+1o9Cx/sWN0KhOt2k5IZcVg4kU3IiB7V+8lhyFAiEAwNKBHPYWkSld1Ro6GsQE8O5wcVz0m7Br4bypRxNZCAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHtCRA9TVsSAnZWagAAPecP/3RYCFayQ99TwdsIph5l\nwPmLQTioT/eBSpCArBBkX1yh3wN9l6DOzAWYBv1o0wD+O4X8MGRAOu2w+OEY\nIEf/b+DdsvIaqLxkdHIun7NVIu+scQctLFAXxf2fiLf0jL4AN7JvtHAkqKLD\nT4zhcpmj4LlqG4yyw+bkARGKIJUQ1BcjyxNcPPyMKyO7J3G6aMMf7Ib7eVmV\nIRCfi4oVUgIyd+8vB85gm+27/x8MTPqPv6T8CYq5nIrIf7TpOl+97muimV/a\ngF53VkUCH39UdnQkDSdtpfObXzGJE2FAngHg+yghXisJAMgLsujtri1Tfb6C\nxDMVqWxN6JbJHx8h4sl5L+x/BXJ3F2jvj8DBHZ/UxdiS7ZPAyct6CXx4GktJ\nPYDO07j3lSDNDlMHI0NcfG1eottDS+p2/1Oj7AqZe0t04aT4j981qvGj9byt\n+gYqKjiA5eq7qmK7rblcbFNi2Y4fsBMYU6YspnSsQQjJpBpAZu/whnQd8Z31\nX8ka6qKkihG4GYZM+bogqFNZe2cmEZZ/UYS6vFsxB7mmQ9XQQ1IAx5ebtexG\nR2ayiH+xI+hZJyvnCeBwF+uBCH/fSoPB8xbIyFRlVrM+MaegNevq3AV3cEIt\n3sROTxJftAc5EHMxuj+66O8jaaoBjBNUHEuuG3Wszhnl6bh2YFHYnpE7KgrH\nhtuI\r\n=iJHh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/list":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/menu-surface":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.9f68a932e.0_1626386925177_0.2622905858627329","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/menu","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bab759f841b1f737eaa8abf91ffdf91f7fc7644","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":38,"integrity":"sha512-G+ozB7fb+LK3LqvrZSia7haWpgmlf3AIwtsh6uJ6kexHfVZw3o6Rc/e8KtP/W2Bn6uN+3GKdZVbISEHf2RxFmQ==","signatures":[{"sig":"MEQCIHxKu4fVefyzQPfU1LPO4jaUgtL2rQQtmcdEcraQTgZ2AiAWVzSzgiQ+5GbfKnwB7gQPhRbeSq7aSU8Lo30OSFiDtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z7WCRA9TVsSAnZWagAAGw4P/iq8hDWpWzac6D6NJFXA\nV4I2EUn99y5p0H4uj/OjeKTvHYUXcqyiIz+qJPO5YZ5eFvq8soUeU/hPTaRZ\n+I8/a4Ma8mMsQO6a3DXKwPfffbXHfy9f5hSop3rFyPEPrsvyONF611QjFzA2\ngfTAlsNU4+rKiaQzaeWmuw7OzNxq/d3jGhjIyLtwpGdyg2pXwpc6LaREAS20\nfZpOZHOVTDnTi60+TirUKg6XMPNXWLvtixqco7lUxUZkaL9M9fIKby+qxnH7\n//7e9hR8NR/dG/72Z+HVF9kd3GFVbayww73LVZBwYJNE5l69W9DZhCWP4EuG\nKw7JBlY0//4odySQlgmiHOtOzemPFonJ9FNouDKL0zTKLWh+23i5QGGr52NV\nktHYBrFkTcD6paRhXQfEYxwBlkwHfKQRaaM06T3PMSCXV4LL6C47JQex0Izq\nBGqoMBvG3vcllpAmh7cmfwllTZ54NywJqCSlR2ST7ezhUFd8l2mSEp9KxMpX\n2CLNXZ3XhnNKz45ByLol50XdK9XqF36aH+0NXOO7aNzk9Tka6TgGBIG0oB1a\nE3GW1NFV7pwgIruDlmpGH7HpArctylbxhZNCg2d2JYCv2vrwZfPFM9doxBPZ\n7Cwr9dyQXtP368NH/huw4PtCM7w26R39VL1d/H2oq7g49oxPmbXvdTK5hJoL\nnGrX\r\n=+kCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/list":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/menu-surface":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4eecdeaf0.0_1626447573862_0.1644430668834147","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/menu","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b8b4d5c06352248db7893471929f163bea0c00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.7239684d4.0.tgz","fileCount":38,"integrity":"sha512-eYRxMYyuIaTpBB62RRH8t/LaAt0tJJ6HiE0MlKSlEB4WkHHr0wnqdDh0eBpP/vNe/XqOoyPD8qXSFQ800ObHzw==","signatures":[{"sig":"MEQCIEcv8/DwRJDq/7AU0Uwi0AO1rgCmkiy4Q6WKPaWZ3CJRAiB85QjgRBjPF5QWv5Wh3NBCDSiu/+HiGgd1zfoXbhUUww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0oCRA9TVsSAnZWagAA22cQAIKNXGXn97RBZSJlK355\neQRvuR8YIgdj12EcOpVdan7SNc7YdK0MhThB24AhknOIql8uNkXjLnU3zeDW\nWGEvrcHNqo8gRSmKmR5oDvYECYshVAC15ebebFnl9RYC3DyzDnfYGmbM/Ejc\njl5ARgwmw0WZCtQ/VgDewnAsnvx+6PLh6vI/Vy3Cpk1wvWrtl/qvMQ3Et3Yt\ntCDD1dk7qXv6lMZsUjEXbrpM2ynEBqkaE3dt1oT/MayaxnQalz+sTjdTYmup\nMIwZHv91GIbVMSg2Rgx5wy44PKUn3qReWnhF6tnpKQYWxd7KcRu1uKGN84ZU\nHqM92cC+PJCn+9GgCKVQmLBTKsMuBXFgxfdChewGhHmnw2lAjHdPeg6RPSik\nimYc0p7b6OVveq/xzlXtD05/QA+/+S1L4VinuzRYlcfap6FH8up05Q3F9bcv\nNRMMREw0OR87Zj2cb92YedW+jw1gtz5N2qcWOPl/NKFnvXGcw2ysy43L/Emo\nAC6y3zK9r5JR+v2hxj+HYCD8vbC2GGNkgJ6U2PQl1c3epTkmN+XnIGqqhMCT\n35hLyIUiFsLSv6YWBoUGwJ0QkscD8FsLn4WKUABHML+JpBAiPWZ4/91UI4vP\nsXup6Lsg9Q0qUSqNWouLkYhxTq8SmhNgCj1MNBblfO5Hr/1qfYnTsFN27mC1\nLrQH\r\n=sxLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/list":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/menu-surface":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.7239684d4.0_1626451240311_0.8056698801328976","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/menu","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfc7e76d81b985cff76932b05ae203c9fb042ba9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":38,"integrity":"sha512-21c5oJXHIVN6kgIHKQxe/ik3OrECe38LrfJeqJ1bKs+e5ZYdv1PWh19efwjfPsYdUagykyFGIg0TO0J+SPG+EA==","signatures":[{"sig":"MEUCIAZrH6w0nKykfNQSIVyntCTD9RFlv0+IWcj2MMXZKqF4AiEAmNna9T9/G3g760lCNadTVoK1jXlbn49TQQs2/tnUuqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCkCRA9TVsSAnZWagAAp34P/1qjOiMM4CZugcNXDS4b\n1z2HqCDp8nPF2nNympmvD03Yg3k6fC6ldYZj57GnxOzyogcg/QLDsQJTE4Q9\nTVGgnvqR070hMBS6As0z2/9xBN2miGlcJQP/b2EIEwZcWCicC5yTvw7FWBoC\nziPQyfBqBd3o4rIue8D9iEN2xdx0PgFPEHpPp7RYNDfwMLFlk0PPcT+fsl+T\n/4ikx+nh/h9IH5H7KcUaBsSaCV+4gmHpnY6NSslytnGGNPM9F1Zd5KyUL5Us\nyutca/5Vj4x1LNmYiWr7CQ7rQUJv1fCYRfG+ZfA66DpxuoacfLOYaUdnJ255\naBSR06WcdfbR6dwCDq2c7tC/WKvG+HgeWHLlMZ8y2Z7cQiyhe3MfxbvbMJHH\nCAVmyU6p3oHU/gImKsi1YfaZF2E4jyt8frd2KcY1BnrKP/ynENL+tBLdkmDb\nSDXphZbH4/WboUO2ehJ/+xHq3MvNEgwv40AQjy6xTETsmvyajCCS5zNR8SMo\nvJ6EA7Y4Z3fKzALJtqgeCZwYKvGZEHBI5SZtp0kaSJEIHdj0/ItygF44xdbZ\nJVim4XGp70ygTGOe1/Z7YwkHiDhyAvfuqQMB9kxQToGb7l4x4OPW+wGA6hRh\najkp9RxoYcHHDjgl4FFXlcVJic7in50j8b7a46Pd4e7BrLo52HmAEHNoC48b\nIuB/\r\n=RGsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/list":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/menu-surface":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.d5f1f7c72.0_1626452132615_0.10601826865779862","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/menu","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e64ee9c4a571f24a7d80641fe21c001ee22b8d63","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.4d95812f9.0.tgz","fileCount":38,"integrity":"sha512-qFrMilmL2DW6Q5i6RXuof3riO911ESHkN0ZnQYnflbG9ZXnsaz8SQ6pdDnyWMRO7kKCM8SO5MuJLCgDaoWrO2Q==","signatures":[{"sig":"MEQCIGaR24TuUFCyA31S2mwBwuwXrz14JZmQcPRhNzV33qrrAiACwMFPCOhpSH4VVpv+aSkKo4hqJ5qs3KlDSMvucecdAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGuCRA9TVsSAnZWagAAreAP/1FYz3ta+MVk8WtNjZqe\n4Boy6hXeCx9ljAnCNAamJdaUL/xok+kd8SJPTgsbuC3/IpMeda4oSaons7JE\nlzU3ZdD7tqhc7dGhA/s7X+BI+NojUoNkmUR3gdNj1zRd9S9W7NKYo9tl7lF0\nvMAlhHXMU88XuCCwwODKo3LiTlmO4vdWNKb0gvEUdoZMpI1wvKkkXX7PGChi\nMa2fAebgXHF8NK30P0fR/1X1W3hUtadjyVX2JoOVpqI9DNboqZuylA8IF/UV\nbQc6PYarOoOXSxOHggw1Pm4QTQcKtLOAaRl3kMfkh4k/qLHm/BMgpM76Yn4V\nbFqVMsmRy0vDqmY8505VNaHc64jGkRH8hTVQWwMPqYTUVtc/OX6hr+AZdvdN\nK1PHJAo4E62+o/e2yR95cx8xpg443VodczadFYMBht/Pcx30ggFSSDtlOkgW\nYJtsDFl7B+zka6CIJNAHE5DsFQyjdRrtxzFzFcK2pncEZv/jzE6jCeVY8U6H\nB3pw2T92T1He7a3XjIhxVhinAfTwXpN5rh42T2cvypaCUjZvWGwO4WoHSG7K\njI90ijMOdtfJn/Oy3fzU6JbMZmNKXm7EORDnJwz9EuL4vVndrjErpMXWxoS6\nJYX09QsX7k8pKq58Q+9gLATfNdZFOIhUPpqn8zENjR8TY+KjcdGotr2JdVaa\ns1fU\r\n=mmA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/list":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/menu-surface":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.4d95812f9.0_1626464686162_0.5338284591266418","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/menu","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ab5fdbcfc65fc52eca49393fc214cf6bc78cf00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.38d1846cc.0.tgz","fileCount":38,"integrity":"sha512-yXvNTHYKTx/1mkQpHhn8EKltSV9B/+8PMHc/Jlvh9tH9Y6FWPKYWSaS1lTSuLBDBUFnLHHGnKEOJ/OqJxwCfsg==","signatures":[{"sig":"MEUCIFg3ubDnD4Zd9THt11vxwBg23Us17OqH9uwHDe5UMa4wAiEAsWgDjjVS4wgUam4kdUerFjFKUxX/EqKQL1AN68aYk4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfaCRA9TVsSAnZWagAAf8cQAIRwmpO7GXs1n6k1Ybso\npR0evDTFqzAJbtBNBzh+2tlvpB6lwc5sRVJg3/93buiCwkMZBbP7RaKszkkX\n/TtFm/9ofUo7/Bva3TrJRIbR1Si/6c0n2jyjrN0DhZx8lq7pgbg7yUgXGQKp\nJMh7iWadPg15Vejr4YFDWAUveO61F8SBySjTuoWw6V2gBl1rQnx0mMKfkq6y\nF0DdmTonT14kjV8ls3uSy2LwKMs5h8v/odpYZYD8ajcglvrsjOjzc7iwb7bb\nPPNtWYZhKIf/X+qHzZOyNiS503q8K22SBKt7U5NiXkHh8aywtZnvLymHL6lT\nfS6ObNoGVHqj+VKMix4E/pQnYR7ThmOxzPw44c9nhCgPPwDlPdG1vU1BVv9n\n/saDHuWHQV7NhkVokLlGVSkXnk7T1N3/BhWKKjgOuBl8SKzl8AWcuZ17cWCz\n+1LuvrgiZW1dSHHmzVhUI+JqN5ZwcLkgiWzVth6yI2EeOIE0Y0JmZwzuwB64\nH5UJUwSkh314I5UY9Omb+UxpLd/mmhe0+2fHY1BOOljhZ/VvxsrEVVT2seGM\nw3lrHVTVrZD+2ycXMAI9/tIdPSC8HZMKgytB1eS2SI37PsNH2V57V3+hbGVa\nz1giQg1YD5w0CpzflgMLY/q7S8sMnxM1RFUR0ARJH3MTrf9bezGRF2HrwKmV\naDkz\r\n=kCcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/list":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/menu-surface":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.38d1846cc.0_1626720218324_0.7102012697961564","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/menu","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3f4004b13b1e2e6d98623a1e83d941864f29368","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.3f691eccf.0.tgz","fileCount":38,"integrity":"sha512-oFb1/n/prDwfLpIooeZlh77a76bd0u4sOznIOgo18mhH1GE23r/n3mGOBsA6AUk8DlNNQ24o4oYkG/9m9ZNXQg==","signatures":[{"sig":"MEYCIQDUPJxM7YPlnf/RwPeJhgdOju0fnKER9FntUj3KphS30QIhAN5Ij/pAa2H39/VJJvl9+30oceK6Ws48GUqo9KHr26+z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vWICRA9TVsSAnZWagAAXlkP/1fdMATRUuOostg0mxmS\npJT0+zbHZwwcBsPHdp7xp4LJNfT4TBccG9H4mNmUc7vpkkfHhThjM9N2Y1PM\n1t1Av83csSp3dpZmqkKwfce5j8iYmjF9TpzIIqY2RLczxL6RcUoi9xXcG4sr\nxsQd82bN3YLCyCgihYREqTrnAp3dlkZ/Zr6UuFmE3QdVLpCeqvrrTGZBEDV+\nLN+X9DSoGwfGyGimFxIDFzdNxKsnsKvyeyGsTxa2MKMP+p7mnMv6neRtBp49\nHWAwoY/ZtIA7v1IAgKJ1+cCh7ZrjiPMn4ODrlUEPNnkvmWuLXJWRi6U8Kt+T\nzbvs+Q3pdpn0GwyGohPtxw5kCaWFkx8jcHCBe59zdEtYjJgAeM2Rmb9QVJSs\n2vuPgmuF/NiWD7Haj+UeAM+Js48gVtanvompHMSbS9vAxz2KTyyyz5D4dpBy\n+dfuKW8ph9aKE/uSLBZZhI1O1l4tozE605CRnUbcuLQNg0psHOQROt8bcClP\nzE5FLbAt/wQfIoCZgYO3ANBK1MQ6Ma1Gsvouq5rxy5PeR3+oObNzwRsxzkDq\nlcKFKf0SrSvu/m3sY37JNir3E9BGt8T07JbPbJLaib5oK6eC3KUZRC/N9zmH\ndt4ADrVX0E8A3a2uGnuAUYlo0/wXOQfMOQfcnwnbTI419VvEtIiGr/ia/4JI\ndpck\r\n=lrnk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/list":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/menu-surface":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.3f691eccf.0_1626797448183_0.7656479295475458","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/menu","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3d1018369ddf10c2fd15899cbb81e8d7f301ff1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":38,"integrity":"sha512-HSH6wNK5hjBB/ULbUWdwyJcNP2PwQhcy8BU2yGBYT29jyl27ZN6RLpKwPddkLiX6tAMKqXlBYx6oSzAI6L0sCg==","signatures":[{"sig":"MEUCID85QRw2UivEnXb7TozfLJ/rw6itFWVjw505QUlEj7oqAiEA4KwMhLLD6Bu1hQSWXdjXc1qr1U+SsuLqYisVO/hbrXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCsCRA9TVsSAnZWagAAUc4P+wVYwyh1AKoMqP3G8M9s\nOfVUOtoVozarvfQjXIl6bZwH43qgUDK68NoRrXzdCyrQtTzrqTI6A/qZowE1\nX0Dja+733t6S9nIIkGbuIJ6GBd3YWfl+9gz4RwOt56ZkIJg/vlx3Sb6JAtNH\npH0OtbVrvVxjibB2Iopj0diuBkQgzW02Zg0ENnDmLA9E/fdQVBM/VULPBQqS\noIZLraGSSJ88wCYEIQoohWELaswhaMSc62w8CuojEzoEhvtZM8Per9bS7mmO\nsgJW/5+9ENW0WALnA6BZJ4Ig3LQ3QEQQe4T3w8umWrd6FoUU8B36MrudkCjP\ny9msla7Mz/vKYmd/mN/IYgZUk9O1cS/a87MgQjAlH8mUSXWQZ0vtAspUO1ne\nv0VskC3wYrrKLvU3GxKQkkItzWLhxQSGvBD1QC9x2MSZqJIfQXTRA8cGSF5E\nfD5bNrxD9ABNTdj4298mUyrDr4336yyX92netZU9cRwQiwt8sYjNAwRaKVx6\nmRsmWYFTp2H8u83qr3q1F8dy2q+5vMo5NSF6JtGuvGHpMUTigXUioqikFreE\n6q4uNZz6xnV6NouahVstsShYJdJxZcgARl3831kqnqSzQq8mkeR2zcLzkrXQ\n/YSluV4AVcMJti9ur6xbqzynoYjXdJgCkljkJuS7sYxTQ4bV6lowTBJGDkzb\nD8M4\r\n=FYzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/list":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/menu-surface":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ebb5c73bb.0_1626800300058_0.100826203910098","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/menu","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c750e5a29d94da20a6d672c567fc2d2bf96b8c7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-nightly.778a0e8a.0.tgz","fileCount":38,"integrity":"sha512-K2aj61vAipLkSXy6Bq+fmJPoOGvX0Z1AEJiuvozIZSayX/Rp1yxqqyWLypQ3nBbewx0AEdqCO3vm1VgrJX4ijw==","signatures":[{"sig":"MEYCIQDebfmIIqFU/6VvQHVoVIIQ8V/mHk0wfMXCPKpjhMu3HQIhAM0uIufOI7OAI9pBwdTydF8CY0bE+Q3u/Fi1pa9I8S0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zr7CRA9TVsSAnZWagAAV0oQAIalQXLLgkz8mWKH8x2K\neeY5Ie+Lu2GVLo5udHYjyw5sjTGMbFT0VyO81qlIhxJPPfgcSz0XJUX0v8ME\nPD7dXWA9JsMTsMV1sG1kDAEgR0DOcZX3IZROyfq3leuX3ljqZIjrULiYGSHw\nT8gALYzyO3wlKloAar0+BrRt0FWddIjFNrEhS5TtVoH+JluM4nIgN+OZKCiS\nBzYjBfkpLGyziHwWJHHLSjarloDylLUx85Anun5Du6uPkpZsft9XTHDZbhDi\nMlk2JPjMAnIHFtau+ayn7m4rZaL4muvhek2NikKeEqb57X6Z+WtJl6jbNWMj\n17aY2//ibQ8JXT5Cbpq5qV3agzC47noP4GUPPIRyglQr/L4JItX7IFkwRrYK\nuauRsZt1F6zadAs0AL3LOhLUZ3qBMbsMm+sZ6hfV7uSi+IfgIqBOP4qamA+w\nQZhPib47gck/I/vMniEZMy9D3E9iEh4EbjMusT5pooo69hhIseficOpkmqIB\na9sX9b1DNF3wpUWjBOPwRGxGtXYmE9yT4/XBtNhXlgq2bxM9XZWwRthLPc6c\nJzl82BPC07XwvkyP3BfwG6LmhfmsYm+PzvWTn0r4KQ5OC6Djgmaw4kh0iuEc\ntG7TpVu7BgDyPqK4bwp7Ta+bn0N0NoweFhnany0SoGWQMG99Y/mv+mpoge3O\n40qC\r\n=RAPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus (Nightly)\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/list":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/menu-surface":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-nightly.778a0e8a.0_1626815226774_0.9657362479764768","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/menu","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81b5f1cd491aeb33babcf46a008ad6f3dee6358c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.791311bba.0.tgz","fileCount":38,"integrity":"sha512-K1v3o+toriTyRmMXunibh8fgjDJ2hd6fToe1fg3VYaFpH+ID2YRwQT2KFpXVtW8ghgmKbVM3q0iGDFqgjxF42A==","signatures":[{"sig":"MEUCICtYbj2touMh0Dp4wv8dwhejzyxSIGClgAEEXy2iZdZvAiEA+rpLb2imdnO57UAGNDr0a51lF1Qv51zhmJvSF31LWDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90mECRA9TVsSAnZWagAAwTEP/i8QPvlzsYtrxLajazVI\nBBjGxKDOsbSiJZOwFWdBuz5ipkOJ7+SgyVEpr4gDM14iVjGLGrMJDbEl+JRL\nPNAGnsgP+xseud03qZgoi7bO3+ysfTSVkXqHv2e2uHTTc3cgiRKzoofMbW1e\nFzgAtuQiSyDAF+Dd+aBxVeRXbc1/PSVlsN1hTeKRhR6pP0wr2Ql7c3DslMOY\nLZERx1rDA1JcA1WjKo2cDJIWS+r4ZJA974ClU5DQ6Ixzt08KjPOwC68d1Gjp\nEq53PbggVDtCpS4xCYHeH1IxPayWCJjagcXzL6aDaNh6FUSl7Yv1crDC/O6F\nBshIzMVf80HFk0DJYUhlzNKr8cyy0yoCabMh9WI6xRyUQYrgAkZrvFbyF1TC\nHQ5EnxEH0INJqYJCCfYnv656ZkSdVkM3Mj6d0pdyyS9pQHlO0g1CuNXtzf+o\nEdLN0nPLKE9INNcnlENmKt6w9L7y+ozoSGlW6CBnGZo0bSVlEA1CLZd0eupT\n48et0ag1DsS4wONZ2nUfxydL9Rk+wCBhs4uA725+TdGh4TTUXGV9jlnxSvnw\nMlQn5xaiNaTxPh07rYXomcANSVtJ4uoFQG6O2fWusWe3MEo+Q+6hmz3kxRjI\n4+vaMJlQ7E2GYrhiu1FJcNM31I1AmCi5Z5eVFE3EHGT5fOsJfeEJ5/ugn/q1\nZoEf\r\n=QDvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/list":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/menu-surface":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.791311bba.0_1626818948610_0.9214254712203238","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/menu","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313b52ef01e9916931460e1714e610fc1ac9c5d0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":38,"integrity":"sha512-rTffjDytZ1XYf4b2sKX5330JyAPxkzO4CVqc2iLMBBNhgRGLHA0KHBWhvyiPl+hXtY/66MIFFECfKSMBzC/68w==","signatures":[{"sig":"MEUCIAwNF62jNiOVX9Ht4OJKw/yL/EKSk3B9oScrEmpLUqZ7AiEAkmf1JcCTtPndhfW07ouXooFOWYI8unDiOQQr11VrTGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8/CRA9TVsSAnZWagAAsuYQAJj/BEi2XlreGVtgFsHn\nWJWPCgK3npUcROECXA85nZ1V7HVBjCO1c93CyZoY6+4g0IAQwScmSea1bv1P\nt40FaDHAoxI0bpB14uMeNNifCN4e5IFCltq4ko9+Xqhyk7eT3Gzk+2x7lNnF\nEGmhHTMQSAwmnqYtLxQfAeIhPuMrUQLRdk+bDkbufzvXlxWKhGBfNJRujoDD\nRPjrgfWod8Vx9DCC6k2WW7RXWgHv0mZbSOpRF6wq0XBZrT3ut9cuNyFd/dap\nFTNSkUFD/myXlsluBP/e6cd4OKYlaAimDkowZdPHVk2JqxfH4jAnNUuam/pq\n7H6d8NRqFOOd7RZGAWS5QP8p+XhXsoXVZWsgidA13MeOedNhvqFXawAYwrua\ntPBuhoWex/lEAoILyDntlVsBYVXAV9L14MAIfkI6ZzVOX+T0xJ5Jwi4ibdvB\ntUFclpmIS4dlHSx5SMdvMbmEXRbTxvjMpolRJ8El4AR3VTRkw30WUJxzZIme\nUe2Xv0ytM1Y7dzByxu7ulNKOOuAQ3rwQtQ66gCKmxVqE22Itog9/WGxNzM6z\nmXPPEJHjzeDrmi1SXJM5EXcuinPjnANhBzS2uEqkeMlX57wyskqVrm6rA1V8\ndOiNUZFH5XQpzWQxv6gC0VJBdoU9n4FsoONdEZpcIizEmPeoKrMYnMeD77LT\n/D+o\r\n=BQFD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/list":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/menu-surface":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.85e9a6ac3.0_1626881855289_0.6951841467533537","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/menu","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4fafcb710da7c61f93d6cbeef984178434c0e10","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.6b0442278.0.tgz","fileCount":38,"integrity":"sha512-J4ABpB3ZoKrGkh15a5zheUGuu46RW1OACCZFyrmCIcsH+CeBj9/zaxLfC1GNlf47t9mQCatKrAhHkxIHCaaGjw==","signatures":[{"sig":"MEUCIBNq8sWq9apPCXz6VudSUN0lMQgIvqfuaRZnYjM6dFRaAiEArtCI3wgTkn4HEz95SpwOWv+H+iGZDaSlpiAFGnxzM3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gy0CRA9TVsSAnZWagAA7I0QAJKkDoGD6dR19FNuG6Yi\n3aYjGUlTYfIQ4Jcwa/J/PTs9lZioUPiO5piQBrkK2cT0ZoTgJaABUIMt6POV\n1tPNLi0fp4R6f1HX2xwjObSulIV/QFYD7LtvDoAWESlMVIFbTxDDMTMx6Gxq\n/l1KdVl4v8g0yWjRSDQXIqtY3nsd0bCUt7FkmcVJn6mrClBxDtIUiVujGV6B\nT5Grx3ofUMqExU7EiO7/Z7Obdy5RLCBSpsOf9DBHAjuDQGNBuzMaMeVArPUu\nNvSiKAs3LDccYwubc1sBYkz6lGyXAu3m1JSs2pZAvtMBst5RdOeqsTH0uZGu\nxeIuqi/HWy3gv1viJ5Ny7AWTMg/g13hucg3HgHLHBVIRaCh8QjhmRWVTQHKX\nWSwwLVwoKriuwR8t3B4QFfwhPtz69K/0hiqPkYDd2Fojae41dcTLdeINbRPo\nEpiBDCNaHX/n+8YN+7wCzMxlBKtQZBUcCRCRoxMq4fUhoTq9e5950JKc2SSo\naQKjHSw8YkUm8HrTjAEJQHWA/I5eY0O3Gv9cL92qvV79fXFc2mLHAI+IbYn1\n9W4vaofHiWT35wDujzG0bDRtSzUB9qvVs7cLAxiz58KDfs7NCopks7y+UlYe\nm3rXG6zqQOJQ+C5vZwT6D7w0CfHUSlf9Lp6jp3egcfVIiloXUEctYI23FxVg\n5NDQ\r\n=f4j9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/list":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/menu-surface":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.6b0442278.0_1626893491947_0.8734073286234136","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/menu","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a807a59a19c359ba8348c8b50bd1b0dc91b46a2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.5f00e454a.0.tgz","fileCount":38,"integrity":"sha512-iQ5r76P71uQGWxxwIqLq88+rTC6h4b2RY79RGtAJaFvKagaR2Sntxl4MwX23CJCSWvF6snhxGu8M/MmUz5GtNw==","signatures":[{"sig":"MEUCIHhoGggC11bPoOkzxEcQUem+lBA5m4c3uB8h6GmQBFDlAiEA1D+au5kjLFseQYFDQPJI8J6U8biWidOlKMdXxqdoUR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXwCRA9TVsSAnZWagAAj78QAJYYiu/pqF6sDPWRPxEG\ndiaSAW11+ZXjzXxuHAxUm3dQAI4QYXWfPR0T7sQy47A/fI7lM2uZ4TjRFXR0\ns39eu8nTOx6Ia8Q7qMGCa4cT0lnZ9ATqFZr9tl2qWqhTLsiZsr2VFD8PPO4c\nEN3v2Cjj1jQOHudSHU2XvZZaGHCixhVIobFKyiyLQQWJpjH5VwdJm6iibbiV\nOc19k26H6cc8iHZcdxBmaEzO/ofFnw1kQHgdZO0WNQrQaz1KdO9ll/DG6DwF\nCaZHWLNGj2OB1WckIjw8zbjB75sljrqso80mSG5cNrPC6Dqn5Ys7rB55avqf\nKxt8mx/7TVFsxW0NJhQpn7aohR1klNQyYuWstCGc7O162IXIToiWau07pTAL\nwLnDEweZUfyva0ZClCTjVXOdM3ZrU6tXRhS7TIjnRQtu88FZbIbr8NpRyUF9\nlwG/dbpF1bseOA8RNcJ+PjNhRMstiQUauNwAavWGj+E4egU+f0Kaz1voUXMt\n5oE6ueJo/K/9SAYHyVhOf2/qqYqYHmWFD1m9o8agZQ3twBsr/5LgOZaG+Fjo\nabNrsVC/mxNsV1X8heP03ZPW/r7MC8afIyhIdVQxglDiWjcO7LSTw3DE/Y/f\nQFayd1XJATuxJ9PaBOHZyoMizN5XGJu49kLP9TH/3+RRS34swBrn2iu5+XLt\nPeEj\r\n=kIWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/list":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/menu-surface":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.5f00e454a.0_1626973679880_0.4448559583384708","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/menu","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"408a4637b8049fc74bcd7e2ddfe0dd804ee90e3f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.90e08fc6b.0.tgz","fileCount":38,"integrity":"sha512-ZrbGy7JPOhwxMpNSYIc9h8hulieT8aUba6VlIMo2U+gggY/mTDD4bReU4b1zGWWzamyrhUfmMDHL/DcDUKFKCQ==","signatures":[{"sig":"MEUCIAbBWbd5l+lXsCfeSf1cFxDpxQ1WFkc1JU0pSttWBOrKAiEAoCdExMEU5QInQyidVqtV78qXfvKutRs9UM8zHS4E//c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gHLCRA9TVsSAnZWagAAN1YP+wU69QQeh0f5V6FdckVb\nAcQxIGqQGrw3HNtfjoDD6TKAkRWLdSsT4+Q/xtzLOFeqOoezCb6bt/RcFiTz\nO7LVdeo5kJpYTf7JoK5dH98Mx8ICEFP56/N68n3vU6WZMR1hxyIiFvN8Nt+2\ndBLSt8aEmlw4tc9f4uqeQ30YmlYzpys6a3ZpRJQxfyuQL2YBNcvxBYDJdXUB\nAMkHa6rYI09xKQXKlt34/KIbmc5NtJC+Ehe62yaap1CSucX0nb0l3Aq/2Q50\nuPxVqDB12Kad0ims++RAIpeXjXQhYB2/ZRHXg8yLkOtV0860CEOn8jrC23yJ\nUZJEIIg8cAtURRBgpq1+xBtzRqAslJTN+MQeyK76fYsImBL68dtiQpn6PgEY\nZpUztEotmHM5mc+7khyIwHdXcPzoBjC4NwVvI7A4TCQb0L4uVc1z3lbuiBfO\nepsLhrSijPWlduLJARsFmdD2jEj4B1IWqXUyLt0Qrm+Z7lLiXZulp6Uz8gBG\nB7jsH07XBzBnq/lp2n7y/cg5y8ln7T5EybyaRlqC9BaFTsvn/g8C5noZNc2O\npWUClWduYnO7f6XcoFX4/LQY4QUofuRc9cJ2m5giyZCLSx2wqbrMCcucPTES\nrN4ozoRepqldGLKNSZjLN6t81HqAMZNcIiJ+6HibYYMMwbIn0aV8Oyzh11Wf\ndx30\r\n=iSbh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/list":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/menu-surface":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.90e08fc6b.0_1626997194691_0.5744239984014683","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/menu","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c51af8011f365dde72495a392248f3d96fa627","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":38,"integrity":"sha512-rlPKoNJAMx2NzYRwVtHL/wYp9a04MiALuSEJKzaXXsjdPYAoyMNlNwkmY4+y6xaTODg6CtDzKR0oYdDJRkDaGw==","signatures":[{"sig":"MEUCIQCzmbV5KgASOWf1/1D96asE4MlUNO8AlpKqLgR7b3hWpgIgB5f5fjLxm7mtAp/8EOF4RykQZh3sCCLEABp8gLN9gGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbeCRA9TVsSAnZWagAAJVAP/jd9ZIgSduC+Hc35v8Lc\nWCc3CzQfLQ90/+LwpY34wzqTfbKN697tWzQARmext3u5puHPOIBdk84Eb5C3\nTkotWm7PGkpVjI8TQef0LeoMfp01wPCRvBV8U764JZOulFK5quu9Tf1OsIpq\nb1sXuY567bwhzPdDkMDXMcjFR48UtrWDnp/AlSm9TRXHQE4M0k/6ro/+ifQe\n4IFgTvAgZun988Oqlx3AdopYTMsizZMdYDyQmIuIxyiF1F6HAr4fKd1u2Cre\nmPJelPctQGfOVlR/f0w6STCnx2jTrMRoKPXZFDWjQDrHjX1xGCP9Ow75xnHy\n9cFskh5iw6t++pcAaDvcf6wNeCBMa1NCRiuVnOiH2r4Vcj5H1mSjaj7ayI/Q\ngOC0hBZ93WKtZuQ8YX7b9Q+WHXD6Y9kiYTUwYUetFjdIo8L38UBMliZBPbTj\nGtifXlqG1qgjJ1YyJEfAAATRzOeG3ElFk2rex8JBYUw9nal+24V2OBqEoaRp\nMLwpakhSvIaSbLMgkS+3kd//vo4RNSDBfCzMAQmoVhyYxeDZaQZZCk8M9QW9\nFsRE/RbqpWyFSm1h/ek4CYn6kjA8NFSzqazQNbhdfLnkQ2DqJb2cT/tXlaFa\nbtcQoSlCeL1u4JJQun2uCV8KNRYOvzqtkOCjXywvnaediJ5kpTEFAH7QxDdy\nGiz+\r\n=62pV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/list":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/menu-surface":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.cf5b9eb86.0_1627064029968_0.5535128892424706","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/menu","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f31b6d537007093a730654bdb08984d034588e52","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.3f36ac75c.0.tgz","fileCount":38,"integrity":"sha512-d91/chiKsW4hW8EIwx4jv5h5fCFGuIdmVGHC1joWZUVzI/vhFZLdYUkJdnwtbrFyEMkqoB9fa9D3DML8QD9cIA==","signatures":[{"sig":"MEQCIByxbgqFesnu87FaXGBVo5F38cJQ9WIQbFXFnYHga3ZJAiA/yX6Z5DIXEKITIst9CLkQLUsxUPwUaXekF4u2laYxPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wuKCRA9TVsSAnZWagAAYx4P/ibtkzvFmlTywkbtK8LC\nCradrVZsVWapB3ZnB6D6i7P1mlGDYVUb6LIWAIMed2xFLU08HU865zJsRZa/\nXIV3CViQrcmfh1X1Ookb1U1IMoFnA7d3KXVOER/ttQ1l5ZbrRpJuaWNW11kT\nY47UFIYCVt/hQbRCsdToQskMh654DbYO9wWSf7SrE4OlZE2EDNNPlkQ2jBc7\nNbG41KnUJGg28DVn0I9ZNCg+S6IJxrltmgnVJPD1ZUsLZ5xWMf3aNAqD847Z\nkPxZc5+FVs5hiSHsfuHB2Mn23YLqMSnunAWoBvXwd2jumwr5MSDQjCTJn0k3\nUllwwRbEsrhBbB4wm7rCQfZL9a0jSuH8idBeol/6XZMTie/7UFO2ya6tdQo2\nPgulAvWJDm8osoKUS5c7BSiRK7YhK5SW6zAVpnyVtKyiTSgjeX78ltdHG6/Q\nthmfaRTMMCvzMsK+dLiOctjEDlgZTc315D9arDSdHGOOZFfo1Rjowzvf4IOT\n5lhDiFMR0E7A9HpnmezKllnrPVBSfVrujQdQf7hpLu4vjgC5BC9akCeTrEOW\nXlOblOHyOHFhDN0nw/TeqDWyI2WcT+Piloaz9F8ZqfyI/4oJjjxVmslTvt5n\n4DCsI2ZxT0oD+9xSDJnlBoiaXTB8qi5q5tW4D4i3I3koH//RApYYXCbpE2WT\nccMS\r\n=xXUf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/list":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/menu-surface":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.3f36ac75c.0_1627065226047_0.7799577001868709","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/menu","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aa800771938e4c4ec5f8e21198e7eec145d9d61","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.ea1e1b850.0.tgz","fileCount":38,"integrity":"sha512-TnghaVgt7D8MuGkJ0EVcdUb0pLZ/BNHEfvBQRkFBY+Ri9X1In3OG+ftYsBtsSx6+ewBpbREUXWb4yYgZYVO0HQ==","signatures":[{"sig":"MEUCIQCah7KIyuxC/8JS9QK12V+0eAt0CxilLg3x4wRKif6poQIgA+GiwElc971kZP2Wt7iYNHYeounTNUaPyD2EIlc+wDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6xCRA9TVsSAnZWagAAzskP/A4kGXql7V0BcDbwq+LC\npPxcDrEKrdcqhvJUeYqMpCjhZVZhHCH1aIFPo0LAFLXoaG+0PkmHs3TdR6Dv\noXaf/jRXS8vhizw0Iu0QBACDLip0lCf0LI6uDL7T+Ix8P7GxzC9WjT46b6Oi\nicXHdYf3TNFbp6Sg8vR6RAl9d4G/+O9n+uyL9PUt7FgcG9fD6RcX4aZRpYiK\nY0TNOYSikHHHcHQlmsNwm6UKpaX732DpufhdvKXRPvbCLfv8cwpWwgRKo2Pb\n7e1wVZc5Y0JC5CIKIrjXlepC8s75N780qKfCBlYIakeagSTNTpgPW8keN2J1\nN/BKeOki6PBsbw4QBGGQSnUBs59VIvCWrUf6XCtwIWavu5jUjSgVm6K0hV1F\nhdAweZ/OuHhC5CZPRrY/DQjbfWQWJASExHyxoYkdrrTnfGX3gVn3sWkuNcA9\n5yU46BaxoY+9Y5NNWXEIRkJkCLPZp0+802XVBiXvPCGsvYPsGln/z9KBEM5s\nw+wXbG0AVGibwfI35ew8UI67fZ4zwYEt95hI7X/4jmrU8Y38dPJBzLobZvVb\nZgL2lh2LJ432ZZ2pTKUgz1OG5WMeXCEU3tfAVtYKiClwPVsiEXR0f4DxoVnb\nmcwUe+B62IjFpnUkGKJdlJT0KO2Rb7Yw9O6ZidmhO5jBLWUsZm1scf+4Vgmz\npdhP\r\n=hw7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/list":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/menu-surface":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.ea1e1b850.0_1627160241607_0.3099728353489224","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/menu","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c5b4d8cffe9471a2cb42acfc60d48ce9bfdb41","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0-canary.22f390c43.0.tgz","fileCount":38,"integrity":"sha512-sYr1NFXs33mlsFy214NCHirFUzcJifWW6jqdDN79UjAXrkPPuV3XA5eijK+CPNQDMQ8f8NgJ7lWt3eGqFM80wQ==","signatures":[{"sig":"MEQCIGnBl/obSEwMIGw3AoiqFZc0a/vkgqADnDKS2mjSdcWxAiAnOqRRjrax36DhUrIYDfku2CrCCLi0r0/Jltyh6ajoKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFgICRA9TVsSAnZWagAAP2cQAJvOcMggYRFKRrPH6Lvs\n/JFkZQJMRl45Ig8uob1dThU2hnzeqESSp+b0Ig+YPo/L0cnDB1C+6NhZRDPR\nSxQO21BcHysgE8KIZR88sO9i5bL3diXUOace4PJfepYU7ndygen7n+Kq1ZDO\nu17z5R1flkkIAcy04I/8KSXaPswZ2fCwt7B02n3rNH7wZec3M375lP5KQ12h\nH0aOZD4iA+x8tE2iw3mjLYVXU24ri/yZbae/28gx9TolyILI0n8gcnfCioiB\nSW2IwH8ctEzXdOcZV/Q98qZ1EsQE59JB/vkb0rQ2TAb9AeAE4PfsI0N7KrAX\nkGO3IWnwQb+iMuSrmojTY+Ogm6jo8y/BzU2iJt22pbZqouz09IwcCEFbxK3G\nJwVEJ6bxofvDSAfog2KGW9E2LCQYcfCsqw5PwNJq1efdXLXejA8qSr0UePPu\nI0LA1Lo8RydXKsqHp9mc+PSciFGcn37w6mPZppfK/6AueRlu2ebXOp1fwiO0\npcu6RcnlVO7UOrjA7rdblp2u2xvatkbl1JLKMljY32sG3gw66uG4tIprgaqW\nwhCv/oz6v0J+wBkfHh5Q8TQcvJS2oRtv5tHTU375SVFZMFxSutClQMCSVTjU\nGWaNzla+jkobp29cdtC9grtoCDx2HpPwU/8UBe/Zh0dupP+YbVBGtDLM0GzO\nb+sn\r\n=1uSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/list":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/menu-surface":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0-canary.22f390c43.0_1627412488691_0.48780119937572786","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/menu","version":"12.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d18c3ae06ffbfb3279d393002dba81a6cbf47495","tarball":"https://registry.npmjs.org/@material/menu/-/menu-12.0.0.tgz","fileCount":37,"integrity":"sha512-ZXySzEjMbvQQi64i75kpZDZNiCIVdomxw7QwnPkdD4hxElce+8cSTOalW4nTntg6lA+4utTc8zMIMvxugkrGJA==","signatures":[{"sig":"MEQCIAyWm24lBfBEQwmo93yXD4/bU763i8uPZDMSyHSEG5GkAiADG/paBvinFpcItU9MCjqncarN5EuagFBwKxVLUCJvxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":746791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPKCRA9TVsSAnZWagAADakP/1qDA0470yGMuqWlmcJm\nTJ798qKYIwcNIAiY/BWCcu0Iw30bICMJmG6C0T6RXuLq40DNO1TnHPgeCQiW\nwnbFgQY0+K8MMnalRgqxINeUiz5w2i0NnLMFbtM22M3pyLufnHd4csK7VRKY\nCjrDnFXrWQcrGMoBIdUOjyqJCrMMXtP2k15oShU+JMEwVdlrWK+syt+zVH7L\naLrmrZyfUJ4LZ6a/B5y0gRUBtEwzJL2I9fLobPwBxlBzHk0AXOOlqIrjviBt\nvf4y2l6xdVZSOp6njARhPgqMLo2bEatCuYExpCtIhUhbZxQvp0Kopc3P9Igg\n2Ob4WZ3ISBF7JCixpa0sxpt0XF07n8vjexnt2vc2tNLK0i/S8LtIeQSOWwO7\nnx+BWOk69khbnGx8vpo50VTzO9ou9AgEYFY+YrzVhGEINWk6z0iUfvUOkib7\nSSsCIjex11aHtSQETrMeblnELX8mKfoEBlTb9/irDQo2l4uFuUWDabQUycy1\nSHeDA4KvBw2xppn8QlxHa0kJ8wZ0V03W65WBbcSwZkIpMqbBuhJUM2KikOKA\npjOqnww0FF9D4dO+X+bx/fV5d72eQrWROt0bKMMuxU0wzeAQp8fG0og04YdZ\n0xdV1TtGIysk9pRhX08qw1TAAudORwO0oDTGs0oyARaxAdKmxaVnnjGef0+v\naiYy\r\n=zKU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/list":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/elevation":"^12.0.0","@material/menu-surface":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_12.0.0_1627415498788_0.28788408435465307","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/menu","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b0dcf48a3e50899117a35e8ed79933f91b55cb0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.ae85f7eba.0.tgz","fileCount":38,"integrity":"sha512-gRGqTT5tdLUkc1hVK4X1sTuQJW58toHfL1zJZJ0p7NDBrqgpjadvgQizu/FnmqYVKJkdMS3jSl+AS+mTqGexpg==","signatures":[{"sig":"MEUCIQCZJY+jIpisrsa6EJG4+LFCdDGyKulf8hbBaBPmrZUZWAIgG9CS/uDsJrIqmaGdUW8asA9EeoJuJE4NjUcQUfJXOZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQoCRA9TVsSAnZWagAA+oEP/2wDCyVw7viW8du4QrBY\nSXB+VqaGlD1WfzG0PEMLV/n00P1H622QoZNH7wfB7KWtTOH00PRf+3dFNIl7\nROoLoNhUlhLMpkS7c7PzlWRIThtZm7eef1+63VYs24Art7t5xQqJbcfKTUVu\nI8BWp9ije6TcaODp0h6IxZqvuhxNvEy18r+ABJZeGD3lfWju0oK24cyv3DEI\nba/4PRdtY51FjJvoyrPiQX7Lqt0OyoSSbWcBIWqoS1vdXdEpwwRPJfmEQsPH\nNTsgZQ+8nTEg3XNIiCeksqQskVMzE+XABKKpYECEBBEqaS/800Z5HkeZUaDB\nzdnN7UFm8B4Zhg9fGasLHgOcvTrq/aQv7dr5K92JxL2eaImcle3yv5sO7A2L\nqgskZVdAUN/ugpfKwvyCVk52Vtzt8jcnQP0dKcsBWH1hoUxqXZ51zmUFgojq\nRtg0zmA0IEu9l1ofKytq+Gop6jzdCiJS3lVn7FaBOx1XIm2uENlW69GxdXx7\nr0oZ8br8OK7UaMeW5MtZ+TzqvtkzfvGt0cWS79idRAe53jxAuyGJNK6bS/bn\nJJLGP5keYjEt1sdtw0bfDFK4xsfkFTB0ap0ZCRmWPKvP+qPuSZn6ZVdmTRRt\nnBeWWwa4R4QcCXd9k9Zm6Uk8+Ly4ELjWjtW0M7boPByeGQ8vdLBiDraQfOr5\nskSf\r\n=bWme\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/list":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/menu-surface":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.ae85f7eba.0_1627415592231_0.309659783145672","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/menu","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9701d5a0da77255dc1a173be1962c503f462ec9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.5981207f7.0.tgz","fileCount":38,"integrity":"sha512-JD1zllgaTwP2BkKeWpa9ff3rHDtVGUEvd6fR4w+BjlwKV1MvQPE2/MHhZJ2XWtY03TN/mG3t78m7Wf2xUdBTVQ==","signatures":[{"sig":"MEUCIEgjTilxuUhPBcbWR2hb7KyIKadsn5N+O9zcoXn0jqnrAiEAhqVGP8ubbEjGYJJX/kWULmvTTnV1uw751MOBZtMZ2TA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSWCRA9TVsSAnZWagAAK8wP/0zqa90fHfZHptsMZRtb\nM0OfBKkAU6mvVPLgKkvih71YQy5cUBRKZhqkRVNViJs7viRqTdmUFsg2d2O9\np8bOVteVcHiLYrCR2+LCl1zsXI29QgsgH1KdLuROHcK2yTPTWCmlF0fMp1af\n8Cy2Q0OEP9ndkJj6EsztQFDbjrTn+/5VsFql56llzKk9DcqEBpAfsIUudPkt\n/3DSvuNicAPLlt64BEAHmKnxq5k6JpZx9/CfkW4EEAAErOEHXCRmhhMQiEdL\nJonW81KNODeHDFHd3VydWW3BqIcs8ybNrAj0wjFdOzwxZa3WzyYNK9XyJPO4\nA3wqxHxUOlWL24JC7/ubG79URDDie3rfJLFLR1my0CwquGCcwm8Pp6inj2mE\nBeiJ4TLm7fEwOqkUiQ0Iv5Cta2HWqU+LZwpdjKz9vccWIGcb85Vsl09or4Ze\nPbrh/P8hA+o9yATvFvaqgDeblQ1vJjaNF+Jm0BY4GK7HYD5ln934LEYuLtsn\n/rtmHnLoNK2Aq51p72SAoY2ovoXYaEoz+q0l58Rrp93AlEHa2/cnzx4Fk5lH\n6tuXdI+P73Z2KyvhbMRev5/9X3M63CXjp0DbtkSsTDFDvaEyZ+yUVacFX/jU\nV+wV3U26Q24Shh3sBTbtVuDgDwVhsfOvhEPEQmx3nDkpxUYFxkqn7QrcNwZ3\nLObB\r\n=H0vv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/list":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/menu-surface":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.5981207f7.0_1627427990536_0.9227933271008277","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/menu","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b38a8a6cb817a6d6db3c6a392628fb6dc7bf8748","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.83bdd0222.0.tgz","fileCount":38,"integrity":"sha512-Upf3YdQWE0iHGTzQwiU1mWge5xSgTAnnvgt+OrUBFXbUftU0s2KzfgconAXtJ7zmduSs9ZbrsPZVAsqTpDs9uw==","signatures":[{"sig":"MEUCIQCtfX4W7/Yx0ihqcAQteK4uzvLIW1jgC0+aqHK6xPN2zQIgCQVmgmciCDyPUvYBN25DBzbh/YuaX7Krz9KO8UFl4Pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZOICRA9TVsSAnZWagAAqa8P/jS004xIwJYFR9lT/S1g\nHpjQHftHBhUZFYOl/svSGYulHyOW+vfqoMxDqRfn07dcAWoydgTs96hE6inZ\n5a/xwgBBAaBbmMDDcK+tTRYXX5Prweam5CF0WdAVyekpOlAWAdXYl2jsxhPQ\nNwPfOFCHnWFHtK4UXzbO0IkEe7fpH1e9HxEE0sVV1tgAW3GJmDdVyrSdwYak\nCiZnBq4MeJnBze7EHXBytSftDsExA3uM+f+1Td545YVdhlD9g/3Syv/3nGhr\nhA6lUw/xxypbZXjlONS2FsBGSLl85/DoLYEyGjugzk/uhAoH9JWGtI7wF/H4\nM91e3CgXpLAdVQSHOuy0klUY7yjwOk0uUXO7dJMrGJTfcFjVIRYcUEsL2R0L\nu0eGyQnIDTHrjq75XasxfOo+8NQOzCEizViAQmctNbgXsR9XmzDFQ+Wir5AJ\npHN12d4fIUoZ+5YUri2iaY6Mz9XCm96XwuIcUJ/bhe220jQmjCuHEY08Zk2v\nYjl0tPJLCbikXIpIpX1ynLQbTYr4UkWVarXfanSaKZHwLrP+ZG8bai0xz3Fd\nITzK2sym0Ym1gYhCjp2SoSTO+B+vmI43LeFjQ1a4+mc5CpDPz+PUVCXFFpMf\nUCv2H2XxdQ71iqjNkCFkp8XnJpyjDbnaYJU6RmbqPRrzYxWl4xF9A1QWnSPe\nUP9+\r\n=/g1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/list":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/menu-surface":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.83bdd0222.0_1627493256242_0.2937612885334946","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/menu","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b4bea7c39c7cde6e188d1d9a2506e9cb23c0913","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.28656298a.0.tgz","fileCount":38,"integrity":"sha512-mfehKl/RcQI6foGCKe5SmiDQA2szVRYuzQ+lZ+mmHNYqf8WtzhCp8gToDSHJD8w378RvvF24WVSYlC9zXTVSeQ==","signatures":[{"sig":"MEUCIQCYtky8dloFxg5O56zuCInimV/t9iGcmbyKQ8vqQMwHPwIgRA/1IqXvNaF/KNrnT62QOTl0dJ/J7ZEnaUyhpDezWXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvASCRA9TVsSAnZWagAANI8QAJS5f3Ms1LCI+gbmT3WE\nPpwQ4Q2hHwcxf9gJDyJ20jg9oevFhoYjTC4Yaj5mh4UUG8+uAmmdCJWAOqZ1\neJRpfdYlp0RpwrzxfJZSqormY/b+c4UgXhINOQI4GGP2lnCBRvQpdtGqnIun\n7pyphtoX8ivi3YC/SEu0OvekOdda+IB8F7N9ushgdt8XQzWBHBJvt0F0MiJm\noe99BI69z2PXPWKLvQKWYzhXlU6uGvyjiLQtuy/kUPxeihY+DWkUDzt9PJay\nj3JClRaHWjSbS2iK48cLhy2jG/VP5r0a8mGdcnuJS4h+GOW2PR1z+lDiafW8\nf2lVrAETBEtg2+m5gP2U3FiksdG/kABzA/zmIiEEcxFhnCxnXhJOSHQa8xjP\naqbqyHR0kIkwUl0cQJ7Hy8M00rTCte+xSMPS418BQodO9x28m1k+Nz/Ruosg\nEInLKjdEW7JqXN33v8h1Uz+vMXPZRFK1LfRYqIqOaZiO10I5DX13KTarXjTb\nceVh6UArfgGaq87xW2xw/57sDQU4bYW/er5HMVR6S/m/rOj42eysOs2U7oih\nJARf5npvRIPW7jkVrQgB8TwKwUI9rYj+PhUenxv2zTJGP3T+LECg8Yzk334+\ng+T3Eymyxni7ruB7dLn3FIYFY0kcn7p2C+B66aRjnjoSMSg32JBCGvXRP0i4\ne6FC\r\n=+NS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/list":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/menu-surface":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.28656298a.0_1627582481954_0.09324572312256096","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/menu","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a7e8e12ead225449db0419f1b681d696045160d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.9e797daaf.0.tgz","fileCount":38,"integrity":"sha512-asyeBNMjk6/MOo2+/+mxkdBFp1G6x/R3uHpTs7uLktbtW6bRijVo+Zneui1yRC2tBOVOMnzIXfUKR1TzHajqUQ==","signatures":[{"sig":"MEUCIQDhz5ryF+eT4/UZHThQPX0hMwtzU7CYsK6dbNk7dDFwsQIgA+cZHaHyMmRlt2XVjj9h69cRvbmd86if5fRe6K/NqCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvVHCRA9TVsSAnZWagAAZmUP/1b6iV1CzzkU7XQst2Lh\nMIMR+ym61FuvlybKXNDRoMz527B1jlBCXf2+x3GY32VxcJWCwF5DLtkYSTBX\nZBv7WpMkqtftzhE/MtniGJIH6TCr44rH+NGjc2i06+05rPLQ/9x48J8N9DNP\nbD+uZYNa2Sz+awkGDO81oC5yr7/ZyUCv5sd9RsrcK8A9hgzAggXI2Z0z+VhC\nnpFheJPJZWwr91Cf73cESHUvgvMkBZg6eyZPfhCXg3kllI+xBR5sIg1Ov1gl\nY+Df/glDw2h4sPndPvKO5Bm4gQtQYef/5+JdpkeetktnqG0A7zfnN/dMR0eP\neFwcadMUHbcVA5vSEIvPqZ17lSxGEACoWUe6qQA2/yNFLgedBaAqDboD88+C\nAAQUE3JhuStTUxLOG6CFIakd2GHMsjqm/kB2ljFOiklnvsRTL3HuXb87IV5T\n/TSuhtBUKmYV4qUciW5OuTfBsQqLSDCtKHDh69b3ewY/IdW8ERipAh+1j7iu\nNxje3Rmxreqo1st2avq3G+F8cNbqvPCuL+mPnoRwvNhkWIQnaU2cdcJzRQRR\nmXAKHGeoeFbfntydOUkIv5TIuFJj+CqTJUyiBlhanQ0cdop2COR8oR4SSkq6\n3Wucc1O829WJdrsKaY4y6qZ/ciM9EnnQ1cHYoYm4JrEwo4N+tFlTym0MTnsX\n+IqV\r\n=Gk2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/list":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/menu-surface":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.9e797daaf.0_1627583815575_0.09599387623776101","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/menu","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1060f1d120aacafc28359a408839f654097a298e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":38,"integrity":"sha512-X4gVVh8h5NBwKsQfuomdLJz8sa206oLy4wtYV4CfIoLkIYgQ3ogYc5IWMutU9K0gmyit27u+PAsmuypWTZ4F6Q==","signatures":[{"sig":"MEUCIQCQqjiQQ5n348v4xEvZeI7EZYgY8zJXv1o1lB5PHoMbcwIgaECguxoQEEmjoIPKNtaGA14+EUR2ItQr8nvTDLti2Y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE3FCRA9TVsSAnZWagAAuIwP/j7LgRajZvWKnecoqW2K\ntdXPDzEdTpfN/KVPEFRFHDgNG/wLFhbxVr7Qe56btvGj47klGsrDcPFOHIsA\nVBN1XdXSA3aZVIW8mv1uE2OAozituQHcQyqF0IMZD1hnt8ALOnEao+yjyK/O\nOnCk+8EHtK4kvlnBwsQYUfcqic2fShORCnzRGEIQS6SixoxVSdPQ6NcWtWxo\nS8cC6LtKDzsdTirfYaC+lUOUjMyZQfc4F/dKNC0cmfV/LmeKXD/HsnMA+xtC\n0H+ozoE7Ed7eDS/Vb0ivyhkgCPrqy6XYmMYSI+pNxKzeblCGvzaB3IhXTS2k\n5nv1OK4UzeJpVTQnBSaaa6JMBSL5tT85iXGiAP/iJpurxDV7jIEHzQTI+0pv\n+Fh2idOQp3R+6I0MMIYMYrEXDNHmZWWRwf8ORL0FSV1wa/6ZY/ywObTozxG1\nFCA9d2eR3lBn2bxB+zbSitOU29FrGA/b6MOpoWknyU9xfizkacL0N4RECS0S\nHZzey7IEy1DhQsFkOUDTX0fSAUcICuep/ZV55++tVSEss2Ssu9VEaXRs2yXP\nCqv/Oxp9B2Pl0qMCrizh6v16a27nrIWuj66cElMuMce2NKKMwf8XbnvyIBy+\nTPEjwJARKBMOYKSGFTl44JiqcBFHKPpjjqAJbd4W+Ejc+khqMKPaERTsn7wO\naNMl\r\n=qGQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/list":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/menu-surface":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.adb9f1ad8.0_1627672005075_0.15991022857693604","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/menu","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8514000a3756b187382309928953c547832bfa10","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.cc5377458.0.tgz","fileCount":38,"integrity":"sha512-b9v8S8GelMdI12qZwsHvWu4UI9i7XrK1dhsEgF8pd84ZPEKMBiyS/jVz03dzy98cIQJ6IhFif7wexhkbTIA4fw==","signatures":[{"sig":"MEYCIQCkfXKgMT1/kJHIWkPLJsqz4lHu+V/i+1Sh8Ufohsby4QIhAJQoV8S0NOgYKJranyNpjWkC32H2Nk1/MduCZcjbyzSG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHCCCRA9TVsSAnZWagAAdHAQAIacLtmqyDMAQu1BSCGf\nb1Nz4QN1jUuy0g94NbJ6TweyW/sxm5KFpa45LC2i4ALf8Hb6RQ+UcO2Vbgr3\nK9vSxRu8www9wjvE5P7xHDV4hrkJ1RXvd8DfWom/nDU+d6WdgH8grJSmelk4\nkQiePJYl0exNd6569o8ohMskt0N6d026BHqppICITjMWH8ZiiU2n6lPGSR9u\nCEP6GnwHKWfYOAkMI4xQmVvnNBLla/49OhTnR/pAoBuWSYuoSHoErCdv7i2F\n2OgkbMyX9K23UZwyK/li2HJyvb+GuLKVBkR/z9BX1d4pkzPmTcs7PoNCUUUY\n/QPKVbIYEblFFbAWVhhSc0aQRcH+9x0yb13QtJHbVGBu7XyzdHaNKHY/uRyW\nMZgVScBR3LQHaTuYGfCshX81dG0HJHxz3gJTNTHeTx1NAMTk7wjje9KugNpI\nurbSvfwOyGvv8Qo4RNUqlS6ZYYaVpumQJmHLm2KRAbQXzU3DpueutNF8AX8S\ngIrRQN2s4RyGVZxguP6B78Am3U8HDKAgI2gHl1TfJyn4denCbIsUa45VnCvT\nuPwfY/sNrh8hAVyR1KfZV8Ilsa96btO2rH5I192Ec4KCeuKOO2FH85YQxjBX\nlM9VvC+YxdeBJPApJpjPmdvOFdDAfvbfg5w1xOYD1/E2h239G25y1HSBrbJP\nENXw\r\n=33lK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/list":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/menu-surface":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.cc5377458.0_1627680898014_0.6583435267670372","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/menu","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"523f850707c0c599d7145316a349042e9bc27842","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.a395972cf.0.tgz","fileCount":38,"integrity":"sha512-NbeDZ19BcJzPM/LmDjHLKzHFN5j3jLopyokGj44kvZ4meIVOTXPUvXpafvHUZZS4eQhqDlDzfxYOSkp5YoiQHQ==","signatures":[{"sig":"MEUCIA5dsw1CsnacCbuhfSLeplWipr3+w8A2WXss7JJYK/8XAiEA3dyqCBEKvKi+iVHAj/4TttR6pF4RJKtY5uARWKGtA1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQqCRA9TVsSAnZWagAASHQP+QDZCB/z44MoXTxpIXcD\nd9wn9DDowOMoUBu91YaQmzws5ff24trL3zgpbRQBanSM+rN6y0fkL34vnIZK\nuxbjZb20WLeyIiS4knh/UoZ2bYARhYBNmdUMzklFl1irJCyDRtWEDG09k/hz\nzT3NjFfjQxEQ9Nc/12xT8SHhIpFS27FLKdkLadpwA5kAahVDNSkjkzYO817W\nWTljsRAXQWkizoWIgaVtUobiVic8TgLyE2+KwJJz+JLhwsE0mab2uyfuaWnu\nd3Y4SS6wYPDiNQj0X0btUOHoZdDqIN9t70RlwEVGObfoSD9mypeG/GATSWMY\njoD1EJnLWnsrDCRvNIRu9QP11+rtHNxHJOJZun4OPuYH2mAKFJ8V7ZO1RNg3\nXUpALgy5HmBEeHDzJVarXJKIVxXNCNKS2pxqJhmaztglKv/K4l39CO85cOPI\ngD4UHGOKrhEKhGJmi/L/68b8PpD1yJDUaovX/XnItTOBGNdHKpx1R8bv1gk8\nsYtcJCPr0SUjIZlNUnSWveu2owIZc9NCNcp5PXPSv9ekdJW4xNn+8Rd7hmtz\n7OVx1rBO4UAwOJrL0cg8lWdMc2Y9VCp+mSC3jXP7oO3sBI0yLTD8Re/E3alQ\nES7nGYI0LqDVXWaMSEkjRl8n8h5TEbpd2GCuspJiAwT4UEIcNM2RlLHcIyd3\nUa1F\r\n=EIki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/list":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/menu-surface":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.a395972cf.0_1628025897874_0.15909368782669242","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/menu","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2314734018737db8d5a0bf87d370e93e5e06b8d8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.7c96e6b98.0.tgz","fileCount":38,"integrity":"sha512-aDziDK8v4rEtJH7yt4sexgFNKREE1cYMnM1CPkWap9QUyOELQDmuY8Zte7GC/FdD2DvNjdKe5w4Hw2Lg6Is2fg==","signatures":[{"sig":"MEUCIHDHV4LkxLPTVFcdhP9oCQUv9oS88BEpq24App4Zzrr1AiEAlVmT4yKp8aAqGRxVxN/L7Djh7LqfsSAMU6c0+z8ewcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCcACCRA9TVsSAnZWagAAtM8P/jG8t12kEZNbB5YoC9of\nNxUAC2zcL483g0AqYan5tA5YYmoBQqj0XLWhkQQEoOL1R2YuQ64XLhSauYlr\nPZOvi2W4/BZv9AiOr5j2mYJT3EKAE1ZorIlUAEPB4UIVzMGgNZtLjj54KS1v\nZnzJoOLvUCujdBSO/2g9g2EHBkVecGQ6s9FesYqcHacM9UNtMZekoQKrABlL\nznbLrTraBYO/5oiUfTiBqlasPQdHz/P1giVZSB1dVLIJOpyemtjwYij7Hq3q\nLQ5ctErMW6nZXlMemMABuBH6D6LQG10+SeZ9edvY3NUSsnlLqDVEFPI730Sc\nHkrQxKvdcPB2GOe+8y8d+H6MfE1mF2bLuobgyKJqjafmOxr2+q0ExYj/kOUz\np9UZwJvfOmWkHEBFIB7JNs0ZPBtNz87WXFkizC6EKGrq50ambHfWpV0XwXer\n6z1UVvxMo72MuPVCLDEvDGudxqPtrlFgPZ71kZaZsYsUuss9addpTC3QTkeK\nfiXn2qqu7UWncdTaN9OEsHknw8g7FlPHqdbFHekdHzlOuAGCT+ktsQFggDqj\ntMkxilS/jXfQJzxjqWqx4kWFSf4L64nQh6U0BE67HAIdXlDEnivHxwDE2v30\n4rMCdupMS5t2uJlmVzX4xYIpSl/CEsB69HTMCBqZdUWZbr4f2ZeU2GVwME20\nfZYD\r\n=3JSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/list":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/menu-surface":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.7c96e6b98.0_1628028930536_0.6412637758372972","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/menu","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee37b7a216bff7afe280bbf07ace1ca3a215cfb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":38,"integrity":"sha512-Z2ERQJDNUE2l4hJBT8HdM/+nqwbRXygDstgqiJMjVDFvEmjTBSFSf3KxK3fxSvVaFx+do52f4DGTJ/n6LedPtg==","signatures":[{"sig":"MEUCIQDQWkZ7DwfEZWIfySBL7zkVp5qQZVDL2YIlNbS1gY/rZAIgaqqRHxqvvnTP9dg2vEXivzhhMa+gqkvEyVNxuARwxgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCypTCRA9TVsSAnZWagAAZ3wP/19392RlP1/fAD/bNL4w\nNMEprHVjLpYBFOsX3GMZL6/slXAaGtsWuJtxnF3PHpnbBCsUzylEWkv3AcB9\nfZY0qSmudMYX292WZLyt9qMnpy7Frh4vbakkHb6dQEmJwxpBv9C/xVgHOYnk\n2qQpEljnTocZdkx7rbWMFO5Bc8vlA8RnPFXdXVnchvzaanUnVW5fXMrpholZ\nrmupKFVr4pQp3PxYWgnQBcBcumBslUkVWUfwI3FT72E+3zGdAP4jA+Px/Iat\nZaoGItFdnZ1X10oZnvmi3qrfLYgb30iAYmVRVakk/fvEB4y52yVMFQPzm0eD\nDeacp55tpKddotn42Fde+PkxTQnTNncf/SO7JPHs/dYWdo4DE0iwAhcT8XWm\nQzvk7iIdWdCTM3oHgMShOZ7IovjKp6+1eMksfhVVrerQq7pPk16/CpZSZuvT\n6RJO9/F+Q4InGIxrdOP0T4bCRuFoKAN50W5J/RB+9LpU2mQhjq547S7OwQIB\nLhrKUn4g19QgYH4gmUFIEKYivdKu1e2gChlmCt+0wuMAbCXPz/ORQMDh5wRE\nfJDAJx/IBNIYzcVVB2D95wcpthHoeV+g+MIblmWEsNKcIUAkIvuOvRzsgu1P\nSfsM/TgYP45zPdUGcRzwtE8+zXHMddrXrB6QOOqZVDCaKroTyKGw/E1Qt1Hd\n/Gsx\r\n=PnSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/list":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/menu-surface":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.a80c8b2c2.0_1628121682779_0.6286702556687567","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/menu","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb59e3f68d1be973765056c6f4d4297fe710baa9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.3dd611091.0.tgz","fileCount":38,"integrity":"sha512-NEPmJTRyshJ7Us6OEM1lNORADTTSze6Y4ok2A1KyhaJp3vlO9UkBLsBma2PDgkFlbGJu0u12JtgYWmP552VEuw==","signatures":[{"sig":"MEUCIQDulcz7t4D/YkNwc0qHok0u3Z2A9158jniI4t3KU0DxKgIgUK+RCTFSdjVEgIRTAwY+cEU/860DuumoKDH7VO4PeYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2HRCRA9TVsSAnZWagAAOeAP/igKPfPtzxFVZKLigS8H\nhIKCC1r1O50jZQAGUVKlfAUp2yJ2Ecc+unoLSY9q/7piJZVKhj9FuZnwrHuF\nWYAtnzyq4ZjpykL6VrgSNrXbP/fY4bMYqsZd3NepefQ4fU0vqwidCrY2RuBO\n7bvLpuijVXzY+UEBmunUKkDHvqVoKefHkrllh9eDHSyCkUR5CAhNqe7FyLtV\nQVmVCGdrxy161FtTpjBc2WUetp8RjO6j1usawXbZh9okrPKy7WryohlxpyHf\noRHkL/d5k6kAjRYiCzKKY86bngS3Ub77J2JHNcgVRMp++DSGNcgmwNsziwRo\n3bImybQMPZ2bePaKnuSaPEoT/e6LinMHSC+nVDJL2jVIhZBeuBvVX9ZgjtWJ\nF61pZLRUGDB3N+rjDakpMZkC9oTzbxKQeKI/6DRHHf9Sj/5gdmIoaRb/X7/b\njSdy3OlAbOi2hNkn5ray+HneNiC6AO5O4NTH6kTBPO5mJ5O89s+NEZoh/M2R\nqPCywxZfJ9Gvl8WxL+NLb1StorM2oRuYAoR8auoV+pBtOh9PJp9ME4WrGGVg\n4sniSY5u3T81Jmt6AMOcEMi8yp+EOYk5LCJOdF7wq7Oe6J4I+vtFIef82m2p\n/U3/fXC4imTgLslFUcqGp70EvTbOeAbQPStQrDZtLBDRZPSDK7kTMH1UUonG\nUUBd\r\n=j+6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/list":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/menu-surface":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.3dd611091.0_1628135889129_0.14463916584667547","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/menu","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19ff010583e8bb1210dfc0da6f062777ce1660cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.5dee37ff6.0.tgz","fileCount":38,"integrity":"sha512-EVbwM/uGBXG0z2ftjEWYBMfSwMmAuq31mxmKC5J2DxbrnAmNVuRatKyDQNxMEiLqUK82jdnZQAzr+H7ioVqKmA==","signatures":[{"sig":"MEUCIHjQc7uDY1wpdfSKsRUm4CZ6scGVVJILq5efmQHHYRWSAiEA0phmvdtBz9p39rSgfLCdqpKU97EgfpW6OodsK8hXhqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNeCRA9TVsSAnZWagAAJI0P/00BcxlVbk3otRHzNdI3\nMnGq/4BIDWg/9Vqg940V1AiuxtK0LWdQ2qEDvoJrczB4dhal1FcO6tvtxnv9\n2/lTBifp9fI24/hKVD7ullRoZt/+Cb47GFCNSqY4It2xJ9YA4wn1NDYXTGRt\nhhBlpGQ7xkehlGwM5bNZYEkfWaIH2pwA8NMSGPXNqnSTWbRl0sYW3BW599bx\nH1WOcT6MJ6pH0aSmGmiUBfUBwxSKC6bng6MPPoMHtXvgiuBy8aSBchSb2ihp\n5Y+XiyweR+/hy4ieemZ7qwNAss6SzGagOz/WOP53juT/C7qqib/B8WObT37Z\nvhGmmef+haCOrO11H5GUf9x7o0b7g2maP04XMUG4DCkbRx1SBn5/5fP2i6gi\nijWxIBvGQUIUIIrwiM4ls5Jc1wzOIMZgQK/2RikyiMqRL9GB1WNnlqKZaKyA\n5a6IESGXnotKQz9fZssDJDZqM/gvh7q7oSrEQ+Xzrl2U3c48SdWxN6b4WgwP\nvpk3tT2gm1zR3NQr3866+8WjlRM/W58JTCiZckqDdtMUMBZkTo3309SB4L5Z\nVrjrl5sfFtxEOGyx1y0OESK7xwLaDpdt5iDwHpuCa/27XivtZCQ1fMhnq8KU\nj2JQ1tD13S65jXoiGzZsIa5dxELxJ0TxrvMQuHEWpCBUDiIwnd1P43HNSRZ9\nO2vy\r\n=YFp3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/list":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/menu-surface":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.5dee37ff6.0_1628185438041_0.5789841635465436","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/menu","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a3112ef997feccf209b11b276f00d89452fb95e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.bf405d22a.0.tgz","fileCount":38,"integrity":"sha512-jK5nTy8EOX+U57kU8xsXajtjg4Hd0pTDmK+fy1WNrBflRfUel1dbNIw5/1HbxwCWpOQ+bXVrSFpS6VAK3hyfLA==","signatures":[{"sig":"MEUCIEODG72PXD0KoFvW+wDwijXz1oAl8/ARy8/qi0ieu7MgAiEA3GWZsRNvqzXdESUBgtReAMGlrWz4I+EuNNEJKJ1YbHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfnCRA9TVsSAnZWagAA+4MP/jq8LawlrkBrrbryvhld\nKCH5ckjO4lg9EHTXdXfUclrYsB0iHtXYTfmt+M4F3WwCjqssrhmuXGwiCTNs\n2ozXENPqh3zJOdbKxB5KxH5n/hDCaiEklKWG0+j9c/0Q30pSsShjuZnEHJ/3\nIJrRScQ54JyZv2U8QMmj54GIk/bOdjNz7HR8kcfANiiBJ3H4FAn16xqxiVws\nacL+m77dhvWtVfj8izXlBRreMr8owWREaFd+v+RPmHVUjjmo55nD2a+VQ2yy\nm0NKmGaS4X3uNXEHyMM8bOzIaGHMBGTVIGa/plgpLebVG6myo7iNByLE1M8X\nNo6abb0jXqb7PUPOQP03NXBBq+x4ScxAgpAYgS47jNVrVFfyae7zyHB1yhJo\n5e81E4RFTdriw20iwFZVzLlnTy2zoVf7AJF2cKBqCyakQdr+B3E6Z/i+bhRb\nM6WKOdFGen758cnAjYOqa/ToUIUMbdGOFHqyWec6MWDssIrC4mfpWGb8iHW6\nMOtsm2I7sfu2LdpIAvwQevhZRRtKFVmAFJHJ4imn+7BioX51o7zIVjOkTbl4\n195t77eGLA3y+Oe7U8sPyeMiyghcXLOKUl3ngjkVJTwi/CMVHner7h4++lYe\nxnufWy7f56HARSXgN306VL466bf19ZqptfjmY42PT7BepVFNfm29CWkvpf+r\neUzY\r\n=1Wj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","types":"dist/mdc.menu.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/list":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/menu-surface":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.bf405d22a.0_1628194791001_0.014129873023503547","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/menu","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ecd3b6e5887ed4bb07a9fef835bd3bc9d5abb9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.b47dd37a6.0.tgz","fileCount":37,"integrity":"sha512-Mf1qDWTPhua35aFjRntnDcBnmrsa6TPFlVEC7DB9ZKIDWpE+Zb5Nju7H6IbSV2PvgrhDG3GOEXOXgAOHmKL7QQ==","signatures":[{"sig":"MEUCIC/gGq7FQC4uXDdBQmFio+vTHmCTXUWJEy64DSvO+MEDAiEA6NTykRRZNJr9k69PIjUAEw+jPiFtQjQ8mv49AOq0s58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9VCRA9TVsSAnZWagAAVs8P/AxJv5O8/paqxkAQieI2\ncnK9XTdRWbHbPbEnTRKsYf0d30m6BHRnM9VuZPIOpjYDiE9pjfD3SNebJM6N\noQ/lQlkTKavGMqPSIUMv/vOsrHM1JJ9bnnl/fzxzVu2yrwoFJaztAXKiUjAQ\n+LJ+toKeYH85vFxeTrWdeYcvHsSBk/X2fdPqHkZk/1BKnNl7kAH2ubNc7cS7\nfH5KIxzXYLlRfGiiCLeVqMVdlDI9TFB41/bnWmtf0pqgtS6PyWTGxykwAmIc\n1+1MSjh8CyqYFECkJ/P0ZpmVVpe0cgli1BmVfUhwTIHCQBELEF952SB76asd\nsCudLJcmpbPyLdM13cC2dfPNthnq1NbJ1rfvuqiso1IpmwZe5LF0wImjKJEO\nPQ4J6U338l7jDTPmF+gkmaXGQI9ATLwWvXBXeBLONsUmdAihEyp/0hJxTPrJ\n8zLIVIQL8XfD5QV3ZgvGJ4BFGMcMYVkibO+t0Vbiyhu1mDzwPJd6NBC/nGVP\nOc1TGIUm1ndGK/Wej1j6gcBbQ58sYsH2BWtDJltstRd9IGaLsheoY5tks85L\nqWRZ97MlVd0WYHQ4wo9atlsOGYGhoYYM9l8KppuJ5/JLlNKYOS+uv0lJcbOb\nZPGamvSnVbggQSs/XTCMScNYBX+mCUsDFdik7SjfRw90iqdVfFOfOHgJlf3Q\nayOw\r\n=qPLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/list":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/menu-surface":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.b47dd37a6.0_1628196693103_0.7702140387779235","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/menu","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c929f34a0029117567e7eefc3174a8e0e2a5e11e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.6c82b965b.0.tgz","fileCount":37,"integrity":"sha512-B6ynF+++GZwY208GHlp+f3dsw+jLYCPp1RWJgVZq6JSDD57bNksQZgeAbZnozGAIeuZ137wZ617iiCIlOSufVg==","signatures":[{"sig":"MEQCIEusLUU2jxF9IzbK0HJBpITdbZIiPdKmfiPb2IW0mq57AiAIGST/TZEG2ws+7PE7Rw/Zr1bQaP32+2dQu2kfk6kQzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBbCRA9TVsSAnZWagAAGwQP/i+yjBoVPcfUlkoOQGno\nWte2+PPdxNFqboyCqNvIM27biRng7jzILPr+0ldoTwI3f0lqIf4KQR2wa6+U\n3mb2c/2tyMmTHPCFYjrK4mcvfnUaolfWxAwmK3QCCeietviShEAYWylEpezO\n3ofkE9weuZsPHzpNGxeGis3OL08NuxPno2ATmH614JfU1JTd/Zbk1N9s9qBN\nrt6zZyKyxQD/OQKMobHRE1aWVFr043iAN9nAYv7UL9+yypSQ+w/n/uPf/Omx\nI+N5+EN/N2YHblers3qkgCB6iUlVMlAmvVyobwvXFIO5XkrvyWAAFq5jTq47\nNVQ4OXFcQl7EBfhoU1MsTNgtlE54LBGxaoD5LjdShr4ISfrfDvdPJ25lyZdq\nQTYldSL77Bigcnn70ZaeprfIVwtLB1269VgAw2BLyIi6iXCuuSqPtEWMiOUM\nZkfG4T97W1Jrg4GzPOQoCMpkGk4tbZZMf1GGsfxC/Exu0MUFrk1jOrBt7wcU\n5onHRNIwJtWSkPvAg0R36paDdFEBhep4JGeDfu960DnLpgbElkwmyMNV59+d\n7eOwl06LJlFMOhf+jfEbvRZeuVA8JxUMps3nISnWHIVWeJavZL7TKsMTWs2Q\nu1LJpvLv7CwerYOu8H/HVMETYkSmDpl8crtAygk/ERPWVYgsgJe1YJl1KyeU\nTgK/\r\n=PNrG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/list":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/menu-surface":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.6c82b965b.0_1628266587435_0.4852808637123822","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/menu","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31182322af43e6506d4d5349ba9c74dc43fd5c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.4ca11fe76.0.tgz","fileCount":37,"integrity":"sha512-SIkOHPL/QqC++qdbhOnQ9mM0NYsvzwW4y89cx6lsvbu8hY77RIR4dTzPUiNJ/KMKwdgI2uTD9LrFLaA+EpV5BA==","signatures":[{"sig":"MEYCIQDQFdqXCWuIcuBS5BB7KT8y+xChPg1rYigJpAF51pOYdwIhALcBMotzz5pzSuqgExbtsCSoCIirOx2xRyncBUWU5OEu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWy1CRA9TVsSAnZWagAA8ekP/32YR5SNYHIFPCjfYm0k\n0OR8bjM60O/I24COAAdOGsHral7+e44upQmQggIJDWJg5d3UHfsBBFN4YzRN\nuu3tnJBRg0mWC9iwn18PFU0vew2tLHc8dypSBIz7fuhRbaLAegnQK8OzmbEu\n1K8Pw0KiE/ptMjjG8a0O6Fbbvpv1Egq8eW4VmHv+U1MjgwOCcCNbI30XlASL\nN8dIRKCC9dgnSMyqwEBqsSnxudrtRRcUMy9oIn29/lLc/LLtutZpNFxbqS/1\nQh71nen4DQx6lCI/jURrQ1Hi/Qb5wZ0yKKoVh1+DTZiffZXcUJIESV7D1pGk\nHYB7lYqWLqcYXkPAs+A2Y/Pi+zBU1ndbuxmOQY62wSPnuAN9lNT+OJMMnKxK\n2XasFb6xt1aVnXUUq+4TKVLRBVTGKIchhVYYJQ/Xh1XTbdOmtDR6Hh+s8vWq\nuL9Zozv7+Zc5HVZdeECPsN0Fg/r5c0djSVCkD3nf7k41DNyZNxeFWeeV+6Go\nz/X/X3rKiKRYhvceSDF/aIHQv1+0zRaZIiXcv13XAFyMz4vYfXfCilGRU8cC\neTuJvoWSgre0IM0uxMa/OjDy5RrxTznt8WlBMRDz8DkMMm6MAA5xTPjWTt0E\nxB78/15Nktz+zqNwTst/52tPkS57upXifUeriK6R9vNFh/19mr4kWZ14UezC\nD1jA\r\n=BJYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/list":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/menu-surface":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.4ca11fe76.0_1628269749335_0.4431772204120019","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/menu","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd39cc70bab88ce1ab745e4f7d110ed05ef3f94c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.510cf90f2.0.tgz","fileCount":37,"integrity":"sha512-zcmsT1KMR9rnwcK3qpOH/nr7TfRk8xpyzOZqzxXrh9XOpAQj2dlHAx7+5vvL37QGnJ9nC01d1seUDuKxhBffbQ==","signatures":[{"sig":"MEUCIQCxx2W5EVpcuVaYyEyET5Z3pvWq8O8haaav/Gimib9N2gIgUicUpfxmaB/WUkcW8d+oe2TlNYNzVrEAj/4TpHMIyPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWOACRA9TVsSAnZWagAAOfcP/A1XEcPydyaRDhfx76k1\nv7mnh6+/ESyYh/DEVlTsjVjBHV2Iz+/sufXiARsFeOF0d1xt9YIeS64hM6sA\nzD/Tc5XZUo4R29bsy9TYFd4MBtDwLDhXf3XBeA9f+piX39I5ayF2wN90V6U7\n4zmQj1v8llaS/xee74Y9NgMPDyu9u4QXBSBnYoWMnDi9ELVuzHdZ225taQQz\nbfSOB1rb4IldUASXkA3yrRlrOfdCWakCk9/sMTHnmEGDN77L62N56ORVRasv\npnstVcRQhccDbQHEN4BstZtGgYyPXi6p4UzC5Y1crB6B0W2iojAhBy8stRhU\n4kfcoOv2O1gSuP9FUxJJI+BJGDBpo/Ux5rVroYt5v60Oqkh07RdL+9aYEdBm\neeXWkGTCt2CP50XR2hQ1nCNpZivRWJBFkmngvz2f21Kia2OMTwHYTV6QuyYR\nbS0e3xATO5yQCbIJ1JURFiLbFPSCwIO4v6CSXLdhStCsnhK61O7y0M9guArn\nUZKdfExzJUxiKmusKUQzaF9n1ydNPfjEvCbEuxr3ycGwnQo1u+PgTLdCFtBW\nrcKShXi5nMAgPMPK5yG2kiFqLrPHbXQCUL2oHnbvAn7Sx1qnA77pNJY23ZSP\nZmxEjng2Wz89fSPC2D4EHSvgQNkN/kU40Jjf+FbhDS4TwEu/uTw4BUgcIH6i\nAUnv\r\n=rQSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/list":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/menu-surface":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.510cf90f2.0_1628529536421_0.12927903240646965","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/menu","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30cb38b7511b9857edec223ffe84a630059911db","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.17580ebf7.0.tgz","fileCount":37,"integrity":"sha512-cBSejk5vtEzd2I0e4aA1YeAb2bvG9tCi4syZ6I69jZ9kntbIQymX0Wj9ivoWSlQOhh4RBi2tECxHZVgRREciaw==","signatures":[{"sig":"MEUCIGQXtwoH+8G7HeeQfbMK0uV2f3n64k37kGtMMPCgk9xUAiEA2edAL0WH649NNU1Oo/RCjhhu5YLAukCTdeJDtbtsAkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGhCRA9TVsSAnZWagAARLcP/i2CPImYUc42/oUduzTi\npaYEptNAbUM6Ha2RJIORgF8pj0i0PFdFsupagJEEi9GLVnM37TGIzhY/Sjii\n7QqZLmi6MzbV5b6A4QZvmOj3eSRDvZj5Ot3q0/rH12NaDOvviDKGzu3jeNjS\n8g6JhneI9BeY349vZ8zMkZckxSo+lOqV57sf9c4nix7+5h+TgXDNZV5pZNxX\n1/mgEme1quZcF5/4D/RcHvuQ4bZ4XZt4Doe6xVQcqMEcZzsv2Vxa5/8sw/rm\nDNjweeH6QpxOZcnCMtlbhZb9mGH66UwhiFNtId6sM1FolUVl+Y3f6rGwVDYy\nT9ZajJrBn6KzDumhDeWNEiU2TTaIdoUfE33Sks4uTyyfE2XaoKD0Np9jq5pT\nM6i/YXDQH+8O9mxY3FUM1Zih1TxK59DXw4cvBNCTykq7lg+3YCan197KJ+vy\n5JzVMd7AFDWXs7lQin6tHreMRFoRmyULp0GQ93Gyk2V5+SRmtYxU9DdS/Wjj\nvHC2mBt2AyWw05N7I8wfTSiWkBsfNdIbBeGt/LuN1hquzt2rsUNLU3EnVuM6\nULfsFA4qxKBXV1yl7C3i8zroksMQE9tuczGv9aUIluThlzjVUKO24eVsaCTh\n5CHWnLCfG0qG4cn99gfP0B3p+uke4TPppgzmYtjT4Dby1EtgT77uB96Nf2qj\nW2js\r\n=hdBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/list":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/menu-surface":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.17580ebf7.0_1628533153201_0.37574155599419634","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/menu","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a114f70dccbf074595a4ab250a37b2a6678717","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.7249a3060.0.tgz","fileCount":37,"integrity":"sha512-qVVmbn0RFQrWKmv7fOFYXhRIQuWywD87Aw7N9OOz1Gee5+LJRvOrvdytJxSKqxLc8Qnc1RHPKKCbsNT3a9c+zw==","signatures":[{"sig":"MEYCIQCkxnGBM9OM+na2NQ9z0JwUagxYxnXsFXwz4EVhbGvuqQIhAJb4oFN5zdLe99/vE+QHDXIB2jNTiDzUlFY5qpO7EVrN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXKRCRA9TVsSAnZWagAAYDgP/A0fxohr7HKOaNb83B2y\n8R7qHT0YmztFDYE6BI0DumNuQ3hvSQQtitfDArpr8yhpK38JMlvRFPd71nhH\nwMnhv0S6sE5YKWoPToLnPqA1xow4lux6uU3f/njJoDez92J0f2oaFd+/gbdw\nCXBYq0h+7TeLsm5rls5a/rotoREQAhAvx7Xzi4km6cUjszZkwxvpkKSZ37mz\nUzEw7g9PcIwZy8rdEOUm/idyrEQDkXFhCOkt9a/B0qm2/uE25xH33gOZGN9v\nHxjdEW8xJcUFOvZ1CIXMOh5YoLWDmayo7DrSfN1gPGAJ7soMMC7PrxIHLWxK\n8knfUrHFmoyyBbAIJGy+r3pAEME8R+rrBmcOlvAtc+Nw5bSoC9bGST1PqYe1\nGfh4MOS8G2YVNNpKDfSxhH/IpIEBd3SBVhF0Ob8dAx7IIuNdiu+kEGzZYd7b\nJbmLXP8CT2Ux1b1WmQM74kEOKC7OcFtlQww90pjF6+QLBGzURfqG3QHozsG8\nQ00Zwve/SmB9SVouP4syH29m4nnxZLAn2NVYD2BuQjyVcObj2zKQT48TMF4d\njPncrNxUqxHjXwOMrfzTm8luLV+01lT3tYfEgbU2iBB0z/DjK9MJWJPVnw9b\nMHJZMzqDy5D8rGrvAxDHfHI4MYXiOMre2qmHH0umEk2CjJj8LOQSv/g2ig57\naf9Y\r\n=87UF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/list":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/menu-surface":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.7249a3060.0_1628533393181_0.0960711957756637","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/menu","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a788c7f5d06f83b4efc5d898098e5600ff28be42","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.4c405863b.0.tgz","fileCount":37,"integrity":"sha512-HEp7W91vWgSzplKaiJ2tf15azoqRKq1Mxjf11FIcMbmfEiKxh3lHMVSGgRPuKl4PeZnvSNzuoj4QD57+DiNIRw==","signatures":[{"sig":"MEUCIQC/ZM5R59yYE7gqo65lDVrzx7DvJKe6P0jE+4b8X6hc9wIgCVPRKNM9yrf1ztHvKkPIlmGI4gjkDfj6uKozV1keon8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErqECRA9TVsSAnZWagAAnAYP/A+dhSJU0tlpv+L6PoHY\nRMzriQ6B4Frm4FOi9sFbtyqhQk3rV9W/L4jG5LKz6kJgDnZcdpnzlzIAh/8/\n//DIkX1RmEgQdG4wnzTY8b3LudrQ3IJRPRA6SB2ftgsuTLvq6pAYW42EKnnd\nASUpk6SvDFYbxz8CeP+XvJhWPwNH1H2hs7mB7jE7+dADIEp69uQ7ItW47hsw\n3pFSaiDX/2lfSjSHIcukWCamoGqMlqaGGKQcO00EIFcvS1VaAXiKuJms31C7\nUW2+stsa7+EVQOx+m2Gz+ZHnkxCkvE0Wbv/SssU/qxCVTfnIYHOG/MUFuxMa\nksDRlu7HKdirPxw+xz9fQH79uKJZjGKWvX1QirTs3GKbTV1n/7UGqdQpq+OH\nu4dKY4qXd98IPu4onfv9K0aPRTxo6Ycc15BMF4sw+Q41+/W/2jaqvH0LENyS\n6+0irGxNpZb3VJzwwk8e4+RyI0VsZ7KTXVtns0//btW4i/UcFtjk7a34fDwZ\n80XC/SSMfGdYq4v51tu4MLH8zhw1aLcORz8/ICGXMgt/sSkA4+kvsVwt6y9Q\na7003MGzAQDUzzi1vNSlo7ieJP6YQM4YLR+VGQvpzcDCJMrVQ/QqS0sjgxKj\n7XLPpSHOI9h1k3N6AipIx0VamyXBSiSf6J2gtcR0H7VXH51ZDQofjD1oubIu\nUrgW\r\n=N+xh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/list":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/menu-surface":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.4c405863b.0_1628617348288_0.5177266262051121","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/menu","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea11f6c4ba60724768b996ff6c6f395af064a3e9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.f4241a42a.0.tgz","fileCount":37,"integrity":"sha512-Qjd9fMC4Rt4BzGHZd7qqKVD92NkHSSRsQxxXI7LYIclRlfN43kzRpC8B5NLhjv0aKfnRQBxZotpNem1BXBwzSQ==","signatures":[{"sig":"MEUCIQD4+4Gt7HwJI6ZsPmrRT5tU0JEETKXHI0p758AtoMScDAIgauut5e6WCaj+jBMDm8hfdnk5kMsSHv6l8GTQw9oaYqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":728250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJeCRA9TVsSAnZWagAAmCMP/0oSRASDvqZfbYtLlDlX\n2CFew/un9+RxweSoTtByvaWffGebUPFic/KNCnVZ982k3kRD002c9fXkOkge\n0m+faW89nlEH3hZr0IGRbL6T+XA+cgF3/CcMcScyN+tDKQ4fn3hEeVM6+pkP\nhYEJuBkaCHCh/eQoiMg25B1hHCH3FAl49DVYHhFAiGg8pQeonYzObPA1SsYQ\njPLqDFnXR+mjGcJI/8BhR0rtjQkp4mC5fx1KB321lTwwBiH+hLfTC1pY/3hJ\n5aPQ2yMjsUGeTHfe8HhWWHVzDs4bklVqlkmy/k1juZFi/bvSoW3acbSdEMld\nVd6G189C4c/z7JlmqcF0+e6u08IciDfJazq4pZ8F0OAaPtTA8tQVr8d0JvTj\n61AtrC1GfQP5d1uoT/ByLjTP3Z4MS6Ip7ZfLH8TmLhnhUf4o/ucODUXs3QF9\nyTPXqt6gAV5o6IBe3j3QQ6BnblTm1dxr2QVmoU57FD9qG4bGAuhSNoL0iU8+\nR7jZdk2FktVUfO5hUrD9ySUMOT1wrIKIH94vynx97uyryD8rOt1RumUaQNu1\n9x6Kg40qPs8WionQDracPrFXtdA8QkZxdyjzpmTlrvB1EgJgHUiX207Zsls9\nO0j3FXqEyYTJ4hWIoqE0ILJkXa8aUWeRzjxjAEx7WCt03VyhmBkZfVxqoo/z\n2+YD\r\n=EfsA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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## 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/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-list-item\" role=\"menuitem\">\n          <span class=\"mdc-list-item__ripple\"></span>\n          <span class=\"mdc-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-list-item\" role=\"menuitem\">\n      <span class=\"mdc-list-item__ripple\"></span>\n      <span class=\"mdc-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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-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`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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | Proxies to the list to query for all `.mdc-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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/list":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/menu-surface":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.f4241a42a.0_1628701278779_0.2749694424456106","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/menu","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19cef061a8168140975c30b6ac2657fe30cc3d0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":37,"integrity":"sha512-3FBiO5z1bTYkjGkab2zKpq2tMZOJbOsllWK4bMJ6aVn0CDzppHauMvXeJsvbI9Oye5aTAACFs3/EFZNMgn8rbQ==","signatures":[{"sig":"MEQCIART7zSIeDr4IQHaQsnNeGz/L5YL0WBqKdVuOy/pTSlyAiAkQt38XIV6Fh4EDtVOjyS1FbI7xtFl8F0Dp7KiV8gzQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":729441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFvCRA9TVsSAnZWagAAW1UQAJ/H0iTRSnYIxaGJlM5K\nVUB9k8/5X5HkH82wVle0YrIZ9dfRn96nD2L3UFvjsX2Ds5PoxNMc8vvM9y2o\ncN1fjAJIRPrxnAVOXl7eZyouIPI/cuZBeNZprypltXJIuR8WVraDEQUn6ckT\nhtWFC5VqAw2jdn0YHks3mqPNY3Na0AHzK00fhwyHhQUgpkXkbKKFj5CSbeka\nsM4BBs1EeiPfb5cjiEfFZW+8nXT+jffRaGk/er9ptwqjsfQK/be+BFytll5X\n8vNqBb3hjYihKIpzx9BzFFLWl/yGzKtLzCArIFx/g8zIqtUupMPZHZHd9Uze\n1fqebPWEnpqDiLr8YnDRG53IsWxWuJEwKMjVDdiyNOSuAuxrDzWl1tTF53xl\nxSgPn5UoHl3blULSCNzNua3hm3yPereCe+Sy+7Qah8QmErMbKwlDCBm5qwHs\n8X6GAaxHvgqG/wplB5gPx/HtwKPBFBbdBQY5SBzVdiiuLNbQ1CQLbV8xLQjy\nMPCeahrtcfUAf69uxSiti/iqnymdfslFw8OrCavljV7845pXanXhpim4JI+u\n72sUId5Hfyl8MQJUhXoH9IPQejwdTKM38rjOC8IGLaY7F3v1l4CU6FI82sNl\nOnecFqf9QpB/fU0mNviSsQPpvT/VPQLpmXG9NnyW4sDmZbc8zyPYfotofPYK\ncFUs\r\n=r9ww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/list":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/menu-surface":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.0ad12ed3c.0_1628717423753_0.627514576105509","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/menu","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6849810b4d3f14908f1f4ad242f7e78e7b69749f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.077dcfcfe.0.tgz","fileCount":37,"integrity":"sha512-mKd/uF4hn/I9V+m7QP8X2hkaMV0yyNRusQQcxAAsQ94v5cKSQeV69QtFrkeZUXpn9lTRnbVYBX8zAaMGZPa9+A==","signatures":[{"sig":"MEQCIFVbBpQSG47nh1ZJRfczVIdDCdyE4/YbnB++ukneShMVAiBF4+QZvV6Ab6UScYQxC1gYkAgcOPt/IHbWpDySkfTbcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":729441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDzCRA9TVsSAnZWagAAGJ8P/jN72hBaCfh/T+8wFvDf\nA5wmHt/T4kuETvNOtTx3Wx+Hg92Jw0ZpcHHmhJK4mWsDLgcvhsKYMgp/T2rw\n7Ofv65BGFe4Jeg8oscizxnyB31DoDbPDEOsy+o/C8EyB29oJBATZVHeb2trw\nNN/zIws+j+zCTACiuZ7ikzj/nhqtcT7ljFQs3XOdaMTfWDwiukxT/5yrTEpv\nptFq//zISywL6IrlVb/BHqZVWZUof+9sNFfoEDHOulvmCW18pT3fF97LWHPe\nWjYiBRfB3DsiejWkxuMvYyw1gKH/jWdj/YxEJKI07wuW0tsoJjI3VePHykCj\nNQ6VD3Pd9ed5Jp+uZZ5Nb9R86CkdiF5F7kyvPXMIVAO7TS4SkFl4v0EwFol6\nq/TCiqUnakJo6YzWvASHU937GLwA0t0Fn6Nl7ivbSNJ3FCtviuYc+DkDj832\nPxrVzdK93Oubbl7Q5zqZY82mZ9qc131NY4VUP0d3pue4gscjwekn1JmnW137\nPhg+CGTC+PRLOe+YViFO0v+odqE5M9UedPuKs2JIPJXhoQy8Y98OFb95kTjI\no8ZqkJUKG2qg0WxMWCNktJXjlii73A+WYX2LgQc8B5T4X0VfHOew6vDQI4EP\nsGLuptVGZJ2bxgm0OqogXNR7RfaauhDZCdijh5q/U4wcQbGdHqqH3+wP1kcx\nF/1u\r\n=pYST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/list":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/menu-surface":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.077dcfcfe.0_1628791027141_0.43934379601040585","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/menu","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75cab8f1c81670415d233205ecf5201953122189","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e3346766f.0.tgz","fileCount":37,"integrity":"sha512-8oRA8jXQRS9Gm23JKZgJZUlvLfWBDI+N2/5ow5c8qKBMd+DXqtCOEh4oQ3LsuiFMPmw4GbdwkqxOYE50zgE80g==","signatures":[{"sig":"MEYCIQC2F3KT/WoJVloC225OIQvcaOsCjIMUtkqjQfF75VmfAQIhAOyGoqS1oJqT7WhjeIiHysv9THaUBMUIQQxPZnHL1YQa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":729441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsw0CRA9TVsSAnZWagAAFdoP+wQItuN6q/iXoR5DlLJD\n8pvKWrfz6xZkaNOA50e+FdB8LCYo4Ukj+PoMGObaVnNlXqS1JyxieLBDmh5y\nHkoZi1DjEiywpDTjQMjAc7WbSd9nkUNtaFY3VRtEBaJhafkB159l+3Q1Rn7r\nPGTYYNXm9DN0dhwvncxFZlj6YM79FVB1uw8BnZwPhQkiytNpZUk97XNGzyM0\nvD6qK6y3DfH33K43Dj//wsxUzoVBCzcMFl9/SGnSWWlW6WsfMx6Y4/MFjDIg\nVUEzWTGUG+YFsOHQyOhz6LkOM6bdOdnk2viljqdfguH2wy6n/nFPx7erq9Du\ns9Vo2txNOWM2pGbB40HpshzzPYHEyiyZLbLKKFGEixnaJKQLnNMB6q/vMXiE\nxeCGY0YDqUQ94vSWp3msFNQnIF8X/BKP4iN3znzRpH7sHIFlz/pN4LJD3f02\nvb6FCwiGUs2xfSOfHxgsz2ZmGy2u9bSJhwXPdINUCj5B5xo5jqqOeeUFUoA3\nN43jh5m39AtKxxdUGDtmq7Bes3pw7mtg098n5qbdsOWv/NGWIGxDVRh9O8iy\npWu+juKMbPZZ9yV5Pu95w8kZgr3Fm2Mx+p8FYtBqoRXpcrBFfyQdCqKuiWjO\nL+HxUohSKcU9GhxJQ8MNz8Djf+b7Yr7PjDrRz5VuPTDd/le69VtDrgNIXDLW\nxp+z\r\n=ONGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/list":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/menu-surface":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e3346766f.0_1628884020053_0.9585767165868393","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/menu","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64aa0cbabe4b045597aff1be4be08432419d4e51","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.2fb068fb0.0.tgz","fileCount":37,"integrity":"sha512-iaTSTA0WU99vhA73T4ZLCnAYFBM66nNVa6vCykCs82Lcs/C3T2ubmezkcxqwIOKT1rHELouRr284nT5rpIH+YA==","signatures":[{"sig":"MEUCIQDh3vx7127CndXKvIdl0Ymy2osiOfaRYecoaSEaxc4VxwIgE+z1xZoPplsJcNvXl7mbadx5/aX5hJAErvwMFYIcboc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":729443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszzCRA9TVsSAnZWagAAu0wP/34F5cC6tNXgmOV0AWci\njnrOYH19dpONMrxnWY138HM3/ezGRZNM1vmhXczwcNl2icL8PLuRCmQIkYRk\nFBJ5VviIfA6gxSGH5YOSNlDk0S/J2GtFthSrnaeRirx+fjvYVIcCBvh5967/\nCxL+1b4MalrmgxAAvx3zLwjiDKNheoaSV8L2eVE9AGg8mfmrDoN0LXelun1E\ngiTZYUaU30KZnPnAhkWOsmEYHxfPDZ7CIpcEyr1yqnLY+y1+p47jN9q8c1tn\ntzbA/FxOZ8z+bC0y0IurSG2iAeHiquMnKM99c5HlEz8L4tkSjt+1UqV2SADw\n9xoydZBsRvYIa0wM2kpisDDfEMA2e06Jd1gb+HTrYqLPJmG41mN3dbbK0P9C\naWF1Z6e3SNBu411MFyuHvlXqKIz69CrLj6EZN9K3g0ypNiCv9LU0oKRhjD5x\nxxcuPeqTYNCgs1x0oalLp/xEly5MBfOPBc2JpIIVmpexs5T2cxbJHJLrhM/4\n2br95uUxqA/3E9xhqGDLLowhe0o5kJljbwDk/svXVKYAV2JNpyaO0y7jy9m6\nxd/AyzsnpDnLZVh2G+OUWgXBJ9ZXnoLLJWIJl2q3TecC9RTle3+Ua6vLL2d0\nRdRYYut13KN9GHNjYJhtbBL+yj+7Ta5o76fI6ByHtCiAz4vmyhe1Yk/T84cn\nMP4j\r\n=8WwK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/list":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/menu-surface":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.2fb068fb0.0_1628884211615_0.6320517506678693","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/menu","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b44a5ac0a429d52fb3fee64a2031def4ee1084ba","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.fb76c5069.0.tgz","fileCount":37,"integrity":"sha512-POdnF3VG0m4TE03xWqj1iodYYRAuAHPGTY5hxaXMiFMhjrDtAJ2Ihd2zSkzcsJzp/7BQcC4rRFPlyPcm6Wg0zA==","signatures":[{"sig":"MEYCIQC2SwsFt6XysVkDy0gFqmJrvqMLqxJdN+ibsQZA3/JRWwIhAIkRH/IF111phMubwcGO7k9wINOojESn0kLMKXvwep5q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsYJCRA9TVsSAnZWagAAgYYP/3sD9djnN88T5cMkhtRx\nUv6hHSOEHi1Xli36KHhRSCbpGgjS/vTz/AogDeaBIl/Fw2mxm0CQx5ejTk8Y\nWaq69N1IkAOtcK4oWJIWfcyg/TB7+zYpRrt+6ay7dsw0mx9RtWrcZuSAr1y0\nv6nTE5PbQNHyRVj9YEFtoqofzSpIXs0E2lVkC6oVHcwSnXLo2k7yV6oOpCD5\nZvfyweHQRnGE41i0uFbf0Ub7SRwuUs/Lm6XwB0E7tsNyLz7gCRHhYlNh0+Nf\nu2M+QkBe5r553U7rEGXRsEYvV0srhsQgiggd7MCVcbOAFoP8tC0ZL3hN4fXS\ng4wXJvgXQz0MNNHXNlsPPA3XwZ7LN37pHUPPzj2aXu5XMXdwyNVrnY3GPWhb\nDucvWo3HqfeE/RrLQBs0vnShW6Knr6e/cDzWwqWkzVhw4sDg/hrm8v0/DUBE\n1A2dLQsS0TqQjd6+ciKBK0GgJLvqvAZ7z9v+Bp3n8pAQuymg01RbiWUKxy3k\ns6pgvqM7kKGryzw0uNhzkeWjr9vO2SnUalQncOIUruiYlyts/8eV/IafXLUq\nE5tchU/YPSaxXgU0+Xybos1XJjPOp83TtBNznKAxYxGC5z0PsZCTpVmbmgtf\n/eZFfERDesiVoJdtJfzwOq357tqI1GECmPRKNybN22PZpXAmPCJybVnf2by6\nGb84\r\n=VEdJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/list":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/menu-surface":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.fb76c5069.0_1629144585186_0.057518713187384884","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/menu","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2349d6143645de36d867eb146ae11e44a1be2fb0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.457d89aad.0.tgz","fileCount":37,"integrity":"sha512-ab8GLcxO8PnC5POu6JFHo2QDefGoKhtMCtuUQAk1wP7LjLq/20JXA3DntGGFC/qtrzBqGaVKCh8RkYL0WQDO+A==","signatures":[{"sig":"MEUCIQDRuPnt47RqvvHKqAGRO9EGOQ05OEAqnPDX3+newm6fjQIgIY34p+zYFaFAAmiBml2p5pI0lsPPo8lnExPyAfnTKNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RyCRA9TVsSAnZWagAAiLQP/i5NyrlOn+SM3igOtMUa\n2KtbK6o9ZayUs9kYIKAgajNSG1sIxRN4vYHOwF0LINgjRt0Fw+524hr93KDk\nYDt5AX8WW7CONUqCh9+vicxnW/OxxrPdcRoPTBxGSmwubG5Jn5Bs9ed9urii\nGKFvy9oU50Rz6Pp+gO3QqJv7T3gWSWUAOcGbz4/nN8wtghWpYYV2UYCT76XZ\nVdoY/T4+XHDcNJeAHVfNu4pp4SB+smA+V1BAAcSKUygwV2gVd6jqRulh/QB5\nBzcvtcMzYPwHmjO5bK0U9DaH3PUggzjm+IsvftD7vubf+QcV7lOANuvx0ScH\ntX+Cr3ro6xnqHg3y5EMUoIODGAD29Lvdbt3dSvBNFrsGMZev8R9DJ5uldCSY\nwaPejW1XYPfXI+RAxYRCyYNcuTicxd7y6i9RqINSdnN/ApTunNSzHNJgTfPV\nf+dd/la9qAbCNB7skdPR6fblJEpcy7MWOqMBy8R8Sib2v4ZEVzw9uqp+K1VX\nqUaUD6SA9WJHVj3yJQk630tO/NgXTWD2aAtC3CRAHj1aq30r6kw3cKWFwr+c\nIO5p+FIz5fEDZqIN71p8Op5Y14gbpIMWTDSONyfgmAf2N5DWZ1LZJRCCAOlr\nS+tyZwSO0+w4ZtkzkLVCLdcrC+/1LysB6YOysLSFiMcYBkCWAkUnT7bycaul\nYk30\r\n=+fqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/list":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/menu-surface":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.457d89aad.0_1629213810719_0.9986429965722823","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/menu","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6316f8ab0f02878b46c935482e412c826ebeee55","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.0de2f2edc.0.tgz","fileCount":37,"integrity":"sha512-3pfhbXjpj9SWp/+cqWPCKmivSM1JQaIEhETqt+eDI4RM1i8XV8Xg5JJ3BC34AoZTCrayVbQRJQnXjKbSG6VqPA==","signatures":[{"sig":"MEQCICjF/kN39CyBWwlQhv1na3G1lyDfghb2DHJLKjFN3HKiAiAf91s8GZI7y/F9zHGYHu114e+/pmwiOE8TGoNHlqCCUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJWCRA9TVsSAnZWagAAd/MP/RPbcObymO0E72c2/a8K\n+XkIS6S+7eZiuiddPCWnjoUTGO4komFOsCfPwj3xPP2bbvDWpw7baJYJ/XAl\nCtfqsTiKXgfKV5TNpHytyWAF1QGTGnTSBFLpmPzG+fV8/reyBlA19j6JbMJ2\n4OqtIjdVAleO+hKOqwPn6p20E/Rodlrsns6rP07ZMOfQ2wRZu6RYNWWolCcw\n6R4XCpVyDw+k2KmYcv1xNepqUoerD/s3UsRYytTwZqVwdi3el6J8TDBC3r6h\nREbRVmFbQRytlhAFiQ3RORQL1j3yyCHPJ1T8XSP9//6yOQixab8pViMrsiFx\ndnjNiuZWc8DTSChvIGw7bMZhevBnTG6l47MYIceEsjIAUvub1UrCswSkTsZY\ncdVJ1iddOS71fnXtVyTvfafp8XTGIjIrydd1YJyKzjltcLhi99jGiFc8Y2ai\nQZVzKjzOoou3o5obyX+ilBxfPRipUwN23fb8EyhsUbdiuLWIMWE0QVp/iQhb\nn71MTxzy1b0IIhuRRM/nj0AHrvX7w7dSR/t7g7d9ModxtbdznQqjqSZHcSSd\nu4ZGBbI4yCJfUb8mEM+8L8fyvPgzE2U8jrZOXY3K+XezpIRcTk/vNRzmVofg\n01pma1XzaTdvvkEWen3ba8p4Azc5PpyCLXwUkUk9n0NWEpqdMCLTJcDxlBMX\nrsmz\r\n=6s2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/list":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/menu-surface":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.0de2f2edc.0_1629233750679_0.34992730260123395","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/menu","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c07a2d76eb37d3a0e03e31b104f9fc9397b66f19","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.1f9259b9d.0.tgz","fileCount":37,"integrity":"sha512-o4yoJkI2JE8YovWfSJTFLo5hewBNdgDDmmxvaSJcEFvGXGwi+1osboeAfcrQu4NSdQ+hiQPfd2FY0DPilmUzBQ==","signatures":[{"sig":"MEUCIBwev7WeUD0zfjupBZ9+qgIKS816KeaGa/3g0npKXCi+AiEA5Qkh9kLz976OkuFcgHm2FYw5FNaQ/NT/05lAUfT4jP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUbCRA9TVsSAnZWagAA6kcQAJI7iO59Mhjs3Qx3N7Wp\nyoGmNT2ZHmGROFbxl5atumpRhlgy+ZiqCHLmCpJwp3o5xWyHeiZ/BQkvCo9i\nrhTuJmRF9ONecJZsvpRc9E2pZ6UNlxLPofLQR405VoSz4deB7tnjk30v9xfn\no8GhzLIbHhg054NWXc/Qc5ClmLduLB5reu35DBaH233JrOrNV6nN/GqpVykL\nf8jpynbWHd2vgYHy/Gh1mh7+p2Rz2lEsOv6jeRhBFkVnRiVXpttnaYsof+wh\n1QHvJfsivWQAJmP+Z/jk23ux24auN3kMZJ7TjOyiVMfahgdavT0d4u80hsR8\n9ICWSjdMwR8q8RIigN+6L6UBhuql/VhVR1vP3ODaTpbMHtkIaKEqLnbU5e7k\nu60C2/Q7HJ+hVvfs4exN6rBwiaeuJslXXC7o+4zyQOybaZLwZhvArTaj2CNr\noBrDLKMD5YKkDXWMyvB6muDkczHPrYuXyalrtG5XyKNPlohkZ+90rFKTI1eH\nzA+aZFfNW9jDOHXBiHliQ5LpCNDzWD/TkHZnG2vFY4RM9SdRmqafv9jsfsgF\nE5bV0/tGugljO2oLiV0EVHQ8bazrMLTSehW1UN2HYFNgMb5/IsaicnBVpHOk\nyl5YJHK5mZQfWEf6PXBmnNDR4jQrvSvzD3oO5mTadsZJzAii+FiLn2+ykyNb\nbhRf\r\n=KFx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/list":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/menu-surface":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.1f9259b9d.0_1629238555242_0.5433190712492308","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/menu","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c23298adb97993c6a52e94f991e9c08c5529d59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.3b9290351.0.tgz","fileCount":37,"integrity":"sha512-SitLQHH+jCRJ55/HB/sbOr/jXZj+ZQ4DdbjDQpbvUMpAdna8QWRm196AvBArumf3WnZpyXcGUt1eSzsw0UauyA==","signatures":[{"sig":"MEYCIQDsrtY5Vl4AcYl4TBOLTvsNfMAvyZvpx+/kushVX++iSQIhAI+a430LSodlGuJLwRIBYJWAwdI59NGzjJLSGsZyjnt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnYCRA9TVsSAnZWagAAopcP/2w4SMvggfMGAxmEjfwW\nA6jDDMotzW4k0OsHQ/Fgc23hv4c00bgEY/Kdl/H6vr3L+UMuoR6xiIq+QaIs\n57YoHxiff9JHKoHe0htOvdVCgAVHeSjKRniqAIAI1Cy4cvAPAOflITZ/d7vR\nsVI91/pTU4qn8bIjASDvf40Q1z6i9ZuQD2PeyLaE3g3xNwvwIspaGJRgxd0x\n6Pzs/lpz84xWMjAFXEJ8cyiakM8YuLwPAaP8chdVC8lkYJ3F3t/iafAFT5xf\n7i0KzPpPdZOTWMnG6QyKNiiUJ7iib6yzO0Z6yFI7Z+ut59YITVxWBWEIsEUS\n9Mi7LGFmkbKymonoheY8kIkelVHUKZ7vs2rCWns5fosXBe3SlmlnDhCiKkp1\nut5+ZQyIaMGLUXEFIr9Hlhousb0J4cRiVYV2JnGwWPxo0s0iAulGRK6aZ0WY\nNbKG61TqxolXFk2jSfP+3Li2Tb8/XmqQXDQTkDz5eVN9QMYUTonGCv+stIKy\nnVm2BQI9QfW/bppvpk+G5TBQgUddUCbNMpnYYQEbIegypB8UYgTwzT+3+cQw\nUwaTZFjCNsoFLM80i5zGGv1fAx18qbr1FSaYvwJwOb+SiasTv32ktivimH6Q\n9cxGGKXAe6/WLEziIfwua1eTxWIQoEcylBfkgXUzdq6Y2O921fAdi/vOPAoQ\nZsAa\r\n=Uq6R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/list":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/menu-surface":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.3b9290351.0_1629264344468_0.9428457172983666","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/menu","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0df11d8695072a868261d39dac1443e881807e49","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.43d2eed2a.0.tgz","fileCount":37,"integrity":"sha512-nqW9Khbv1gki9g5IR7leu2j4g9x5xVvsz0WDiWlzoH9BRA4kNUbJRuq6PYaHwzYO/iIqrsxAfKa2KyOJLBjhdg==","signatures":[{"sig":"MEUCIHdfvDCl4J5J9lXeZwjN9k07yk/3zgBK868FS5jnbcQTAiEAiEySItVofaNDeNiaRDPpkvU2g3uHuiNQamcWqkJXGGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9pCRA9TVsSAnZWagAAPGkQAKIwlnvSvPPcmI9wAZDp\nO67EPDK3SupE2AcXgfDVm/5t5skxaW8asJcpFN1oV4GOUD03PQTtqozbxTex\nzfHku/InHxImCn62GUXCjWbUjtkG724AFUIGK0wfzImfRmU+EANv6gym/nWp\nc5itFoaDSV/CD0th9Jp2u3ipiHMfk0W2Xzmbrt9thI8eWwzYlJFbSm3l0Lds\n/tGIBjX58q5cHsj6EtCiR3RK53ibPtzbihUeZ5sxCDmg5w0zxhkz7lGxH4kz\n4NdDPU8KxoZw8yNRb5/jTSW4r6rABK+3D9tYt0nGETcS69XAHzW/n8hZnhV0\nJF9ycgJLqvXAD0qsHSbc9bdc6a5X8wsCNLkeOAPyEPDyXdsDILxO3ser/fLF\nCWnBjgjSvaaVXv75Y8R4GTiaYKW281PaolOGwlyLui9HHaLDDzr0tIFc6MK1\niRL2BI6cr9yKC0HCQyc5bfZe6UMw0N8OqGsbHKWIcbSapvWz2aJ+2huq0drX\nOLPLkcJXGaEr0E/vHQmwzM879aIXZbDXmWus3ps8u2wlY19vsVia8LjI6/HU\n2JD6K0DyqnNg0frqRzIN9UmTzRNoIjK4B/wISR5wbUlOK7I22/iJPcRcNlxI\nAKWTI9YBVy+WBef1jIqmRI2HQlwOImgNA9oLjk0MYLMyVZnKg1voMdNccS2d\noBbi\r\n=Da1x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/list":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/menu-surface":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.43d2eed2a.0_1629302633772_0.906111358395665","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/menu","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b11f9ae1e7115d4cc3c5a5294c6e05e3cc6065f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.0a9069300.0.tgz","fileCount":37,"integrity":"sha512-JZrQwHagRBWjObRGp50JRh9Ojrr02KNGqAK926vn0ACEj4GADDWb2rYsGDFUyHwACA2Z/RGoSUSSliBGpYImnw==","signatures":[{"sig":"MEUCIQCO/4TBOnS6NNf0UbliLY/mfaU7ZMFrwgXwFWGiKmY0ogIgdH7F/cEf1+UqxFuNzeMrt0cIfTD8u9LUAdeRBxHfr1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoSGCRA9TVsSAnZWagAAfqMP/2RmgHwS92s3L48oEpjy\nZ+KhZeiO25IwX+ohQW/UwlsSCc2txLzr2bUm3S9BCRgilTzuL0dJ8h8zFOlD\nGdnjhkffzQhvCZq6e1NekS5lpCef9hYfLTbdIU78odVCU55rJtoqyLf1+um6\nnG1ZCUjwAzNMA2m3pUNjxXVBMdiX8gkuOnONlyxexPxcEchfW/0r86ZdSl8S\nw/3zCiMFC2B+AyXweeaa90O7hqYau0bDxNeGA1t99ejj8cvYyqMF1WI+JWve\n6t0V1Hlq1nd7b+y5Luj+nb+bjQAYHhShLSRGpaJgV9YQtkSLECaAPNv1s9jl\nePF7iPuZyGAvv6fqLWUJVYhVfK5av6Jm8KvuwNAYCVKZ4fvCJTtTotELjYsm\nbq8KubdffxpvgPENP3oF7TEFhv1N8uawAs4HbNJfPXej0WsoryGoeZdBSfDS\nGidmWMBv7o4srYqTHSDnQCMx7B+yuKlQKMjvjOnMEsDQyi1lL/kEJTpQ74dE\nV1oeORx1Juowz4KbaAG77SSBeqsyZYybz3jRKjn5Zkga0PZhQHzQWERbHvfS\n+EL7z9/aMetzMpOqRML6SKogEIT9yjUX2dukaACBGfXNuFjAhvDi5/vjmnP5\nQFD0N1LGTj90sKj8499JtPAp7CZ+cK4qowxtw0eeKx3nafetXRuxh3wwXztx\n5OpV\r\n=OLI3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/list":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/menu-surface":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.0a9069300.0_1629389958002_0.10531399112122575","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/menu","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bad7991f02fd95261df02a21b74b3b4f1195649","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.7da413ed8.0.tgz","fileCount":37,"integrity":"sha512-reyGIwHYbHQMQaEHnPRa/6WkEUdNVZTS2T0qpObSLu7q85T0UWHJ9viMtS/jO0Pr/Asiqwl8f4bYnBnhriq5Aw==","signatures":[{"sig":"MEYCIQDdb16y/SP5KLPIa9MVLOh9PDzL8Qk3QxuPDtUp2mx9iwIhAOfRsffAIfD0xpMMXDB0N2fMFsOm/YSQ9dQEgJed1Q04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH89KCRA9TVsSAnZWagAAsi8QAJZPdoXX/kD55RuksVmV\nQCYq6c1b6dCI9f6kl1MUHNvbTz7FewdEODxWq+AEa1UuYq7lHVmwawdsKguD\nBr/x9bhitAd6eEwiEtYFMapDe3qBoSirMT0I/kci2YpSfCTBFB9XB2mZ+un1\nS7tlCYG4eiowMZ4WQOI888oFjpQYa1cW53lSExMLovmsrblgCjn8uRFwcWr7\nrpUzBgPFxJ9omv8GOu+iVWRUMSxzW92Q6bcXrCndlXb2eOnsYm5A0LDI3XNe\nWouYWGLQQlFM03bAhouZeR831enRXR3j8qldWwhvQbqJ895hNiJcJ8bLk7Hb\n91DEiMnpZtcAhPwYUn86Qcxsy+fRFuHkDFVcxlLyOTtHakclZVJk9bsSULNI\nnWXHEYfE8R9B/gzekagyh3QBKGUvUswYsi5i231QlmgHGDDnYgBCG587aRc4\nT0P8GSGFvbGI3lEPxd/JMr1pprDqQwTgUesK7dh19nMUf7Fp4GExbOZHMiHV\nF9+WYw3wI1rHk3bKPUs2ptqKs558+fepb93oFMYrbcdg1qwAxYBvr10VV4L1\njIS6dtsEMZClvDfUcg//hhUr3hcdqCzbAiq1P0fRQ2iefE4z+KyKk8fso9ho\nuHs+CUIBqUBBJpiCzG/fEINwgvdRfvmtUaZoK50lOQ1NcTj4vLUj3b0pQTO2\nNVd3\r\n=GQ0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/list":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/menu-surface":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.7da413ed8.0_1629474634016_0.9700234873716436","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/menu","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a7dd3f669ae0cfc5460dbaff9349a2f21849b5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":37,"integrity":"sha512-U04Lk4dHfzXy440aJZ18h6nEqC54rn8JW12YORJduZtVRA5pp/D4xh+t24g1NslfiyDsgYNnhYy6SvocgPSsaQ==","signatures":[{"sig":"MEUCIFf5fuK0CrKpOXoms+05Kt+mA/l0Fc1KnJM5H0qAu/BhAiEAxlOvd04mIKnwC61zgNqSBDQtHux8Jj7tW7sxvaPqDxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOfCRA9TVsSAnZWagAA4oMQAKOP+m4qs76RGufHoE/I\nEituf6qinLxDUXLnMTde5DDLbwXybREe6+cqk0z+WftoPHF9HvaVsa3yDlUm\nipmCoayaY5aLzm+EU+7bek60v6JpeZBIz6Fltdkn6UMl58ryeozzf/9XXUq0\nvk+macqA/UF9YR1Z0l6i5AeVjutFbjxwVBg09TQkiIcaYR8nuqLckssk9kFt\nlAB1fDHfVxQvjr6kCZJVLOIFmcOVFhARl+V8lKtC9BKvJzXh67cHLzeadcua\np2i259ODTHV47hcPauJ0trlPXvYDt02WYbkzBKuWQjFfWZWPFVLopSuJ5L1j\nMzmLLPY9aM0dz+2pBApFIODikOWives2VkR1Yv/LngjWhtz8ezodU8yN8dNZ\nf7GQs0zGkjTSh3vu2NxdhbhrIss+sNNmhjRgTB30I0DuKg55HrvkcThWPPVv\n24x3Xxyd9HNAZNMYdFYoXm90I5HjgXoBUEu5gt7MGZcmAFfErSC+wPJ69v+5\n24o5hIr7yWhY9qaZ1CGEtOfIFSC/i+m0K76dDAzs4PwoJdYZWO5lgNYEiRe/\nezummZ3AZkacSh20y7EDAXGzMK81pu+o7DjYQoKE22sqe4r0tc0FqGpw5Nz+\nVULosCQgTTRg7eKOcMoH6Nvhb1FXRaZcUeTgxI+p8mNLCLBb8RHMNxXXzE31\n/2tu\r\n=9UgG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/list":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/menu-surface":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e1e69fd8e.0_1629488030966_0.17697655473434315","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/menu","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf142f40f97faacb38e25b87fd6c2815729d583","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.f5afc16df.0.tgz","fileCount":37,"integrity":"sha512-dPVOsLt0GQkhZhuuV+nenn5v5KhpJBDFcnjMSPhlBk90qIm4L7009f7z7S4KZp9AhO3epPIkfOPRbccmJSYlKQ==","signatures":[{"sig":"MEQCIGHvZq/XlcbB9l/SdIDCRb4xbSavMoJWoFirfGLRHyjGAiB18I7MuB7jyHVr2wA1y5RPMIRVMeGe5h9InRKyxTI+kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBhCRA9TVsSAnZWagAASQ4P/3DPu3q3CR+qzhBysntC\nRdyyRRkdOG4hxsYRGLa75rnEzNR6ylwNTB1VYZyzoXuRRsAyDl2/3uZ77U28\n7Jn/l/Qvh6XSiPzYk2rioSyvrPREeusnC5p1WHPueJ0jbQofMlIyaTIierFt\n0b33D+3MFi0YRR912qpRy5UtcHrp9abRijPR/2WwJEgWAy+cTlrYR4rdpZRG\ndxlZ+ptvH5hTS7djqroKrP0CSmkjBc3mvsiTgTf/eA4BGiAOgaaXTHN3S6j5\nkl2q4G8v1rsnq4xb3iUtA9MU5J4NHYvFwcGaq4nwVPKIM/sZu/aqKErcW9zY\nWG9awD44Tzwf3oQF42mVJYqce4pMyTyYQ3W5o9HPvuwmOtQArDvwDI5+01P3\nNfypPO9YTcOuw4LvvTXgwxGHeWzlgmWwB7lLCkhMWO052dodrWS2osJY1/cc\nou+5yPzqiW7y2WVaqtl25XYJfG9xu1vI05edC43NE1QBPFW63ICvxgTOO9XV\njJhn5jysnuQzHL9zfYxrMHiZx2aHQfC0BD3tVEo3/mP6ZHIRSz2jOLbBtnvG\nq0qGHLErJQh5bwM1yAnEOcbUTuM1MY2HWCdrhKWWf2K2d1lYV6N2r37C2aPU\n4AEASecptGBPJYGyxwY4zihsA5zYDQ1dFIExdnhy2Awh2bUTzLYUdVvePGd6\nibyN\r\n=TxtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/list":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/menu-surface":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.f5afc16df.0_1629491297251_0.3444957848476031","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/menu","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c4f7824e9831cb7a6b6f6998a2aa905e6eb288d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.28d0d75bb.0.tgz","fileCount":37,"integrity":"sha512-fZP6jr9X877c90Z/MCbD26ZhUEywz/K5R9iYzONCrdkIObFyH4S3Seu9nI1rE3pNPeo9+UTwbUZ+X/QCWDkb5A==","signatures":[{"sig":"MEQCID5baChvBbn3oIlT1l+JsD21m162Te1EBi7qaZOPqKvYAiAEwLOrui8TFC/+1oi93up4gMT+zrHYytSmNa8rQZp91w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICsFCRA9TVsSAnZWagAAEQcP/3iwEvEGzsP7fD0jV2ml\nmFuIhm6rvGrTL58OBddapgTl1p/xLnNlwto2lVubtbxHs7Y4T1/AC12Qdfh2\n210HYD9sB0EflrLesWy9SvGEcSTK5E7Ub/RusbcwD7E88p9YI9jBqpholPy0\nPVL4l3y7a7nALhFD9ZIh5GuQhBmDJzfs6vrgnwyZ1yWN+vDo0VCcI1On6fii\ndaPeETsxICWnl4H9OHPGMTfCBCmpJ+PQkT+5vrPjAkp7aZYtCWsYJx8qmdUu\nQ1zowULuVTWLo9KqivDsSGXsBkNxJUimCjElaFn+6pna0oZnRMWkpZWPQgR0\n0kk9CSzc3p7pxcjB3Bk7RgkQi7N4YplL+YDg8u8a+dqJ7obp78Xv4Ht4u7tu\npdsfoDvZIINHTGZC8vA6Q25ntxboUohpJ7r83TVmRnamL6ooFhCc2c3UeysL\nTsrSw1ePi85xD9LTdyjXnYddZr4yXeX2xqrriAsCNqs6qDnlu4RMXkJtWBT9\npb24uAEm381CS/k5d0mm/bFtAB5kG3oTrPEPNrIKhU0+ZynT9gKLcE1NGf55\nk3GLagu96Q6/P/2ZEOO5UaiB+jKuK/xf5mKPc0k1krqxx5o5RfROApw2oI0v\n66ZqSqejCBk9wCfKW4m8rYqgn1XC29d0ugnzTQVkrcKGTFF0tYfkhMyxPQWY\n7dfN\r\n=3drB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/list":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/menu-surface":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.28d0d75bb.0_1629498117589_0.9969202410991373","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/menu","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09087cfe31a1039657e6f09f1912f85dcb9027d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.21ece5360.0.tgz","fileCount":37,"integrity":"sha512-U8XJyMIcJSdGundbGy1Kg0PE/StwC2VdHemh/n42cndepJHqTnOFl3MmAEFPSdTmwid9+cblmN2kcU5ObLqJYQ==","signatures":[{"sig":"MEQCICX3kaDASJXYfat18XPFekxdpLlW1BAA0YmRw+fAb3e2AiAsH/pGcxkH95sRrJOJkfYTVGIwT01sNfWizL2Msmz8TQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6xCRA9TVsSAnZWagAA7+MP/izXheK6q5H8Gsh0RB54\nI2L6L4e7vnzh8bT+RseSfPOJwXzZZ4+GA84gEXbN8d77OjtAJRSdcqn8OZLF\nfsAkhK0wVTPctXAZzhXbNcjoxR/b1gyLOTB+9Z4oiUbxKuIgwLmtv9B214um\nrPMdJIgss07Fbm7ilmSOIABkUQ9cFExIA7GoriS+D+9o36CKfErHVlkJI/wY\nl6Ye3gZPBVZaC1NZf8QvZFDoB/GokIhHgtPIgLo99nBYpYz5RJoV9PaQOB0r\nssFXoK/XLTEVWHs7KC+KivbZWnnSSKLiVtbHU+/wyDAak75OyAOroUZulxUr\nlg7m5h7Jk02pPToZqpiX6hoIOdNv4dfCI9HJDmdzXCJmZyqox74aBKu8HV5F\nwp8GJHLAJcVviX8O6vKgZWH3xnydhXVlti22PpaKodi9iU3KV9EQmF8ly/Cj\nGKX4ihchZ0/kY6iLJXfZyDa6wX/rgGU5NBw855z88Yer4dc7+X+5pLzhXYaY\nhnhV5IhWpELUZSv7tS/oceWClIiREmDJdGJk3XxqCwXtShWgkBB+jaJnAYsf\nzt6Yj1o60wzH0OTiSot7+YsaZ3T2tjFpsmzO00Jc+TiEmfdLdAkrT/nzgJXf\nJzLxDhD7LUSMwspjV/rnvObdZ+TNtwH/q8CcdKjd0InqLw+nsakJEia5ViqO\nHWdI\r\n=pbph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/list":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/menu-surface":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.21ece5360.0_1629503153388_0.22164692161029054","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/menu","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2f2be98837e7d3189ddd640b14141d883b0478","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.8de07c02a.0.tgz","fileCount":37,"integrity":"sha512-Yl1B6kuKGrQZ6ueqzIjVTdFkpZieN9CTcJYaCXA70R27Dfc9Z+P40ftNO3aoR2fjyTZGnBtSqCjr/CQ3V90M1A==","signatures":[{"sig":"MEQCIA70ohXLWlQ/QMf/9wnpVqKqicXt5n3kYDE696DaCvfLAiBOv7FBPEz8a3x21klCt7kX/Ua/PHBkdelRv+BNbfB4tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76VCRA9TVsSAnZWagAAWEUP/RdMjaegkHEArJxi2D6P\n4bbZJjL78/gTblJIC9WfcSUuCu+4MQp1Uz1WUavF/24OH6o7gBZrLRSI4OuJ\nozE5op9wa96NgyR0Bq7OR3cLuRNsxI6WDU0fErbYCKVHGCjEYTobOjXQKE/3\nENSIIY9qPvkZVrUSqRqR+wTuLCmwMpYDfhLUBF1pwU66MdYp7nw7TXftzA7k\nh8KpsGW3MKFmqVTG6CYdSU29Jrn5je9hmj4X/v5nd7YOT599cA7X5i6CfMR5\n/dxt9wWS5SAx6ycR7gGhadDUSC2JmBjqwxsZeS9BX1yNrE5nahVR811dqvRR\nYRepaTMXLm5s+eXbJPdcYXWu60Poy+sqQSeR2O+uwrfWRxzgUuOt0/KDSOnP\nlej96sDx+WlEnI6gkUm2Zwl7+Mv4ZIpJ0qHjTT30prrneOPgQsUvUeRqBDS4\nyhqxIT/uUx/IjjzyGcJtM88YEl87j5TYQVFgXa0n5cBW+uPuCcuGG+aBIkch\n2HFTBER66ZK+VolWqlqp20Av5N/qCvuroDCw6ghwuD27mWC0G3S4t+/T5E0j\nhZxwRBQ8ApFO1wnZdVCcMw9J3ZVw2iJngkKbsyhpkeriuMzwgpEObblcaL/f\nT7JrOlEWR7BeX3uabxb+HUMDDTod3GFInZP7d2Kr53gS+AfqbpADtJGG0ABM\nBJtg\r\n=HP5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/list":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/menu-surface":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.8de07c02a.0_1629732501545_0.23169296097137404","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/menu","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c69adc25104af83b8c8347c3aaac34d7764892f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.65aa63b0c.0.tgz","fileCount":37,"integrity":"sha512-4aIquWcUXFiDyPdrt+CAQ0tRHLZvSnM2oxItR7GVHsDLFIAZp4mkZ2EhHwxdK7LLKihcIoZI83PHw/3fAI4ISQ==","signatures":[{"sig":"MEUCIHawhIiEJ7DceZPOrEMcSstdUKoBrAmNK74fbWhNSkK6AiEA0pCEEPHjk7AWg39s8el3qsqhjBEKrNchlEpWnJCzL7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRCRCRA9TVsSAnZWagAAMwAQAIJnJYa/XxHh1L87I4PD\nK1HHa+JJKIE4/Uo2Epnvd17oS2qNhlesYEs+FskGLlYTbJy1Wegj9pIqoa+f\nFhSN0NA3zM6cNrZV2qH70hBKiYaN3EWlyBuwSrYpE4wlokNiRNob0uMfk/on\nJbnYjv1bUlszr+ZlGjN+M9q+JuldKeyGud8UXOkNOquPMmrKbB8UG4GbCMdA\nkXJUNQ9ojxm3RX0phzcYZijCSc4iK/FyE+ycxZdMfWnraArTrY0IKS4USDiU\nExorYOyFma16DwmTKhLqtX/Vz2hepG2o34BXHgda1FqqX+07Q5lW+PiJXm8D\n5qhaJku/YH46zKOo1QFMyXf5BM4g/DcZbEiwxGFs2iAa8U6PCx+lC2bwoFud\nrhU3L5ulg3Dx4Quj/II8r+DPx/jOsb1E1brBBlg4gn4eXQP9d2Q8G6H1Wn53\nsFoJf/t4AsAZo1loj7j1GWOYZxUtnJuiNHd2w9KYOQa5czkPCADES0zbKivn\nV7SwmgOkunaTLCnr0gCxQI4D33+8M9lIPEQz3yiFGnrfzPQrkin8w0GIJ68/\nJCpFrnMTJcaDIwkii38MebLF7kfQ1GhvAyrIYyzNuEISsuQNIpc9Yr/zWNBX\n8ngvGIowuRYPR2RX288kDDMata6Tlo4XpzxV/O8CI2Hx7baXv+bfgFFmXjWu\nc7QL\r\n=nzvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/list":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/menu-surface":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.65aa63b0c.0_1629819025025_0.6111773903252036","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/menu","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a989d83949b6b05c6331ee98d61ddfc7b0ddb263","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.15981e9d9.0.tgz","fileCount":37,"integrity":"sha512-gS1y7rQyIqTP5YAl4K2Uuq6FESn++F4QBnZZ6gg+h8CTqBWItBhqhmaKo16K5/s+cKb92iKjvLgInt5oP5Xizw==","signatures":[{"sig":"MEUCIFf49ThOExtprsoTJtaxjnpU1V3nrOi6V6udD6wqaI3SAiEAmv90GlPXfuBvIcwkRu57RXfT6LpTAKVG0/zYH0ZSoIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvoCRA9TVsSAnZWagAA38YP+wXvMx57Vt0MoqdKUfpc\nVnzcJV9+y6MTAw2fQ+7hF85zH73CEABo0D5o0eAHRDozNfUBc1a+8Udg0paJ\nCm4N7HzUK8JpHVut+oWmSNrgb/AsHXNRPjJkQWBszRF0CkldovRuDQ28DwWy\nl69lI9UkiKNWgN+45jIwM1GVag757uvdNKZI0Q7FkkZ3QoursEhBmI1kEChU\ngPvDkP1D5TJyRetTW/Bz+bSfGsRTKR9UOn/dewBwT8GPJQFp/LsQfxlCBbBu\ncUeRxXJTn+tW+RCvsEyYpKUJazbz6FeYLTCA9i19y++WDhILESN7wcCt3evl\nM8COiUHkdzRl2jNgy2R79RT8QFUNed2zujakwO7oDW70Rx4E3qvAiedN5qwD\nxzLgpo9rVpR7mNJwG7IduPyANmmLcJht9kl1TbME7usb6bhbIwKZLu2MX5A2\nAhg4+sgCp8C6ihCeXTmDeMdMOLBfsbYhQ+48Lx0kwg8zP+N96C+mHPTF9GmM\naC/IEev09bRQL9himN+qw0S+2L/9ZMjk3hudmjAsJ8dsd3d23uJtDmGQbtAf\nxNLdqFza3pLVWQV/gONeUi8Nf01NfmoSis/cmWk+xOhGCn6LjavRn8V2Gj83\nZxG8ClPkBexRNk1nDItjuDnxntmXz/prVabdlHCwuFAaGPPLjPAmEYbPCnee\nt7X1\r\n=ma8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/list":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/menu-surface":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.15981e9d9.0_1629821928769_0.26001232399001317","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/menu","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c31b669899312221335794658eeb16428d0c2b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.fa7520f62.0.tgz","fileCount":37,"integrity":"sha512-4ER/Lr4okU8ZDCqYRuYisdTiUEG+U9si3T23yN+niGDglU5thX3yulPX/ja/3tj/tj69I5f/xJO9bhgc3QRXug==","signatures":[{"sig":"MEUCIQCUh7343/xh1QYRa41xTT8B0mxCiQ6Wx0LsFNDDqxQc3wIgR0dccOpjGzQSPy8phEp/pZ596UoZjbQtGx8vSUjyoWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXLKCRA9TVsSAnZWagAAMvcP/1ZP4yFKOAW0JdZe5LHd\nC1pchxR32Y/Kiy8V+Qqq1sohDIhzdgDYUxJsHZmKhurlCBBoYLKpkTO1O5vK\ndItj4/EHF3WlwCDxCArm9CoKdfL2qFTBZC2/DiDiQ2qePROi/9PEWSniD9Bp\nwBv0sBYwB54nMPkEhLg8k+pqxufNUOJnvBP70K7qzTRGpg1lRWDTtwyJJ9JT\nGOaBnb6q1EXdL27lCJ8cM2a/AhHwJC15eJ9WxsnXu/XLoEA7sQEkBAYCTKiT\nPc3fl+fn04dN0j8CYm8N8uCYMpRZuXdjMynBDs0zpw+sH4i0qtlsojfcl8EU\nluRhAPWYBH2Y7FMVWBFkGaxtnpUxmlfSph4j2tgtl9V7hq0UchTvocPCV/7I\ni4DTmcVx2meBbn3hF5WCH7bqC6EXqOXOYz5lCDE/Imfmkpk5Bqs4Gp2/c4f7\nwTHXiPNOwK0rZA4RaO4lDyiEIm4Xy/iso+/36Gt/N+ZT4AJiSr3SzIPuODeP\n46WCUrQF+TmcXYsHy28SgV5UljAa+xPgPQwA3+MMaepYRKfA2wV1XWc5he48\nGFlSucuIn0+DOdoxBacmNhwYOF/nvB4tnlodJY8G3/NPIFpAOgD0jZeGuzJW\nMDUQfaPVKCfpKX+JASK4eTVPuCJprCPHliphfAazntTDe0hU2t6pbUgnSuVH\nKvbx\r\n=HPfF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/list":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/menu-surface":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.fa7520f62.0_1629844170346_0.4668053857395249","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/menu","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8aefa4caf23987b669119b1c8daf4403c84ced6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":37,"integrity":"sha512-qJELCgN4tSTlk+ioSocUdFercX1NDMecWvRpxqqzDexeB0JlfSQvS4hwAjXXL7mQUzQ2fJ16+AAtMxGYsydYaQ==","signatures":[{"sig":"MEUCICPlPph6c0cjRm/S6u9STOuEFFqAizfaAHE5BTXmhVfpAiEA8qkT/tJRFddoeMS+k5KaXvdAknHrB2Rls23VQWdTqLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeiCRA9TVsSAnZWagAAjAgQAJ9T04RsTmVQYwrS21bQ\nUVGrHTWLS6TrEkZ+pXQSfZWyFT/JukBaO2ewKJZ2JMe6Ws5uJ98/0fw4S3I0\nAVWDgu9hE60Dst64e7A9BGPNStQyxMqZbEtIKCRLuGosK/9z6myan2Oo+Aq1\n0LCKiWJEcyBhhbFLuRB6JEKMUjOgr7Gk0FJEvWYsVlQNDFQp7aq0ueHvtBXA\nd1f+Sw9eP+PN3pDWGmVlhuncsBsJHPKq/jjc1epLAhM/15CYnCUCgWJaqb2p\ntJtPA/b8REAwljlzRF/V4kB/nqByZPvtFFwctTK79Bf/IclBcWm6ri3MuB7j\nykEPEd26nYo82x8uTGFs8KSBO75xvdBU5r1BpvM3jXpqlYEliKC0B+OYlhJV\n63ycfgcCOKQLvW6WMV0fZwh9d7/I0mOWW0EBpvjlpTuH7ae1jlhdfaenAR7a\nt8pYeEeBOvjnxbxpq22l2kdpywoat79fbiV96Ph4Ure5xBxs50CcqlPe4f9U\nSFtzDVnEWoahnPB/nOMTecyyCKenDR+liV51CZBZ5jfeRcyb3nDAS3SD8DpP\nTb1QQB9oJvw0wG384d8NWMJiPukzlI5ffvpqKIKAaggUmyEWmi5TEEefFUhs\n9Sza0hGlYAPhhPqY1Ax4ufolFA1IbZG0mYsxUPWS+zOoI5E1D0ByvQnjBfwF\nlUJl\r\n=N6FC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/list":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/menu-surface":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.ce25bc3ec.0_1629845410233_0.9230610338955094","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/menu","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b716c1d84fe18424beda8e3b7767a4ea5c636e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.12f5622e1.0.tgz","fileCount":37,"integrity":"sha512-h2qxKBGLGz0Ls1ZEjVgHeqrLZAjWUxxDaqc3C1o+lsa5FSHDYSfIPRQs2JpjHMAaTBGPXdSEJEf1NsDeEe5JzQ==","signatures":[{"sig":"MEUCIBoeKWaSgpmgR2YkLP62PVJQrh6jYnjuJcTPuTCgQt0MAiEA2UvICeQQh/mk7PWFW3c/eAp1cxmoPKe+cIRFOHwGMng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6WCRA9TVsSAnZWagAA/jcP/01llYpfvl0FrkPNeOjt\nFD1ZhVJqbIG0XZqevfisUi8zo7ZDko2jznhWjaZdmgSDLHM9hGoWutiU6Y0l\n9MocxGBFYeVDNZgs7krldcqGpApbDtT/DMjdqGd8rLJF/n1xIBma9M2HgOvq\nmYBP9X0tZ2GzK6Vmj461HrVFQIRIIYcZMt443JEa0ycPhH+TEAEtUcpog74N\nvIAEDdVBHWYqpKs5ARlcqIhTijvGrgY0pCXOXEyka8FKIJ8miV6IFkYG4/NV\nA/FJSjCoOXCKTO6/YpFsHOhTunHjpThGbBOlNLXERnvRQZDVvIs0CQysQdi9\nmdg/pLNETQOCNdCq836hUbx6eUOu8ev2Np786jVH4OpmFHbmYYr3vVboE95a\nj4L95DpZ5HBLLnf5Hbm2Eqi20EmwFgoaaf45PdkLLzO+ILJ20Q34nSgowsA7\nZ9iHASKmD7Pd1AGdovCgLi6JoyMqcyh4tjtllkHmuU3jbTzOt2W0aiKl5HDv\nr7z6kApLg2HVj4LCabrWfOPCaElyhdiYskaqdoHZOdOgrNAAG0h0Ce+T7m0F\nyrA77BhYGf3KrMC+t3VnPbwAvjCisNaQuabPhhLGkkGb+YtAglAOv/WnhyUx\nMWubj79HDUgA5k/fngZtVsAanx+wMtMK7xxevxMOtv/oBCnrL5iE8E15yLKw\nANHl\r\n=tvJO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/list":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/menu-surface":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.12f5622e1.0_1629847190875_0.6804025972023071","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/menu","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c03f9e667a6ea6a0da9a575ef55fb1d7a8f9f2b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d97f8f133.0.tgz","fileCount":37,"integrity":"sha512-ZOAPRGKD5CK+z4/Vi1GzU591Q14KFqtkonW72qydcbEjD4QNg/B0dg6PwbhPdicdMFe8/aD38IkdxLHE35J3gA==","signatures":[{"sig":"MEUCIFD3REhpcECTy+E84swdc9xAui/DeCiceZl441KemM5CAiEAuTWPRmS7FwhcVDqd6vtebmmoE1ik9BLPGvG4y4PdQks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo1MCRA9TVsSAnZWagAAu2QP/iWAVUAeMJvBglX5MRDK\nibX5a8YJSGQrsw8rCn6ShfkKIqOAo4vVa73058tsLaS/VCvH37kJE0P3gzI5\nMt1DnBmx9ayiO2fksMlIIaHnQ6kvHq8PsZklaEZPCZT0Bno6D9F7s8NFIroV\n4jMUg6dmSskH9L+8819wPFiAR92hXKexWqpu6SVo7lqTpbH0xmmZ3SEUaEQ2\nNtzDQ43ztral5Qs9MpW3o1gvRf9NhkAno6FdxSoRUvrpvJ86NTamgclxMoLw\nyGvrzGwmLIHvNEoKfcxHQe1KvuHkOeIfVO8NJHpoCN4DmmbE3Ing/V7ryQR3\nqT3c/j5EZ1ggnPBfOdtfmW3rkRHkf3LzUYigqsaEWpRB5BZVpEuhMRlY7HiU\nEp6qJ3yMVJxNfhruhLievFJIrcPizYoeamjoU+T8QakqeDZTxGPuaCUYXwOS\n1xco+TRudWOdiYNoN6TYP2M9er/qB5CBO7pdEfrtpEeICPnUr8zZgnM7mqpY\n1DyoUVkBqJ/LzGBO8ziekd/Ma6RLO3jsTSW6xNt4w0DqJN9ppSWkJGU97gyF\n5wDgzp0kUKgOvunuBwiF0Z4EGULnafeUkQnumeixbN9J5dgb8S0wrPaNs/jd\nFYeeqJS4g9E4qMCNn6Fda+0pAcrxfkOsO28jJrFE8EP5KNDki9AwPAl/kQq5\nowkv\r\n=o1tN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/list":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/menu-surface":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d97f8f133.0_1629916492761_0.891890593494215","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/menu","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df012c2af5d6a913e3be1892dc49283425f656a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d86fb6fac.0.tgz","fileCount":37,"integrity":"sha512-P/KRLV+Ck1TOUCph63LdfbYkxPicJ2a2WvX8XFmw+jQXyBhEqsR169sxDKMKUuL264hNNEqTtf4wahb0FWSRKw==","signatures":[{"sig":"MEQCIDYCMI+v+LQEE9LxaRQ6I91IqB7P0aBFJbwasU6VrabCAiB/ezRaraftX8d4+++DRXmN0/asiY9HsBcUpJqF1tZszA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIcCRA9TVsSAnZWagAA/FoP+wcoe5dsBi0iD2W5hU4H\nZEwQsaZNaMM5rYCRd6RkR1Du6nzbdmKMiOD+CeIbXvNC4uQiSwwQQW1yY4PE\nVyF4osOznnYuH0Z7nHlEtyb6z8yII7JbkFbGjLnwc8nSooXC98vtP2u64u3+\nIvovqHRGH5aDefqWNcDa4dH+mAki0OrI4lcR17iqAEl23FFY5w3dohJuhOgF\ns7zAafM453brUQW6ZRIRVyEixuyFB+oeKFCw9h3ReDHYUb4vk8sYxeouQ2jq\nqqfm7cNDuZNn/w/NY167TkGBgGrxp9rXuh3nCaR6oXyei5acsLEjMNqnebBh\nOXeositiVID4Cm5IUrHN6PFrAWaX7HFzLOeMLlLGPGxhEqI7eBZKzvYRa2Af\n6yIw8me/VYI5mIOaVTHxwjTQ/vRSy7ABu6XQcoZQn+IyUAiOJJIFTIOCyiYh\nEnQll9jNtO7kgz0sdn12m7YF2HqP7lWj/EVdcx6YYU49ivjTLEwQz+8/uOF9\nt+LewWKcZoyX01zZFbMErxE61EwqRaWIb330Ejd9qmC+44+gbGZ3hxAnOwsA\nPk3DS4L5QPaiyjsv+4wSpPTFst0CqBsdexxQtgD1oQF/WDZYzQBimHG8mxX6\nx4xZUB25l7nattWZU2hzY1gC/K9o6pmwxWRgWprSBcmz/PABvZQ+EJuZa9br\nYN57\r\n=Kr0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/list":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/menu-surface":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d86fb6fac.0_1629917724092_0.5826800257618769","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/menu","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95accd1af7665a42b9840ad927a6573c5ce814ec","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e8554dbbf.0.tgz","fileCount":37,"integrity":"sha512-uTe34HpYv5LNjAHMNmK0SVimizAAJERvfezpT8FzbkN+lzW7IkYbo9YYyC2r1jKLQ5+XEXHhFZhPWkH7CimEYw==","signatures":[{"sig":"MEYCIQDL5PmghyDLeMzmi0uiEEXj9nl86PO040aUCsmXJQn/kwIhALUPaMnwx8G0ow3T/ocvIjD6PJ/0byf263dM7R7e1w0o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2iCRA9TVsSAnZWagAAKh8P/187B/8ly6kzuW7dwdLa\nxDJEug8GtybKowP5DAgW0eHe+oKtYuf50UAlbK8PHEB9ieYSMU0zcDxIWcPC\nlJqA6UHbgF49Kqbg0s9bNqVtv8CkzrnVeirqm4JfqaAItlguSzTx/gjnL34e\nVooPueu54QeZLo4HEO0YVoBOLjSP/LwU8sqqNUFc2aKsoeHBiuUFRxSY7Gfu\nqW4JXS6Hot4EqPE2qaUMZ9a7LicTiz36OwUqwY8PBNDMEm9vDoqzMA63M1iB\nZ4g3SA6YopWJcJIQN9HBw2w8V/Jw/iEEG2lykJ9oF72mLeednpdvlEFtOV+V\n3qiO/bVuLKyhWW2utbTZim6EAtPQG22jpTjo1/APnElx38JJA0Vp3jQJO7zS\nGgWXC58DTMVe6G/FtiEQeQT3yutPRjJx0rkR/MvBKwwP+ZsFBJ93am0CCK/8\nunYkyGT3RRlmeyDlsuFsUlcyUXbGBz0umh850lQX5VhCcCsxGYFIRtKdcKZ4\nq+/wY1jHFKE0+siQGqo1QMuYNEEDMrd+u5ta64VHGiOamkkMe1I6BZxbTGO+\njfR6jJb8M3e0ZJiXG0SW3pRXDlM5dJ/dOonVzwuyci6e1+rLNS1HMRGYLd1B\nFiDwgAbJs7mFI+2ILuFTWX5b6cBKslZgMdGWtiL0+IwWJZI4wYbwbUUkHOTd\n/sF8\r\n=VUkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/list":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/menu-surface":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e8554dbbf.0_1629928866381_0.1396573610909997","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/menu","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4c63577694c075b5ba2da5ebe408a35003a9bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.877e3fb0d.0.tgz","fileCount":37,"integrity":"sha512-ffcyHqzdMa6KAoXq7ofE46AT+PbkdDbXS7Q1l/sCbFxFFnUgDikBRnQkV+ul5oOZBUtEYvMVWHTOF43Kdswhbw==","signatures":[{"sig":"MEYCIQCg84+0PQG2FuanUz2O0FB129DL3670zScAN/9MxrucSAIhAInmTLuhqAxpfzeYJDz5XOCvEC6RFqYYNWoHLDayI1pz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7XLCRA9TVsSAnZWagAATzUP/RqYeP+PPSbhDTEzXdyK\n3vmOjkZMzcl5t+sXNoZU2D4VEdILIBNckslNQA+kD741GZFTRWLxmyY5x/Wh\n6DnobAlISXRaRv6TLN3QWmxXXIKaK4a1MWBq8dYewaOWyvIOmHRU61hEtZcG\nSzKFBSmp5eMOUqTlnHJc3zp3i1Y0mWkCrAYyKcWovlbxsr0mesubzbVTH4jD\nN6BIeG32Ys1rW0ghDs5DTxIp80k0nXefATHlZpGmOOKKwgQDiVq7yEjzuaRY\nZwQjjSrm/rM7v6d/Wf2tFXKZxQktg37cZZdWbAsg4S4e+bzyjIPbeY5o8RGc\nUytx8LJRj+jru5+WN2I7ORMskm+s+LMTTxnGCkx2BI9A7rxNZJcidRg9KA4n\nc9dHyHPUST+O+3UrWwHAZtpC7vbJkHcSM6TsDJihvoWWWXI1FnCOFcDDtJIV\nsGhA1g7gZk2DUV0FrQdeNCnf7NvgANhyLlNP4i8jBc+IORnyHJSZkWva/SvG\ntKWVCn8g1sNhFtvvrD5yVtBJgMH+ExIy0sWgKRt95H7eDqKYxzqAEyztyc9t\nGaZ8ScsfXIin/1SE4F0SMbqwy1fX/5MZuy/h0AcEyNsviJ7kTteS6Yme2ebT\nvSLiv75SJYq8b1bi3HsOcAVcx6+x7+yWB4UkpL3xX5QVffBoRi8tOViAfyIF\nsu+T\r\n=9Q+o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/list":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/menu-surface":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.877e3fb0d.0_1629992395021_0.28354806045182324","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/menu","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceb61e53c667dcd8846b81b535bec2af7e678c98","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.6236f3576.0.tgz","fileCount":37,"integrity":"sha512-xM5QjqHw+D0VYrf5gJIRP3sedZkErcawqrk5QP9khcXFIusxsNiVpGGQTs5tcDL0GOuEEX1NPqrOyxVTWkC7kQ==","signatures":[{"sig":"MEQCIAJRO7qkBXGKIWUW8XXd2tXbm/sjuaEdobMaDLULIeJ0AiA34z/+udtAJYRvR1fKbO29zBtrcxFBsQqaTNv7ic90WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7xMCRA9TVsSAnZWagAAEVkQAKJzqyRXTgkoU8+MVadC\ne7JDsMqY0sY9W8QGHsnQpo3+nYeawLZOmZPfuzc/R/pfKBTYW6I3po8j020l\nWqWW4T2N+l0KOCaKNWsG+/dzaAhxmRp6Bm6yPgZ+dvYSNUpOBKe9ogGbwTgS\nf9ADkocYjjQL54yFEP3z8c27ewXjQ2+y26RSB5In0orpej1x0EvbUKYl0XIX\noZ4hDn6mIx+xBAKkUA8aBAILAXtAwp052LUTm0wPPAH+/DVkBgR9nplul14r\nTAxxdDbof4bQw4dDnCqIu3ayLrYreCOY0Ptz1L1IVTGnBBSqDSP0NyDCYIaQ\n0sROOU/FNMRy9eAYygUYrI8ZIu6a687ZAduCQROP30OJq448ManCU7bb2NFQ\nWcNyGT2LQhijvJn1JpH4ElIAUtlI2i1HMr5tsKgNpp+pRHTtV/Ptg3K3h3m/\nPatWxyTYQ6PJjgtGUBxT4aJMrYNpXzaxo0IjkjIMq4oZTgWeUbipnsRF+isG\nFbv+LyOtSEF3PMW1nk1cIJYaSt4FZexXOwP1otgYvED9u3kxhtS9waoTLp0B\nXacW6tABejuZdd8Y41/p9zhWFj60ylpdcm8wCQSG3O6M4ME1YFacJulCBJhq\nOQdNx8EUexqzqkU3SdPt1ORs36hiFv83F7CJmElxvtKN8Nhgv5o0Lf947WFv\n/dSF\r\n=hyqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/list":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/menu-surface":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.6236f3576.0_1629994060262_0.08588351925060644","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/menu","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5781c369af96712be59b809d87ee856230fc32a0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.1d19158a1.0.tgz","fileCount":37,"integrity":"sha512-377CkCipyh8fcLhAh9OcOMcL7SpDAKBoEClgcJ6ktb6Sm8GczNYXFoyRh4jvTGsRyfS9g49JWDGQhqu+k9bWuQ==","signatures":[{"sig":"MEYCIQDrt4DpyOlw5DR5UiyqSmzhVTPjftDLHXZl/lmbHwrJ2AIhAO41vf050iXAVfXs/hXWAu8RG9IxVrv3R0OdE2bRVToV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8sdCRA9TVsSAnZWagAAWQ8P/j57+RutCMPOzPIyyJcj\n7JEQcjLkW9gw5bV2g5FX8cadR2k7MEhIEsACZ9oznkAwKGmAXlLGZDkeiH/q\nIyeWaMsYi8XApHJNVseVAZg+Xvf77wZObc1sxkbHsyjp89tkTLvjHiY0GJVD\nujz4Jd0mlC4n9m331O8vy2W/j5oNOmi6FG/SbiyRCLytVrMKkb0XD9ql9KqK\nB6wZ8CD5nxELC1RiYlu7s69eJ+JAgBKSMSlUzLo0zPzTE57C7h3ZoA79VvL2\nRsBJ0kvI6gfZ7aA5CFYe9uqqZUNstCDkloJE5cOeaWiYlTEsjcqjjnw5gSq/\n4sZr/2DhrSX50qIGeSLJ9DTyqmSYSKqDqktZ7QXw+gYIYbX9+OAURNcl1Hm1\n3vWyXlLXsVpocA77YeJRV/UkitNYs4wDFWf81L3oy0PPBLXTaWwoO0MjB7pX\nqpnBZFJHX6/CZdyDZ9AvgDCPn7TFxuxRAEfQ0dKeAY2eUrYZJCQceGFwwK/0\nRs1o4DqrE51QA0VNs6DMctz2kl0T8lvzmyt3iruG+W+JB6VZLFVyQYamBZvx\n+AGOqh7WHcxaDsP+6lkRLof5X14Uv/iQvQVQANZpbTiVy1uBOaG5NAxH83DX\nlQBz9Q48Zu3VQvORuQvcSD1sUVjqWkVlDmDLjbqG99DLIvo/NLZNd+6zW4JF\nd7kD\r\n=KhZq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/list":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/menu-surface":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.1d19158a1.0_1629997853547_0.5769798088691183","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/menu","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1fdd418a68532ef195b008fdc45cf7cb98cc6a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.6adc9e83f.0.tgz","fileCount":37,"integrity":"sha512-p7l63nUKAxMrkAr0rTHtf/D7z9tmbl+LFUhPP+UFbeN+F9jCv22gnUUDj6FxpttWDqRBKKRL98xrOXu6Rn+8jw==","signatures":[{"sig":"MEQCIBM3wXbnQlJRd2o6Fc1tJ6x1ygk0DY8nwTADwXf1vqyEAiBf0HCSRhVdcnNFlFi4xBGq2rCC6fGFoXu1Gt2qfbSATw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+mCRA9TVsSAnZWagAAgCMP/ieLneO0hGlnFJZdeaH1\ni+E+xWwdMWcCOH1gRsYBi/a/oMmqM49kj6dvsNN9WrSWKr8lFImpmczAObDt\nEillBfL+s4DhIVhshjG8naHT0z6N2C2tlcUlgKgwsXH6jCROOGehX66djcN8\n7mn7rdewN0ANnQcYD4lGS+vrMy95DHUEdUdvMtMyDPjtNAeHCuBBq3P1WXkT\nsP19EX1jBVJOVyTPbZJuYBHnPPmajU8IsX4FQzJhj4/fRi3lyt5KxaQReRke\n67O1CHNBlRUoVAL0C866tykUfyZXLJfro+o3coErkToDJL2E70SSkobeo+0m\ns9H0nj6FU19+uB6cAnSdjSRS9nKyHwm2wUW67/vCYSTotnY0N6RnQNAxcMzY\n9N1X3KCNsDcDygNQ4MIAQ0B+B+s8+GxtE0ISUwFmL42VPonKE59UAlCPYtAS\n9t7QvSPuo3AVVNucYIdbWo5nYJkrU201eskIkK4Z1z+VQhNKOJl+55L1Ytmm\nE3ZwOepjzS4cIVmev13KSetiKQvZQbJPvf4wAs1Gowh2sgsO63zJWXRwvMtk\nBFtCD6F6y7RexlgGW2GCmZzN8xaAnyQhN9Sx/SoZRLwIXDGhkYvoifL/yRBK\nzCrbwN+2/kaCGDAQ0DnbQEiVBSLgfUG1u3seBEC6xfbpYk6VxxVPAIOJ9Hx7\nu/jU\r\n=Qabl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/list":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/menu-surface":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.6adc9e83f.0_1630363557799_0.4188153371995058","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/menu","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0685580ddadc42a830a37c5f5f300bd4c3c54096","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d082790f0.0.tgz","fileCount":37,"integrity":"sha512-oC0iSZEUOzprj4M4p+EJMgK5lFTOxUGBu9ZCK5HS+QD70hrOxVvfCTqXdPVyi6S9Zn+DmhNssAc+oFtYfeh4hg==","signatures":[{"sig":"MEQCIBXDnjDcbIbyFkGQWwK/kxC3nOLVFgQmbWC7co4njSnbAiATetjiXNbQQHIqRJuStQYUaii+s5Oj5esJf127NU9UJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bvCRA9TVsSAnZWagAAI1EQAKO0YSSLZsxvtRGhYvga\npoi8csulSnL0AH5/KizIFuhrR6ZYonYQTRTP+8MemaekcHQgni2WXyXkaMzV\npIhwmes7cptliHBSeF/mi7uJOCqfq/xbD2NOiLUzOLB/7H/Hx9b1UL7xH/n9\ndFvdpClA4mK88gqFqwNJMsqecECPT03RR9J3gSPQs0TyUn/PtYC5i7HBLwGn\nY/3doKwBP7/eW0Orz9U6YwSoCc2qyrQILNpNmHR6PdkbS+6Mic1wdELb9DPa\nZBYX5AyXV5F9Y07tmWLEl4Z2JO61kBmemBRFSVTJe2q6Sf3mAv59tUO+/CI9\nnW5pf80wXvLcRnH7w1wYnxer8//FwQ4wkya8bICTgVMTAqFz2eO2d0pgOIUd\nW4cWY9gDPjM0ElYFDGFlFJnUfjq5GyifRXHIQ4QInxLN8L7Ec6lsErCyhqGi\nciBU16fm1tsuqW8EAJM/AXE3LRTLhD6kHpINz1/14sfrqkkb9GfBsic5B8WC\nbq2jM/qvRwG236ld3HdTxww9OXmymms2P1U9v0V34w73KFPAnPGnnv6nsu4a\no2ZOcDHbgWKZhjkeY2pVhRcztSjKgMD1bacZRaZey/i+nAXomXMJnmxDAH/5\n4DEqPiioNp/sBUe1w8Fh9CkjNKIbVPr58aIamBPY6MTXi8WQ73ox5I0dA4+I\n4j8U\r\n=0cUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/list":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/menu-surface":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d082790f0.0_1630533359149_0.643305635081912","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/menu","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f71f120d5162c236d1e8cb038bdaf1a983e89de","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e2c4f0196.0.tgz","fileCount":37,"integrity":"sha512-C5+uasNpTZ+m2QsdLeLiVpQCco6Xpp0xvWj73hJoTi8+wcfptqo3wvSQ/DVsIZvYw5YioUeWfYrTdnp0+Fu62A==","signatures":[{"sig":"MEUCIQCMoA2nZ3H3slcG5ALX0B+k1lhjV6ccD/7eFwvn9/skywIgdBIBLZrmRsubAgZAPn35Jk0ylXQ/gHKswIY0cOM2UBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDM6CRA9TVsSAnZWagAAKDMP/3PvT1JmCLknPhbE2f50\npHmmZpmiHHUdCHhMadzH+iHLDa1ELJPCXOnNpIGmrlOilRQmC608yO/l2GQJ\nHk8Zr4oRPORVZ0TQYxWWrb0JgjgibNo5ZfJsLU54IGeJ6HNi+zG091DWZ8ij\nJdXKWBISbTy2x7/7luvmhefhrvqSVTMLz4zgg5yhgcXs1ReQpBB4EPjHgoEr\n6MI6hlNqcppf8nRaFUCn0oegMl6GropCq6TnT/k8PMUpSbN0bgxyQdsF2W4m\nLB3nGE6YQp0X/L2TUEXMwtMfPThuysOsiP6UR/p9i/D3hFVyzfnybIqmnQDz\nnLdY5x2lqePrvGT37m4XUGX+wiV2fNYn7ZVxJn2/it4M6omkbZSEAlpqmptT\ncmvV6QeMnLE2O1Z9ENOCPojFr9AW8YqWK4bRoX6IDTXYGXW2eOFtQUiPXgVy\nSO061nX7PBPfExtDrKCoHaOC16TyovZ4lzKHTEh/Y580jX2VVrSjQqGTqg7D\nJZ9YUmKWUNIiy8d5Mga4sbE7A4h5ZbgrhAL+U4buyUknxe20D92BblFq4f3Q\nHPUE8fGOss9eTK+cgKGFE4iwZIAljxThzsPLjBMwXaOvCmxXcuREj4icxvMb\nL27z82CLCbxEalpFcD6asMFUq2Na00zIc8zXcJt9xepkkjpemt2SH8ONwwW9\npGlu\r\n=5MR1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/list":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/menu-surface":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e2c4f0196.0_1630548793933_0.37570406074055174","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/menu","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a6e796750d6203b585bcc2b7075b507e208b85","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.611db508e.0.tgz","fileCount":37,"integrity":"sha512-aXG1vOPYx+kGpxeaRTS0GwvV03wW7953bEf4dr2uqD2nITm1/kN69o8lYszR+kGpdHfr56DsuvuurC2y+kvhfQ==","signatures":[{"sig":"MEQCIBQ7v/qeyB30+B2IZiC7SQwmiVUo472CxYAeuoOXr+aHAiAMlGqMT4za9B/Ou0vZNBJ/vCRJcA3Ge1YCUF7vVv8E7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEIpCRA9TVsSAnZWagAA3LAP/i1Buza2rU8kfqtG3yPP\nw/XKzo/V5vBJK9zzEMTWiB8o61PcI/VYEV0IfmcbwFwadqj5uaG49vcKIYOz\nrZERLbZXrVIozbGN4KAnrIbnK9N5kw3/W45ZBdYgvcwTdI8rkq6+yDkjnQ23\nxUaJ5K9jxqBlNQv57Jn/OSpIhaNtXuY1oYBpFbq5HFZHnh9/0BQV3wsn+j4C\n5Ikm0wB3n9S2GzebVpGagz2CtMJon0CvZMNUnt60YayDf2OYnUzwaie7KWma\n9Hqv0WNaYsd/JRoMHMUte5G4wMX4ke3CVl5U4bo51PLH/+e/MqWRxE9i44KW\nngm3mnrij5RzyXwpJpWGxTIgGhito0hpmG0XAz75KHnQGqc1wbSXdqXPbszE\nG8Pp29DhJpJQ7yvxQER+gOGnlrCKzunJskZY/CZi+zt1sycPK8Vj/YcCdGYu\nI6bI4nIIadrq8hvQgQgWCEVnL02E7S/YKjbbJFPVOtGBxSrSIkBxcW53dnOy\n2owDPVKeGvS7MiW8ICgRt3LuQJANHHlfNC8rZRwTnm1/vgLmf3XObQnzVUDb\nHHqYGdyBMGEJI429Xo1D2Mjp3fTcPZBRSM4Cr+qzdNl12j8VhmdNtG2j1NHM\nrtagtlOw9EPwSe47KFhKUA7hR5FEomK+x7jM36tFX6aObSmS90eVk7gaWq72\nCgqX\r\n=RgEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/list":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/menu-surface":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.611db508e.0_1630552617654_0.20952962630953675","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/menu","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"299d1783fae73ee08019e43196f90533a1ec0d21","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d4706933f.0.tgz","fileCount":37,"integrity":"sha512-07P7yXR/xVGMZ95wzCKVur5kVij33QQlnDNJVPJ64cmqCxIHKmFhyLKeli12hjFigzZ3QSa5OoFITf4Q01rU8Q==","signatures":[{"sig":"MEUCIGXExrklBBUN6oHE0UZFP+qqh1AdQNH24Mh6dd03ATTSAiEAlIRUAYfLxeRsX+siBBrjGCVqUzy2dmeYNjbwX9rD5YU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAxCRA9TVsSAnZWagAAAuMP/i6qQV0CNYuK5cV/vmpQ\nLfF7LC62Ro0LvLoYas9hV/EP2ATi5yCxbNURrk3j0xNXc3PFotshorCnRjcA\nDR2Y+Txr3lqVHq8z9Fe8dybUwGxBHNv/QQnof7d4gvGMc+KAiFQy5fWNhZPF\ne2xKfpdViM34y4aM+ow0R5dCx+HFsMWEP/T3JDF+K8CRmcEM/LfxWkVCSjyy\nN16xjpPi2Q77NnHipiNQUa7tbTmarJi8fBCr+Mwnz2EL3WdT4jEFfaNGwcYA\n4yHf0vmG64bIKBo6+gks+yjkVFN6GyQmtVFftHLhz1fpCn9CncbJP1/9xf1Y\n1uHhzTq90v7CVzSXIUmI39YUPx5kqV12A+wXWu/HbxvV6YlMfxY7aVMQgFVV\ng/GMHDvnUnI4Iv2uMDp5uKAPRf+gPhITTRea3CWE7LvijfOuLT7swPALEbed\nGR16bszZSQ60zqaiyAqNc0BnvMjtdRuu54b0vyyg7YmnqpzXya0rC9O8tnl3\neatstJ7epH2DcV/4tmTQvbQQwkdLTAnvG/IF0WZqv2OuGaEuu640Eihqv+Ke\nLd/MkHq5dl/3fZ7UV1Maebdgcg8G2tKqz4j5n33LDCgieMfhauYcxzy0/4wM\nDjfliQSXrgR+A6obQXZv8y14yLsyN+b4oXDxu5Ae2t2j8awopxk8JSE0ouMl\ng11M\r\n=TSGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/list":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/menu-surface":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d4706933f.0_1630597168968_0.8259449587068928","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/menu","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2202a180c776ce9e5e6e96899bd1046ecd79491d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.c16fe03ce.0.tgz","fileCount":37,"integrity":"sha512-37DGAxk/9/j0RLh0GOXZ3aDqbYGB8MwuoW7fUhTVtBv2RMM6pl7G+QH7/sWetwhUC6CEgKP2VSH63a5/gBK/NA==","signatures":[{"sig":"MEQCIFxQ04yzZUZjgawCEYFW1DAYs6gkGt4O6FcbfahbPp3bAiAB04M1gmxKIeIMgsdT7bIjOWGL8c9+LSQJSIZLmLcEcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ32CRA9TVsSAnZWagAA1vYQAJ9MOb0jEXmpqtqLzTLS\nspR9fTHXVKIozqAQdts8msJlqYIFrcVGPU0I6IB6c4O6jICZNPwNINsKOrtl\nBkp7uNSqGyoFynNQaPR3cu0ARPQILMRaX0yJT4ADtSm9hZN7CgEU4GunB5gP\nglj1BXHLCjcPqvLeb3rnMbGcHTzMcIekMtnj8R0QpY1ri2yvnmMQhLsDCGgS\nWnNQcx1enGL2XFPATs6e5JZPzyfZXofBhlqvm9Lid340dSrf9znPkZOhnSaX\nB7yNhW6yqHlrCP/WzcOuUiymnvbIHVjaHLQxnma/zMmn6nAbP8UpCrfJkN5p\nqGqE+Jv0cZ8HokRn8mqsM/0RZNIE+wiQ7gz4vT3upjIXPVZuuiJNeIhP94U1\nEM6on6hL0w8nCsIRW3b37j4COaFuq4oVpW971+q26y9mEs4N9YR3NGZhk8Ym\nEIl0lNE+9/Ol3gdOOHmEABpu4SKwLiDEwmXat1FKmC/qCLkf7FSQ4IFQtwph\nIcoUAAChklyRA0hjsGjuwjYGJA7MLC8fnsyN/92tjb9yUr/vx45Bss+5/+lv\ncVxubBzLVwN+wnAVDJhxskY+5UnP+t8JUEqDIYq1p+lzZRvXxOyuKg7X68+t\n5d6Lvxt+Vgp8hXMdn/wPPBERBXu8Q1eRjpVonpvSmJAoQS4mnKFrLK7A3Gt9\nr/o/\r\n=sAoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/list":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/menu-surface":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.c16fe03ce.0_1630604790622_0.8030128561043393","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/menu","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77667e24dab661c9674f7aba365aa49dbd72896","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.9203a958a.0.tgz","fileCount":37,"integrity":"sha512-yM3nPy78tuaAgnto66jHhKGiJyZOAAGj7CZ6emYR5lbAZhslpkWdIKGjbsGrI6O78n/wiCi7mTR32w0nepn1uQ==","signatures":[{"sig":"MEQCIFnfhY4AJXLvVSD5ipmh9TFRmwcG/SrHSkJT8b+1vLPTAiBLYlCXs6sS+7zAdwL+YwmgDpjhr/oX+ec7jCYLOwyJTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKhCRA9TVsSAnZWagAAwO0P/i7x8PavXyDrieFfVf74\n3wW2ewm7gPAib1cUF1hWcISfZGD4sBTCNWghf93xrvERrDSFaRVZPo9XC4Em\nm2Y7N/dYdoy2wpAxXM62SzRZHTRw1VgxVER1bKgpWXJzO59/VEZAWjcPI/wN\nJrss7N3Phgzk5mvXDh9DT7mqA7XrbxGWe/k8Ew0xR/rkYg5gW4oCNjEyvpce\nX4LsXPjgebLX6l4J53ZVInab/0XLV3l1S59ONkjp6RSc4Y7k5lmRygp4JoAg\nJlYg/02Q/sgHpApVLUV7FwnoHYYdrKHbjUGPpV+HkhXo5zjwyWQtanZFYWe9\nW0YxzVhQ8ZIMay07ahTsthZcdNMB4s/GlgyKMrsJIk1cAQt4Ob2WX+CLDZ+u\nRsKmc5EhTZ7Bc2eR/I5Dim8Q4z5kOkXLwhayPkk+3YEqO8mLdYK9bgTxHYq8\nxxIelcOASml/nhsR2g8aufDGikFmCaGI8VTKj/4oV8tyavx6EpyX5ovTTn8f\ncjNU6kOeKkqSec/Z4x1CmpS4AlM2rxEw5702BgL7Bo08iegko0HsgSJcqCOO\npplwpUsLw2eL/yZo/bOXM7A4bzQFlNKriW7NmXV+Zmz15XKm3ib7DqnVIcBL\nh0m8ibSLhbw6ijJbFpa11Skw3EQxtFw4Lxghf+lFdQsUfHYubzx8/6c5XHqN\nU4r2\r\n=sBu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/list":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/menu-surface":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.9203a958a.0_1630626464833_0.39565474596846895","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/menu","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"762bf29905130b09554daf9133db86597d177124","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.fddd5ae93.0.tgz","fileCount":37,"integrity":"sha512-71ffr3rbr26OqE1AUZ/mIvHGlqmds4klM1olvqoNMhtKe6amASIHsmRK+P2kL2+YYnpj9y3IRcyMVeGeJLmgAQ==","signatures":[{"sig":"MEQCIG+TgztUMGULI+KsXkuOxqoU7Q8NnvsKOLdmoZM57mepAiBuxLB7l5bxoRoBgQqMBwc4Xe+1Hof8+rF87XTd7ts9Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9VCRA9TVsSAnZWagAAxEYP/3AR0kAiDCQ8qIqpM6/I\nmACUs1SI9KNOnMWmvC1/lOpfdg0IUZKmFGnF3rHnBWBcEQFu5NymjsXeV6ht\ngD27nHEc4ExuXL9kcnN7ju9Ve/8yCXL8Xp1JCvjVPPGoJOiRZ/o/wHrieUe2\nuLltJt4c7Riq+3zfCfg10GVuibY6/nopnHAFZbHofecpo2f7+G3bqjSY6W6c\nZkcff3CdABTuVzSrtamkKsZgE8xK+RuxKS0wlC0rWZHqlG/NYSvgKq7gw9YE\nmBBWxzOYcq2x0eDOMtVD2DHyXxc8XIRanHBOgWo1MeHbE8IOH0Vy3sLZTHBn\nh+plMmMhBKRONQqWzeor1P3uQmuATo8QqEohWC+uB2q4hw1hHPLnRY0N/Kyr\n95oYmlSPZ2mNMw1ALYZ8qZtaTPRLWgwqhmH3+QLdyCuou4xKzZG8l0eHdUdW\nlARchxt5nbW5HJ+YsZpWW6xicTAcVLlMbUqIlNWLAsUMlo+d+DYYlRxG0JGB\nskyBtZ0m9lH25f1UMbcALe4nLqt1nJ9ihBRpndbZbj5jmL+IRNkiVvDL/NcU\n3zIHwf4R1/1xgihJEzC5cZSOI8UFqTDOex0DzMkAf+gllD1OzUYR/qowI6HR\nnqyGNnuEse3lZKyOPAA+2VXTs7oXFDN5h36xVjb+suN9wGWuEuj9cSU1TcIo\nU2H1\r\n=V1Ty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/list":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/menu-surface":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.fddd5ae93.0_1630654293474_0.10002160015125039","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/menu","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20300cac9187b2588152af729ed5115a2351567a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.117599a8b.0.tgz","fileCount":37,"integrity":"sha512-Duy4rBqBHvasr2ytquwEWy1BM08R69ab+QFFiBQKNextV2L7cYkqprLP8RyIX6A5guqaI9TJp2XyiKGPlob1CQ==","signatures":[{"sig":"MEYCIQDIz0uDeiVx0hkxNIO0u8cW8lfMfd0cyap9lPARdfBm/AIhAIQYg1WHNaO5xezALZ05ynADG8nG6u87CzVebyjNFnad","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":730970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+vCRA9TVsSAnZWagAA/BEP/jjNfWXJA5LoEMqVJaeT\nJLp4Mr4CRORUfxF8D/eQr+1zr4r+LdJ4ZE/ZibqEa/+qIi7SUYLG4m4WinA0\ncfd+5sRDQ8Nek6D+h1UA+3jlHm3qf+lID+mj8IlCdJON3t9XH5jOUwlVieJz\nh4He39iY6JCKZa/nMjnPrkYPWxm5uccdzMxfeLc/3cmPIO5H/USyjDAJdrkT\nnsUGwq8pWC2H17EQoqFgXCkStEUukmrMs4w8p6+i+NHSuRG8P1dHfu/BPFAc\ngzCe0NRIyAaQw3RgDtipev28fStuje9Ucs6Cpnn5EfL8up/mgjEmyHRPKHMo\n55kZ9LztYDNwicmO4KNt3GNZMfhs9qIaXdY62/kWkcr6KG9ZEQzn3SP64OY/\n5cYEEcrF5K4KP+zZomcxieAxfvQz1F2gRYXrI8UWFSkFSoVmqUpxNH3pgPAD\nuPfsjbFuWMokezlxvZMeOXKZz8DdyaFLu4BFykuH9ztOJajfO56Dhh12yl4f\nuWTnCHq0xxhtVcmD+bThcICQATFm6v4ch7EDxKzlUzJfaFZg5bOloHd/IMg9\n3aUjXPxy8DGvsa7StMt8700JzVkzAVtR44N9bBdEr21w0Xb2qXnO7AXx8fh5\nxlpIhoX3hh2iWfnzTA8/i90514YTx3Sl0Qt4OxBMmJgtcL4nMTcv2I46a6gT\nX6qC\r\n=nwzx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/list":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/menu-surface":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.117599a8b.0_1630654383128_0.44561811027097464","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/menu","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1556af74a1ec7c08bc737e7e02e9a30a5b48d476","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e4180d07b.0.tgz","fileCount":37,"integrity":"sha512-xze65adygVaGRHo8DQZOMjoIAU+KWWF9JNJ8+skesuNnlcQZ5EnvngL3YeKdLNkZf0UMMggofOXveL+ZodBjgw==","signatures":[{"sig":"MEQCIB/UdJKx9gA8Bv2XvaacYlOrE97vfpEK6h/LYgCyHjWPAiAKbqvbEqmIvpW3XSOqiGnX591uthfFSCJuvT3ovu+VoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/JCRA9TVsSAnZWagAANZUP/3Oo1xSksbCLaOT6yPDu\nXK3FtIq4VVUQuEYAmhZeino3TiOsoBc8fklryWBPVz6Hf7+/TBbp8G6pkyoh\nLVpw3l6nRrZIvKdEDNZFM+s3GDjuPENPpg2otTlyIbwUw8Egq1SUga1b6W9f\nihhgsJLd1qIiMDZ8wGz33xHwAZh91criN3W9JJIWdXSXAbZPg+XsDzNwyOI5\n8grDjkWBy6AIg3QetIFAglHOZeN8KiqHtOu66pYc36159VHk3wjQwEFhuDY4\nxC5ctRkaPzB5VPGpoZi5lP1FPj70ZFuQ7+q1eAAh+l7fqCjbYdizcA0KYAMu\nKJXIHN+IddQbPdGnI5uSRi25EKHtoM0dJVaMpWFFBeukL32ucqb1Opxia0a+\n0Z+yCMI0H3han54zkMkQoY3YX8joULPKHnLuMYd5T9PrzJyoRLC4AKIpupqB\nYHefwbS87igBshkwV68ufVmXBMFibwWZ9kS+AKf1Abe4nv5VoV1msGrR0Zh6\nGaLB84k4H6cUCOgDZ4Cn/17kEvCQAjx3KhNJrQOSqGLlCK34lDwSd3oeXsB+\nq5HgvTAoG/4hPuI8x5jrDSNx2vuMCT1XpoV12KH+u08YBrMy9f6+AJR6++pL\nCbq0oKftvOVSeS+u9qKsxmF2NzNALjP5FT9X1ctRIw6EBoB0L17RtOOeZ5ak\nEYGL\r\n=Mq5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/list":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/menu-surface":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e4180d07b.0_1630654409593_0.8565834011153135","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/menu","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3166e4500cf93d84d6b2a9dc4ca232c825bfe2ed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.42d175efc.0.tgz","fileCount":37,"integrity":"sha512-XEnLgmQstjadunqsAXZ+JhCI+8cGwk8KtwDdOSKRkz501osjz6hZDFkbH2M16chYNFgFh2O+8KkJT8Wt2B2JkA==","signatures":[{"sig":"MEUCIBTSwrRo0BcWV4Fj/umQNIPsOO5zPbx1Oq9eUwXS06QeAiEAlMJCAcUC0x4rZcEHUiXx3NwL3GUjx13wfyIRiaEGA98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLUCRA9TVsSAnZWagAAhD8P/jPi4mbUYVcpeLS94kD+\nXAioar2OrQfYnZMQ6FGH2eyTSgYW+1XXtWnCrBY5073FKDq0m5vZLj3bgyZ/\nWQf5cp84C8WZWC1jCyWbR/NOFRpUYhiFMwWgQfxqTvgqrb2x+eZVKdQ2HO2e\nSwuqiAsCuaRRenaE1VEnO3Q3e3oTa8pkBGOj777UPF/KJPZ1OeTUexiScuqX\nZzuJGWGn+TErzq0F4iVOUAoeW1b9ymdGXilgbpusnZU7Tra2hBtc5IHh7V3u\ndOaC4g/41LpOP+Nhzzvj8BzfxfSPuHsIgLzJKi74sB45pkPfE2dRbr45ZrtW\nCe8pppDL/cBwImjBWPB+RWeYQaoFdQFrWLR2rDND9g3Qk9ftwNp1NZ/s18fe\n64cGVOvxhB4mLe+vIpAc43Vit0Ho3j7/+yek8yYN0PmTQDSVhnq6OSGd1aCb\nWxvRj+uRjdEricT+M6/yu/WE1sl7JdWLsUqM758qnCS/TOz4tVRfMau+yaf+\nx6av2cflXFd13vraJQ2Kb4Wyoyj+tRY9Nf+Pp6DUXf34UCknLFx2xMb8BmtK\nTkwojg5b6yLkdXk00YxPz6k6dMKj74d98bvueMFaZb1OVwrjC9qM7J9ipBVk\npSNrBqwVRJMTQImgshxtFxBxx+8NkFWi0nhr0hJR+CHzz927jLp1/v31M2KM\nfvj9\r\n=dNXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/list":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/menu-surface":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.42d175efc.0_1630683860279_0.1203583110629729","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/menu","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b5b32146280ef357dee611cef36219b0a7f77c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.72464476c.0.tgz","fileCount":37,"integrity":"sha512-btwxBFqMavvwZ6cJaj9/68jBg76C6dvEV3OVvH4SfTm+oPsmoGQ2g42+sma9xf+tPu4JjYMQpf6uU2o/MbSB0g==","signatures":[{"sig":"MEUCIQCRT9aBmu8IJheyxIt56hJ9yF8Sc+ZAEnlvFfMjYhMvLgIgZh0wle7Su424CQ7xmRWAX76GNPRLgI+YliQhkpOjjYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bHCRA9TVsSAnZWagAAEo4P/0rXTJthHwkJjckZoNr6\nnAbb6lcWwGnMol+H5blplwv3dhJfD6zGWCyOHLwVn1YWoN6s49+BbsHKdgw0\nzGlGSztCCkW/D9njjFs4mu6bb6s8cK1HzKeday8ihRuRxKg5Xqhm53STXcx3\nQSIsNNv/kMPRBNM7D56vomVIIw2Qki59ay4T4ApKWPSPtLyPeR0M/edQZ4ya\nP0Gc+esBTpNGs28P7TzJykWzHXc9ilwOolvI8rD2X99U2VLZGZTAxzUYU/1N\nhuYSw2CnpRQUWLaSEk+mYAM9Hf5g/rRw/G/EFinFjmTlb5RwFGWlxYAGWuBP\nHaH8wsDcebnjbgXjjHp4LDNnx7o4WGIgnf1HWAgb6UJfYDPRnu5Z/W+ljvRG\nihAWE2LjUE657cmUHYHWRgsCQAXOPuOoZ3MmAAx2m+D7nbRWG0Uv7oG9dqFm\n3LPKidhKvFyTVDKN0fqhVkLTfbb8Ut+MNHnuLKrUIvm1cCwDEZD6D9q9TxpH\n0kl2sCP02X4P3i7v1o/no1jfM9a61fdNiEdCzpEJ3UmN8x10SmvKAwSulN2P\nJYJgYmIoYC6YK4HdADHFSYKiNtzRIEy2PYbwVXxh10C/4Ux+za8dTwFqQROH\nGKnniZP1zCHVtvnDZKW2sln2fqq/Y39JLv49cXH39tCzd478eoDpAMsy5JxR\no+30\r\n=OWjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/list":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/menu-surface":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.72464476c.0_1631028935607_0.8371200724065542","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/menu","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7616bdc965632ee7aba5a0feedd74a615858ea8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.37d4db866.0.tgz","fileCount":37,"integrity":"sha512-zZp6ASqx0EVM2pD737UXy/RzPWqTkBXZVlgMZrYPpc3C8hdhIpaxNAr93jOcBax3cYd98Tm3Y5vIfnw5/P+kcQ==","signatures":[{"sig":"MEYCIQCd6M5AboL3sPbk5zpVnecX5AymAgxp36tstoRVO0ruJAIhAK8L7kdWOv+ejmdOOdhtlwiGzPfoiAK2xRc1wURsOxjU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuOCRA9TVsSAnZWagAAL/cQAIe/rl/dIXN//WZ0K5J8\nBGjypMoJrPQ4jWSgQLLzouo/n9ToiHmqORNsN4G+97WdFEUHcl6xijNAYxj0\nZg9JT/koStKLSTtyIPQeB2rG0DWE2a2Bx09hDcx5xxcQ/v2fA4yH51gnT34T\nexbIlODf/HEJLZVFvaxphYS44z4SLCo+brhg5V/Klkt200OFWg9w44wui+F7\nsqSYNyDaKGTq+z1MUxATbBXcJzDJ3rGmTkl5JREyGluAmoTx699w4wejGdlA\nTdb/6dIhTyaeljLQRJ/47oYfN38n7/1pppiEDXNXKf6xod5tBnyX4XmLcyuN\nDubXXJsecQUzKy+CyVFLTCCs97b8E/H33ZjOlKvuhjF6OzNYk2yzzueAcldK\npgST9nBtUbJYGeQpDdX07ykgcBIilhjaz8QuuKynCKu6i1TTNkY7hw6FRE5G\nW02W2evqlmbvKszsCpcJTTJ9hDUxh3zVCAYaQ/GPsVWPL7K4qKatHKeVGkRf\ne5VM8BlYE+I2s72DfiHPCwshlyoh55btxZKY6bdg/SlwYnUivOfN5S9So4ZB\n0pSCc3ltS3d/uXyjWrKQ1/nbPf+zErb03GzDYgOfrONwtXt/PM5Vj7R8PGzB\nYKVcUZUZFFW6ZYKu91+Frku8WXIzajQRqfl7xrBA+9T1gDQpkUcPKH44epEH\ncQ/M\r\n=RVQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/list":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/menu-surface":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.37d4db866.0_1631198094249_0.12099568794286952","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/menu","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6edb3beb66f3ed3291938618872072aa1292ecad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.6df682e74.0.tgz","fileCount":37,"integrity":"sha512-FjhLMzixEjjwbgvVfETecXODCPWQUMZ7XOdfS29MTtUDYaxnncAShc5oHLi6kBIrWlIoMVpsR6Cq9Z+vVFQ7Vw==","signatures":[{"sig":"MEQCIGCNsiCh6f4I4rqV0aA/IgX14xyOxyBynAxzu8jTETBpAiBLVC7icxkchIeaFGs0XKQNNSxRh+u0GP5dOWApSamvaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivkCRA9TVsSAnZWagAADaQP/0dM6YuNkXL4QHz9KISL\n98LorT4hIMgZzoGjO4CQIsTtN9oIz1buRX8GLrrxU/gofMi3OHsyV/IEqPvs\nLXFANGrd/gwGKiyV6qjzo9sZmSJ7MV7H+qXE++GpxsElRo9PRlGcwF6mpC40\nNfvUj2+s6sFLgKtC84X6fTi8Kbohmgo3yN2BSPTJlsfns+Kd59h2ETFQlfvi\nm/1AL0b3VsOJs7geCPoqT2zupdRRQ9ggebKb6RR/ERdaXRatQnjlj42sZTP+\n9sXEfTrw+tJ/KD+/rj1jNWJtw+FKf3l/9p7btmzMcHDvBokjgIMhNyxrMomp\n+4PsluRrg7mD9MX8tzLZ2gZAWAtair/L2H54nOp2dYRuwfyT77j4V8Dlf4jy\n9/iLCm27y2tqrF1DvZJf6bAFpdaWnuOelftQHJUitwjLoqu/+a4slGdJ+l8Q\nOimc2E0hLX4yrvUy3KgSpI2W2v31IDS4S406mwAN3N1a29gnIWzFJgMiyt6T\nOyhLHy531PEADgjIpwFX74GZSWkX3y5m7G1A4d9UhvKSSfpCffdEvxXJqCH4\n0EIB53ESMmbWLynUEJYeTZIeiTUVRMJ0fHr3KL9YeuUBrNnOP5VQnrpS3dPu\nS2zmIsAuOXkTg3sfGCZkW233S0e3VwXXKcQTaFpBoYFgNQn4vl4kfPjrxgb1\n0Xqi\r\n=5g3C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/list":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/menu-surface":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.6df682e74.0_1631202276762_0.27448685389756045","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/menu","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9db77b60b5286d588bfdb44e62821463e20653f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.b49359c35.0.tgz","fileCount":37,"integrity":"sha512-2pwovqIm5w/GE9hFpMittsd/Km8zR0/rXqqAoqrTSuZeMMXRJlOLumw/+Y2j5qk+e+g6LbAvOs5qj8Cx8J+Fng==","signatures":[{"sig":"MEYCIQDxF+ewO0yN0DKTs5X8oZhfuQWHN+uaP98jq646Y9VEHQIhAMUTmoKbyx7zfTJJLs/xphoxSvi79c906dCmgMoJ23Od","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkY7CRA9TVsSAnZWagAA6SMP/2/wvmPrPwVvj0+VVs4I\nZj36smnH2VYDceEnnYreflokcFq2GmHjzU8cmMmfGfQ4j1y9D9C3B5ELT+47\njzfSod3CiIjnz2vMQSh3z8AnRwX5W5BrcnhPbY9b/4hxgMjY4/t9sP3lcNCx\nbOVXGydgeNQsHMgETHBpxELIKkrf1kguCmIezylOfZh1Fr6nVpYzntLkS5QN\nLDnDgbTaV3CFxT1D3u9TH1VFa6IP8PTCe+fuEZxPbzLdjXp/j02Y72Tq0jHa\n3DyDKQjd2w+t4EbUV7KsL53oHJZ/+tVs7KQlKJrwbySlAObrUN+fYr9HYOa+\nTSiFBW4rR9/tlUxcrA6ANU8jbwyOnc6sIHB8Jt2VP7MZCL3LX85zivwmhB98\n+QSp89RyxUMYn+o0CWCL8YfO7vNGcX/7eDISe6/TvhIz2Hb/cprR05zySGFP\nnWwh9LgACPhRWAGUQXYW2LwWOFhDLh1quXOremFTYN2eVK3eorxECDyvxX0T\nx9ebMAbhScwMWDbl3P/S7L6/Z8F+FnRLJtWrfrQoLz4jU08ncUQdOeMCiNXD\n4kzEQBK2NV0SXDgomu2QsU36inSrokBlj3dNXpNHOnHtimrNBkbgLVTGojAr\nDVyZxbw3NSdC/qn8paUz3LCmViO82BX9KMmnSY4hYr61TiW3SscaOABmNKKJ\nQB3r\r\n=H/OX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/list":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/menu-surface":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.b49359c35.0_1631209019496_0.1058236533014798","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/menu","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b16739304963b64df433b7e52ff5c9a62dcecdd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.470bd34e8.0.tgz","fileCount":37,"integrity":"sha512-6yPD77FZDdIC2D05J8+oiy08EIgOfWtZy6sXOoy3gh2+P4U+HA0Ii16NxOO35f4/t/axFR7tTvV8s8/hW8OWLA==","signatures":[{"sig":"MEUCIEvIMMPGlz0efvIMZgb1HRtiCfcBCsCjAIjGUPtyGbpdAiEApYDbLkx1KgtzHFVww6Je5LDSDie9aYf8hhMxbliBZLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkw6CRA9TVsSAnZWagAAOUsQAJBfsYvYONouKp3f2+9H\nWE/prdoGx3LylvKwPcgtrouhcSmIli5jd4/deDIpcT65PXC8F+Pn/v3KFQZr\nUlKPcz3lsxCMSOZL3STaq7TbpEi3v++cdDIxjlGbINu4Z7ppQRkb+KOOM0aG\ngoKjbnGrwiXp3HfMMKwvZjRpscvl2Qyu5w6YEkmfKNq7cQLigmuA5Qa2nvme\nMDiR3YLh0IKBVhy61pv2lbbyNVUtMau34hFsd7V72lSzuJ3wIcRQD0ziLgas\nFpjpR1gjzOAbR7F03/mh8SFNsw1KOcMgsjBD93dF0mxVWLP7VhVDuhtGWkCS\nr4gCunT+/zPHda3ZUkqN+zyVgZ/02rBg4U8cBQy3CM0elv0+hFM778pLDuMi\nPQo6WJ2vVeu15uQVf5+FcCugENp91tCk88Vcqmv/EvFQfqI7PSqaCT8s32lB\nKZ2d9d38eDBHyeLAm9jRnlzvcUR3IH2DcwMi8nwuvmfbD4gTp6VRept4icrZ\nBHPU0J7fHPHEI9Wd29r41mHv527/vYA/OskRD7PdvpvVBYJyi2vvi/9wUsJz\nCzZZihoXQTbxfKL2T9i2L+Xpx6Lec2Kxxjpm6F9Gntti9154eVBmhdbSEWYO\nvYadOLD+nnR/7vTCaR6G3pMHsft0vWslOoCb/IrhF6bQsacEUgKozc/E9jOT\nHJbm\r\n=S46n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/list":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/menu-surface":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.470bd34e8.0_1631210554617_0.058552576451357696","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/menu","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cff137c9b24c1638ce50fe55a4f766844cac371","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d48a01771.0.tgz","fileCount":37,"integrity":"sha512-wHM3PVYsJz7Dpb02S2pR8I94FPv3BAMukl33FrrsAeQggV44nZmdX6gwvczuT/gzuNXz8dv8yVWh2Sx7D5J2mQ==","signatures":[{"sig":"MEUCIHnK6MPSPJH3v/6beCMAL0toxL74bDKYEzQgwX5abJtgAiEA5qNsL28Gr6tfWmJcqHnXDX7k64nObFnyNY2zTuWVR4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5iCRA9TVsSAnZWagAAaXQP/21IvLikcGznr20N5hED\nt+W+1NNQE4X6KbjamRaWMmjag8ldUgbWGq0wfW+Y1msP+apGdKTc51gbGdci\n7UPaUZYDVuSgEZ0gEjFIszEswV6L30HTG7nciS8rIzLfpkT8oEGl/m+ZtVP1\nqyoIXRcz6f0L5VzKv5BNQRDWRFqIn4jt6TKL64E5YMFACRSVXUGJRePyHMXI\nrQMegDzzaScUDQKnrkkIIhi+j3Vz2ObSxrJqal7O+i0KIfRW/2MhbhhUeDW/\n0mss3kAwNZa+SWaQoEzqpdLvmnz7ivDluYrJ4RyYrg1+8Gx8coq8DJNEvHpV\n1vyxLskJYh7vh3d8S6nZjdBgBNo84zmtkpaUToZVx5zqbXYVq7upRKqUkw3h\nNpWDFB5mJdCpgZUk2ZPT79RDaKXN2ken8CXrIrtIDN2Y2QafIavY/QDV5b7j\nKfn5w4ScYT/hty7cJlP5n8B4HQzZFeUE/msvv+E+KoZrCapl3JMNhcI6JZWn\neJ1hlKxcvkmgf/Rkx2tosYa7yiPG7q15FyPirK+PMNLfOZc1r4XnDcN9FDCz\nAN2ogv0owkImrXqedso8ReUKV7+Fj6JCc+5RZYNPNl4VoIliT+moj8HetAiR\nn8qMHlC+LDe06AxwPuL4LPhgDZsWZr8tzvRiuDSeMbaMJG5iesYUwXfvALH5\nwtxY\r\n=3uAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/list":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/menu-surface":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d48a01771.0_1631211105789_0.008362453640352152","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/menu","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff480c649fa40cf032300b96ff8c1b90f70ffe54","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.13db34b34.0.tgz","fileCount":37,"integrity":"sha512-xo+gzfOr+GatkhEF55jEjEijCjsSdr4kR84/lVV2bHadpgXMrXAi8CuGXOGaYhNzCqvnPFGOPAZuNARznHxhKA==","signatures":[{"sig":"MEQCIBWtq339zQyyDtN3EUneqrxh/TmPWNTzTTl2WbaVnPp9AiBR1BlT0yrjkjE7/Sf/M4lk6ejJbLAXPzt8QmAeBpveKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHpCRA9TVsSAnZWagAA3nsP/1tn5BKcjoVAoiMggeeB\nX10i5Y7tgGcWwLWcKihg3wYzJZxf+ZJpAgi+BKHpvmTrxsqZM+AMr8B7ovam\nToaL/3wJgl7gafW6BxOTxYPUKNjF6AR1FgTkdsU0zr8n9/C0xiI5nVb1ifaM\ndSIH/sEj8/E+qRNVLymgaUh2E8o34L4T6Hr6DkdRfPgkJTPUBDHDdhWiq7sl\nl1zFEvbwjJmKrDBYjVuocFm8/4nlZ3yfAFuftTrdKO6Et2x/cOnmuAJrKWgp\nqC1KrwQzanWMJwEzn+SfT6LXQcjMnsDXnArRSOd0/kZZPKw9+L/ccq2iz5ys\no6a9+nXtxc1tqJWyPivtgI51/Cz+klPnADZw/D65C1lBqWPSL8gVqvk3Ojmr\nj1I5nbv1kE55yBU04629r0Rf7JvR5YiLBCyCEYwDygcVVs2exPOP83BnBLwn\nfivyu1y5cUb5pHuXW5txCahlPAdkxJEqYrdSl2+6WGLOIoPIywc6quyVZSxx\n0SfLLDKausbRMZkZ58sGNJk4iLHDsKeF2fDh0bvpKlHcpv3qAPrwPyhp1hXT\nadiOOh2f+17f3A1OOMXqmFFUyy2VCSYdztL5D6Ditpy6fBVYYJF/JVh/yqf4\nBjDgS2WKpG3VS32FTOpg/KAphPI6Y6UylORmGY+KLqbXRJ7hSvLgPNs89akJ\nHEgj\r\n=S3hy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/list":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/menu-surface":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.13db34b34.0_1631212009239_0.03461321674894502","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/menu","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f62dd5f24944323cb3e215b26d4d93e2b7280b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.864798678.0.tgz","fileCount":37,"integrity":"sha512-dh2dOTY1jKpOAkAZm2RR0wWEH8DjXdxQ1qA/EUKQRsm8wiF70uIbdTMUemoMFIp3SehFNap/FrcQvL6HV2l+Kg==","signatures":[{"sig":"MEUCIQDmk6HCXgk33Q17xfPnO+j5c1kwTcpztwx0Hc96ZsXbtAIgLf+s/R2KhiwdGrbQWxMgxsW9rpA1HT+SymNvjcsz7QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSVCRA9TVsSAnZWagAAzsAQAJClpoxWaBOD232G1LcD\n+N1Hrq1hOydYsN5rEyENDfLnX206kPAT5etrbMn/kZDTxQFlWNMzwOEpdd8G\nlEb1wM83UR8k36dU+G0LZlhHcp8B4e/Emnqn6XYIItpBG1stcW8xeuzsd4Bl\nJecw7glmDXLV8QvigcdeMRpRvjGoltzqgBF9I69il/t7whhhplkw5LamO6cT\n4kAA1WtbVZ+yjvKpGfIDLTtL4p4dw+2C1PAgFpTMNCtbL2EO8T8E+XjXbhB3\nbHI5G2C49OiuWw3y/LU1cYKhMg2UC2UZrPZekFwFGmxBHD4JVdDsOVBMfTEX\nF9+KzoEoxbV6NTGdP5YnRa2LWvVEwwMKQaAWGgaZ6fhDulcv0p1IA+gVRD2F\npMEsgFMpeEg09Kqh/E5BftcEkfjMSHRnl2852zwSxJ//9Hx1C5its/YH+SfU\nNoCXcOYwWr5pobACBS27JNgwyqmjVTVtBYScpfoms6azr5nEuWekg+HmCqtK\nshlrqJRGydcS5u8CD4FNInKPtbtN5bxqeb0o5/O5gU2E055NJsVuuUNX3l1f\nhlCPA5wMRK7saKTwqQM+AS2vTqT74cYR6cAnKeBYq7uFwpTMnbFKA3dYhGci\nP81eSTKYN+ju0lBrDEtLDgCT0rU5wHwc7xV6VrKiK88CmjDcm4OC2K424wFv\nwWx5\r\n=aUd6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/list":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/menu-surface":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.864798678.0_1631212692901_0.9260077732413727","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/menu","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09aee1d0c54956c88ec3328a8d9dc54ae79bc9c0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d04bda3fb.0.tgz","fileCount":37,"integrity":"sha512-4xDjdt++NOvxYt1QYsCDSwD8ovKhw2LMXnsZXe3VLnaVtV27ShHwB0Eb7Su0gmjRA0TwxIYNZLhje7HteJv6AA==","signatures":[{"sig":"MEQCHzZxPRJqqbzDBFrawu8DlR5ql4pZKdxMzW6PWxeqxfwCIQCvhulFBiGHkyu+3bHmkOj3lcwO67EqQitXRMorMm6HGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hhCRA9TVsSAnZWagAAks4P/2sG5NfKfQyAaD8tOlTU\nGE7qrdoMRH+kBt3010F1tKcQ4RujIasDR5tJGAm3ddNXGWKM7b/VG2jLdToD\nN6NmU8wUNrJVFMRYgE9r04R/xQ75zcnL6dTAkFaFuSVK8TFrTpkQJGHMZtNE\ns8a/JIALSRL5mRuttbOh6akEEqr6y44EbK305oXTXpQ9RwRnOl1QL4LYfNES\nEZqN8kcxnbWsT45ISDum9Dgq+1fxogK8XI/PUspIewyz9ykyiYIscHC97KNu\nUt7i2Ch4wweEkG6fZk4s9+u3QiCq+KNMugR/c5UG5cfjqH+D+6+T1S4WiKCG\n0rgWPIMlqmfE0E266cEdAtvyllBRnllnKriZiitrl5TNCT/7wCXYKB8f9mhY\nCSRAzJoVwzbqMHdpkLFq5nXWeTGyfTWcdQcpnRnkzL8RRxETOGcK+wZjK6Qd\n4NGuoaF6lID8Jfk9A1udjF1ZEbJeyeDOqywZvKOhe2WU9FeFamFk71oRmr5V\nglEh0iobaVVe5WFA4dn23C0BouedNgUT63reSDQlGxLk5SwfEyKhonCjDKvf\nDOwDxMndYbDDKba5lDfGwGws5+hBjXi16zdQnVYQkTfXcf3j8woW3pgRsIx3\nkaDYr6zCvCD3op2dWPdJci3U/tCWXSnIdJRFSfMmSmdghXqVY8CZ9h3OT47x\nlYsP\r\n=9TmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/list":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/menu-surface":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d04bda3fb.0_1631287393452_0.2894552061456015","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/menu","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f7d4f0feeeb2763d85c9bcd418a054397e199b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.5533f73d3.0.tgz","fileCount":37,"integrity":"sha512-VxYxQYC0m/0e56DP129gqizIn3/kHR9uXNhFB/oHCcjGYX6qwfAmu58hG9UKqFfCMQ4BXAJIZ1jMtJnZ6diWXQ==","signatures":[{"sig":"MEUCIQC66mGSfSxlOvpx8xylI06XdSRkp4R36YoyhUnxZUbUywIgP4Z+yV/XXjj1RgfND1DFAeQqBuYmda8cVfzgoN/vHYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kcCRA9TVsSAnZWagAAOJAP/1Xytj1wBoOL2tgKjqsE\n55O3FVLeH4qNnRw5tAve4A+89PI8+Guw2naN3BZLJkyShrhryy8Ht5zNzkgT\n22iFpnt8xWyLrxLFFEXnov09tkarlxvUT1E14/rCmILIbJ5nKGUiRW0CauGH\nFv48rXvvBjlFa7Oj25W0/wFOIf5ilTjtv+bREsWPEK7Bhj8JeaZasCYrspI+\n8v4FvEcbjAj6VqGb3+c6UgLqkE3nVqwY1NQYYeG10rh0QY77bQZfs6MjAKIX\niv3RA5EXbJQuPlo0cmHaLvAJzAXPlLYnyh0S5hPGGgNSk0eH9sxvEY5G25tQ\nRgTP058BwV75r6TOpjhKojl9SKfF+Tzu7AcDkOO0SZv5bjnOScA4YhJpf2rA\nH8aDEWf+YhhgstKV553wTmzNrFm7Q5+zn/rpOx+UjXbjraR07AlgmQ7PAO51\nDFblzYBvudcG28fDzUqUfELxNrj1JHsjU0u1Heq0hAOak4TKcsfWD2rywQo5\nNynLixTINqUkkvLd488G2xB27LEcJ4NWD2yu93y9l3lfIlZC4it+uBhHNZdE\nJKrJL4LCO8einlDUVKtkMN317Bm7qYeCLRE2A91JTzug5OY7KQHAAWEaxV0a\n0AkeFbGZGbDXMqaRlVcNvHoy9YIqwto/++kNA+hDbEcYTM8w6WrnIacqcm2N\nx6bO\r\n=jZR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/list":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/menu-surface":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.5533f73d3.0_1631574300424_0.3085545055961292","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/menu","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24b9b3b9b9d1befb34680374165a0ce8c293040","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.08398f880.0.tgz","fileCount":37,"integrity":"sha512-vxDNNWDJuNk/M4bheIOWJuB9Z17qYX5uOniBBoTbb8rL+x1fkBxMklEg3lng4fPGpaPJFfAdiSm9KIMck00bWg==","signatures":[{"sig":"MEQCIBDT2dej/6vcPZE4NoUDFrOW5j35xYOOIwFPIHhP67p2AiAzzTHoiuJ3qZWaYF8db0bctThudyCPaU3NS8ODcavPDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BMCRA9TVsSAnZWagAAoW4P/25T1tKEb+0Mbpvvs5/Y\nD5cALhm2sJHNVjllIXvituhUXCs+Xk2kVtqBlKIG4CXrWmQwJaXk80CKANe+\nKZCR7rix7ObgluceJLehJF55JQyfdr3c16phh9IxDUGYTWtdnpiiU1PgLoe1\n3rTzSfH7ryT18iV2zuhPHM3yAAu2ECpcVYS/Wt5chzhS1mkDokDkzymlkdKY\nk/VlnI4l2sEkgl76sziBbIKaLpjX8ArUtpeFKsaWTOMOzj94OuW5TrtuybnF\na1BGDP3j/mfIKOgxcXLHh76zbr7LB/5s3BQhYiHVi3fx8XDdwx8ZQRIWCxyd\n8But119o76928ljZIIbEOp2dkRbVU+hui2tth9LEUjHprUGN/laDgcjOX7P+\nbXXd9WiS9OQcXHSmZK/UPxcVVwCU9SM4X8QHpf/R3ldRKouVGSVdeJG1Fczg\nuKnsmSGtrQeRGOIVwZBx4kDTVbdC3/WbSTxGJl3OvuKOK/7XGdOLKRN9o7rw\njP4ClgMnLcSzIQgtqvznrTp+950K4Xsh/0J9Bj4LrOxpEz+0laf6Z8mtPZy6\nmbAdqatH+HI7qLB3jtwoAD+yRS64kO9Q3c4uh337jaa20byurHCsT504HI+Z\nWBCMiMToVYd7GP7GtEGpeHdWbOJ2tXUJPulJFaWa8YG19nnHUXLSQj4BUju1\nBzqE\r\n=3jL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/list":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/menu-surface":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.08398f880.0_1631576140386_0.4544567956722727","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/menu","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d5f71f40c469b4e21523d25af84949da56a5f7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.818f4ee93.0.tgz","fileCount":37,"integrity":"sha512-RBOTvyQYUCbsyZqxKeFKCY4MpHk91de7RIjiiXbAn0Lm9pNxVu6eRMPdtZNu78k00+bojF/zwYQENs3CfDZK7A==","signatures":[{"sig":"MEQCIFLxQcHpd7js4jlSItf7blVuC1KurCei8WAx660b4e6vAiAfeW2LpkZIByxOBtAbU6b5KiVamXH1QXLiIRgyzpK9Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKuCRA9TVsSAnZWagAAxPYP/0PX9QNfYmlbO2s8i2nv\nGtSNQlE3TUYhy0cVXlBBe4zk8yC9bOFpDjF0TlUXQ0oBSYVJS/Aml+qyAVGA\nSQXVyWiUUN6CUct3lzCPb8Jps1PwZRHYl/R9Q36G9R4CyiJNGkZElyKizmTn\nEknRkMZal6IbiOYvScvu5VgraZY+PZQrymPyVEjsm+zikxDwmA7NXmhPWNuH\nGaowY+o3qtotAvlhpf6RBLEmFiAGq4FaDNoJTlSGIro5vukLB/vsBih9jyv4\nZ8268PnClPXTcM4SOdAs6uT6QIhhMRQDY4kHMTRQ5peoslss08dTuKx6MPsn\nTcGjFcs4qk5LWEmxafBnTbnPNSrAZlTflXZO4QxOfuX7LCGk7FvCkkJmhgAl\nQ1t5f44vwZdRyxTvJGDnah8ovZmHSNoEadSqiS+Y1LHm5kbrB5Jll5+FqJcY\no1JAYaIWsiEbDIDX/6WcxrX2n0HYByHDoqX7q9RdqskZug1L1CJQgiHKrNHa\nV0eejiMSl8DAGPevqaEhAxbBWh/ksFrGUa81vqXzoRyjhjA4/1dQUZaVeBZQ\nT58/98o5Pu00TK2bMySRzaAkVRdQBCkOFNtcQ+W6/pZ7daUqhX8Y9zi9h4m7\n/Uu6Gv3dSYz9bV6A8eNf4j6WJbMo47DP/7Gux8AzLRzPyBX1io55D7HMHodC\n7oBw\r\n=Ee1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/list":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/menu-surface":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.818f4ee93.0_1631728302115_0.7314158194313765","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/menu","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"306a5e1a12c22bdb9402079ad5a2dca2ba3a43af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.8355e14dc.0.tgz","fileCount":37,"integrity":"sha512-g2CcGgwumVZZZ4vVdtqc+sqi/b1H9olYWD8JZM6TSBRZQddNOg1w1j8EOtRrl1PN6giqIp4ipE64nnzC8intJg==","signatures":[{"sig":"MEQCIEVrxlEuBbN5VMTVYShkzHCuFtnzc2X5adNtqhQmVBdRAiA26ut9gx2myMTerKtvR9Yd22hPfz2sHzdRqjBSXgY2gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXmCRA9TVsSAnZWagAAGswQAJu3oEbY9zu/hK7igwhz\n/vpcrUf77bE1+5XUkb67lcBy0wa9NG6coZd1bjTwjhwJ4e5hjOvITPNr3mIv\n4kqbJRoKAkZeHli+13F0ASNA5fr9V72RXFr+AyMmVz9XncwtfHoITBXU+uXr\n8N9jboFEq3BB2iPyUNi5NGYZkv9tGcwuRwu/MyOem4XvNmbQDnTRo0ghneEI\nOOcmEyn2wMKG1PLWsrz/XITX6BkrvwNQEIVwflToPc/4EmMYMogpXlych0co\n9YGQEjH7Axq2NOrtFZmejBw4ImgGUyHxV6L8dKSCcRUFfK4O/6q3HubDB19S\nY0QN5rAQeTpsHsjfgQqT5EiKw3mg0h7JfXopdskniqgDQ97Q3ebVKtkr9Tyy\nZqI31Ar+M/V1GZzyj08tn2CiBOj80DSU7ateXmm5SIrGJvqX/FGRVCkqMDL5\nGBrx7kJyiOk8cSsdD6ofGjlgc7ZiUh/FQSKfF8dgcSeSFHA9wD88mldIAfTe\nDdXskLzr8uY7nxLHeOYFXxPHmQLRd74X7luw58T2pbGzioxdYUh3t4sh/vrm\n739K7qF6NqE3LUvAN3mzT+2p4r0zLx9LLZb3X8sZYo6dlh2DEJik3mg0OJWV\nuZ8X1MCnD41lmE7msFE8w9hz9altK5iLUeWmOhRyPNnlt8vNhilb9f9d/5do\nGVS6\r\n=FnRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/list":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/menu-surface":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.8355e14dc.0_1631733222190_0.31108292361311607","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/menu","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"286834609dfff9c0f832b6613303523c10ff3b88","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":37,"integrity":"sha512-CsU+ud+tWcOLpTBrc2vUEsltNU0NYuugUpN44FoLc8qgmpvpqZi9ZHR51kthF3GLYhThfa+3zcTKu7HvcUZ4uA==","signatures":[{"sig":"MEUCIQDSaz5MdZH96xLxhXrETU/xDWu1a4p4Lbo7Zdf5FM2JUAIgI673a1KhGgK8gXEjCRrElWyouQ7EWAmTisfxYBXrY2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmz7CRA9TVsSAnZWagAAveoP/0qqZkuwUnIUyY5WplJ5\nCAzAaTd+VeJXls7Je7OuWpwKatql4lR+nZx0AGIlyJ1xPQWFVfBZejg28dHZ\nqPsyKps5e+e+bDEMQhv4BCHbf62xyO4/COl8IcRX2Wv5ScL9VQMq7WHuUM9E\nmHH8bTq2RvZnAj0hiSE4/1eZuogRjsPSUNeG4DK4iAUiYkk5XQKF7S9lAqqc\n6Zz1o7FRQB34LHpk6w9v72NrfA5Wt5TGvX4ixonI/Gyfh2oo0j7nUoxSrEk5\nQdNgBC1yRvvASQmFBv4kvDRbYLII0sEsgUkxSTQ4KgvjzAEzVLyltT4fYTE4\nVBQ6iRh5WQRzNAlwC3t01Fgyu7DMBPzXLet/n0QPlWk2PjhSadeHPTJeZv5R\nLr7wKyABKfdmf0reCnCARBcALX3oPGK5XyQNzZhxtomO/jyQTu5vmLmoJxJj\nWHnbr7bOKI2EvMcfyxmBLVtqQdvEhTnjf0viiYWbnEpSwxmlP28OosNyb3lU\n90xtIplrXqchw3/QtDh4q4bpUCydL6DCufDXs4yKg7HRvvTvHMlhjWwkqm5G\nffqFsxsMEpNU/X6X6D6wtNFXMo4DcKXMKyZcU1s+3XhdGU8hJntjl5sc+/eq\nVvE2q6WkYimAu1PLpO37QdrRj4rO9Ege49Zbuo2SMPBJuorQ8GKjMTxpcOkC\nzna+\r\n=HybG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/list":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/menu-surface":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.d4e16a6c4.0_1631743227288_0.2515624205176319","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/menu","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42afb5cd85ff84e412a0551a01ba5dbbb12900e0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.65125b3a6.0.tgz","fileCount":37,"integrity":"sha512-UW0f5Rl5r/V836bh23UO3k4nlePKlZkeAEvFr433lN0xcJqfpM/vJ46Yo5dxNS01YX2rgdaTg6FD1ayrt6jPJA==","signatures":[{"sig":"MEQCIB15aAMfQ4l+DWg9xIS2j0S3xYhx92rM304tL0xN2M/RAiAWzmcOm+FSh2y4Gxy7dM0Hso6KvnAacnktl/JnhSUzCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SwCRA9TVsSAnZWagAADycP/0z4WBckchXA/wgus+T2\n15rZ5ovQHnavDTTk49O6OXduQxID4BDfMW6oxl9i3npVJfKT+01H+VAWSRQU\nQqaEOgbFv2/WTKNmI0m1TOegHCMmlyyLkafclSGvO9l2KvqGvRhoOjfxK+fY\nRptQW97K5tKZIgzyA3jptlYkNByBnhoYQJkBMke6IaRh3nMurlkcDc9JBSXV\nvuz4MsZGiEPAaKudWz5wyO2OUbj/XYRxff7fgvSKypV+0bAFQ1qVbbdP3KwE\nyRm2RwqwbGl0GdM+m0aIcHueWzvDoFqIldtBcN3M0cDH6zMgTVkBIJXZnowI\nU3iHM6dZxF4Gia3I0RHBsescohoXxOPzpGBXRZQ9BOxd0E93AXk3pLHSqaMy\nywL/6QZbkKcBzJ294crgiXhK76TQR+y1/NzezJ295QGFotJoEBbAcOBvUvtp\nuglPILDU0IBy45kDU1/i0apexDpNPaIVaQkLViQ7UfPMrJTSTwCCzv3Iblu0\naxG4WKTUeVESASswXmOViMMF/GWmXU9+kikb4WRew31JAto48qb8WtI2NtQf\n+KQpRLUDnaEEOMtW3aHaApVONC6PEa07sugzIXg+VEEnwmHE0h8MJAwkCtx2\nMahBWuQ5mWq8j6bEIaQvC5gbr5TKIxWYVTjMA2QaSU98mN7HIbX5I+Cwaf76\nK5y9\r\n=IBnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/list":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/menu-surface":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.65125b3a6.0_1631827120616_0.7194144405295262","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/menu","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd0528c072f8602ae2a285e38a018a9fc80af96","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.80a583365.0.tgz","fileCount":37,"integrity":"sha512-NwygFUHeE7pdSC82PbKUC+kkZbhfhdO0tPYuVGCkFplc7yi517hEIKEKiC0yKmiSrTf7K+/rJhZB21Ro0QYjnA==","signatures":[{"sig":"MEUCIFf6ywgaj08cVx4VlHaKxwCJtdFp+70zZiUGjleFL3VmAiEAu9vzMz64JdywnJglHTS296OnlWpnp0iRt4ott0GthyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/list":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/menu-surface":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.80a583365.0_1631911005752_0.6499957017740956","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/menu","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5adce699713e0606c8f79c80ef32b13459a33d2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.83900936a.0.tgz","fileCount":37,"integrity":"sha512-b816xFRMf4NkYxtD7Jy9kba1W3UUDQd5gtNPNZsS47vnliakPB88ksCeHk4RCvCQbt0cqeARnrSRWmv/97zVlg==","signatures":[{"sig":"MEYCIQDW1vpO79ENG8vwiVLl0rc4S8ahIiIrwdXpMSky+8xTZwIhAI9vjWOHJzDqQEwCE92+79OU9+F8lrhvgVMrpM2nWePr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/list":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/menu-surface":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.83900936a.0_1631921112985_0.4299016476019901","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/menu","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b588814da1a29f730913da54f80756d05385429","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.860ad06a1.0.tgz","fileCount":37,"integrity":"sha512-8XPosmZewNpCGyX5f1z61wN7SI5yzJIvVdilz6MwgX59tVFUs3ha3ntoCznk1CgaLViwpAnndh7ai40RCaLk8A==","signatures":[{"sig":"MEYCIQDCbotkxXuEDSAfyiHg6cy5RaVjMx6RzznL1DmfzLFPyAIhANdXWoeOVRbBECFZuLT+6BoSjD3Ze49Cy/+zyjNXTJks","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/list":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/menu-surface":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.860ad06a1.0_1631921807410_0.9455434812254195","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/menu","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9afcca5b8069c88cd2a53552d88f3c5176797cf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.3b8d4429e.0.tgz","fileCount":37,"integrity":"sha512-fQEegzPCGAppulFAF+3BbcijLH5AI1tNZzcLqmhz9jlOdeWk2CXLk0i4ZhN9W3/Gj55MpI7GEJygRqFEiMofig==","signatures":[{"sig":"MEUCIQD3H7ohsWYCUuogtWUh1dpssWjfWqrLsAmbXyXouNOhtQIgfosNCIUTAV9C/cHph3bG6/zZudtdak3yUBs1S7zdBso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/list":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/menu-surface":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.3b8d4429e.0_1632160108352_0.800301157829268","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/menu","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef2f8f9e2b506477b65be9946016bc51d824d9dc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.2da3606b9.0.tgz","fileCount":37,"integrity":"sha512-GrGj/Yn0zN+RzqAoRhktCQNYzal5PNn35aVqJJiFhlVd8zzU0Bg7+ryYwU3rAxhgW3E35fpGixBRTkh2O3hPkw==","signatures":[{"sig":"MEUCIQC+lt7AbmZSjp41h1q26q8GX+CdKmsGE0+HWIsGdAEMIwIgGABtdu3jLy7TyAZ3AF/9pCqTGokmETaKu86e5WoLC54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/list":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/menu-surface":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.2da3606b9.0_1632166714411_0.7937106141935333","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/menu","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f242c51f606b9c9b48829a5aa344e2fd8a7daf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.e8c598d1e.0.tgz","fileCount":37,"integrity":"sha512-uOoYMbLaTlIKwiWvZMiZnaqyvA3ipeIfgwCfQylMANCXc5eXLEzw0yZj57AGkZlxAajdxYVkJ3KvEkEkAaV2UQ==","signatures":[{"sig":"MEYCIQC/Nf6qIfyHW20aR/Vhfvh/ZbxhAnEWMhbux/szUiQzVwIhAJH6rGKESpAWVVbf/q9bCkDEvr6fkZHmD/hDbVYrYN7R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/list":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/menu-surface":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.e8c598d1e.0_1632172372604_0.4370312258202034","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/menu","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b1b70cc5bac3674fa13bba0739081e4a40137e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.1340ee9f7.0.tgz","fileCount":37,"integrity":"sha512-DJqspo3PNOhCJtRyrNiJFHTm0dn/oQetBqNUBhdDGt6tSrC5sVWZqkziLdAatQboQuynN9bKrAbiZKoi2DD0Zw==","signatures":[{"sig":"MEQCIA6PQZW7hImM4XIAjQDwxy1wbt2ZkWnkxQ7AJZ/u3iKIAiAtsJrYAFhJBH7sVQ1ngXPAqNl+5hrukamubN0iAw9oQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":731900},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/list":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/menu-surface":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.1340ee9f7.0_1632333524246_0.2950816476357676","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/menu","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b4e65bf2f426e19cc05c9cf77265ef4789b89ff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.65084baff.0.tgz","fileCount":37,"integrity":"sha512-jHYr7n9SiJSmCyXUdD304/UdOvhy8Yr1uz8ROjeRcpQ9sZtbXfCbRLafgD36zumWl7oFjcnrZmC6RzENklyGiw==","signatures":[{"sig":"MEYCIQC6cQeNb7gfUnZfgrU/YDGhjxGFEsXqULN8mDRt/2SCngIhAN47Y4FDBGnicC8HGRP5ng7YJiMYSxEYh0p41co9f+40","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":735139},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/list":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/menu-surface":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.65084baff.0_1632432378755_0.4572044446741148","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/menu","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9681346a9cf0d3fab5acc8da67a7a0d22bc3df1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":37,"integrity":"sha512-3V4n3R2t6fK740XKuw+teJLykW8oylwTAyjJo8PnM+RdB1jplY/EMsB/pxTlQYR29eN13q2N1arwAo7Gae+IzA==","signatures":[{"sig":"MEUCIQCj3jmqAtjaxdK791U5rX5o0UK+PYrpgUATNWXDzbTfpQIgPU9CFYMR/PvpqK7haT+TFRFYzLdQFlOMjBwk0GKwa8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":735139},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/list":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/menu-surface":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0-canary.c79aa0cdd.0_1632490968992_0.7224067047421874","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/menu","version":"13.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60fdca3f3a8457dfee83938adaf6288789ad0ac1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-13.0.0.tgz","fileCount":36,"integrity":"sha512-RY9R2ubYU6a7WRJW3nWr/AoSzdrxwUGqkfJSx0U9M/wK1vbXYYcJ7eCXFzSpa5VrstE7of7PbyYtQ8V61tILEQ==","signatures":[{"sig":"MEUCIHV+2Bs+mtgk+oDGm8igjXcK3fe9LSN/NALm91+AJjlVAiEApUiEMrrjv10NKfuP8rAfdgB50w4iBdmj28kCl4Jw3hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733938},"main":"dist/mdc.menu.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/list":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/elevation":"^13.0.0","@material/menu-surface":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_13.0.0_1632512806436_0.14437343097779265","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/menu","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f43e146f500f05e4b4708de7f172c985f3bb998","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.198431fcd.0.tgz","fileCount":37,"integrity":"sha512-SReCE6zw7XUFwcTIGh5hV6q3ln2ve3XugDjKHqGkXhIS0261yZRIUN0hYWgC4MbJgGzCa5KhpwTGEcaClx4Yhg==","signatures":[{"sig":"MEQCIBrLCHu4OmhPjDwzuID/Yv9eQpVjK1CBnG4udQTHd1cyAiAnfcaOuYzNwQwX9ihOcxEAXenN12viuyvT/IJRkdLu+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":735139},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/list":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/menu-surface":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.198431fcd.0_1632512850574_0.9293745060558358","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/menu","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6909b28adc281ace6887b3d50fdf997030f8c89a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":37,"integrity":"sha512-R4L8RmkF7GMdMEHaTUytcs4+V+8C/f+t9kcpCjRjHZZQTIg9bVghjGJevMNmZY/6OPOcV4gcbB/cNoyuQajmBA==","signatures":[{"sig":"MEUCIEbSGFIFCt2/hjNypPJK876L1DjUBGK8dqI9mohox1v0AiEA2jyAM7DAX5WUcefoA3I4YZ23yZ7piIjinykHu3z7Fhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775637},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/list":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/menu-surface":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.9a02b6ef8.0_1632575511058_0.4295485610940568","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/menu","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b21b01f3577a20b9c7532e8f7a94e15c4fe4d54","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.758ce31d9.0.tgz","fileCount":37,"integrity":"sha512-kVJ2VahUJdywfuDyKcJmZ7v39BSpa3xYn/b2hXZuQSo0bLgQeE3YsW4hgoVu0kQOkLPqlNcYmmuI5qO9JEq0fw==","signatures":[{"sig":"MEQCIDtiIbKvK8rqEES6T2tRqsS6WgGFUhVBX3k8K9rqQaTgAiBz/ULCpLdL80OKimBxnjQMWGub11LG2VHlSOBMhsH4uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775909},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/list":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/menu-surface":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.758ce31d9.0_1632763809781_0.173548647837644","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/menu","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a51bf268dfe8adb2a3ee59b3042b65fa24e7aca3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.86b50ef74.0.tgz","fileCount":37,"integrity":"sha512-jUL/TC7OS/ifFfDTN4uB/JCHYQtdiAXSGOd8wThGo/If18rwSyOfl496oNrQsf9z+jhj12r8+PMZIO7FZvpdJw==","signatures":[{"sig":"MEUCIDHDPfoVmOVpegluehzOm3oGnqDvyzcxp4e678xm56ybAiEAx/iG00zftMF70rm1MiQLtio64h6d7xKMM4AdzBuy4GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775909},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/list":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/menu-surface":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.86b50ef74.0_1632851035318_0.531859032668631","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/menu","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e09bb1ebc505d2818b7674be5e6e3918aca6ba9e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.b2fe3528b.0.tgz","fileCount":37,"integrity":"sha512-QnoqllUKgF4hyfp8MdLQwnQUHxHI+NS4DAsAhaig+ldgXY98rOjj5tImCRBum12hfoZqdHwqBsaGY7crU9qsiA==","signatures":[{"sig":"MEYCIQDC1sWDH2ZabAPXE9xKzZvjPrlF4yyV7upRtD4a8bfSYQIhAOWN1N15xfMuCI07aKWxDe+fqd6H8FdgViy5Oq9Rby4p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775909},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.17.6+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/list":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/menu-surface":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.b2fe3528b.0_1632956268402_0.35744593621912224","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/menu","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c627e297e444bc0cbbb2fef447f8a31b725a86","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.586e740dd.0.tgz","fileCount":37,"integrity":"sha512-lPLrF2EJH1WAbciXYz5bKm/nEYtcIBm2h2wrv0L7uDvdiulGbGelS6zsBHmwQnf4NizoxVyWP7pFSpkfPROpZA==","signatures":[{"sig":"MEUCIDGWYz2Be0pFrFLrAwSb6IeVhdminfwuSQIK+S+elFY7AiEAoTfTp9A7sywHbeR9AMJoeMDKKWrYbcP34QghM+eH2P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775909},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/list":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/menu-surface":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.586e740dd.0_1633019533348_0.7738944721331633","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/menu","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79841cd1902d1c93760897adc6afbd4e669e8d2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.2ac92d766.0.tgz","fileCount":37,"integrity":"sha512-NHUa8PBa/3M4V33jqemHTeaowOamx1GyJug/c6cjLYV1TbXnzdJWlR3Jx88Ru5NlZlyVizUzr598vxlgqrh78Q==","signatures":[{"sig":"MEYCIQDD8eeAZq6QwmkHeL5Dxl86QX7PFGTOCaY0/lAQAQvyrAIhANMlLdHK+Y32l1VWiHd1HZNDArwJ7rdmFXPbhN+pgsqz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":775909},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/list":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/menu-surface":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.2ac92d766.0_1633462161629_0.1886045769864637","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/menu","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a00d00a68f7a23b6184b2a5c3466a550ecb16ca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.353ca7e9f.0.tgz","fileCount":37,"integrity":"sha512-A+uAEQcXRjdZllcq0giQJoPgJUenh75igBIiwUCjgtWEZKUwND1/bqzS1HBe8qIQHRPfgMTSGS2W3KeJYDaLRA==","signatures":[{"sig":"MEYCIQC4Mi4YUgL0BPYrC2pXTfxQy68N/t5+YV1zdtjiHFo9iQIhAM4ZidbNCiiLVczpXq89Ho1G9t7jIktnkUsGOtG1q8ZY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":776220},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/list":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/menu-surface":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.353ca7e9f.0_1633718871185_0.16407508261604264","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/menu","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f361f98f45d66e8e03d5ce7ec89be649d7edb2ce","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.c78ff0429.0.tgz","fileCount":37,"integrity":"sha512-tY68s5TiMCkgYb2NUCzU0S76J83dMXXWoogYC5nuwCweZW6tGyMFgggxLfWICNxoAuD11eOIln4BO1+jEWRh3g==","signatures":[{"sig":"MEUCIH1BsSEyDo6+gYOExetPpCAgyBpmai5lzopPnGenbkowAiEAhFmNM8/woiQcu9Uyd11MazhrnMU2aeHCJF7JBLR9N6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":776216},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/list":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/menu-surface":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.c78ff0429.0_1633972980848_0.12541772886663716","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/menu","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd1e8eaa5a4933d2f4bb868085b6e4895ec15e9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.261f2db59.0.tgz","fileCount":37,"integrity":"sha512-x59UHoTLvEsPKjFdffrKTgEyc0T4W3m58RsizAmapXr59Uthq8+PTFOkAv9R1PV/ZCzxay7Vx+QcekC4qOr40A==","signatures":[{"sig":"MEYCIQCF+aOXc3BRtTZ3HXudFcCWA7DhCRI0lyGIfUKjeWkvngIhAIi9yLTJPmGp/jLfKTME2cPQqwGl6ugBQ+SQ+hNPQ1rk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777270},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/list":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/menu-surface":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.261f2db59.0_1634749229123_0.2977367129195234","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/menu","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e610a0b6fb640dbe3b47c86110a5e7010caa4a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.9803d2dc1.0.tgz","fileCount":37,"integrity":"sha512-VgP7IvBIN2IN9JclMf+vfGtvkhwXjPM7LvoYiwtSq8MIQqpQeDMRTS+YcMRaGaYEFh3xMCLUAwb957gEdQ/xxw==","signatures":[{"sig":"MEQCIFD1tUYXJameJI6iMMRNYP+1797qV+Am4t8hoq2uiIcqAiBhcEu9CqRFrnEw8hdgwWPvZtW2Tw0ONjXzhrvCBaOXfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777270},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/list":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/menu-surface":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.9803d2dc1.0_1634757762531_0.8078384783139498","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/menu","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d364fccae447ebe3e5898f4e4f4b13dba1f7a028","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.348665978.0.tgz","fileCount":37,"integrity":"sha512-aOGYRVKWfdyxV4xzdBRr2EFZ8au6lGHLNZDwJ9XutOwUO+f3xRCO+G1gSLPU36FhlTOoBSw5/wsGQgB6QSSMog==","signatures":[{"sig":"MEUCIHafLzwrM68JCdVpn8gCi/nvr0+Fjw81T8Ff4g7ro7y7AiEAhV9DF+o7TG0gZXB2U85tds0B2U840KtVrEAwd17fYCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/list":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/menu-surface":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.348665978.0_1634827898692_0.19714663797351584","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/menu","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca59dd74c545f3dc086e45cf2c2bd32233687277","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.b2b979a8a.0.tgz","fileCount":37,"integrity":"sha512-PexUnEdPxh+vJMmjHCqDIeww0Axct/+JRCLyge+X7N2yayzqE8nYo7ioaNk9bFSaRVEoRaMxU31xcxXR2UM7EA==","signatures":[{"sig":"MEQCIGZMCsPhtysDh3V6fIsaI+wK4PgECcnB767jrKyFvwYJAiA01ODHEhBKYoWg5CiljgLu6m8hjpWqtzK4z316ygYeOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/list":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/menu-surface":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.b2b979a8a.0_1635433998138_0.6448613170536974","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/menu","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f930a0d660c3b317b9458d468e0115e0e6e8b2f1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":37,"integrity":"sha512-H8pUjoempYskp8Gs1em2wFGsgoLHzsBqWQ754eMI7kIFlVkRQgzxdZ7+vEE3IqptfPUpYtY6Y7s1EH+FW5VzFw==","signatures":[{"sig":"MEUCIHQm69SF8OmygYJwNuiICXMK9TYXFxPKE3j48J4TfVhYAiEA0EsObJdHjGYi+a5SKV9v3XK4IEy4gypX/n/UALvxiy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/list":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/menu-surface":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.1af7c1c4a.0_1635443621116_0.9230785989539563","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/menu","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7a165444bfbbe2ac59aa313d3eeb8ec52fb745","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.4afd353cd.0.tgz","fileCount":37,"integrity":"sha512-gdNspv8d0WgHqp0uLKRB4fQFsdd9zTWPZXSszEOt/Ldpt1/pLRhKeqWqFvLMkvF85RN/WLNfbTKVu7qp7rRPpw==","signatures":[{"sig":"MEYCIQCv8bV7Wg3eiZG9VsQ3rJXzTDEQvVo9OXe5PotyvXPNEwIhAPf4l7zXpBnkKeQh14MAzkNqPGiKpvQfwd8i1Fao5Iba","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/list":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/menu-surface":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.4afd353cd.0_1635519744964_0.09283135308201307","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/menu","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36173bcb6f31b8c7fe0bf1699221961a4a881ca7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.a986df922.0.tgz","fileCount":37,"integrity":"sha512-Te3Y0HKFf3O8CxhQulytFeNf3llSrhcmfZdZqD1Q/Iy7Ce3BppL0USCnmJfQdN8zcqFeJMM5Fn/B/V1TQDz0fg==","signatures":[{"sig":"MEQCIH5tPdliVtVVBthZce5XEpZcTgyPc+jcg8LkqZ6ro7QhAiA90GqdrXwDYN5R9dlRoDoGHIpxEqZwachMThjcnup7RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/list":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/menu-surface":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.a986df922.0_1635543350663_0.585836212961723","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/menu","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89d879d89ff976608e606cdcea1e49c8eec1ac2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.c3cdff07b.0.tgz","fileCount":37,"integrity":"sha512-jep1Aq3ET9ua+my/x/sDq6EEakS/7kBII/+WE+4KBWETX9/ubeQYwpDFcMkTh+cYO90Q6bDPPpkyHv2YaDiQdg==","signatures":[{"sig":"MEYCIQDpu4fCHNaCqsSncOZtJRsheQZ0SmhldJeN3aKEhxnAJAIhALZhbGpXKtxH//9BgqPXqykyf/7R/HVlht6pyh+EJypA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/list":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/menu-surface":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.c3cdff07b.0_1636484806919_0.737603439568256","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/menu","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24bd8310c745c0a9f1166183e62cf471d01c97b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.468392606.0.tgz","fileCount":37,"integrity":"sha512-EOyfIN+3mOwCMX1N0i6ufYfwOmGNmBK46kRZH/tr4kqFaopFYEX0hbXe6kl3Bb3A8yC2kmBuRfHIyntFLKdbqg==","signatures":[{"sig":"MEUCIQDHdXh3VGqA5CaeYjs8MtSK0HErCmxSD6l8tTYFn6AYtAIgO0CI7D6r61tSovzmxhmbFIYsx+QmleneRx/DhxT4ZCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/list":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/menu-surface":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.468392606.0_1636659660763_0.8884153503748258","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/menu","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25add2e1ac8101b8cd919873f7044fe95dc029cf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.828f9803b.0.tgz","fileCount":37,"integrity":"sha512-JncGhpnPll6mG+vACyTDEsKNSieSaBjUGpzqeTEsVTSPyno5myQ/Utz2GCBQuDl4fXvhqP9CAewDjhehbnolqA==","signatures":[{"sig":"MEQCIFpVzC1PmTbQT/21cZrxDPaszRXG0Cu1kQaUUd/ViPS8AiBoFpv7pwHK3iIp8YaEuURAF9QeSvReaZCMs0+gtFpCng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/list":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/menu-surface":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.828f9803b.0_1636660302873_0.06422774734233183","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/menu","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba5268caad03460543e3afc342a620a3d06fb10d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.8795cba87.0.tgz","fileCount":37,"integrity":"sha512-dbOn8IcJxkomiMcLkbC/QkxTww9p7qEU2cXgCSG/YBVlh9ToA2T2RmIaMu2l9AtIdrTrjqVDM6zxRZsz7cYcjA==","signatures":[{"sig":"MEYCIQCHYCFeDY/UYSEvkhWvbdQlrttdPIp2RUewAn+Ao+yuvgIhAP21pPrSxlWJqozhcU3+AZXXbE1oqKtvaXseACVkawwf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/list":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/menu-surface":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.8795cba87.0_1636660660434_0.503894388770441","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/menu","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2020c35972ffcfd416c3e7f992eb5b0cb1624db6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.cd7f8cace.0.tgz","fileCount":37,"integrity":"sha512-6KJDzGt0Pk/j9VVbCy/P5L9eE1tSXhALn9v0dIm9qLul48qz5ABGCwTkI6Gevqpe9AIfy0iUAZ2ZDrTkKWSoLw==","signatures":[{"sig":"MEUCIDba4TvUzBwSvqyOaw1yIitnqrZ/tyt6ybdwm6VYg/iOAiEAtQytdDjw641ynvecJ4haQNjaticse+aESAwi/ANZZGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/list":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/menu-surface":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.cd7f8cace.0_1636660765539_0.014008038611189821","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/menu","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19c3082d86fe6e9a1c42cd50895eca75472cdae7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.207230eb8.0.tgz","fileCount":37,"integrity":"sha512-MBJrLkC63zspEGEtjp+AzFfmR7I/B60gZs4LXIMiWlFTNqYKh9YnnifgY9XNO2bwKE7aLIx5Sttm7oqJIFuS1A==","signatures":[{"sig":"MEUCIBtytb+fSWKy30yw+d4tFDa5Hle5NB4fuVJyKWCYGF70AiEAltSu97rAY7QA4ds3ZeTkaMUA099XvzoRS7yEBEnP59g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/list":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/menu-surface":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.207230eb8.0_1636669523358_0.4636274160212097","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/menu","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aac0cf2191f350357d2fb03b69141c2213dcd37","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.991fb99f7.0.tgz","fileCount":37,"integrity":"sha512-fatexYyAUobNLaG4iupo1AFeuyy4E9z1sj+53M4b5mV8Rowjmxl0G97EtuZfBlaHAWVRv8YXeuokYvjnKT7JqA==","signatures":[{"sig":"MEQCIBBjK2CFZT20L/v3a523TKciJdVhqe4hVKLPnFoL+1G6AiAXDn7uJX38F7p/MZQU+VrNaSFc3J893aqNzAHzmoth8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/list":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/menu-surface":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.991fb99f7.0_1636670241164_0.5301381735892732","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/menu","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56238b9e1b5cd5ec9904fb53de7ba91f17159e7b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.15db4f164.0.tgz","fileCount":37,"integrity":"sha512-KRXGQKFqXcmK5m6eEDJX6ED5Ih2v395HbM8WduErXHAnM0q9X8LTCPl3+2p6WCrdvZDke1P577BLdlvhxsZOgQ==","signatures":[{"sig":"MEQCID5i1kMQKRf6RabyZRjgR/HHfgb+N0xlcKdYi3h3PDjJAiBhOza8zYw8k3gigwegrdkc6KZqq0VJ34+R273N+EkLAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/list":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/menu-surface":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.15db4f164.0_1636738239851_0.16742069191910725","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/menu","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd1a88920633c8f162c1eeac2b311a416fdf447","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":37,"integrity":"sha512-cueGIkBd6LALBEkr85ag3Oqj87PQNKJwNeeLANRkYoHJukBhaQ6vTTz60PbK+/HgX5Ynk0ppoNNJHlb/9ywnJw==","signatures":[{"sig":"MEUCIQDXWJ81qnYSpV1de6vWopdnwsUl0FERZI1NiW869s5PwAIgNGVep0uupbHQGuMxhJL/x0RKHLGSRXPVTam7EmRKWfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/list":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/menu-surface":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.8fcad5a3c.0_1636744479690_0.22895599607652595","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/menu","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adfcb1ba9bcda9294a6e3b890cff078317f9fd47","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.f81fb1d23.0.tgz","fileCount":37,"integrity":"sha512-YObkW/Izk3NCj5Ty2av0ezz+TrJMkhsLThdwezCz4nJcDfTlJB++nNBf0asxCEgIiFVaZY3dx2sqrhFb1fbJvg==","signatures":[{"sig":"MEYCIQCZff/Yk7TP4ycy/hau7cXcGBpVcJ/gQAsHdX5xPduj1gIhALLFPLdU1M0KsPHTxlV3/a0wJmn/LQ23Qz4ozu5kuVko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/list":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/menu-surface":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.f81fb1d23.0_1636756874433_0.38033463907271914","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/menu","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15760bc16592fd490a106f224e7516b2f7eea623","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.783f6fd5a.0.tgz","fileCount":37,"integrity":"sha512-uNhXHcOg7NkczcKMakUCo03nHGejfnLLXmJ6y8JIxvkl09zjkPUWzBACQLhQnILfDqK0Xt8FpT+R0hgpH9VpXA==","signatures":[{"sig":"MEUCIQCRl7qcZ+3HzTHCwZHSgxwgaoiA9rlmw4fM7oPmLEZpuQIgMLhPeDMDES0jhD3XZC+ZppLHEXHxVL40LE8TyG8tYZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bSCRA9TVsSAnZWagAA5E4P/ArCP2oxWMw16SmUEuHb\nifhTIBWGD2U3PFCyJhIxCgDniGduMXt6J8T95jQs5iIcySl2sa93iU5h46Br\n+vmhnj5uD8BhGjG3bYHmRsuwM2ASjYaFb/cguNZZgqcxYxxzhrcdDG8x7gpl\nTX3Ja3RtJxyblMN1hZhOsnQv3sXQYMhkHYB5FOerKCSbLZ7izzd3FhJW+2ni\nYQ2Gf+va4Q+11c4eIKZeL33cb28fsiQqn3HKyKAAixUFef+5DwRebhjGkzK3\n4NNRlTV7PTLza3dk7I4MKvyGozxj4pNt82Wc99vu1YNctWBou2Oc23hdsmWx\nnIbiH1nJn/UhrofWRD6MHGgGU5Rgh1n2pwM+Dz1TMjhM0imBOptf2Cocatt2\nUah3Egy/hp36jdIir2xG6sX3eqTBCxEukS7H7PkbxwdNfa6Vc5WlRg3l55rx\ngvWRxxSbZ2QoavK5xgt/eBktmOQKuiY7/GpylEFm7yZGWEjrMXKmi1Agmyxb\nF1MYaQN4OVFeQjG3d8ko5XUreQoC20D1NXowj8cqZZeFXS3o4isCPPQiyZN2\naRbyFeYUYYnqYiyxtwZJrFCv5BDhFlABWHhiFPfa3LWv67Vq90kdmzj4znte\nR/KlR8sKDyQl3vAtXVjQ6tLAsYOGYrr/yfCa+SWd0Iq31189X5UP8tZLqz78\n+ayc\r\n=vgj3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/list":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/menu-surface":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.783f6fd5a.0_1637041874045_0.6440213269132384","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/menu","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4433ce41a83e40e23a66b8671e84dc5f64986a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.d57ec74c7.0.tgz","fileCount":37,"integrity":"sha512-pMPwkzr+sErSlrTYkSYwS1L11eCSjfoTQSr5tzDh9Pyi1TiNiXRBWrOjBXndM6Hh6XF31GuxUm+ULww4QkysYQ==","signatures":[{"sig":"MEUCICwJ0ZUDvw7RzG0n0LEivtGsK0q/MRuVzgOThp+85NXWAiEAk8r5lxIKGqZBMrOqBkNfsnIUkgzEv28vKsbHrarCV+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nNCRA9TVsSAnZWagAA+b0P/17sSUJWMHHF+aHjwJNi\nTX3l2bilpFtAhhGWCasedwJa85iz1Ouu5F4zntbTPw1mPU+7+ipD8cxyiRJw\nOubN58VFtdouRFeF8bjAwmwHD56wdATYoZe0CWMFhOnxlB0YbR1QGybPaeO9\nVxL2g4afViFPYZTFBlmasxzxZM41zZjlzIbeRZ60uKjfzosS+yi0TBlKY1FO\nOgoLWA/dKmQ9CQtV/z5YYv8ZTRLSenepPG/9xnZRHeWNycnD1wQi5U1Dk36j\nqAuH/7sWcGpLMytB/evPqgkt/LoVR/RH2yPX8PFg0E2ilA7n2soiDvZxw3jX\nqkNeQCeVEglfBg4oOZbV5yJ0lt+s+g2eeLAr/5KYS4c/mkABzSK7ufD+w2hK\nEkHS1N9fRZwU+gLGS4Cu+FrAtCjDZ8eQpbr9Pp+nTU+igi/8tVVrgmv2m7WL\nHmetJp6cRhKPjVofj34ATDREGhpajbcuU8kVw0pvjK/5Gtxx6Apr6RUWy5rg\nlo+ISDlOp/zn+I50K4zI1BQSRIPTwgIBaDg6FG3zyRZjChRRKef3EBKfvqs9\nQ3UlB6Dzdq7aPe5kJ0EKtQQKXuzBQFPwQFHCjy2XXq8i93Wk9lbYc1zw9cgP\nvT4Z4uJpTzed0LOgzNwQsoOYPMPM80my4rdN9fvWRH2klHix2rg+4r59CcxG\n7mSL\r\n=wXj7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/list":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/menu-surface":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.d57ec74c7.0_1637079500807_0.48434743510569334","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/menu","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f650020287003915ece2534c8dd56d1b0cee3efd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.554c71829.0.tgz","fileCount":37,"integrity":"sha512-NSKFUke8SCygSALCMQVgVu0/QpRPag2k0NTmog2ACWP+qbLTFaql1jnwyyUMjIQxGya9kSE6/yof98KQDaR0pw==","signatures":[{"sig":"MEQCIDysm20V8TjA/hKl1fbIfpsdiVXz13hlx2Qhed2rk3HRAiAFBMkDXme0BgYQx/cpG52c5+2sR/lTWf4BN9eUpy5amg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pYCRA9TVsSAnZWagAALS8P/1ZSKpFOf1Civ1S6y3OH\nbpKZ5OmjGoIw6DB7e0+1oAQqxBeMn05OpYFNSSL3j5458QphX4O2JOZE2kH5\nvHlq05CHGhhtVOzzCSZUt1euk8XrokbXNjLPkl8a7+7HtEvP205c6ZKOJJRP\nQRiv6JLQ6YAYD8wZzxr4zl8zzsK3DUxKrmkukRfTfxrJ5RJIliPDAhLA/nXH\nDvWFKGQIzUxEPqwAAaPx6L0TzLUX4bExdSr5+SJC9XcfkbS5HPA0Byk+1yr9\n1k2DanHvqviN/zUJHaQniO8a+NGGhZhinvat7iSyC6JrNAF4PMqoKnECtlIn\nY3LPdSzmn5w4Y41F/iWO2rTnNvNUhsH1e9VcN3VAW28EAHBH0Jer/5S+h59h\nvvekR3qdaWPX81u9wF8zxHVFQ2N9FdKGVFGYbOBPyJV3lf0XeVA47gabkYfE\nkyAwWUTzdoT6soGBUVlLI44/bOKLhTgPTc6fUISPLo9LklM8VLXHnGQUv6ZN\nzwBHwS/l1oQdoRj5IFngQ1OxZXJIWJUL9QU3UNurBm+mo2Eijv3ombprKXWY\nZDLb/wXw5Fq6hyraQ0i8SeID1Y4h/8/jalsg3QPS4RsZTz4ut17zOlcqPeAt\n4byjZZQKvRm3jeCNe2hkAkqovI2V+3zcYgkDFQHvFXSccRarMGP049Y5vk9j\ncLLk\r\n=AZ3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/list":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/menu-surface":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.554c71829.0_1637079639827_0.16135287487035033","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/menu","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70306f39689f79fb9fb86579c606a4e8ef326fe5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3ef470efe.0.tgz","fileCount":37,"integrity":"sha512-Qt0k7PT9vTIh9SZOkHtH6LdJOmYQtpQQkezcuYZjJDcmmnsDqaL6g1Bysk4dCKkFbZxYdNa0lK+ed7P/Rt5dFA==","signatures":[{"sig":"MEUCIQDLxiz/xclhZSaoIlxY8uJz5vr5pdjF9wLH3nlBiJYFDwIgBxQhlOmIFIO7/NdvTp1CC8oLV9YAIpqkFNDblVeRZWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9t4CRA9TVsSAnZWagAArgAQAJyr9DMVdLSbY4rCRBgz\nVDHdTqD05UlHI5wk2XW6mPYd+7im+cV47VSe19a0qWZIhEqjH78B+hEXqV37\noTRNa5IfRwWmJVozBDteG4UIme7le5e8ciS5beYJpNsLOMT5uoGWndWWX5Rd\n6dHOAOlsse0IwjZ9zRkq9Cul3qf8kGYmBZw8r/g5JflovRwgoKqT52cl5fOs\n50JE2DsvgVc/FoeEvL02nVcQi4RMvwQQ5tkj/gvFk9H+GT8gqp7ZWmBhKiIC\nch/qXfOgAHRyDBVDaTKrFqiRgkYSgBR8cozPODVLTsWQPfIm5iwx1G2aE6fi\ne4PubmlWKU0PA4HkRmFaCijZEsxINxDSSXTJR7e438z21CBbN7JY6jKy2QIy\ndQJlJ8+TAQNyLxRiisWYSrITpiEdGhv95HMfGI6YOeGo1U9kn1J/267E+Suw\ncK1NUYyUqKSImbyuRlo8NTvexRSXmwO9ToaRUrYMH4gVNFS0qR7Y9ToRsvZ0\n8eZbOR5zeEWRLtjBR/q8VcSIHyD7NXqNcNeyjsjiRYSVCbuN1b6+devZNPR9\n0KZ670S4nC8fhrW4DRLD2O4I/OxOguQQQ2DE5SwlQk0iRFi8tnwH3/D899+f\nIftKhtgH2c4qaWkL5+b3mD/IWi6q4CKXqzpsPWhlxhS8DTpvjTnqi3WgGe+y\n/LDS\r\n=qjeh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/list":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/menu-surface":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3ef470efe.0_1637079928652_0.8974130389813619","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/menu","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97051a49e88c7b6a2b91abe9f3328b6afca9ab51","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.61a28b2b5.0.tgz","fileCount":37,"integrity":"sha512-tTAvLxD5iGuhl+ti7El2gN2xu9952Qf4b3M8KetB1Xh0eEZv85jvMiFRqhBqvluxYs3BfA3udDZoZoYe2HtV7A==","signatures":[{"sig":"MEYCIQCjw00SoIQxfGl8U1plzM7TSHQJ1JU01rYUpbnXhuZ7KQIhAI+XTOaZsvlBuIvfkmrOP+iOv0PsoAcv2KlIzTZGbWtK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFWCRA9TVsSAnZWagAAUh8P/20VgBFmts/Ktn16UkgC\nIETDN/hyHG0TBTBWx+4Bwy7TINVFFbr/hFRh5l3VyTMXcOSMEZGHx2eoKxv+\nyNcMHhmiy67p50U/8TY/JaWfrPGN4cnSKS3vRzyO5nT6T/bmBfhwxbi2HJsO\n1uZ/FPtK0yuOXvelsxWuME3OgVZWMaKg6zCyaqbb1LtMIwzbapKtMztM933A\ng2qVkt6pmQHx24JWInle48wdKh2cNC0ah3Na0TJ/aMT3Iid3og0/hfPCFBCS\nKeyIERZGG4a7M5ZSGxshjnIJbFe4QkyM6PvdNRro0BlfEmOnwtjTj5ECA3Cv\nbSfdcRkq70jxh6UYtMsRB58iu5ms4TnEZHUuWj6+qrtqlH59dBR1Xh1fEF2j\n56xVZeRvodmvsI9B+QPCdvY2P6gT/j++pLpsG4nDgplgzUykWOt85zAI2JCc\nxPKtWvwrjqIrQkgRSmL8esDO1ZbgTirHzQdFksOVBZguUdkoTq7RdCBk4W0y\ntHamT1rgptb3rfQlijTBQJZfO8LsPPEMmOWajYdOsFs0k0LC9Dd0SjvxL1CF\noSVSKut1k4Y6SvRYb1jo3SyHtqCPJHryfIzoSRtLcQ1UHtrnfQ0n6rz9dJsh\n9kjfsoK686lJhFhe6UyAZP/nTYmVU2vSnqB6ER+gp9fQpvhRHZkmVN1U8JUK\n+59a\r\n=Q3ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/list":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/menu-surface":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.61a28b2b5.0_1637175637749_0.458121073200741","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/menu","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.fae6c652d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4319567f48dc516f33fa3b6f8a27b1f890fa6c71","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.fae6c652d.0.tgz","fileCount":37,"integrity":"sha512-qHySSMiHwuS9xP4yObtYUT1jKs3uSA7mFXCpry4HY+c/XfFwrvLQR6V8hCTpBdkcQcsW3FnIK0fbwVe9Dl5tdw==","signatures":[{"sig":"MEQCIB/K8n4z//eaVOyBnN75jpNCNDiO1e/oqt4JYewTLgXHAiBhvdOn5lkImgmmJtx94CMmz7/DKfc/5Sh3rDxfJUAFqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6mCRA9TVsSAnZWagAAbgEP/iXCijHbe5pgH4aNKL7F\n+Ry2eYkoGHo+DBltmo5GMOGmCJV0VL00+Bai/JQMTXt6Ybc67IFJNLfXphJ3\nHLlEQ25MmL4GsvePipGRiOQjr4s8Td3nfZmHVwAttwHSHmtL4yKQthRwMtNm\nSEV1iHAqwAfQsUknQjOtbRBZkhemLhHmVvLgdaOamBal+Aux2EC2Zx6rpUZj\nGyw+0QLfYXyBmdEHtoFc+r6QwM8NBdlTWFYYKRPDY/YDciV3nqAF1RSda5T/\nlF7pI0IJFWL+vuJOgqKasLTQEanxCF5lJnPqD1GssuM7b9oZwPap7hFEPmH5\nfGQlxXRpAyyAhWAyhsEbHSN0sDy4UG7v6DHPUQN5yEzf6XUCttp04a/pdIT7\njAuJTVQiNhq6wIU2oP9Wz746TVssfdoLOizB/aEj1HTwcl3eIVQQkkz0SufE\n4VrzTLgWqAIFTsAQVD5fVup0sPqzs4XXRrtDsO854TQLppi0zJOYVV0y47Cl\nFKWRn3ADz4YdtQxoQf5fNWl0VXFOkD7A9NAygyLnzxlGGxJs/VuSuq1zV7a5\nHG5jZjKoZFbP2LW3kFRy8xwTV01a1vNIBCDp0hbYxALPzsJktDTdSTx0mJSQ\nz5s7Uzi3OpTGMytV554OBPhCMzuAJ7HnsZeDvVXn3mZQix+1ZHCIEedFL42z\nMBm3\r\n=14FH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/list":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/menu-surface":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.fae6c652d.0_1637252774474_0.6357141236989661","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/menu","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.978a3b5bb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2eb0a0839a4b6aa3083335e3968ec71d62492c9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.978a3b5bb.0.tgz","fileCount":37,"integrity":"sha512-hXAYSxFDsGi310zSu0J0BUjDgMeyxTXKDEs4VjQuJuBhmcsjTtCD+NNJ6uicMfKrC/4BTInprywgHk/w6kLClg==","signatures":[{"sig":"MEUCIQCAjBhHwFF9yPq3hVIF5fuqLr1BGX2o0MstYDMLbept/AIgKN3ggeU6y8pbtn6P7eYtRoXmBDYCQeTeEMo3WUdJzp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/20CRA9TVsSAnZWagAA7psP/0pM37uXK2EhN4oEy8Wu\nWfCMAJr3xXRmfIvx4yLuCiA+Vrr25fYnPaFLdWu26z2g1KM5kmEl9LZPaWbV\nwHkm5l96ewC0jo20//XEIJbs7LVsXdXUQ/LkkXdXgzRaz9SUbBQM/F8KQVbo\nXiGNOV0jzRGw62EQS0vz37I5jiBqbiVhcKeyN48o2+DHA5S89zT7BZaOhJrn\nKq6mD6GwvOT2SIMJ1sw9owvRVm3e+O08BpxIiDEOynqCBFy3G8YIiMQt65br\nn0+PnFkRpty6vszP1BlwyEiFFKUieupbGU2KLT9I8rQB38Lg9fYtt5/6hloM\nyYxaGHE93QKiPh6iv2VQ00OWgaPlE6lZAC2vSFA7hib+GEjXSlQXZ3JNwwlp\nnmrjq4c0CdyX48wOLbUZ6Ct8AA0YbQwXBU9nX5ZQjLkhl3QekEdYw9UOzeN1\nH8RjtOQmp1gQkw18cYcfY+l9Eudyb3G0PRgMqJXpvWnj+d88Q7QBTOWl7EEq\nh1PvX1PGEZjctU1seiBA+e6zDNVvPnxUtToPpgevQ4NBWP0xsVSQnygR0gG9\nMiJbRioCOiDCY2y3UkywpcG/M7L5PRvCW2ETgLsY1AjR0OWfTngmZ9C5ypsR\nG7sSpYjF/5IhjnpFl7IkbZl3VXVsFt9Kf9fVoNVu81FUtU97+Qy8HVTK9ElK\ntHHU\r\n=Hns2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/list":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/menu-surface":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.978a3b5bb.0_1637350836323_0.02139703793588099","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/menu","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e6f43cf44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7544a4965819242cf31a663dd627c9ad8c0599fd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e6f43cf44.0.tgz","fileCount":37,"integrity":"sha512-PSSY6UC2UjZfqhf6mUG+38yKBNgCCve+8zVRHmr0ml6f/XBAiIy+UcZ7I0/14FlXG2nhjbhuVAQA8x8wQTv0GQ==","signatures":[{"sig":"MEUCIHgNfVa35WXAZYax28EQ4fNjmd3P5nmNCmKoAwhLfBwhAiEAibSAQZmsjwC2ZTBePNj3yKRjrDpLre5WZb0GDQcXsF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UYCRA9TVsSAnZWagAAurIP/izkN+W57f887i+Q96bx\nsm0U1KNkjzx9M7De8qhhc3jqYton6jnStoR5VIMIflxWVS8TJKrbeCYf8a+O\nGbbrhQ0LnwAZbwdh5vCKEW/Ar/LXveDB4iriR2S/sk3UufLqxdePUTi6sJea\n11zgKCPM74PeDgOAwXKif/DAHECQs/0cNNiPZ9qDvLTYkh83xMWP625Udv44\nUgeZTP8tezmb2EUiBjU8OD2+YM4jDJm07oOxy+k1N/YOD9+T0MD2nAdfRieg\n8AVE2MOjSZqyq+L3+uo1PdzpnhQH3idS5viDYs0DjyIgngtqDXCfDEyShOVc\nliRLj9iMV8/7cJJc5KiupLNUGZ7CA120a7TlEPPsqq990dmp1FUkPg/UoLqc\nmSow856+g6vJFmEGO7yD4F74wsZmHe9DdlEg9raXC6D33Oi4R3hT/IKXgoh9\nJqBf3yR4HK31+ndyz6vA0ky53Jb9MtJvs4ywVgnJ0KOvwsJLTiBpq5rqKBGH\n5akccg79Ln+n44jMVFymwEl39SM/Zlk/kfGkQg1UtEdqbSs4RdcHm9aEN1TD\n7Zyz/iSVHsXCQk2E+L+VxonU4DwXodzxCxf6pBuN4Fhccj08qcSIbf9D6nhH\nFmdO6BnKoJOsmLBclk3MTRYV48cvXGcujzSHMsTD0o8dYXKSYATi4uteazTK\ni9e8\r\n=XIGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/list":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/menu-surface":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e6f43cf44.0_1637602584716_0.04836845476655993","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/menu","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.39cf14bc3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28cb44195219b13aa796e2d0af79e8c81527b880","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.39cf14bc3.0.tgz","fileCount":37,"integrity":"sha512-CRzS4JJVQOvZk/C1+TPEU9R30uULzHNWFWeoVVNuB1B3EV21Rrk4o4ES9t0A5gs3QKTRFTNCWAS/Mw9qMQq8Tg==","signatures":[{"sig":"MEUCIQCC4rmPb2B09rhR1LWXxgED1noP4UvIb2NoLzrHU/CuMQIgfOyN+Nsoyy4klriZTCgbXN7N8zUJrTdd0AbfnHchl5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJOCRA9TVsSAnZWagAAC44QAKLtmCV1vCgMl9hSN4gE\nVT+AuHnuaNk+TYVzgD45vvRUp84gtLZ4IcMnSgN8lEs1UK4itEusk4cnDRBC\nWdHMc1hTIk/vAS7eCRRMlD9LE6y8CUvBa2n2Cj9zIPpkv2L9e79u1lQpIJV5\n8Oab/4yc/qARqVbVmt20mvq4X92MWiKo3aN7B1Ro3Sx/ah4T8QenMIpXIBBM\nGnPXQIlZAvtHGp+bFrEL9lnTWH3BREqVnnwJD4mhlQAbEPU41Z7Zzk4ciaeN\ncDBnrqjmahz29mESHmNHq3gfxEFLjgHGKklxzS9UD7pWuVdbHRisHXzHpmU1\n6ULCRAXx1+KQlm/CJH25MW+RgsKH6rON2cJM2reHLcN/VBrheu3TNQTiDhaI\nFT1YXZGNvafq1qE6ffwljOy6ll3Ej/V1yHkDaSXn8IFB0sbmVmnqErfIMoXZ\npipPVlpKqaK4EeLzGn1AyQJ4CVzV9vZvVt0YCRfGt8cqx8igdzUGl1Eoikjk\neqD3s19gIegvoufV/gP7/p+HSOELfSUvdtX8gKns2lKlE9cIBxdfN6nPJ7Bh\nzwsyw0aOOHkaqHAr5IBK7wup5mkSQ3N5yNjtHu3fFcpnt8vXcT/0pFELeQ+t\nul0UHN2Rr4vp0fTaNR5LuM6dYtMAbyjGWjlR2ZpOsmAiYEl5jufmMg4XD3je\nSxif\r\n=8O+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/list":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/menu-surface":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.39cf14bc3.0_1637622350757_0.9180732470622028","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/menu","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.93134d453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c134a78ad7dc5f23ca0ff4b4324632fb2cba79","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.93134d453.0.tgz","fileCount":37,"integrity":"sha512-Fh/8rsjiYs0ejQxhVtyUOF9favkSsvUn+4UpOY2RXYDGxxVE8GwSPqttmqfQiYwKvjhx+1duAmZVqx8oE2P+Uw==","signatures":[{"sig":"MEUCIQDhMMurJgCANmvS1ih2ADWZcWJz1uMOBwYlvDrhOG3q7gIgUmcqiN6cGG5dVHU9rB1N7UTyHjpJCIrkqzYhGdVm4hU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQt6CRA9TVsSAnZWagAAaAkP/R12h710upeAoKNte2Ay\ndTQDyS66otrivQ3rSsQgxiP3uZkkqje0J9VqL+Tlfbm9707zwmmifFcgUnL2\nVBrcXEMaRBazAZN/FJPeLd6Rd7rAjwdtqfdQTJr75dkmtZPuTDMpdHbsiiJp\nPQLtPlpZiMI9ri0wFG+pdrsDHqVt8q7FWgPJ1l4XbZms+dauIvQ4KPiWS3Y1\ngDOP+BEdsyeTE2poyY6k9zOH3xIuHDqQ6po/BCTcWq5C6sEs4d9yrB9v8GAf\n81rtZGJuEFpOBN7+1VvlBjwr108SQRuS2ztLqhz+oTrUoxd7OKXmJHFHgeYO\ni/cRD0I1uvYdlW9VSqWBwDr16IhgN4s1m3H/VmVXspnmU5eLJqkekpCCq2sh\n/GgDZkTz0EcX81aaqmCK4ca6zkUgtsP/yfXRMlx5/UghLyXFIphNo9lN0Bvg\ncnTChPX8q+RNDC97YAp9c30EA1AgH50kvjUWZ8Cgfhy7HjwYbtEI8IQFm5Sa\nD4RZPCh57+ORMBN1ctWVSIwqpSL253fZz8yk5kHcuVYTqr2tQwiPArxCUnkA\nsQjInVFmOnoRulia6wbNO+Uk0CjX73PjGDOoJYmbFviJVtx1WCNKIQHqgMcs\nUgozN13o4GzeoPTvHvXa57r0F4Jsmejnhd5ja3OU9xjvEbG8Bg2ucfavWhop\n42xO\r\n=ny8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/list":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/menu-surface":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.93134d453.0_1637682042224_0.1840413829537466","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/menu","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.bbd11268f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d9d04a000ac5d7eedaf2a39987ad1747df776b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.bbd11268f.0.tgz","fileCount":37,"integrity":"sha512-c9P6/xtpGc3X/kzDFR9pSW17RrE3P4N/xYsiVpCGVSiUpdAJBFTdgNVsoNd1MDpRpbV8s/1TEGoziQXNjcm7Uw==","signatures":[{"sig":"MEQCIFHKu9pjGrahknKWTmo1kp9p+21xjkevu5eAQxJgKn0OAiAbjFefqEyarVop8cNTPJD+A4Q9i6yzO1iLbLCMjg40CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWxBCRA9TVsSAnZWagAAT2wP/iHttMYqGJXIwU9D8uC0\na+D7GJi4rmbnKxxgEkzXKgrNixqUePuyoKouMQkCXT8fExr8iOAeodikdadT\nySjKX9lERZT2600LZ/DCXb5dzkqLZnx8ev4bZ1JZ/0cABHEuOtALSBGBP0+b\n8+ZXnS9cSiK+gIR9NoT4CuM2lhlk3+i+6oIBwh/XREfAvjEKFYzfdkK8DzS+\ndfwiHvc2ZKCxvvnuZEjwoZQ+W+kq2AVa8iLytlwydSfdiO6KCzYh8zwa3Q/I\nIlzdriQz92ribAhVF93Iwv76oUqjS0T4flyPxcvqZEVPcNd/D1p9slywG8XH\nsjdVsKJzkdNW5i0Oa9mqcymR1zDinXa74muUto+mvBYgN4e/GNlhqDRtHASZ\n+EpWrCtFPLkUnQUA5TogFjZoMslG1CHz7gWvEcvDL0N4WktrItXq4NLeNcJg\nrv72Nhy1GUhVz5xmpaYJ53kaX7i1NtlQL/z8wUL1pOylTVmFHXqJSCfLR5vs\nXNry1QbcZzR16Xm29smP5vZQhPxCCtL4+AfiEAK9Cr/gympcn6ZMeCD9vTvm\n2+r2WqUL1NTeD9JU7mtEFKn4tp7wco1cysGPobMXAIFkTqucP390tNM547Y9\n8+z6okcuX/nVcK9a4Q0TMCPWFsl/kRnAA2MAAoznmvIKSgwUAZodQn/8y+zM\nmyHh\r\n=YlFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/list":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/menu-surface":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.bbd11268f.0_1637706817209_0.6265504415612348","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/menu","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3db9c4d3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d516a5d71a6740da4044455c99240d27cd780d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":37,"integrity":"sha512-o2UVA8zaJnfb3ec7F53mXeSGlKtgGBrWzMvHfAaoMmBDBjeA+SyhmLFBF90cGMB8OSbpPlO/l8fXexjubog1eg==","signatures":[{"sig":"MEYCIQDa04w+05P+ktveIJbcqWYEqbxvOEatrwqVADSrv+hI8wIhALjfaC9uRpLQdFWEcQLkOzz9YRdfWOS4t++scPc/V963","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlyECRA9TVsSAnZWagAA/z0P+QGjDEXPNcxUSz4enBcI\nSNLASgo8z8GUpN+Y7lU/wWrHS0ugX8klEIAksqaXS0zXXUIKT3yulgVe+zDU\nISdoPm523bCE+sh03aRzYHa1oSVjdMQqkp5M56TRxIi9kKhXV1qQAWL5UISJ\nj4YYo6cpeUTcX2l66+3EfTXSeWAZMTw4zv0Gjn2u5/jSZJh0BS0ds0Oz1o7v\nfQ/AqbvNDysJoBZkLfe30Adluualck719nNlpCqAcA8RPEiwRzou0slk4jrx\nqvKw5UlcDWTkxA0OEaUO29XZKXsZDC95iozD1g+kKHBT+tRRZbQDekXiISZS\nx6r5aogBLustCQopc4fYNUQMfvCy+hpPyeqarKLkUi+YznBWK5tTOWs3f+t1\n4Q0IWbb+qLQEM6CwXWJeR99EF0cZCaKoaHkXTwxfPlMt3C9Rz/JI9Bnqv5Ss\nWesJy9SM85fx2PjQ5WrXSSgZW+z8wJzEh/qS6i8yoLOdYns82kh3fIAsoiyz\n1Mb9nmO+2z4BRHGcFG5Jn+j86rLJC/sP5gvsmckKK8lYXT7HxvORHQ/Ct4Wl\nGlH7B/TTsV/7tKcwmdQOtADpiVSOurbxessUAjtgyjXYk8pckmLLNrFnT/SW\nJ0pjSWR8bES3usLXEYRfWFxVek8tabefDWHavVhRGqT38cH0jDpGUGDf8o4j\nPXZr\r\n=xKn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/list":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/menu-surface":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3db9c4d3d.0_1637768324457_0.4700680987971473","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/menu","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.78305b6d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff95f64a93e6d1bd906d1adde19907b8fbc79c0b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.78305b6d5.0.tgz","fileCount":37,"integrity":"sha512-SYDRyDSZ12dToVw4li8hIlFaYgT+IqpaXHPd/8ZaETCnm91TxuqNAGAmQtQP8EB2dL8JRvdSe+/7WLJ5Yh2oTA==","signatures":[{"sig":"MEQCICcY0eF1DKmqPqE3uKhjc38swcEkbzM8vVqbT3Vh8v/fAiAroXoMVzBDFD/Ki4usbAxJDBFi6f3DaE93l+GEXyCBuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpffCRA9TVsSAnZWagAAF8UP/RDwB/PDZjr05iTFlQH8\nbhfWLC25jf2JMsJb13cuqZpBgsbh+ygggVIisskyFnh/IDOUk1njTT4SqXaf\n7YtPLm3ZP4oMjMo/wyxTdcWkFtLP9sUNPizDdB+bIrPH1r/pYMFrVnhkCROZ\nFWQ+EsH+44hgZF+LpRdhY6vHWyce8zMXdG/4VehxzQX+TEyq5Y9IdWu77QHi\nDM7ziAiQ/XfXIhiw25p80J68M3Z8er4uThka2ed9iUsVrc0cwqfwfjxyCQKM\ne07BggIg5+BJPXK7xAf/C25Dd53InXn5fy2k6cG0E60yvr19qIl0mqGRwfyy\nZ6xXh/n//r/lr1/leKL72zwvwoTyn370OnIlFdvLQyPafn9selwlWjJJoc78\n+wKD9E00wutYEV2uky1/oRxF15MWRXVzmOyZcoq4C5y4ej/oH1IDEI62w5GT\nfA6f7qilxl+gCHnqNzOWNt7tbs4MP65FVl++H20LwN3M1mEksmfO8fwbkXIa\njCpHF5wyCJPl52iv0VsZFrmY/dhA2WGSPTv/4IBr3C3nVoiILIG8PEImFJT/\n3cCdxK1dpq+pGRs8c4Xgq5ZdkEJ7WwxnkMxVVjGbPBkhkYMpPZR/uIRLBG4B\nlIEQlVlHneTVESNDIh3nMSc2DajSLbJhVgunFC1RkqmS/ObHhsvO/cAIgxO+\n4NEg\r\n=01dL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/list":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/menu-surface":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.78305b6d5.0_1637783518773_0.10491306316990645","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/menu","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.43d08ba77.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bcdd6a39e8c962b122ab75b3b209827ad510da0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.43d08ba77.0.tgz","fileCount":37,"integrity":"sha512-C8G9wURGHJRNioRT/LYILQ9pP7UdmxFUj5zX3lTgNCbnUYCy+8rDxRwodKSHa48LTDwnFA/H5I3uSpA2u7TxlA==","signatures":[{"sig":"MEQCIFNxV8opszZux8VUDWBcYJWACze4Vz15vbLg4gPqGDGGAiBAroUFtodYRRISQHveu9vPdUknmAg5Wl6YteiRQc52Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxUCRA9TVsSAnZWagAAhG8P/j5zx6O20iA/ggu7s8Ix\nnA917pjivV/QHcPJdpb9zBLnRCi2d9mwPtkZRrCR9VlQH5pC6BfAn9xjwtAq\ndW3xeMxHC2Gugj51zu59t5MdK1Kv4mlyG8HDg0jWvYv02TrF5X7PCtNmUeiW\nrNq0Ge7XTc1qEE77UgQ+IaGru0+e8UXwr8eE4v2D/S3lKJLqYY/2p/bdqQr2\nA07qhEzu7mhSO9kceEIScqFieJsD8ogTTgOx80BJLJI+eukSuEKNFg86BGip\nd/Cz8rPrCFO8HgJvkiRpGE99gll4Mqszci1pwXNAvfLB0E6XrI+EU//KjLUL\nLJyPOyupTr1VZ09bN1JN6jWpvy0y7Le/YIwfW3Z7toMDpbH10W3HAQZbN/iX\nNtFfG6Zo4dtvpabn4gVmAxrKUMjE1myQ1K1wNklILfmTR+15D5nPcYbO0EzD\nfinbJjTuBociNViq3Oq//IzWuWmbjWk2WB+SzU9MF2/uDbCKwkN39Hcf5eMJ\nmRbN+thFabEDAK2c9GOalYufMI66008HLPi2ZwfI7XBIw7P4Ec9MmE2JQjFV\nLgOERMfq8rTxc5S1AvdayYHPZgh4jjmTIuu/N+p6fYkHU2fuQ0Ct4r2a3yaJ\nwF0oi+LrrlJwDHBvecbJsLr4ILEsnZilr6AksB89c6SYir63BJ9bMKCzytIw\nMDi+\r\n=1lFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/list":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/menu-surface":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.43d08ba77.0_1638313044018_0.6446792037059621","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/menu","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.17a072535.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c4b68ef7f81f837aca49f7ccea9f03e71cb778c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.17a072535.0.tgz","fileCount":37,"integrity":"sha512-RQIhFbYM9aurfI3gY+GhZzabG82x+KdM9Sb5j+l71xqwCLRhMw1eBpt8xKbayTniJ6f/+TwIHRSpSQkTbBxjRQ==","signatures":[{"sig":"MEYCIQCBaHw9b1Zonfucm8n1Xni361LU20qSQAH9tFEDVDm9MgIhANbqsr2C857cVABalJ8D3fb1n1lvhLGFBA9heV+tzaop","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsrCRA9TVsSAnZWagAAtmUP/2b61wYjPFs3VzwVs3/g\nznu3ubC8c1BBlEyhf1PYsofYESWf9L/ei5CROCIkIY/js0cPOByfstEkEpIy\nKzTTjoJXB7MO0hNr55CJHU7/PENLXH891xyEHvk8aWP3LJ4wSqzfIOYvR0vd\nvOWzMJ8YggCQHz16HPms3mV1oW1wofa4n7l8NmgU+aIAl4REJNwcIaVBIseL\nN7a2XhdvpysM8wWBcuThGAtQXRNIIukyvWkVoIGwKtlkaEm9LM/E0vziP8uO\nEB//JD6kuN4ihJlRPPR1TtmktZ4jScXBns3N/70k/xoY9ZklDiF3l2ro4kgQ\njTl4+bw2wFzvX8S2m9Gw9yvSbLiQFX+8eeNwaWj9PQUZEikYcmttU+sG7yl+\nGmatTdPjuz+kn804yORD+eWvYapWibYEZDFnwQ8dWLKKvCo3JsAhYYepQtEF\ntOCIhjm63rfBbe8AI3m3bf0rU9Nx4L7cn+3inlWt3hrcplr8yuh9/M8LhovD\nAYbH+MGktYQvgoXB2S9GCftlTnT90jzu0turviJndE51BMBP079CnhYxWcfB\nsCsZmCLoFGxLS33MVs2WVO3eCB1xq4WyWEFBR0crEY0/A0DBCbNy7FXmW6Pb\n4l1DcsO/5/HrxMY6JSMBztamgxjVFLDpDKu7yk9ztK968pAzB78S5foIG0ob\n4q/W\r\n=aQT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/list":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/menu-surface":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.17a072535.0_1638468395253_0.38318131867076155","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/menu","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.5d809696c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a90ef29862863e262aa7a28f32f3d92901d98645","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.5d809696c.0.tgz","fileCount":37,"integrity":"sha512-L3S0tl1iDP3iter7kMvLGsWDOmlVfyg8iYPr3QzwdGNbaaKJvSioYNwkyU8rq53DEH4wXx9kZJJCwYMR0KnTMg==","signatures":[{"sig":"MEYCIQDzii0nQjqdExiPsV8LUcJnewvHQ1rtXGLmO9lqVFNDNAIhANOt5nXVsLsFYxGK4krPtYqDrHcE386c3wsO52PbJeJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9ICRA9TVsSAnZWagAAdDgP/2h5INGn371igCFsH/Zs\nIv5h0/LqYW1ewuiXx+Gjd1BJsUxZU107v4UnM2q2oEFye7IRlZbwz1AiIVq9\nwOYk779k1H+jwvxzca8+FXCl4ZmxF9rmD8c0WtkIuQgWcAQrb+mNXnQVUi/3\ndhOLpUzZxg+H2ZbIuBIc2Xm/csGXS3lzzREvfaDd0Q1zjDtToy2vthbStmoq\nWxU9LbKjiYH1JJZHt4xNBRjr6fAcD8zkbg0Lks3KA5zgyC1BMEYbLZMr+XP8\nPooda+IsPYgLkOiaxRwp0Vep809FtQgxNsaGCuo7SJrg4gSxP8bGmAJoJzbM\nh0rTpvN0t08w/vnPFR4lPeFfmBVDBFx/BB8kUyitOPkC8IA3t+q+ASqAZIl4\npI2Y8643ZREcFjaw2LmXfteSs2dVQ5FCkCyZT8y6zHsT0j4Ybve/fF1Fhx8/\nnVrGqSEHWyYLzHplFWc47hmSSdHaiPj25R6QmkQHC96x4+Qg/72V8caBS9Zh\nQFGAl8trQq76mCEywFYtO87QDdo+h/cYtv0flCJJOD0ixjh5/Ke1+7Zlwzb1\nJnLr9mrJjLaNIHggepR0i+heHFTl6hd58s3xZKSXKgKLemkiDTLe3Kw1O7PE\nTmk+ksQXnxXS7VxRgZCbGGYgwbaVXhYX0bNl+VPXqVstxNxWX7qTDn+jc25G\nuADs\r\n=eFcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/list":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/menu-surface":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.5d809696c.0_1638985543502_0.8065123459052155","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/menu","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.b6510c8c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9462aa3536c841dc26066fdc284bb03fd198f50b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.b6510c8c1.0.tgz","fileCount":37,"integrity":"sha512-7i8pGT3/DjjqDfExhbCQcmAjC/v6IaAcLsOOBwL1n5nAgjqadiLXAGHMz/FDA5/z+W4ifcb4OG/2XDM1p/DujA==","signatures":[{"sig":"MEUCIAJKedT8+CXMGuN5SNa6xH1cPWakghp+44Ken5ePDGaHAiEA+g2TBDHzXwgd2gQd3BD5TUHjUIRyi6C1gaCKUDGuoro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPR9CRA9TVsSAnZWagAA+lkP/AuNa/fUVpUx/qFsQCzt\ndEpfONYZmFwe0EEH4an8LKr973br596e4AHCeWVZO8F8tGqykPAu05sEfxAB\nfXAkPR2p4ZTA+b6cG6D38Ti0BrwteW7+WByU0HDaOhLDdf1ffGeniBGIyN31\nT7+hJt+Rmmil96aqD8Ryw4It5K0dbKHl3iXGONjuvVqs/Fs7Gbzu0Sy+tHZu\nh2tFqjEIEYw38wiadC2EGKRiKQE9tI2xYWd6UEpojW9vb0bRiFLj/zGhBK6S\nPv8tmYrISslWwU9ljxQDrZdBWMZrD2mzcwI3CmVNcsEPhqb17vOmAuVTEdiR\n9iCLa9xsLiKw30Ig+9vNQFAcU0r+MOimKF/zkojoYaB+QBvGI124ECerklus\ngmKh/pmJELaUsN07sFEi1t1xGnjjVfFILjfXZH9z/t6DlC+C8duUiYF4Wgmv\n1GkuNYTahWbeeeXU8At6DuDNn6zm/hIRoiz3aTGMrbFDPlACPKdFvvRMuOYa\nZfoOtBmvuiMN1VqYCkF87ulAlYYfa2ANlVlpDqNHVD9kbanpF3eiDCBN8rcU\nk8le8q78xD9S/DkYojV8rfzTg98usM3OY7UZ+Hjlkl6HOQUAMSamXw/0FKy6\nZ5m1YMI9tEyvysyWigcGYF7egB+RnKDrF2ur0wfVxyjoFDD9rucRZI8FXZLm\nHdXB\r\n=RicQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/list":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/menu-surface":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.b6510c8c1.0_1638986877044_0.187792313480869","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/menu","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.f460e23da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124e585cacac7acb76538da8f3624a8cb3d3cf4b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.f460e23da.0.tgz","fileCount":37,"integrity":"sha512-Skr7Urf1dhK57ghmqKEsft8lHP9RlLzEszFsB/VCHXwmOWDih6UQv790wRO5hh8Aa3ymMhdmJhHuublgQETTZg==","signatures":[{"sig":"MEUCIQCKm+2ojHomVS0qrj6ZZAc+2B3gpJ9bD4unk5/jEncU4AIgOCTm2taRZ2RI268aeOlYeMBNGMhY+XDa/oRwQq1k8hU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":777627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3G3CRA9TVsSAnZWagAAx3QP/01dTwCXo3LY3tXlpcLR\nEHpLG60++5ij7xN55qrjTnI84Xz5cwZAAVr93hCMNwTj3ybF6gS4ouQpva3R\ndwRw9r28ivHfLyHBWkFhkdHKl3RQSFZsYfrSq+ww8hp+wC4QZhq+OTbx5v6I\nGv+2QKzLiHmN06bAXZra5rSxaF0L49347lIFOETvavW0aO3yKJzhZjcYR5h+\nXVZK0bcKSvh9L0afq9Tf3cnB3BTBvW1buCQY+eiFduV9VZJrkT0JmGI4k+PW\n6tyKeI/EAADcqK9nUyKi4Ztioyzn4dTA8vu0CMWko590zSZPCKNIt889S2X5\n6dGWIVYRit9CIPrYpX4XkLjpxqcSLtx0Bfu5vLiVhTA5KTLyl6tqHSa7tHw4\nZldIE0zlnwTZpi/g39mK/3VLLAX2yfukzgqyAZNMDGmUAIg8CVpaGW5/Ea0E\noJWdUZhwF5+Q6NRifRhDnB6H+HrTXa661EY6/tkuXTGdeB2r6vWjFGnhpZdD\nwIS1C5AbX6CsbWfApX4h+xdmiWyATjd5rvuy9Rxa5d+euG7yKKgxAm/4aszL\nhHRiBOMW8puyFK5HfZZiSLIo8ktJXiLfXmG4JtGG2vrhDe54WgYQPUx/idPk\naBBXlw1lpekOY+vLaWnc/4KBzNScG+B6VuDsA6Y+rXNYn7C+iQdBZLpOTrak\nzCMY\r\n=6exB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/list":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/menu-surface":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.f460e23da.0_1639150007096_0.06215352318487577","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/menu","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.7d8ea4624.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1678a8666559d14d206ecacbc26c72a25c975bb2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.7d8ea4624.0.tgz","fileCount":37,"integrity":"sha512-Ykp/PEMZCdCj43P7oauSj7eAXnAjg+UvRIifdMWQeYTlYjRMzrnToClcB/nv3s3JV3MMfz4/7kCwvO7aoRkXSQ==","signatures":[{"sig":"MEUCIBIiiavL3+OITwGPQt+ff5lVWVGcFN+y+KTcKqxVWIaJAiEAt+M/2FkPBqPm6IPnXsSDS0jqv+qjTwzCt3yzMVyHZN4=","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\nwsFcBAEBCAAQBQJhs6rVCRA9TVsSAnZWagAASLoQAIJsPesNZue3GfSFUPa1\nagFtyOCBrGW2XWqOvOA6wxueAbOqZxjmF6fUSh5w/ugRPbGDM9Ew89LiAgYX\nOZazvpoUuH0ykzxvabu66gEnrosUPNG7Ny34jkdeYpPhn1HnPo4CACV7NeDH\n4cx4bwUvCBY7forBywCb1vx7SQT+wnetWtVOdQKKvzmaF8NoLXRUP87Etl0d\nFIb9/TfXp94d/U6lVibtboac7m9SjFqn1scqVfpp+cNOarFF0w2g9nMdJJSv\nb779MrF4pT2V7LeDihocFaowGFYERetIXrD/j9YHvBoBVZFH0xTlGObXQ1Pq\nT2Gtnlts7LDUvvT+AXOMAswSskB7TyKaVc9NdJpkmjcsOAAIqc0AKdorCgEa\nUxw5FYKdVq3K8z05KrvBtBYIO5mQDEA2cyo7N3r4QXqhjq8wZDdZoMdRE926\n0T+XJhtT8mQHENQbk3uya0bKg89paTdVJIzfvQvyf5qJdrlOzoI5/ab97z9O\nVXnZ3h+C1P0az2KIBeV2LIXvifbHf3lQDAixOei/Tb6pbmLOB2TgwW4SgeA6\nBcjlYRC7NUQlZaB20Ea1Y64qs4G6FRBEdI0rurRWcH348KwSAxSJNcrmZFVX\n8lSpjeuVMtm4wNjKK2yyEkJHkY/hvWxrghhw1Bt5eVmIAd0WJ4SgOf5Umy4e\nUnee\r\n=A829\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/list":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/menu-surface":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.7d8ea4624.0_1639164629528_0.8875957651525899","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/menu","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.8fffcb5dd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d13dcefc3f5070b1f7a917432f08bb16334669ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":37,"integrity":"sha512-TsXc5tYbDliu71qNx/VfxmBVzVwpoURU1zf/npqEClJtZQsQp87uUsGhCzRRR9SQZeHHNtVvMYTiy+5LXViKhQ==","signatures":[{"sig":"MEQCIFTgdC5sjMsS/SsAe6zDqnyV1TWYm55IzE6VMejCOY8aAiAsZR70jpgYl1Ha/hol86FC6iSl6N1gcUhP3ILIGgkQ+w==","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\nwsFcBAEBCAAQBQJhuFxBCRA9TVsSAnZWagAAFcgQAKFO9qEPflTeTZJUt7ts\nTcigN4r6IvWZqRI6Cl+Jzy+4hWCQf5Ol2wIfes/d40xWXkv3v38P9uYVq05T\naXH1YSytam0S+GCz0NCaKSqPjT7U0stRajmk9YlYf4xlVyhm0VOf4Gxvo0Qw\nh1H53nbaAwBLHbaVR83Ysxc6v5uPUJZqWZutH3nL0GrFiNOws1vyl2+9S0Fs\nzv4cwU0cx6Rk/xAHJOmt1BKm5TT+QoX7xydLKpik+fSSe2ic7v1svGfX/rvl\n029gSR4wgU82UepjyjItvm5NZ7dQHGoguQ5R5LHcbHhZWkjozepk4QVYL4lF\nJcSu9UsWxVQvCNVcC1qhrXBZJQv1OlpzEPqcCXTKTtdmzb0Lj6Jv/Lb1cunF\nI6EcilNaa8CymFANAfmN7/rkVniOsMwi4X4cbwG9lZPGnMKt+y+3wzFVl4E8\nNjmwgHP8a1WcXgculhEjGShRk9UmQtqCLEFbDP+LALUou6J5V6bTUiI1RRll\npnzQJnV8IRaGXV2Izuje/P6wMGMQcYZXvSMmtktPTLNGJ9g739Q5z68IRC7r\nBz/dQEMkzrlPxsW2Z1lsj9HCq3qFdbnSSeMEuNd+DBNtT2GKABY3rjGB8tM3\nUcHX2kr3DiXt6/vRCZcofBrIMkHfTuB3pfiJiPb15qhsUnxqBXpEBuKAcJeF\n3D2Y\r\n=wU+D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/list":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/menu-surface":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.8fffcb5dd.0_1639472193335_0.8317971787157767","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/menu","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.21e1cb9be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b17e0ea3cf36d621d200118a5d65e41fca19db8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.21e1cb9be.0.tgz","fileCount":37,"integrity":"sha512-lvVQbSvcCvvnZ32tVxJcsRpm0pZbit70HXlyTJsLRLwJXUoNM7XRb5iEwYy+09NfcIdaKx1+xG4u2Bb66ssmDQ==","signatures":[{"sig":"MEUCIQD0WwYQdShZSvWHGk8C1YnS98ZoIjy+FeGZzWQW9+DHQwIgH6zC70+qCq6QXi4HhL8mgfdLgL+UoaM+sVjZb/HAJDs=","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\nwsFcBAEBCAAQBQJhuPNZCRA9TVsSAnZWagAAWX4QAJDnGWUAFPR3edn3SFtB\n5N+j5slE1bbgYT2lkzKQzMUdHZcHbezI/zZ7Y0deTPslE1yp/y3+SOiaV7Hf\nNXB3uH3b/1jSmc4wC7GemJ+rznpQETsHXV2xnhIwQnMPjpsfBSc2fqmjZXOC\nMovUeIxBIs+1rgS+dWFXImMcnf9JRIcJp+IsU50rOvU/0WxXqla7HlC/ItGC\n1xH48WWu+OfhfX4L6CCE7GHr8kW2szcjeBycbLqBFOw9UluUx9zz4NBFgtyS\n60xrRRemuNlDk8f0nOJ0mn1v99ObSDDySkFx+0hXoy3GCnIOEbRQtp08bjls\nzdFt9zJpvbh2KWXqC6Egob8XEdNOFEHH+lINfSmHPTYaNPfnFV2vE1LwUHwU\n/ChHWarskfoK+0/8Ei0KpF2x3bFye3yfQYvjbLZakzHBL5fIVn3OpLN/qa5P\nXvLvlAJI8b3/a3vFdo36UWPGVgFYTsnqJemdMTrWWymwj5kB/Q2REVVWW6eM\nJDhpuPA7MEzeBAVIEKtCWdT1ky6bHaJoYwOzGhaichEeTbEZWfNYd0NpE5qn\ndpGfHtAMwTpHHtJcRf2Vi6RjHGbYuM1laVxyd+fQOI334qKZjBB2S05EJi9r\nWkbevE5rrvXkFftj576NseLNT+Sw5trkx1KOls53n+wBEA0r0g4jE45l2Wn4\nxY2Z\r\n=t44h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/list":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/menu-surface":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.21e1cb9be.0_1639510872826_0.1279066374997364","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/menu","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.ba78e8724.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d0dc9a6cc32cab4e936b8456bcb18ac20a3c3b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.ba78e8724.0.tgz","fileCount":37,"integrity":"sha512-bmmb9q0fATLoA2NYd08Ki2aqnVgVU1rvc5GJoRLc5rOvCGkVnGEJMJ/32O5U/96AsZMTe5IcIfsIqHE1pPz5iw==","signatures":[{"sig":"MEUCIDIiDRbeve6cIvRTsT7OVY9pQRgRjKFA7VLpQy8Bl+cdAiEAqsEtl119jWQMFjpPzXd6SUSfgMntsiHrsIuheGlZogs=","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\nwsFcBAEBCAAQBQJhumi+CRA9TVsSAnZWagAA+l0P/3VqLykO3LXPWeN4nko+\ncaXzvfSEf2wa0a8x6p0uzyNe8BV5MNKykzWZe1KmwXCVJfwhbmvQ0mH9Yywx\nrQx7dp+YwQq5dghYhgh6+qdbERBi0LhgpLDikSTUlyWjQJTNZmMB/JKlMFAM\ncpkoJXS9fv4anaZWNg8WGW3xyCC8+YL1XVMcocxWD5ed6Qx23digJtyKXbTh\nPCShW5QTfh+6JicxsZU25vnERrdjGUXJEL3RPvTDMPkX11q9tFR28ZISKwOe\nCS3LKiF02h0APNMavwi5dSKNrHyMonEveFBj738m3KtJdQgSnkHpqlTB1w5+\n5smIWFrAqwwoHyxzU/3x/OTUgCkXkj7jkQEo/TYGp4IufMpZWB/ZLoQkNRWQ\nu+7yU1sw4ULbGubqn5rll2zkAKD5hSTYD9E+xI22mcTGdbVBBeP1Y3kxGwTZ\nFJhoOnxv5F72Uqhz1nV0W3R5GoTzF+RwkwLmg8qUJ+iBibsbE7+pHTDROoOD\nicpqGVz7Ga1VLMwEyvhCeV9KlHCn/TBFVZSJM+B6m+lYPDJowsGOdq4Zc56g\nELI9WXq0PA2RTsceSm7U6KRZ/EGybF3Ap0UTBU36E1y4dxChPaqOYDr01+Rt\nsB037SmkT4GFIMt6zuwB5z8uR8ujW5bK5vWM1uISbiCQSkzoYhl5S789F0OR\nege0\r\n=ztV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/list":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/menu-surface":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.ba78e8724.0_1639606461870_0.9891114762552975","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/menu","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e3e073c00.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"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"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/menu","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3366a71d7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b6e29a97b38b05ff0bed23192f44ab4de0a02d0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3366a71d7.0.tgz","fileCount":37,"integrity":"sha512-J+ty3PO6qv+OlO9Rl0ZJegODw+ojX+aC9/COyTgzgyIJxNUinB6sfHCfBVk1q1tht2d8Ko/wQshmmwU7VvVYeg==","signatures":[{"sig":"MEQCIBIOSPDkX0ljumiJWMq2i9sBxJIMhaBy/8wJPNE4o7YdAiBG0p8+99Ys6FUC99kF0r6tiYRq1dSq8Gci/rkGrfOX5w==","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\nwsFcBAEBCAAQBQJhwxskCRA9TVsSAnZWagAA+aQP/29UVGjWE8UXN0NumB//\neYUpuiWEjzKSjYuT3NAlw2nGr7Xkc7ebztq4m8y3MbnzQ4yj1CwGt/zUyz00\n6I5iGXrwvz6lheth9Nq11OXncwHsBXVu3eyPnLDixBqilXpWgz3MiB1X/Cv7\nwCV6Y3jiRbmLuO/Crmc+1RNHkGRX9MLm/6Yy0UiFygzJ1tctm8FdoNFfGce5\nq8/FG6AatZE/YnRWu0757aquF5bVAM/ZstfntfmmlVHrSxYNFvXlkwwJ4+Dc\npnW195v/CofMGuN87CB1ybQyrZc61b7fXILrfbylvmV8Pw0n+rLd5QDp9wQO\nl31erIRpJWWmEoIYr441NrKD2ZIARestNz4qF8KdZua3q6o3xvQhPpqqGzKw\nM9QDyV0jbfeLPLTOUNXqkFNQ7dhwvl+wiU2kBx1YX7Sac9goml3sdZifYwks\nl/Y9ifgFR3nUoR94ZtFanz6TmBM+dUfAvj8pxNHYwVOjd1GL5zKjdZ41Qrwc\nzhiZO+1tQ3G/aEUrGvN9IO3GC7oQ94WV8ryP9Xpyuc9gnQxTVtk4jmUzrHOu\nqH55NPgfmGPICim1cSGSvugKd09RHu9L2EgN4gGi4dQdGv1JAk6tGBD/7asZ\nlT6SBCU8t5Ic3P1HQNNMIIGmzuKdFAUCvgmXyvzYL6dBt+5wGLVOFP1ETHcA\nSMXR\r\n=PlF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/list":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/menu-surface":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3366a71d7.0_1640176420346_0.5100975983593841","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/menu","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.c047f7c19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b27e3b0557777eb93c1b2b38d24629ff98116b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.c047f7c19.0.tgz","fileCount":37,"integrity":"sha512-rfdcOl5NMThdz5zcEyVYd2lf9+khBgUobBCL5McqhI7dYlYKGLRs0rzGpqQ5O/rLkr4kjrl4DeMF6nhP/XnRqA==","signatures":[{"sig":"MEYCIQDrhIQgVhtzsx0eQCWLbbUrBvXBjpLp8oxusZxi46J3lgIhAKx6fk6xVdLkVEFAig66Uoba5FlVEcTok/0/Np2R9R84","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\nwsFcBAEBCAAQBQJh1cuYCRA9TVsSAnZWagAAJRUP/1BdNVobNyHPuX/cg/Cb\nTD6sSBWAFK3wHFogqIpgkPx3UyrUQqb2pmAqglnwDpktHmT4QiQNtTTJnJth\nl6m7QSbAv/gvOPwl4Mhx9mI6/lVEB7OpntD9TXiBzC9hA3H0gsY5QaPBUjfx\niKLrZwfCpv/zZBi6RVAdF/PnP15lGNNrOq+35wwhcjkZC6t+sMdZtxoK4fah\nZLl1sBl8mlCrGJRJRRPAFTXtA5kMVnP9IXwMGDX+ld4qifoqaQY7PgUReY9S\noHuyxoFNVdAUEFkK/dWAAN0ZVT4CzXFxSGlfp4uDsYkhKOT3gl0flGqrXn2t\nPVEYIMyAZzg+vEv+OtP0a51ToGLtFRv309WlPJ5KshCIFDfR6/iZiWxuDwrq\n43G0ZFAVD4DBi4hsT/Ak9skPPEPqLxcM2fj97957NmKUCBevdX6W7oltz2QL\nk9aU9G7z7Ee1qhgKBpnc/kQYs2Iqu4byU7AKXUL56IV7AAtM877zMZTYoLYr\nKFvpdaY1Ymz2qZ+fSwxZxlgzPLMd8pdSPUPb+b+aBMqJChShjMj94gCwTo4C\nPfZLqIQexG2x7MpCY9cXhTCFVIbJ04OzBmlsuLEV+rLim5UanDn5dVT/oArE\nXh6iZqoduOv4kqLnVVomz/+HNNL6kqUWsetEaop35H07E10Ad7lNCb1F9Mxu\nYN2v\r\n=0sI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/list":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/menu-surface":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.c047f7c19.0_1641401239833_0.037820312657319555","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/menu","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.05db65ec0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fb08a4087a5a9f2eee694ce4ee77723f8453ba1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.05db65ec0.0.tgz","fileCount":37,"integrity":"sha512-0x9E4Qe6QdQR5s5WGN6wIAJXqOI2ymHV42igURHHFmcDhqIxOscVLFpSYw+j676egfKtpmkmNEytrktqIBnXjA==","signatures":[{"sig":"MEUCIQCvXpgU1Pg2vZ9PYcEgIMpl0y+c5LrZidwuTc1wveNtJgIgaoFNpqHUCedYLrwr9P2yhHy7k0bHcr2cSzVb5fsj880=","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\nwsFcBAEBCAAQBQJh1yO2CRA9TVsSAnZWagAABJIQAKHzL8Wxwt5WrNxuacT1\nwt0G5EyB8H8v53iev4A1ddHicnFJDCR0hGQKF7hsbxes5fbShuwruCiWvN2y\nLFaZTMqcB3GMMm/LV6kmvZ1h1ki7iT5zT3jK/jIATdINHkZlWf85YBB0Yw78\n1/KpKSIIXKCewNXnu0VJRINjUucYT7Y7w1Wnxf7tpp3GtpXfYQSNsJDznf4B\nrxIkYuRtdg8o+ROXO6OpACJXKUI8EWvD2ZVR0TCSQJ11rzhvSo1BykFZY6Gv\nxeD4ccytIbMfjCQF1kFx6hsT6YA6OerIp0r+9dK/04Lr9ZXmATCZZtX375iA\nJeZqapUCJwJjv3aYkqZz/TE7xHYaA3Sv2b/TtgFthEDoOz8KrO7Z2ToklfOy\nmejW+KvOQoD+nu25vMyVfMEkmxC27xKuEEbT4O6m10N6yTtOglNkrCLpGQtr\nXJ0MJZ4xWfc5SnTzdFj1XBOdB2ibY0xqumnirG7jvB0n2zsvTkqWQrQcg4aQ\nKhi09w5ESPORWZ8aJ1PYAGuo8SUazFCcE8lNfLt6jWvArRGnlMoQItKP2HcX\n65FcdydcWVr6oBC0CQ2wjK54tQgffrow9tx4zfYbFcJ0/E4zpuLqdHjcyMMZ\n3T+Do59w34sMhdYGZF9hXtZ8U+78vzf9WLBZwEiAE015mfjABAIC93yW/bkx\nq+0E\r\n=muzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/list":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/menu-surface":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.05db65ec0.0_1641489334499_0.3997889523895788","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/menu","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.6ca8b8f85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3663ec15f2a6c6ed2e91c6766172c55fa0e2ef1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":37,"integrity":"sha512-k5qXdSeCsXEF9Z599o3kr5h1Q6O0TO80GYGwqsAHquPt7QaJW92OxClXvOswKT7VDOWtdaxqY1QJhylwWKxQRA==","signatures":[{"sig":"MEYCIQCikBJerhzgW2hcIaHX246ShLvptSt45LGfalOynwNJOwIhAIpRooJpbbBarSMuZvOQcIzqlcynuaDWztR3g8C1hr4M","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\nwsFcBAEBCAAQBQJh2GQcCRA9TVsSAnZWagAAV1EP/1CY5B7iC1P+BdM+HeIt\n4CffdWkKwojhSbV5e5s7NH7fBb91QNq1WHeP6eRy1c54Kr9Nt1FXcTr51AfF\nRnMxXehvNpxqHNsh0NTOnDeu46f0zpOMXwpRAK5aT5O2fNt/2hyPunjipadR\nOe5MAZQ2Az6j56dopCJU0BY+BijNE0h+Xat97fUNYKUq/FreVboiWp8vsVFL\na1pRx4o9bR6qRbAApwnBYlsrz/YWPyKBwQmA1MG8ouwzebykE8AWVn5XGv1s\n7kil0iGelT3nklby/WLkH9+0ygqGGHAGb0P+GSa6COiz5OPlowmGrvjItFKn\nqv/6tYm4Ri6TbO2oSB21gWjzoJCcssa8iwBWnkZXUWNiwnVtj8baLYIXEUie\nR3F+mM798Jq6WTQvlppt4Js3wSSeHJP0yq8Xn6XwqE3Z/yfydRn+Nw0MhVwc\nLweYBQuiskDCOrs9vDDW+gxhD5nIlBZHUglWQMGjgudhv3iilQQkFx5rCcc4\njHzlVml+z39KBn49u2uGHnDcrc6ByXVp7ECP7a8Q5Z1fWlOD8RGeNgLwBaFM\n+FW/amZn48A58B5KACX/87zQ3Br2r4SR4fCkYF5J4TehP6ThYOQEeHfpPSGG\nJWZ04W66Icej2J5BNhlFNFVitpoz92lkEq8nitX3G9fVkd1bgW/z9TjHipJ2\ngEsR\r\n=pGsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/list":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/menu-surface":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.6ca8b8f85.0_1641571356776_0.680401984654039","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/menu","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.173ee7a7a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8755b2bcc37831cb3d1bc634c02c0ed4fc931d9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.173ee7a7a.0.tgz","fileCount":37,"integrity":"sha512-D8I3qjrzwRGHp8NPoTD6xFVfXIEBAH/vamHqlLA4GYjW75A2ZBhlc6mC8kmSwN523GmTVur6obUO3JxtZAeJtw==","signatures":[{"sig":"MEUCIC4h5wrpb19JTPiIAH0vaXePuk0PMRn+nEqavCVtVbY+AiEAzLihDKKDWbekdah5fXofs1UJKGQDmNR7DD5ATmB/v4A=","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\nwsFcBAEBCAAQBQJh3GULCRA9TVsSAnZWagAATNUP/3ie01+svOZn6UD/e6kn\nE5N8CtQ8EvcrQT3b6qT1uJbLkLCfWUOzic6zEvhxXRMpaortpeCArq4d3L3q\nt4k6ewE5wrzLP6BI5I1m/E3X5CGxYJQIA8d0jPCAm7oatTXOla3SOrylczY0\nynPoupJx0vANTR2D548Ak6XAn5IHIiDR2J6fGW+d+1CHX4P4OagTTiYcUlev\nHSrf0nc3ZTA4S6tkuLi46gcymv1dtomfyJykW9hITGa3btK8sKtq+WzUrM/A\nLImHL+Ik9nQG79A+19AKPwEtI+94pw3OP8cw9/c/Dt4oSV7C4hLTOME7ggFy\n+XdB6+2g2lXI/l7Zi956R5MQf7mlDlrg3UsLgyIBJpmPgPoVe/2LFMBSnIny\n0fYBdeqVMyL8u7FDjZXB0PGHQtaLbH0asBP+eH081e7+K2qzWsCYbzTrbv5/\nde1YMnq3KFJQriYlfShS0itSiH43NYj96V3oqRsRdPe0mowpcgDYY0N8XEqT\nzFuiZOUF26PqqhQDShlLfg84XzbQUWMpw/dErIH1hnHqcQS+yywtA1kExXke\nl/izoh+jhedGPMK5CXCix1sdGlzAf/AJcO607xJR5xzW8TcVJJp66tF0PiZ3\nd7RQU4IbRw9Zsy+oW0IwECSoIl1yr/2shNWNQjJ007hC9r++WL51NTnv1bft\nxjg5\r\n=ciFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/list":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/menu-surface":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.173ee7a7a.0_1641833739676_0.06903187970469649","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/menu","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.b704e4dfc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adcd60b378ffac65c457e6d5c443b5224a139bc1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.b704e4dfc.0.tgz","fileCount":37,"integrity":"sha512-DgMVKuOyJAm/RbuapUL+p6XqZwfaAkXouEEhuURufnCILOluPIt8HUZpIEV7Rv3nAsavjfLLxV39ZILuGmL9EQ==","signatures":[{"sig":"MEYCIQDQsYIzivitt2U62PriEIY40wRVX2GnERX8DqWy/fHlfQIhAPOvPYbUOJfj6uf5Zk+avfzlhaN7x3SaoYcavFaRiTmJ","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\nwsFcBAEBCAAQBQJh3HwsCRA9TVsSAnZWagAAXZIQAIM/jLnrnPZJd8bq5j4o\nVoT5EPKd8Bcv7JBJasJoIa6dzF9QCBmtaJ/6UwNR7kcoK0CTyZPqXgAAJF6j\nPNq+QtMN1eqbrk/TmcByq+3FkKhQQBgXo0clKaRjF7QakVOhzsD6yz6J2jXV\n9gMULLzR3z2d1oql/VEMR9peAKJz5POCWXkoiilerNxuN8yhjn18f2CyY1A4\nFp9cKwjqGEEz0O5olz6KEO7Ex7tBJTDqQMWY9svn0/ebtHYYvIWRdOW3vlrf\nGY+Og4T22EaTJeAZDFICkBzkkwNEbawIWEGPNhuzDDi/S7t6IgQkR1lFC1i6\noW8OPOep13QtRzl4N0h46vs2W7+BKCNJopr1oUGUZuKV/NGtLjiKIOjlH3n6\nr8vFM0mPD46iBl17l7nDwDecrvxk8gy0IM7ewLO5oBJPie0lrdt0KxFCdI92\n0YOu6sr3ThHKARtJsB2GtM5lo5UXJ24nmbBZjfbDBC/cD4BOsKOrFq9Y3T0x\nTJY+r3b+NM5Z7304VJCymfAdolJZq74IzDRWF4o2utda2uGv3ZFM6HgBalGE\nUhHAvG3nWHo0pnnoczlNkk3gcrwtzKX2v5x3Ir9j4oo6D/EfZhcKwyFzTI77\nhCAeDektpL9aZ9m0su0y76sTfClNHhShlJOvCgT2LXHShXB56s9it622/Yyw\nCZaE\r\n=qGxf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/list":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/menu-surface":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.b704e4dfc.0_1641839660726_0.12133177944818985","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/menu","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.c14e977ee.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac93a46aeafdb1c42b25aa7fc3c13668f9eee19","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.c14e977ee.0.tgz","fileCount":37,"integrity":"sha512-Bt0t85Vt+Ktufuke+QwRskCZKPQRTHos2VbkHXZ3oQUcY6oLMqiLqcfcFyBO73YtR9a2Nor6oNO8wjcyFCrs8A==","signatures":[{"sig":"MEUCIHoYmseK2xVEgHhkxiiL/S1JrILMuxsJ4tBFi7O9deL3AiEAplvFAymVY2Y5kG28v2BGaXFnRW881GeIm5vzlVq0reo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adhCRA9TVsSAnZWagAAN/AP/AzVuTASJseZP1WEVq5O\nUc71tCQw2mezlQcGssbsOVzIWnmdQrL+BP72fM2Zr1eOju7Knq2fH4N4JW+w\n0+r4RbMImNXDdT0UXg1Otl7SL3U73ZVTewFyPJmxv+McS3Jmt4j2vNUZKVTA\ne/f7miLaEKritVm/ZBe3FI4fdyVXHL5rpucK86A+cbUsLPiZhhEHFZxHOCdB\nZZJAsc/SKAc+7PQVl4XpGOVgwtDZutIzJKlEavSwUpc4IqbxEni8APcdDsMh\nDbApMBHpEJPvtQPhIhkRjXGDKyL0ExCpkPPCKoCdo3eL/f1kWlk50QZ/ibRc\nE4ZdP09esh8X0mewd6xj9Baux88FpULXHfojICgkU/lY7Y9+/xC1Kk7mnBIS\neKL/gV54Ofkzg3xnmaOY8oXkoV9ehjYJkhmBwvKjK6Vc0BT7JhyO8lj4aUUd\nhw5AQcEoXOAvV5HYmIlz7M/y19t0KOhawLm6LLslVDsE0kIhL4beF6Oerx4J\nQm0OWLE5vCjPr6e9zUDCmleOvYKnTOaBI1ucq3MKZpKvcS+0HBx4z1l3z4nl\nqRSGxtyU4uADXreybuKobE3ItNN0KJCkTjXuqGBQXlpivNeVqur6F7SuGGXl\nmNqqKa2nCw2cCbTYw5dw10NywCQypFYWieIyn5AEhOZPKJbVrUp5zmqq3+Mz\n7euA\r\n=oATO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/list":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/menu-surface":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.c14e977ee.0_1641916257475_0.6066597501538313","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/menu","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.b094eaa4e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a6258b6cfd377b606c1a3e4c0111bb0420c0449","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.b094eaa4e.0.tgz","fileCount":37,"integrity":"sha512-TS3NMtB+ir856sLZ4bUH7cBdPFP8X3jl9azF1C1sWT499ak2LKYp7ioWHKdELTyfOQ1dmOqPnflpcY98wSKuNw==","signatures":[{"sig":"MEUCIQCtP1+mmKJz3SmT75i8/4YPmjmkkRFI/hUCgJguklRZkAIgWFQH8712hOtM0KOb8VgNtn5momIo1Qvpi2o7yDjzkbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRgCRA9TVsSAnZWagAA+bkP/AknrmWTkiw2cb8ec/FH\nLy/qjLytq2VOskvHoa1Tg990E6/AKFUNWCFn0mHZnp/kFQ+y6rDA9DhqhMbf\nplKX8k2hNF5p9uRbVJ59QUdrmiabUBo2h9W1C7Tedo4kMf8eMx7PBmZ6ARwu\n8eLZ47FVM6uULt92ljq1IT2l47y82U1qca7nJalW5ceifbpDkGEB6V9IxHVW\nDCRGeiAQHh3I6iKRcWzGKrQ5Ieq1BkeZn0XI8aFIBl1p6jU2S5bc/5A8SEYZ\nH0sRS/mRGgORJ6DZo1z0QkhPpsNHPuPn8z6XGYGyjGBONkozonS7zWx8QeOX\nV97dY0Tqbs34m9rVRZ+nqaU0MQjZpT/eL0fOtEIuk3ddXx9PsljlqUdV8jIG\nnBcGdoWxw0Cy0gITkiLD2MwTdjSVI69NZzN90d0VLlp9eZevExyvYIAyk0Xb\nIjRwKuRrpver51Iq5fN1C0gA3imcX+QpshyxF9AmMUE2bx4ACkmC2kUHKwdE\nmH6Z6NNFFZMMO6RsiGve6ZZRHle4HLWyjpPgYPFihvFJhxIhs7Ht6Zl0A748\n6Z/GPqpqZiTNs5vqGPAJYFGXdy+7bWUXDM1qvfme4KXaOQtNJ+0nxSd6C2oW\njDsyT6KvZNDjH+bF0VNLFC2RQpwn16LiCpbtHMFY3Fqw0uDPDDlpqFarwHFa\neU9/\r\n=yQt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/list":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/menu-surface":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.b094eaa4e.0_1642185823889_0.24939854196680034","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/menu","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.390220e42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98463d87a2889d7c27adcb8f3ada92354e0535e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.390220e42.0.tgz","fileCount":37,"integrity":"sha512-KTAld1ZNV3Ol85zghKgYMtgT4rQB+KLWW1G8YHKomsFKq0TXbbffsLblB2t085Rtfs2z2rzinbEBYaNsLqG/4A==","signatures":[{"sig":"MEUCIEjRBBOPUFw9kHntZD9M5CVtUDEe1VxPiCLvceEzna6dAiEA2jDex0H2nmgxR8mBMBiPpeY8Dtc8SPRfGE+Hp28zGK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2iCRA9TVsSAnZWagAAjP4P/3p9vF0EgNDdEAYWaTDo\nhFBumpMtRVT5D3humLrriM2sQqz5hXE6Dtjpho1HD6aVVyCnjolpVYWKo7fx\n2THot8zB91aDnYRIXcWs0g2FoJCSqbu75SXYJxoarFxQAh6YelSy7QW1Bg0p\n75poyc5VdBuRlWEXJZeOs91w3ZnqBW5FGE5Dju53w6HlaTjgVhpXS894vimy\nd0ufFXMN6ypu1a0xRSEz3Tn9t66s6U4Wd1I9ohgBJbnjk7xIyYGO1ihy3jDe\nvHbSAhg6xRwURH1xfXImrqKr6OaOn0AcwWtCFiukQJT4XrbOqqV3qCJATwD9\nUgWUdVJZa4uRP5gmXL1ubnq+vKemk7Ls8N3a762Fr3VLSlcVJ3+rZLKqVkW5\nH+OFu+XX+WUfspaiBfYAy8xvEcolPk2V5aUivNRvpV2wjt0ETpbgzZ/U0dF3\nFL4UJa/sNRlwnfZHd+pJTm9jbuvIJzrJUzKXfQcHDvEyQ7qtGkhC0EyqRPAN\nlErYgBMdsf9L0ayfU5OCNjvRfUq1fmsr2rWJMJ/aio2UA87E67YZjPAZ4fI5\nVPG5YxWd+8tHuC/8FqB6AW7o0ON+tk70xn805wtjQDbfbQZAK0hnDE81foaX\nu59cN4bFtwTEPikIhARxvF408U2tVlwynV47h6y1dytKRD90w0nuEU0s1x7Z\n44pU\r\n=fGf/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/list":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/menu-surface":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.390220e42.0_1642438050743_0.806585254640354","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/menu","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.4b5391f8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"796beca30cae972912cb4449dc1dfe9d5f44e495","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.4b5391f8b.0.tgz","fileCount":37,"integrity":"sha512-kpV4hFo/5r7EmEgtIQpMFdk/rff6L7NP58F0qrww9rDYFCuQv+hOdLxndilzv7EhOqucTO8M1bQ0qAfZ/dobVg==","signatures":[{"sig":"MEUCICXfsx6gslu7X3gCsgvzZLvJT4oU/2J7C7DptjqOtItkAiEAsXKy24825ly1rrkVfPt0VeTsjnahUV7W6hQmnniyZqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSdCRA9TVsSAnZWagAAWCcP+wczcbpkcYrjEyuOH3ku\nfkyf9kUjZzz3hi1SngSNf8DvQSSI22aRhx6StKwQHkImms+ZNOrwHOMG2n2Z\nzuVcI+vjp/8Eux5cEzUj7Iop24qtVtGnfRaEFghYtajExArCnlEybUaK3+cf\nlXyvkvk2+d+8RtADXw/CjtU5Bpu0B8jBbAnfjZz/tHbFVo1diVel9yPtMw57\nPk+aYrPHhuwS+sDQ2iQBKKM+wsciBKTYOS8XmJ3KWjClAppeIK8OappJ+pF+\n7xSNzbm+YkDelm0VuiVm6dIXG0D3Xx5Vgw96sCzImwvAjlRUh6zVAOyy3iKu\nzq3I7Xyx8znAw+ERq5vnY+C3UF8vpw6g0oTDBtAfCW+locStS8QKuIvUlkHn\n/y54irF8uugaYtDQInjzFhqmGy8mz/l9jUPwO7KNhW3wE6PfX1G9jy8jDoF1\n1kKbPntAkg15FUmhDEpGuKqZk7gwZfoYtzMH0Mh7F4yCQ8ygftelxOsSWtlI\n3/D6Uc55y1m01LG7vhEr+SF2554q1y/A+rUOBCE1IFPQbC13+vzVd7PAJEaB\n0BR51ehre8QEbNkFy9qrw4GPsP9UbmO8e+Sz3InJ3fpTIp6b08lHV+iATKZ8\nkTbGeC4CG3S8tSJBRD0M85xyg6MYs3PD3DQh2qCyOJJwt7KLu2o3/iS+KPq5\nRFqw\r\n=bSRW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/list":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/menu-surface":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.4b5391f8b.0_1642636445130_0.07720465062067472","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/menu","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.cef6bc623.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0586c906501e2a28bbe2d006acca3727c907f486","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.cef6bc623.0.tgz","fileCount":37,"integrity":"sha512-zHERdblt2rN1Y3U+E6uK+WVxWhfXdz0wpotvpiLLqx5XsCb/xVG4k2MDk3Qfjz3dVZPSZ0EMW5O8BiDiX/w5Ug==","signatures":[{"sig":"MEUCIEKm77tn+AXAPru1DnoosKsiqVYxbwyhpfzuFtlx98BnAiEA5MSXBhG0iNL4uoDdUHfP+ZoLJ9fn2exRyU55CPgQk+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpvCRA9TVsSAnZWagAAOAUQAJOPWfAhLSAFFLug9SIc\n3Jj4oQfAnTtrAZn1TLcRer+z7yuFCo3GMiDSJl7/sZSPJSdu7iY0xbNLdJOH\nalVEzGCFDDkZbVNhsULg15huKyzqDzp+IRryEpcPsJCghwq/zTi/MOI5PXnM\nG96ckY/q0qGvzfMIpXF8/xj67FkEfJWpF9UWu8dITH01kzG2caFv8V6Se3Xj\nBCpBJDv3kpuBgLAU5szd+oAeaQmQQbz7+ymkG9lWeGj0HAXf/h+/Lriop88d\noWiRujkkaGkaxXfziRyrDXVHi+2HdUiGCOXmBc9Qjp44hiIfok9eNcPY3q73\njvA1j+bM7M+jrJYSeWUCx3nSqm3ESkpV+fvXyX6TuMSWT9fQsfveq13QfEzo\nZXQXE/tZbCj4Bt1ECdUnMwSW85NarRYpyDH0gFkB5x4iGcMpVBnz8FPQVt3K\noSjWdwQRBEteAXvB/kgRHSgSdFnuZyZ87axhd74pk9szNaPn7JXlGxA08qTK\nNOVwWa4t9iZzojPjq76anROtuta6jjVdj2n9Z3an3pxPoZjtcQzgGFpxx7PF\n8UT3wQZKF/RATNgYFxqfFcy1PA32BDL+eY/ZGpY++PEIRUD53lRq9UmrB/NV\nkDH/D6UT5Uodendf7jk6ZfIAVXbroXleUhnbsiZ8ivbz2Jt3Cvzfc9dJWwOI\nV3HZ\r\n=Q12U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/list":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/menu-surface":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.cef6bc623.0_1642637935170_0.2264174708600295","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/menu","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.0379179c4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc8a26b13a73d2f507595494af4faf90f172cd88","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.0379179c4.0.tgz","fileCount":37,"integrity":"sha512-/wttLXg73aYHKoS1oJSNWUSTp+WfKg8RDaNVsF0g14fEQqsyTguzgM3AkS7TfLtXs1alwGv55+oNkTSyBa38xQ==","signatures":[{"sig":"MEQCIAd8nl34QFJmewfxG0D9dFcrUWdRMCqZ4Lsh1r4s+ScAAiAoXsSRBHr7Igk/ukVP9AxI4YzFEYYJxB914VxrB16WsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAvCRA9TVsSAnZWagAAzBgQAJv++6Y4DXUBKyP1fFI7\nQFGFLEjhLIrI0oV0ITR61w/cebTCFGyiBSagKAIw6PkkjsZSFRnnXWFQ/9Ab\nCD49OHpAoukx8M/NY/YUqrBRueNJLu44iEtguMlHrxNQjui0sq32Qe2cKNqu\njDMajQ3o/r9cSW9Qo6/RiM17cPW1VDtt+edw9KvdNKvrKzWsf4mT3Sl3Pz54\nI+bgRG6MEySLvFIt609X6sU3+HOkjK4obWx+icZof/HulvmEimqw3FCvbnC+\nr2XXU+D7TFtWnXTzaj1jpAs5L4kM3mamm9nRb5yY5yeCnxmHme0e1wqGJoPA\ncJI0u2gkWeyyFTNylvJT9Bii0kpoxyyvU8+gR76qTpCF8Lqz/GvzTleRv+ZK\ngxV0tiaL/7STPrEkuy0BEib918BHD3XlW72JU6oK1XxoiTPDcn2FbuRVxPRO\nyoaTAg3/I2ulIESuH74khPoQWQH1rRyFRnTVVzNmaW32Otizgmi5ZekLnX+9\ntib1Plg8u4VS/4mFKCtMbDHUp+juSL3CX1e/S5aXrF0W9HTIGBALpIJJ/qH3\n1cXZzYhKXowTcWUWvOUcWI9yRgMSVdJoYcHntlgu1SKn7YPXbdUT0Pxj80e0\nguuF/uC0x+12OOqjXiMcjLzBrbBfdUxk/ENQADSAeHFl7tm9Oo3UGfr5DHhf\nakt7\r\n=ngrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/list":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/menu-surface":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.0379179c4.0_1642704943008_0.43915664754539896","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/menu","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e62f3dabf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e42daa9e4f1c077c899cf15ddc7562ee2d492f2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e62f3dabf.0.tgz","fileCount":37,"integrity":"sha512-mFSgIB6IPhElrsqMqig2bZCAOFdzREZru8AuY2NbjUMqnQ8KBkI2BQZNnFGWDC4h8MZq+b2gKvGu1UMgYwQ6EA==","signatures":[{"sig":"MEUCIFvKnuAwM4O9x4PxFM/hr9KkV79NvNeZLM+qcpYJoB+1AiEA1+jYyihyJrJFvCccNGaEkf5N0apJaQuxbQ0IOebGF0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwOCRA9TVsSAnZWagAALBYP+QFEe6flnWTZQ4wwuc36\nE7dU2XHCySy/OJVOsrn0PI4WsmwuAH/R+p/ddHQHVvBlS/F8kSQPecA6AJ0a\nbYSoPTekyA2DaGof67xxn6m4GKxyg9/4vwvQj/tk9sG3cYbMhjNQn81W3o+f\nWEMbSvlb1t7mwFBGt6pB6wbl8m/E8989da2vTIWsum+A33jgm4PD0y8SrRfS\nqENYS+RB4Av+wjDrWZUwf/LrHOpYnFpI8kyUNzjPGNrKLmwNH8y8ZTkD8M8t\nBt6loEMlOdBKo64DRfhXcVhMWwO6gOrhM1slca20KKWLLYvFPFp11DLM8jTE\nEyDX5u1A6Y+pplIyHAApfUOZDlfRdVtRGkpKycvVpro3T0J0+h0EW/j9zupq\nMDnJ4atJmCl+/UvJYude0g/LXSHD1jWMXejOcWmyAtIyIh7Z1ZldlyQuXuJ6\nhfuslGMggquNv/BoPR8fyuRFPOe1F2XrL4SerSUk6RhOZUqhNRDPg8TcsI6J\nDrzdlo7/9+fE12Wi9fRr6vbNcPKxZgDC9/ZAuANeTa24fJ3HZ8KC4FSCH8yg\nU95rIKoSe04hxYD2kaSTsaObr0AG16z43tVC8vTApCcawFGEHsOZTT2B6fT3\nrjVpiCMsHGYKpmdniCC6p9XmkIo5yoXDjoG7kfIfbMaxdoY2ibRoKxmy2LFF\n6V0q\r\n=8huH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/list":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/menu-surface":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e62f3dabf.0_1642806286267_0.5499273439050123","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/menu","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3e20c1de8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5f6b4f4d2f361121f074b23525ab0bd44d952ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3e20c1de8.0.tgz","fileCount":37,"integrity":"sha512-cA1sZNJJo4meoDnhs9+tQQXlPKAMItW9z2znQA8leXpM/8QonRQrPIEDG0ZzyPpFDRrn0aRtmcuseanhV1Bc/g==","signatures":[{"sig":"MEUCIQDdiNSzdkaDFBvDnJugZlf1N6H7vReUFr9MfHFyO+XpMwIgfnZNRjk8KtX21gheXya3/x6ea3HirE2/YrrUQQNUeD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Bg/CRA9TVsSAnZWagAA2VYP/i2U+EBFKLHlyvTGEbPk\nydnGAZV7RUgglDGUFiAPgasL8IseWIq/GmF+m80bxD5bkLnPvq2ZaR+7KaO8\nKe2/OaiKHKGXy7a7SDf0zi06UbGPCQER/O6bpROBD56pObe9UdpBueBV2/+2\noG5L7r2GAzPzzr7wlZKo9/PwODuXu+47yqVTtuEPUqTlh9CD63U+SLpOeq5/\nvlqQATNRM61qZa8zpBEFLd1EnOuNTSzLkuS2c/WK44Dq5s6sbasAPdV/dqGB\n0efIY6y3eSX+Atzp8zSZ3XwbnuM0kKjOVmngJbUv3jfEQ4btyR/3sDahMSnQ\n/VeMm6NvbXiUxRMOQO7btxVeKf2Js+2aHMrgHe4yAHzYAClYgDtyiG2ibxCI\niOF8Co6NHl/UO8BgCsaHGJHiMQONHM3zrltof4TdlTGkUoILmEi10oo8s59r\n9fBAluSa2fSmsgTrUEIwGOd+tP9KU0qqyBusXmY6dL1zclIENbk2UR4DoaMB\nEDv45XXVjLEB6NiRbyV1edYx5cZcdqw9y+TrZnXi5VjXW909Hs3XfBrZrdbU\nUG/B+U0Dh7iCHLAkTWlzwWfYmUW2QKhczE/ce6S7CiVQhNkYiah/7uEKKkPC\nK+3W+9w8iWLlN3raWBI/v9Q/3s6eFi4BvbuPE3Q6aPDgUgKtWRdQ0SpCfIYZ\nSkhp\r\n=VC1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/list":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/menu-surface":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3e20c1de8.0_1643124799089_0.5223217860096954","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/menu","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.9f9d928b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930a9f3116d2e5d7fa0bd0148f7aad74d3924fd2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.9f9d928b2.0.tgz","fileCount":37,"integrity":"sha512-bvXmqGW/K4l+sF7F++JVX3mHNDwnIGwTCOF1pE9Hr4sQG7a0Ouvx9hb1zVmJJEmU1e6W8X2I7CW+Qe3puAdBGA==","signatures":[{"sig":"MEUCIQDLyFjUgUnMMnmLVt8eUlaAE3PSbfRG6Msq/f0JbpWyEAIgQugab2okfVzscCTY4ZCulgzz3yU/5PLHoss286jMYLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uEHCRA9TVsSAnZWagAAlfQP/31Xd0l76D1tFetXaHtZ\npDfAAefMnvzabifM0ShMcRkrPe6Ik/E/WocX+DOz4yVnrbFZeTlav8T2qG0W\n9n6utIhuONTBn8mzSSh/GtJSoeXiLe6tVCIWD114JLtVCNwxKtTmGwYig7nB\nQ2dwYrcjVuvJSm8UgWqcQg/spcumrOH7DBSn02GhCPpnr6lZEVWGgIdAwW7Y\n1nMQpceRN9R/r7qNXW4QSH2afOvw7LQEq8aU34roNVANVnIcHszUcBABpT5M\nEblMhu+iWtayXoGowWjoykctoW8NibChPrbMei21bm92abpMEIdrEwLiEFWE\n1nxT2gQ2nF2Vd+sLGQSeCQxwtSQFT7DZNZo7k+GEOgfS4Yqyj5Z1xZjKye7K\nRsQZ7L6ZONPdAqoP09NUh4v4UPStt0ibl6bU3QIqLcCbokltNjuKV37jp965\nycxROliE3wv5VZwGV5iBwB3K4SMTl1BcnxbjudnjYNbJnNK0TcZ+GZM7N503\nPYmvl1d7qRhp+ax11DwrpNF2mtAEmQ7Qjd0Xz+dKq4Z6E5kea7ienbfD+1oA\nsHcWvz8bZEBKEy+2jAMfMORpZvy24BybQVTTFCgfFFXO+hI27jod5JDUIqOR\n6fTavTpvUFwIJFcI4JI8AnOtL+9WnXaJewhTPH+We0BuSDPI1JNuuYAfA04g\ngHwz\r\n=/I09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/list":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/menu-surface":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.9f9d928b2.0_1643307271431_0.8518589227489848","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/menu","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.a2bcb065c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"435c850a96c5045d4917e9c22f52dc358bbb7a71","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.a2bcb065c.0.tgz","fileCount":37,"integrity":"sha512-iBdWbmZmQFMKQyNFPJ7AjjqyDz78btgOdeWiuaY2RAXK4v9DWwlTMfSVJt2LI4r9F2GpjRuOflg/ByDkZWyZ1A==","signatures":[{"sig":"MEUCIQD2RRW5fEX2H0G+UVG2iZoUnQAJZlf9DVeH2ThroajcrAIgY+oPOiZgwRNM/9vBs7eTkVYQ7TQ1duxcibwxvBeQiPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EY0CRA9TVsSAnZWagAAEEIP/RF1wISdyNUp4UUf9ELb\nmWSorr9lSurFikba93dDt0mBAdfNf7M0a1//26BlOfcI9LZues2HRzx6brYy\nW2HBQYyUclqC9rzR7Dd+6ftS3p9JBI14tb8mtlwjWVpg2/gn9QLzFB79lT9Z\nn2HgHlLmMG9DE51dzzD1thzQ4N5XAyi6BvEvrDhOtXBt4sfGxWup/KFxRbsz\n9SIOcQgikYjaHUW+7+ZqhJ27rtCu+Ux4Brwl5RRdYOKZnCZKyJhjNv9KmGhM\n7LMePADOlQ6uzjYPHi6QJfIcsFgYNZagAaLPVOpje2BBcsI9F2ehcv6622Zu\nvg4qEoTIl0npqlRmMFAIhEbuUbwscVxd4HIhi90lbzcKBGts67WcAvSvMHQK\ng1M6LLa6vQhKiCfYlOrvKMPjwErXLr6Tm1UYXwiVh/nLUbBPY7I96c367IyM\n7OZjqO9JzQgbNkTNlqY0ljVsn7cB2tFYxL0fgF1E3bZP6wl2eeEW6rFm0wNC\nE3bsmcGB4HXuq8zF1D3VhMTBOUdAi/fyKU8fgDEyP9d5M90tMe+7pW9pk623\nOWH13h9G9kZsbiH4LYm5f1ffDzKYjUYf+0MctHiGaPLoj3XkHpT/MSuWjPvU\n1hb0SjFPMO5Q1RNFxYZK1qIT033SxAWbP6ElZ07NL5amj4CSu82vBNWa3jXF\nSZLc\r\n=3otv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/list":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/menu-surface":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.a2bcb065c.0_1643398708018_0.825577080079597","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/menu","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.4e66fb2e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2f5687484090a660471cc2c578a1c0e7753723e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":37,"integrity":"sha512-+PCkglxTrCBO7/rM/Hso4kMUQGN4/HI1F3ptSyKb/w/8fy01PLMVcPlAuIzUNFdv300LXnqALvQWBJ4AeZROhg==","signatures":[{"sig":"MEQCIEifVhY0tDL3b/ZkD46eaa1RTRYtXBdKStz+lrSqyw5fAiAtzB4cN0MlUulW8gUbX3EI841S+R8NHqLVJdw34elFow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Ec3CRA9TVsSAnZWagAADvMQAKA19DjQYbtX8nH5sDRp\nUBonUKIg/HbQuABP64Q3ptoqig2DCZIjxZazAndjFsqGrFMFKWFfpmtZds5W\neeMYDPlHOidYJXxenwqSHfj59pPXMZnOXDLVc68s4GpCHBKIovrJNKxpMjWi\nDQsXPoXo9Yiv/DuRDzONcapbvNfRbD9nb10Xri+YMAhQ/wE9gG4kp1uSaeQ/\nMgZafvV0neIyElsL84B12pNnitQ56K80boANGZqcrZW+HnVaApnjtrJ4zMCH\nCcLnUXKesP7Gmqfk4d88fPUm3hpUiW7JL6nGfSZWl1fzKAhYCCfDGSPYM5DA\nq6o+CRAbmdk46yUIIp8J8eWwkla8iOkhmdT/y28AEBLbrOGgtKjzlH4bdMM6\nrUt0W/3WVeh8xnPoB2ju5Upn9sFB1ixUvPvU2vCYgonA4TW1rnquCSqRWDLX\n7JyZFuxbRISh7kEK3zEi6P1VWK/RkJaUS2pVmbp0lkaz7weov1gVQIziMyKQ\nY+8VjPtVHsQ8l9nPmoofJiGU+NMjiO0EalbDlJOwo8uQdyK6yQmGEds42H4O\nJOD2OwSJJh1v2bVy1QXRdcwk1yN3F7/wXvGWyipibllrOh3s3ZHQKBjfDY2O\nBbaGNGYE294614BFX3eQVspjqGQakFUf9CKbP6rB31piLExQ/pQ+gljG6oH6\nCEGr\r\n=Q4VN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/list":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/menu-surface":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.4e66fb2e1.0_1643398967588_0.5682571623778248","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/menu","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.9736ddce9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"277a42c1a8fd93dff4674729d065bee409544550","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.9736ddce9.0.tgz","fileCount":37,"integrity":"sha512-t1xQipXHzz7HDgtzEdZilDUgsOddsn2GE+23jbI7167+fsbMxZBPMoBHVSRC0z7POQSFtb4vKrGJGvrD9/v+JA==","signatures":[{"sig":"MEYCIQCW7raXXQH60iBcXDFcr1j5ixnj2xfQOZ+Nh/JCAV0FwgIhALQDMbiPclS137yrggdQvvTXb5M4aKoLn33R2xYup3Pa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4LCRA9TVsSAnZWagAALeMP/jwnTGkhsknh7F7myYRo\nLgQnvWZ3SPA63V6PnieRn7ywiquUlIATdUO0txh35v3gYC+5KK4nb6rJz51g\n5UPEev4rSVlAkonjP1JyiW4OMOIPg1D63zFjlWcaApQBhwFxpXc7sqjQZGhY\njoJ8/w7WrSqJd80yD1UM1ADOoNcIg7qwGbb/dbRK+IHdRHYLQD8gXfgWQgX6\n4PRfntLB1jM+43ci1RhecXSGzeKIBuzgNR6t857uc+mBT6hsybFvA5UOj02y\nLR2q7KXesKdY6r6WhN7h68tW4kiIAXsztfDo73F+DKPmJyWX29cHEvDXASaD\nEczYFVPMU8fWuwoXJYAiHc4QtMZg1a5ZLePotYZ81nh4e+xmgc0Y4VvnTJog\nRW26oFrXZShymiHURsRtgNDIIy1VyYGrPxlRMytL+snxcNlcVyXJEHdpD921\ngOvOCqnRDjHxBo0TQAEZ9mps182D/p7HIZxqpweWTqTI4WlpALtb3COD0/3g\neh4LKEg0+kthRgMzBxCBQS/TyyEW/1mc5dyn1EFlfgkjSO8ONGpupXb96aZD\nNaRnF8I85MLlMwHn9xsSWWvkN62YOMIOJO43dbGOq7gbEOlskjLClrd4bH2V\nYd5KqVaLBCj/lOLCUt59vIJQjxu2CouQtyHqeG+uUG7kqz+vPJyNaN0bomEl\n1fBS\r\n=Ij8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/list":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/menu-surface":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.9736ddce9.0_1643449867793_0.45908980585284254","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/menu","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.cc4ed13cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faf9868cfe069b17b409d4ce61978e897056076e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":37,"integrity":"sha512-nL2UZyqicKZiDQMQFnjJ9a7rjBTjEv7l7Tyfs1h2OelXTgrlRmkG5RTl9C7LAjzuc9Xxldciwk2vaYgJ07WGog==","signatures":[{"sig":"MEQCIHCGQpQD21vaMN4FaZgwiCsgyHjmVZbXHdkRj7PPOS+bAiBAsqhFopfO0ipedaZfBNlS+ca35LZBoIGOlZln2f50/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9KCRA9TVsSAnZWagAAL7EP/2C0h+mZmvJOJakk2WGt\nxyExAiJPZ8EaMKlh9i9yYaksAWAql6iTnPle971JGF8MMob9TZTpK65+juBa\nJNh06cOVAxWcFcnbHOfkK/leSALdl1e8IS24O2NFu5whlJ0xROjYThIN1fnS\npiAbP0SRzA9oMT84wfKXk6iTudYnV+PUY9g+oD4pBQgEyFRGaqbHS+fC9TGJ\nHrbG4G/iiZoiCsRKj0ZQf9H+jLVo3EetERH4hQLWbfdpRtxDyH/+tikHApGG\nqRLBbnrwrASbSph9Z73HciOft1oB8QXko931wblw6djvESYpXf/+n/bnqZzz\nvj6ECjeqxhGJfKIek5jehQTLvUKqn/tDQD0uxmmnPZ1okfboyIzqvk/n4qdc\npAmk2R3wiSZTo2rJW5fyq6Q4DlIJqpHbOGPpXrjcmA9zMNmtimtHyisd//q8\nXViViV86PxXxezHV11QxEexxyoHNQaJ3nrSo5Dhzx/CpxuOF73MMhLjbmCzl\nog9fCl/PT0DnOK1izCgZSqy2GuIg7rnKUoFN36Sook4zP/PNm9uX+FGRp4tK\nRszsJVLES3oj8qCPM7k62s5pGn6NUKuvJ0QsoWUR8vVNViye96L5pjPy/YeC\nnSumLY+rL3vyTZ7wTgNMs+o6jmLXKEc9pD8QxkK376eRcuVGry+1WPWlaOZq\n350y\r\n=5vng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/list":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/menu-surface":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.cc4ed13cc.0_1643999050363_0.18182625731515567","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/menu","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.dcba26fe1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64afddf6b65b99395bf33ff35552a29bc1227f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.dcba26fe1.0.tgz","fileCount":37,"integrity":"sha512-4cjKzyi2vf5YvMvteKdQ0l8l5xtPcho9mA2X9df+e6xm1mmWyquDq9VZVzXY7Yov0FsNgpvCif24BjN1K6v3SQ==","signatures":[{"sig":"MEYCIQCVAdjV/GX5CTkw8lzyPX5A3kRMcfs71+zfHiqwD2cZLAIhAOOibj0z08fqEgviI3wKgkbHRh/tJVCPXf3zt/sZgouq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGICRA9TVsSAnZWagAAKdQP/02UXK+Rz+SB1hyfUeyz\n6tOjT7WgegH3C/phwyksdoJ9q1FWiPWdWLXQu0p+MSwZ7anifO92mqc22j8A\ngtVA1N9gPPo/ywr7YMJ7Xr5f1SXNEokNm2FNkNUibfOhrFTSr97o18kwbQO+\n+f3ntbSuLm/P2A5uPX2SDyaA0oRTobJfqhtw27BJaBpH+OGtZtuDLit3sWvr\nG3nM+eLG5dOZPvPEYO/8fvTpjycRxmsB6pz9J7TkNLQJEXcqNuEe1JP636B8\nhWzzgj+Tp+zuXpqrLo2GMCmvbMKujnokBTnHq9vncnEH5tcfOUPz8ea4w47z\n57LpUJkJE4qQovWz+qE7v21u0uUup7mVLTNYp68XSEHFgYv3Gvqf3vgN7b7P\nZw4gTXa9K//M9KPPGPHcxWxoS7mXxpsgfvYUd/RUr6RauG98Gw7pt1EIsg86\n18IDfsn/Zx55YGI+PTDra+Js6NA71ETo0DjEywgPEfs0eOOApc2hZ5va3nWk\nmowAmof8n48SaDsCFAdoNUNmIfF8UxI9xbtrHkKwqlX2ZMGCzcp6CKmXHRXX\nx0IPJjvDcQ6qZq2/mK+D7bVl7L/dT0jqM51fjXPcZc+87vgVrn1MYXYUXcLg\nTvJ/IeWCkeVKl36ZHATMz+WqV8AEskPDDobSu5Ep9NlwQHsaHj0IKTPGiXpM\n3EC6\r\n=/0Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/list":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/menu-surface":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.dcba26fe1.0_1644011911894_0.31537799994278104","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/menu","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.ec54d9046.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b8e1a669411105f296825289acf71a24bdf29cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.ec54d9046.0.tgz","fileCount":37,"integrity":"sha512-dVPxGoKyowXyQdLoOOMN5DS7xtG+WNE3SqTShIA96CzQhFYRl7Hzaw3BK8jvgfeaM5qt5ZUnZ6J48esbsWs7fA==","signatures":[{"sig":"MEQCIAD477LNMucqnm1nsZnDgswzXPrzE99f2qZIUiAJpAyDAiBZuWIEJM4RjRMEWwrhk1JNWpKSo2Ks+7UuqjLbE+63+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT80CRA9TVsSAnZWagAAsZEP/R0H914jCc23CXcdb1jS\nbputZrKoHmZXtHYWJ4yzsRBOtg4V3RRLdvmeTNf9vUl0xPk1jMAPpibF0YrS\nQdHUkqpipXrEy0kso8pofL8tmwQdWUmuBePu0llVS25TWuM85z+N8BDuOUhv\nNqYj2vMw7peYJvmIFNNi2UETBqT31RRJnEUZY5w6V13sVl1YAaR6Lsff6QPE\nCONTD2zB98FBMqkgwhG0a6s3Uu1vGB+zBg+F2A1K+4ags1cTIKmAX/hjHqBU\nDRbW6ycQdlHXPBceDsu4HY8JJ9AXRzmSHYQQeZEh5RCrD+gm0dvtV4oxDOiT\ntPPFXitWIy+8nAU6ju94KYsqSHBnxt0QngvzWyPF35PIG7q1+Z8iY5mfeT/g\n0r0y1r1532XcyUgKZqni9XMQ6+R31UZJRXTQMhf/FVnKFmKZzCMNgIMvz3Tr\naenGL1E0WbHD/9qAWzMqmlTL96n6eswcnOrOh4Qc0UEE7ZzyHB+2BXui/A53\nxCwFTTPkt872zc6Jad01F5P45qF92s9L70IxlPJeW34RR2o/R9RvOyVlxKXJ\nQfMP7U9c5TCzKQj83h2CikBVRTKtxb5QjuuLTH7KExj44Q00aXJdRfkxBMYI\nYncDVaRnK/A50z5vQ5F/91D+dA9M27a3gmDmyMywCwXHWLJKJYibU9RQpRrP\npX92\r\n=I/UR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/list":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/menu-surface":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.ec54d9046.0_1644248883753_0.15045243109485207","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/menu","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.ea9b5b463.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eb6540b649fcf296ad85d8f59d75cd51b59f876","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.ea9b5b463.0.tgz","fileCount":37,"integrity":"sha512-c8HLZEaw3qWqu3k+5bDKnWBGK++hARXlXovLdcrt7bKUHU0nsRGT2Fan8OL6KLAh+DT9c7u+Fus6nAgBo8Skcg==","signatures":[{"sig":"MEYCIQCRxIEH43HaEBA5xSpsvB8yxCU1HUwssQ70nusb8Q/EpgIhAIgj4xfPChJ1HrN/dGT+TtPojT2PA9CHiqB9CZ2jm+9O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//1CRA9TVsSAnZWagAAmw8QAKN8GriAzCnf1sw8q1Le\nKCH4JYQAJZRFWjb53S0WHOxeHF68ghXNpjJIpR0Zxe/wXuGuzU+Zhdy1hOW4\nd3VYRNniB5F+PtGeD8XQ3Gcmz4c8vQONQ00Zx/R8USZysUnos7SIr2yjDTVt\n311SINi6467R8V8a0I/DSUQi8HfE9SbOcp7km6jrEZjxV1Wl5LxcFtIJfsZQ\nZFokym6yb8uNrQ3kVCpTexwerlkiUhjvJnVF+oT3L1wB8gAUsopSkEB0lSR+\nlK29kJXya/Xf/Y7Pqdxeyj+xgAELLH25QdlLmpFT/7jNr515vrkgXKx8RT0a\nXldgRa8dRJx3ay6lOUcZUGt5Z3/gO+PsFuo/9Z1zz889xar38tfgs6PkIay3\n0EiyjXvc5pdoALp6UZd/P6HXmrpYM4uF8pbIpypftliqxafQCQ0lH/7ElpIF\nz+Bt0yQk9Tdr15y3AjuUvQh0u8NvcmttGXq85c1OOpxBZSXE8DTdjJovTR4l\nyNLX63F5R8makgSfQ3DRCSUsMyM82Vde2W7Bri3b+DzKKgHseeVaXUXHmKuP\n/uLpsXN/gtsBGWU1eAqa7igtgE6wux9WTf2LP23Z2MsAel/J/7s8+KWR0obw\n9qhPsbw0kRa8xdDg5ww/pch6hnjJtRzdXFekVQ/eoPzjUppY0s5Kv15aAZyb\nwPQ5\r\n=1f89\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/list":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/menu-surface":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.ea9b5b463.0_1644429300958_0.9206057390446154","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/menu","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.96ea061c1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83903fc198484bc7371aa9de5459cc024449570d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.96ea061c1.0.tgz","fileCount":37,"integrity":"sha512-LV2B/rCmYUvGiOXVMJ0rQMeAzkAttf7QDOb2UzeeI6hUpOW8SmO4YortYG4TAiETFLcNGE0wv2HZMr5z9iPcUQ==","signatures":[{"sig":"MEUCIQCe31Tq8rDX7cCiQF28F/LuCxb2vfx0RfIzqDztAgD40gIgQmEHTc6nTXVYEyDYf60A60wFUnq66fKl8PCeewCtEPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9TCRA9TVsSAnZWagAALIcP/1SEXlcoUGQn9flnnt+N\nUy2Uif7hwOWEzPdzRgRTFG7GB50qcVUg1fZpmbMcxq5YvDZeXJp3USAPwgIl\nW2R+3pVMGjCjAR5y0v0zGue1SGVStRPp9404lYvtTcFMbSEAJ7j9Hn5PHJPi\n0UqPfQMn0YTG09sit+ahJwc4gVItLSJiyeScoD/j1j1/99r7yUpwQzwU+MHm\nXEygbkkImjz/JZW3fL6vZZlglrFWNG4gOmqZA5oIP2CGWWLy4gv9XMHtOllN\nBcpUcKu5gZEzcGuLBsi7bAjcVU9IIskahnOYDoamqNDqDHID9ywjci0u7FGc\nAnzx/596KTMTOaYkHE8LaqQJ25OO1GKRiOlsJhak0+4t6AFhyDAP1FM//MBH\n/iBsEm1FMxszPQOr33tfv9u68XvhDE+DOrGqFrJiAWNGei9XgacJ060Ptr1C\noYYsvstdeQNBrM9ZJ8GpFkMHF3ZuIM3DDntUg7IS5LzF8GAK4cyCuleU/RgB\nd6fgy1fAX6MDwFQgSxWf3uZAfwxGT9xP9ZYINx28oT7T47Bv+ESOUSQrzyeV\nebA5eH81XTcE2fqTsivo4SFdEFHwHixgRmlpXiTMjsHKZmLvUg+ONZDU803x\nVfLCMTdJx2xfNcJiHamDXla26m/R2GV+pCJeOilakYmKKH99VNALhx5wCaXr\nCc7X\r\n=we+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/list":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/menu-surface":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.96ea061c1.0_1644433235471_0.48208673143162084","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/menu","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e00181e59.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5703ffa7b245e173cebb84953a756b0267db6b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e00181e59.0.tgz","fileCount":37,"integrity":"sha512-kggupVG+jzuLSpkrXDYgejli0QkS+vPNbqMZKFJb0iVYg+t6ZRpzG1L4rWWi0WLL3W1n+NpKjJvYlE+4Rng23w==","signatures":[{"sig":"MEUCIBazymwVueIxRqZr7RCrMoG2u/WF9QbPudsXN15e5rkVAiEAnEG9uIQFfeLNV/oQOSpnYm8yKcovulK4fK2hB2c3kdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCaCRA9TVsSAnZWagAA4DoP/RET7Q42LcD+E9AgULRn\np1rp2OkklwnMX8+aI6uaHKF1MChPGhJV8mHlpPO2rwsNA0Jj96NPUhXqUOvq\nOerif0xfbUr/2ZJfXgoLcJymIkFrarzq/RvvBd4oEoPidDICTV4JxW9Efydt\nr5M50zCTs6sLokoiogggVz7tQEGMhFoVfJ0L/u2EYWaTdHL8WfRK16EEMyNe\nysmawU7bQ+qwq1HSkYWm6MBl+5hfNblZVddhgqhkfQrzCWur4OOOSLim9sos\nNDisavchBJs/rqCxh4uWaK4HdtOyWfYNJ/KZOtZnSxT6/BzXexfvOh0gRllj\nN/J46sRMxIi0nXAd08H0XvWHwNuhzlbus3f2TZpDwC9v134hOKeQG3QLHiOU\nMPDQVH9H+bOdsupXUVDA1JyCIlphRnpP2uJN7/oq/3q8xUfJ5z5usVwQCC+3\n5CndrEHi9cEOPEEkLqlYpQOPmFItmWkiUIlBoRMiVp89QKXKkzQDa1GxYB/R\n+jvCcCVuyjsO72y7ZgKeSTdzX9kOU1HkHm+1yVkfYxHQyndKV9SzlX7g9MTL\n6Tgasj9Fe48X45oA71wdEJ/V9n+UI3eEtNg4jAmQ4ItX405mbIdD3Ooourz9\niOGfi+yd8DvCuMb47DZfkh3FmWV3NWEV+Wc07ZbZOSuFWbGUWDxE8cqqOjnR\nx9Gh\r\n=hNo2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/list":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/menu-surface":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e00181e59.0_1644523674746_0.5506259501904371","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/menu","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.037285f9b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf9c1901d50e388de5eb5c9fe5f2a70bce3c2a42","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.037285f9b.0.tgz","fileCount":37,"integrity":"sha512-f0o2XrY4Ng5V2NS5n1ngSGsQsKtmJc3rchrTCXVPA8M7fX4EamhAI5JtC/f86wV6yGMkNqQTtifx87gvwBnsvA==","signatures":[{"sig":"MEQCIFL539CujtpNGQPOeC+LthcoxQsGW1vRt6SkRxqpTIArAiB/aQt7tIpMqszt+/Qpt89JGnCPQz/tEE2siLgafM7E2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtbCRA9TVsSAnZWagAAhqkP/jPbtgbF5r51eSkuFD0B\ne6kD3HZirO6xOWuabBJhHszG4Hrj00rPq686cHhVxODekkIu8C8gyiQ3NgYR\now9SizfdbDY404xJzQmp3dI87WOTJC5Tkn0LX3b8w6vAtbQiSdwO2PfzNtsL\nSk4KNVT2M9p/Ay/k1PB3wO5evJfcJyH7WIK1yCNVnQTyCySEastqTXtdqPTO\nJIYHeJSS7aQ6xUSbdZ3DwyDTlTLHoKhp2oolHK+0kIBaMOWg8RajRSbk9eaI\nDrsISnYP+t8tJ4qXOFlkudnW4czXkE5OFrSWTlqHKrbZLsN/y6jv6RDFIhwV\nhmakswMn3m4fCJRL9mINWmhpvAlZGAEERbHeFQ5tl8OK0IhF5p/EW9I1Z1Bb\nC778CU7jA69sHKlvlvHmR7bEknmECggpsF2vC41IVdWcB9bwjyfH0llrZboQ\nMGWGJ6HSPMdVoeaaxN2MZi+X33Fniot8qVvx5reU7bV/vLIyLMBgFuJWqEv7\nPZMdfDnJqq/Wk9LTZDUpOk1yg+QdUfSE3Q/WSSPKn37dOttDXl5IWXMajNNo\nxiqPkpgIDNpwWpXCJjKxkhYorTZNsvmhsXdXhtuW4oTIjnIUNHgKaBS0GGe+\n4qmJsu0SL1R85JyifSWwJKlbZx+XdXgM5tGV0wzXZrrg+bHn5F+4JGX3oTZe\nr73Z\r\n=dbm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/list":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/menu-surface":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.037285f9b.0_1644604251520_0.09760539031800763","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/menu","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.1aaa68dda.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb135a87dc19bac6ffba552bc75c74fd6626e7ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.1aaa68dda.0.tgz","fileCount":37,"integrity":"sha512-BbAqYyo/c5uyaVN2fulcYFgkld9/qJTo5u1sAL9zzCB3Z7/NgzNxhy2xO5MKSxNC6Y6YXQqIIcwEdbXwS8WT5w==","signatures":[{"sig":"MEUCIApSry0RvBZqmtcVeDIL9q5lXkbgtti7I6vf0PqDv5XFAiEAv89Nx8ZvmLWkKcoPBpenYrAFwW1Zi8a7A4bW2Yebg20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVV9CRA9TVsSAnZWagAAbtUP/iUQXn4kPjQlGZ0CtF9A\ncDs5IW+cFg51DguVzG4zA7bVqWXcQksQSMokFzXD+pm81nnx7gcvReWEGtAw\nHCN7R8W22c+rgrK7UMItQHZdaV/wyLoqoS+0M2IFL1+exfR4I2sB7M+7eN/D\nJzCJifvj8cHxP2JJZh04pLE1RlW2BYvxYA1mXpL9PLzQz7QrL+3tnGXUqwh4\ns4EQH4MMRbb+0A5hLUr2aEspS8or0rbxfprMg6lRFdrXfbHsLfyVa6iVormD\nEt/sQIZKkcNz/g688sx06drvc+N5be+NeOinIJKN7oFzMJRU5KAy9one8VsF\nPEydLJSWn/W5YYVh+juV3uJXJdaLkZIe8QlrqIFQsIew/kewJC8rrqlIywUT\nIvwqSaTxAXl7ixA6BAeczqtf6Huylt0Q0hB8t/ZEK4O0Lio8cwVe1utJOsxj\nB2NP5zyGLxyVgVUPlhKxx34oe3bz2DPJy5JcbPej2TDjcOkGHuPIjj/1znDz\nwchnWYUwR7drMbsb57fRpDudIM+rppA/swjpxIhS6eynXW1uCQUV5XiiUf+y\nNV0WG59qm37Mok8XFISVSkIfXrYAid21GBYSlzh7KLjjANzqdwF7UGMd1niH\nQ7qlSVl4GHjoMMekuQ0E891+svi/ARO3L81+V2KDzmJ6+QLfDC0rEta3kJqJ\nzdLu\r\n=TxJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/list":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/menu-surface":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.1aaa68dda.0_1645041020899_0.9294415519262258","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/menu","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.ab4aba1af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3b8bd77e3741357d28d4561175b73bc2da13b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.ab4aba1af.0.tgz","fileCount":37,"integrity":"sha512-AXZt3AnsQvEv4gTMppcIDBVS1KDcf8ljb/vgh2Z9ALNAiZkpfHT4v6izfuaKnEdKmOWXWBmOxwefq5k9CKqhYw==","signatures":[{"sig":"MEUCIQD6aIsgS6eonLmWYeeHdN1bGgi2F7QCCbeoonY+gIWNzAIgfYJNKW8EbBoRanEkSJkm0q2hg4tqgoCeloLJ+oTenm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpE2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYeBAAm4tRn8fSIuKmO7sNlmARXsLrwZCaRoban8ReaUfGdkdX4qNz\r\noFjykHxLdmWiG6Zw3hGFpS62vqqVMA84xFRp3SFOOx9k3RbyFRajeJtBzQgM\r\n+fGhi/WJoxC6hSLAVL8a/NAp5SiHLhinOs4SOotee3a3Tb/7X9mB2KFLlNOQ\r\njPnS+AQrpG8yq0vVzLDxEr5iiXMDw+XEnkjmNQpf2NkeGtD5bGEOFiE8IvoZ\r\n6bBXPqCdYpYZubhPWTj3IfyCqb4PF7gZJ8kd54LLHgrVG1wsBepohfPS44+X\r\nUo3rH9Pi5mbq29p7kQPwxtKQs+9x2QrAtKL2pCxjUCz/TQsmGdDqPgL2mHPp\r\nJXBGK996cY59iPfyBWVpxmbjUjaN8Tj162IJAUw8AKMo47efOz/tRj5wW29F\r\ngCOEIaFL78bctgTXmzYM5kifx+JbtAULB9j4xRFBn83Y2GgPulAJsvC8Hq5R\r\nZG+OHuO/9cS8/lsgDI4a9kLdgxEyvaKFwihHdiNR+IL4Rq2qHc4NxkTP+rak\r\nOuuUqxstwCIl+3oJGTWO3KOA7AO1+JSiXuEbTRYf6aJaEbDnXO19B9EReevZ\r\nehOHyV18GsSctWy71s07B9DuOZ/Ks90Krfm/WgT7fQag8JxMxtPQNhfsEOni\r\ndeSsVwtGX88HBTNm3H7YgpxMKUwBHkmcnLc=\r\n=myJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/list":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/menu-surface":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.ab4aba1af.0_1645121846063_0.11251150222087314","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/menu","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e58552c6e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f153e164fdd03ead8b66e449d37482f651fcd7a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e58552c6e.0.tgz","fileCount":37,"integrity":"sha512-xDMwrNHRqrGXEo+71gwaFVmb7Obg5yyrPXFcfF1dAhF26XylcIarQ+dN4SCbf89s7rWcdca+YO+sqEAOaf2q2w==","signatures":[{"sig":"MEUCIQDaNAxKOqBOXSul4xn53qQD4DpKOJvJxmp+VJ4DVQ9pbAIgZ02OoHa/GxLemX86rjr8LUe9IBQqx9WhSSfKmClnQAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFeg//eJP9kqoLai3ZCGf8AmaWX+QQgeYn6isWJnQgpO/f9D9i15LZ\r\nlPVYCzKqqtNXKKNzKQskK+G5/qd4Lc0VcwbaEEIf9GWeyHdlzQ1mI9A0KZWf\r\nj3/stc4D2R4h/dq53iEdQOVb36e58LsDbzOln/qVB3dNd6LTwOxIEW5q0349\r\noeaODnXvtS8wqQUp7XfWtn5Pwhf/GTUSNwOqpo8dXNHcaL0a3Co7bC3dF1B6\r\nn4f3nzCgB3R4Rfas9gsiKLyU3kbvivTldu377HDc8ao80mlrSzGUGlpYdWb6\r\nbris53RjSB3YU5LOnCp8qmQzEUqUrgpY1TCvpPzv7UzJf6m5VA3tFazKjTFD\r\nsSK1Cfqr6bHifUYYkUnUCTYIVDypGCuaNEmRMggAFsxMZ653RGHCDGNY4pVm\r\nO9nHqm6bhf/s5A9XDKCI3l+5cgtHIf/pFE6DTX5AMcABEt/mHRPEa0+dTrvp\r\nE/zDACsrFyZL4xZV6uKl/stq1YrmL6OezIGGYSmXdF+qej9TZbswl2t58ZS7\r\n5lctHrbnl1rGNNQ+W9ObMsvAqWmN18Mx08dlUcxxfgcduMfOGQTVHWa9dFsb\r\nWZ1Y6SvS91G5rAiG+eCY+k18XM85mlVLadXGpIhhfsewNxPdwkuhoAJfHkas\r\nOck2LYW7H9PGJO3oprXmLq9k+ExY8sCM0LE=\r\n=qCXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/list":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/menu-surface":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e58552c6e.0_1645207512310_0.5160087454037969","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/menu","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.868793776.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c336aa7e330658cf3ccca63e524233faf58d669","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.868793776.0.tgz","fileCount":37,"integrity":"sha512-m1iSc+FQSSKYbHgsGYCc6pY8jMY2RANDGIKJ+GWyX2ZNpVEZVdnTgVJkLReI6rBGdNbTS4ol0nk2cfJfChMQdQ==","signatures":[{"sig":"MEUCIQCMXSNYY6tYF24cDu0fH2N9tNJEv/hCwCAiHfnV0+o9AAIgZtJHpIb0r7Fen/ItJLhls2pBnEDH16RMo7owByX2nn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2mQ//ZDq5M8iGV3kZzjyvnUPM1OlN9fxgt08O4FSxsLVYgdX3R1Kw\r\nmO7t+YSlcOwMT9Yebaq+mrvLfspMle1yNyAdT2uPrdSeOBdhafumlsOeyIQ5\r\nBsw2LD+psC+tkZ3b2R18ITQqxIqtSBq2mbvgt6zjBVxVsCf+7nMk2cIx7Lva\r\neOy4W+oxEIJ+Wgysetn9GWFPYio+JG5RJfucpCqjDI6jxtgt/kYrNbotrkS8\r\nLcgUt+dDU1mcbwyWgCGWXQVQmV0VbyZAoXKp7NWjDjrf4yY90UVmu4SXLK6L\r\nkNiZqUzer4OxFoykLBB7STGgITmadCr68fC6CXrfYjGRSPmz/G+GeNX/cIXl\r\nb4XsNkftxCUmDRiP9N/qT5QYwjRlQF1AK1u51SwfiOReqZyncz6Q0RJKi83W\r\nE1Vri7kk91k0ye+OSMqgmolkpU4RFF9/7Rg98FkfkNjhnBiEtCMmHaM5gJJD\r\npQVKJSqE9Q+l0aNTONxleT0+ZyuQL3jMvfG86OFf3ni+1PW7LatUK6wT+oIB\r\nmCo2omzuIKseO6m+IVesQT0SYEYJaRW40tz28HHipWMnN2gWIRoVeOvcXoqi\r\n8qCvAYHEbmIIE32/nQE0vw+UslTiqDXbCW9jADvgyaSrfqevh/dofBdCe4MT\r\nSmTvGRh+R4h0+VUe2IVLW4no5c8sNmSF/EY=\r\n=+Czl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/list":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/menu-surface":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.868793776.0_1645558635420_0.9366647261786563","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/menu","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.fdc37a445.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e12c2f90c6d83184455da30cc16d9823909fcd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.fdc37a445.0.tgz","fileCount":37,"integrity":"sha512-KvJEyhGMWZ/hchGWHpdOz7BLGdQZx+tPmYAtx0R2/6v4NThpHSHUZcOccwJGin76mS910wWKiThlq0dq+CPpKw==","signatures":[{"sig":"MEYCIQDhqGP8qossthLeXeiIk3r/40md5nHhulmyUKxSZFLRkwIhALRnXmoM46at4jkXv4aWeXmNhP78tOlTMi+N1WIH01Pf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRivACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ3w/7BCO0kS9vOw0dFjAy1P4oEiNi7AwEpV7k/hO+DL+i+r57QWq9\r\n5LQTxO1kWlkR/xuoppSSYy0xS12GlNy9W0z0u5C5Xju6xW7SLDnNnyaC+jYq\r\nZcvQNNlpympv5WFmqPpK9fNSg9biRzl0ky9pEnakgmLoLXz69V2n5xQ6BuVN\r\nZCX39muQDrdtsL9uvTMNK+E7ovtGXrwPBgZZmEaQd8fOMk9zCwKnrK9GvTHZ\r\nuM6r8C4nH13PHbP3M8nvjG1LMUWJXmH+DuQ0U7KurK6mRbIjCqVj8PipyrHV\r\nSEXMwUbrPJyvr0ydohOXuK4Xng7LYc3EclUzO9RF4FY37bb1DoA0mG/1gop/\r\nuCjJ9iUGQZ9QYctolXUMda7GafNdChjm5b4EfnCu3oQdcssluqBu5q06MWiu\r\nQ4cJ67L+yf8qkQDNH+y1BYvoviNVHtbnq8b3GPrBr6HQVhp7rbMbpKv2pRjL\r\n6tIYhg6qhIaup0qkuo93fz+ByYDXEiFyQOw52Keg2Cr7yTEXo6v2j4fn2RG2\r\ncnYTDRtxyfnW10BUHbGmjyXMbaQwPSUQ57ua9rH6bW+6W2ybQKXsBVgPige9\r\n3EGjBu+JNnPRoLqP4+MVGCUKUlhRFYv8CCxCQ1naWmiuEW8A7IZz34HLQDo3\r\nv/Xs7YaoIHOWMa9ENuloqHgQIOx0L0FITq0=\r\n=WrZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/list":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/menu-surface":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.fdc37a445.0_1646074031499_0.06163825133992806","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/menu","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.43c7d87dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b34a6851866b000f8874411ed651ac9c31399c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.43c7d87dc.0.tgz","fileCount":37,"integrity":"sha512-ZaILT2FUpnQqG8Lyt/UjQ1UTPaUZHyWOf4O+IfDIQgPvSNyk5vWa3mvpKmJyLdC4aZR/tNJ7f7mwuhEEDJ5zeg==","signatures":[{"sig":"MEUCIDfirstqyHoXP5A57luACrlLLJjqv6gkBRFAP2UKfG0zAiEA30zdXRp3l4ZLI/um+101r45Bm7raRvisyTdqIksmK1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjz3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqig/9H8Fw2TdpIYBDxaYLaF9V4aVnpMk10H7zQJN3+mBjuwS+gqYw\r\nZgHw9hTgkcS2OiNUy3H8TPtpv/U+aeYUQXOooSBIxqjGnmAiW9IshZB89Go3\r\nlDH/pQdGIq6Z4s+X6AVAKRViyIABLWOLmcXtM/bRZZLqPBpD1fVIcXKpYVa/\r\nmXZ45pT21G9Gwo+TCbckkCsSB95KdUxEG/7SsoiTTa3B9rVotbD7uawyZsym\r\n4uMrO3V6PoNnOuMHy7xWxlRPGeT3KWjX3SfRmZV+Kbmpk0oC8KPH/kOeGQ8+\r\nphbGXMDcQsNJGk2Cz+9uOhOwfMgWKRen1F80L1ZXPgFgMoav9drcSwwbnvyG\r\nClzo2YBWfvBBoIjLvR+/J1GXUdkvh3EhfrKQtssMv0DHpVlskaOLSiBId2Q4\r\n+ky/5trXhE0Z8fX7RLckexa6m0mi2glmC5dpzf1BoC4dxoniPtcnHsFezqvu\r\nEkQ3sCpkynqwY5n5txJJzOjOkUYEWhnWCdfSgnre6SRZv0Nm6/J8TqZ/PGXa\r\nmNNB3kcWHHjojG37gFLh226k1tQWAiT7wgpIeVjA/wdr+WTtEDDtO51JJ0Sz\r\nLIOohQ6Riv5kTFRJU8rEGPPyAkNzw+KtKwtDLNbVjgkOe98w3obJY+xPh2AK\r\n+xm1p949CZ7KZeFs0lZM+HNIeX4wxMyr8N8=\r\n=jd9P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/list":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/menu-surface":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.43c7d87dc.0_1646148855136_0.8382561874689107","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/menu","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.23043acd0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"298bf6b137b1b640d83b479b73de5609f079c12c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.23043acd0.0.tgz","fileCount":37,"integrity":"sha512-PX4fP2sxd5a/wgrYN2FSlbesklvGZMKbcJrHkTF1nFqWUQjmWHCIWHaEvP7LbrWBwg8y1xbcPFMdsAndDHtx1Q==","signatures":[{"sig":"MEYCIQC1sswn5LUsGa6fUB9qoH9Qu9PMwPDUzzfZyvqREDRDpgIhAJ/7nVIR/ipxEb1NVB/licLf4oF4f622Ilgf8fQpZGwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsPxAAnChqwSQagJE5+XlovWuK/s6H+coJR+irxBSQ1ft8VC5wtLIi\r\nQVbusbReEcyQ6kcGxb1oe9Fe5assNyUjHkkSv4vQkfOdsEHewQAUv+TceL9u\r\nG0kWPFRUT9pqp0whM+Ly149B+XEgr6QXmmom4Za5xhpD0ucejS6Fc/PE531s\r\n8FrmHoqLgJAiLUaVRufucGjNU/BVe3le1wx5SO7wNfbtWY0wdKXoXX4zfEwa\r\nZ6NQLrsiGLNknNblrCdWfyhEbxkJYRVespSmwy2x/DQGfknDmadiM++w0ARF\r\nSx6njSb/68N9oTEthjd6CCMZ6Fpp70IorKkEcQhu4bOb/phOEYG1CUzWeDsw\r\nBOw2H2WSmPvqi1epEcicoxElTUgJvg3qKilcjyNQntfM180NM9ZuP4jSip1a\r\nwrxp8EyvVt+gH4L3l2Q/fctsTimchpjNixAQdcYvINcgxyyvY1X5ZQzKsovX\r\nUrp018f5Cc/m+pehy/4j5x5KBkYu0K6WBdKx/Cu6+MMUi/YLAngH20l0IqlB\r\nExmMHBc7d+KoeJEEEN16dAiaFWnOMfvJO+t9FXPrkQlQR7bGPrzhefyo+wYG\r\nuxD1oV0r+EzMpd5HrEsar7EjY6SOIL9VHqpotWPBj59/nu1t2HizeEYgZHmW\r\nU5D4ux18vNjDstIfdTuWmlXrIDHEhiyBwS0=\r\n=BCxG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/list":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/menu-surface":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.23043acd0.0_1646252906383_0.8052177690918094","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/menu","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.6505e61c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e74bab53d2cc8f5aa0500f8e579bc0fb8f42311","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.6505e61c5.0.tgz","fileCount":37,"integrity":"sha512-kIlbpH4oyLDwAhjMW11CddlRfzOly2AfyE1zbF59M56rZcL367kIC7Ez5a1wJY6TAjnYVsNNLofso8ZK0FekRw==","signatures":[{"sig":"MEQCIG7b0yiRy8vEARQ343fqVQ+ms/WRmf/B9hdahnwIvVE3AiBMBWGwpEC7aMsskddGodVdOHKme4JANXhp9D/UKOvoXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozTg/+KCFMD3zpmJyuElRU7Lb6ae0sWdgB/b0DKFXXiyQlNsdmPy3Y\r\nNoVkSSYUYEc3RbD13Ha+RD1IFPDh+KlSbkkS8LwowUhmPW2GnNylhbqyGoW9\r\nhN2NkK3Jf6/uPx5NBbfdLnceEcDA6wGqhL7qNimZ1SP0Np8ET4X+a+wPYqIJ\r\n0Wn7rHWHATMcWygo6gnPiiB1W3CWI1CyGCkk6CximCgLKIEQQccr3iT3Ie78\r\nFHIUakAaYGISyIxlYKH7yjz6hxrNwxC+TvZ6+DHJJLWn80VbICvs7QUfkrYa\r\nK0c2UjJ0b+Vo0brLNz8NtnGpC7gXoS6m8Mn3+Lwk1fBE2tdVAx+CMS/hift9\r\nRhe7lBBx83imzr+LKYtmuuYCzMUhVsrM7lfcJdlL7aNrCsBWb4j1V2jUdn37\r\n7aiPksK1ngHHcxDpKtt87bkypmROl4BXaLRuaGDO9xyeGWuEo+Ts3nIm3rHN\r\n3L4w/Yj68PtvmBfN8AxdiWhshhrIML4ggQb/BRX42Iql1B8UPxOA+ZE8j1Xp\r\n1GD4kXcXOnsSBLTt9sqi6n+WGN5r+w2XDWeFq9H6phtYkACNxz4tqEt61ASb\r\nz2CQqsf2coCNMs+Cn2ECBeEbCH3YC/F4z0XzvUBIWPJJxAuRJkAJpHlTyylQ\r\nxEZ/+bLZiHgMCkP83ryqjQuI8PQ4c7Jrl34=\r\n=Pccp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/list":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/menu-surface":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.6505e61c5.0_1646337709619_0.32109923309700994","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/menu","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.16c166154.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d002dc76e53863227236949575414af5d9356722","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.16c166154.0.tgz","fileCount":37,"integrity":"sha512-sktCPIAbwFufKk2ZlWF60UhaDmCpjTs0ivUfv4fUsdYyp+9KK5Y34CfOu/r7m+WH3GyXSaAURjy/PZe/JZ5Uuw==","signatures":[{"sig":"MEQCIAUa3lhL4N+9E3g1Jy8hQZrSsq/l5reNpKz/ZtcvxcmHAiBOddfqOG2g1xAukSWCn7qh9YD3lh1ZYob9s7vAbsa53g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIMw/+Lbi4q97rACFMiznUULoMnFcQnzK5lgu8wyCha/5p757gY7qP\r\nuLI1UXFfE3h880qk3HhdCp00tbkIj7ucOnpFsRim4AUhaa/uZloLpHqsfcDR\r\nA5y9psatRRcEP4T8FbLw0AUJbNWqZHmHiZC5WggoPTjkhqBWRZHjJ4BrVB6R\r\nqnj/4pa3oKLtOcN6ZwoiCS34X0MguqMwgrxEuPFymsUE90AbuM5BCuRVRKx4\r\ncWYdoaoulmM+DkN6DeQsTsG0RZ1dMFgDujNJVRiXdYuKiAbfJU0m832QGD/E\r\nST9BaCUENsBZaD40nmYz2JrlPi3yqBiFOxS6Gq/5CTqWYJ5TkN6Jg1oTOceV\r\nkEGmAJ+8PPZUT4qfnJG/EmE1ES742qcEDKx8UVzoaq3WiSWZcj7YAeE1U3YK\r\nxlxUmYEFX4c4GRf+ftDFcK/Q6H7YwBc21Kn3LNWs2K2muda7Kre699i1mBTg\r\niIYhvMxzYB6yg0NRfo9OAfyGO/PLRsTC7SBO4DpuCywmHel+K1eqFRIaJ9J8\r\nKwWqk3pHPoOaVHkkvc2x5z9h4tZmC4E3w0w2ByP+Hh3pznqdkMet1EvSMnjA\r\nmX1BwtY0TfSFYIF0kn0e5WYsgv9UIdp83Oid5mXBSn+ieL+N7Tys1MjLOog3\r\nsL4sBsck8DUD8BROUMT/XTb0PHa8ZTs8thc=\r\n=uy3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/list":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/menu-surface":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.16c166154.0_1646781802746_0.8765706688972525","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/menu","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.bdf1d3771.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bc19a675c0fd84a2858cf5072c62bc3349ca972","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.bdf1d3771.0.tgz","fileCount":37,"integrity":"sha512-UyRXH+7XrvPCypkKB1BM4eT6WCG2pIithNgzwVBXZpBx9natG2f2OXVKYogqx1gISfepfR3S/Yd8c2bmnaPWhg==","signatures":[{"sig":"MEYCIQDrL08lyg8M7ioEieA/3GcVmYupHtrfSBzADY2NKmHLcAIhAOeNr8e3VgQPbKpz1to3oN8N5J7/gTYF/d0kyEU201QO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyxQ//WzE8Jblp+99VWRTnXl3lm1Dg09rNQ6AWO1ORfSQEfGDuNqlj\r\nCnXem7x2rnyJDS9BjCiAjMfW2LZRk0g2iF1ZQ/RxeWhO1V56RdP0lClAVEWZ\r\nZtQ2U4+JasVLQEBtcYA9LbXWT8m8RSXNCG0+3dsN9tkmT1rZqEtMwZbZ9ckB\r\nYkFJJ6mFm3avz8OmGNU32PJZAxv6C4I4yKNdfAq2w/3JOuBuLUwsOhwc1wV/\r\n/lf78UNlKSwdyoSYRps5V5MSMpq43+/Xu7JM28kFDPeapN5mjfusCWDtyTWs\r\n+4dq4ldTB1dhmDc20ibld68i20fhMlMGU3DWHKc+0VNtbplZVOjaJqu6i8dn\r\nEfmPLoEFhKNgXo0SANth+I3eMHpFcLSogsOY0KhyBKTaonGlwDzW5AunpxRb\r\nXs7wfbwJq34fflXdeMXtB/Am5Ib40CVru/BUotGBovE/P9El8JqZzOWhp/EW\r\n/4oudXcoLaNJQKPe3CvjkXmyCB68wAbP9QxctrUMuXuTa0znJSMeAls78SWE\r\njsw0ps1WX/bcJWGcBwvMrX5mCBle+DufwxpY47fmj/wumhMqrtQoVuZ9vbDg\r\nVVpySb1MworJf7gY5gB+UA6R/XzoDuCyStZ26XgYjL3OnujmH2i2ZbxQGP2n\r\nLYoYfmBV8QGx5iwuVMYeVHGlHGCLz7xG2tU=\r\n=VLg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/list":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/menu-surface":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.bdf1d3771.0_1647268177559_0.2999491171743156","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/menu","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.cf4292778.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1fe5f825b560c5e5d9f1d7e173c60ea36c10b21","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.cf4292778.0.tgz","fileCount":37,"integrity":"sha512-YGZYDFfxgoOZrKrw/XEogziU9wL0HD3xjHXUmjvFzU2bMXVDXhW5zXXCFcxIofzrsoeoPTla9kHbxAuEAqkBUA==","signatures":[{"sig":"MEUCIQDBDu04nk9fAd1MHSVvVKJmQUUpNT6Y2vxIx4qRaXrJegIgDmOWN4iPuBUCMu3id/4iB79gUt6a2B8KMzoqzSxeBwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoorA//eB3iwzxTKvlX71g9SiGadILOOMa6V61D4VhrRWmK7yn1pI/n\r\ngvK3xImmBX3VM7T6E95Lpl+9r/bq6xO0/7OqdB28Y3LpVoTglCe/pcGnWVZ6\r\nYMU19lkW86poEh6SXIWkKUvV/NwUcgRERM+LlfHs42RRFxqLtzxSG9B2yjWt\r\nPiBrHX7ukWAMUU1H999BiQMjXq6Mhq7ltyEgFPd+fZWX3zt90YSV70ZWZ1TO\r\npxrr7aXatSqXgLtl47xVN5IuXD1ADiK0xu6UjPtk10fEMUk1sX5zW1rT1wrJ\r\nh/O/KuNsCIY96JCkXF5/WEz2e6V4b4Dj76+qBCBOe1UFCac9TGySkI4gghBf\r\n63Nytryvo+efBFgX4zGC7w6O75uoGNVI0vPvnkzXmOzGcFsA7inuyKiXTiZ2\r\n3elRGMWAzrOJ9PRVo3jNcPPExfM1av09Mx1AVNOynnzfaenJ7DjlL1TQpuir\r\ntxtOAxD7bilERVfAF39nHVgIXDZ0Nzaoeh8iwLyteCCKZH50EkBk5o1Son40\r\nNI/jtHe9QI2vAvRSKRwgdJk8fBTikTqRsZji+A4mFMbeSTbxsBqK1osJyXH+\r\niG/Buq1XUw3hnBcskECRs+7XuHwuIORu+Snzbf1NhZOIpK262asmUcy2iKta\r\nTWXoFauF3U4gQFhauS5NOrPRwsIQ5naoF1k=\r\n=bIQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/list":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/menu-surface":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.cf4292778.0_1647304240141_0.4050046218416268","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/menu","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.bbd43e0e0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e8304460e85421d2c656e2e1dc9b511d271c93","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":37,"integrity":"sha512-7Vd+QwUknQVmYJp8XF1BejMLioBfzjPCY5JoXNqnb7v0HmfU0oWOf8HFwBYggkmtV6HGQ5HRaQNlBKZ0+5jApw==","signatures":[{"sig":"MEYCIQCPatGbiEyz/we5sc5OPxrSuiR7jHM2UwIobU8xGt+AYAIhALVbsZxKDAdFjYreScw71rAX43evXC+cHm8bs+dhEp/+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSow//WRGUYncloGybb860QZr0rSewegkCZYxsTgyf6ThzzLnZSDOK\r\ncocR8WxYhe4fMsb1p0bt1MuEqMHW29II/J40IDIwUtK1r9LJofGq49UUO4gT\r\nUQZslpKdEaPNJUK+ffk35lo2SqsEKKBmGHyRDu4IxMIl8WBDu+mlzlWBjVQx\r\nBUlE1RHE6IzrMS+UpdDijzI9e/pDf7lNLW1weQs2OYE3PwIwClHO1hgDroyH\r\nBbk4zucMAY1LcyjFIYT/drjwDDrM3f17Tju1nqDKGyUxnomdKdJOD4RToHDe\r\nSE5zAdYNwbAbnieHZABgDJMujn7ndsO7WwKiK+C3F5oF7zD9DpltUwv5du4c\r\nf1sxw+nWHzOHosih6ZGdOSeKy8ArmTDUB20MashkZRRklBfxbOcTrSLksMiB\r\n63RuH96xiAYezYQmHAV9R0bqwItZKIIUBjQliPZen7mpRhIm1fLFoUYyfHiz\r\nS3VA2eWf/5FOyT6Tj9/6FmLSZig9dkRsjZuHb2MtwWiJ4Zuhk7IQ9hYfGt9K\r\nR81lyrRGeFxxYxcH4aA2rQLzO5Ux+6l6ZEo9QATahPTRdxIMlXsG2brvxtGC\r\n5jJ+0Tsgl1LhKoE7VdFBG78x3582lAP7NnGrgZOK4mhjP5r36TjBOuoOxiyx\r\nVa7HJciaPciiIV/VNClttLY4SdolsMbe8AU=\r\n=fPZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/list":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/menu-surface":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.bbd43e0e0.0_1647463864674_0.08873166456364223","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/menu","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.1b6afad86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8854f0ec57d357019afe2ef61ccad997950f63e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.1b6afad86.0.tgz","fileCount":37,"integrity":"sha512-qsGoibmPPDeTowElJiNyEJBGxDM5eCOzasbcOkkRzBUYoRMiAU5z4Z6/vxjgA6lC8MQdWWEO4Ya3EJJSkH1zuA==","signatures":[{"sig":"MEUCIQD9SLHWEea2wwWQe5rregtvdVCVaLicsyWOQDWR4BYXDwIgAm1Fx4ubKiImLDJRw7eUG4tWemmpTHqa04CL9vpWQaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN/g//YMPa79oQwiZG7jZiWyUw7kUeZFZDiPJ2HGG2OETCMq10hMaU\r\n9eKtNQpqWthtPW9oHMl0CArOcEhYzzie3oCZ9/QV+/iPVOWs8gdQj07yk1Oe\r\nEM7geDtq57IcJlr42Cr+PiKTXoHcAxz7gttZfPP+DgWfzQ1gFQjmd0n8ENs9\r\nh3ibk5mUpjgWHxsP36/1KfEYq+Tcu+tCSinlFqPXOtx5xbG3w4YgoOmpGZl6\r\nroEEwGp33cUJOIiXQXN4bttnJDjeoEz8p7/XnaYb1h9210NHNkwnbHyTZKoS\r\nti+M6k4BT966g+px9ujPtmSG+3JjV0Fdf1nAb/V7wQEkJfCOB68azoiILEYz\r\n1tw006QdIZnRoWY5X54ED2BWhW/Fq85PizB9tP61lBaBxOH0upIeAd/k/N3u\r\nzbShoWOCDRKAWtYu/hZ5JW4wsuKbN79uwFz7ynXGkGpETSW/6PL+p6U8wJ0C\r\nhcZRRC2xIteGkXaIPGFYTIxCpqsAF3ZOCZWmgArwja16fVC2xAu/OmBmSSI2\r\nDU+YSF9JNx2KWLt5vI7q8kSHCsGIXjJNMiSE9CYZeEoWWqn/ns8vin8jdbgW\r\nZxIvRJe08S+Ua1h2StiPIXTymhJ5tIhThB1Ki0B6QVkMtDKb3F4jpLynHxkE\r\nAYOds+KRe4Ll0jE2Ok44Faa+93Wyy5VD7lU=\r\n=aJdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/list":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/menu-surface":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.1b6afad86.0_1647464677153_0.37094845640095286","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/menu","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.bdf9d4af9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97043c9b0bc72d3b206117f874cb6276d97eb7e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":37,"integrity":"sha512-lqa36EYGeQ4higNayG+JfG2afH43ZSf9WHfSoBOHwsgGItSNrEhDPmW9kw+YFxnPgl4Wcu8AqR0eJuo1FNxqNA==","signatures":[{"sig":"MEYCIQCrkkd0zhcmf368rEjBVvH3HS+vyJy/oL6ApdkozqOjiAIhAK07eFJm9eTkvjOX+rE84JAH7xItWvoufz/e+o+o5rxg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzGQ//SvbvAsmeQfq8Mz8GgJWqZutjZPeaki4ZhGfcGjJ2URQcc0e/\r\nRy/bwim/Hjwad6Tbe/B2BLbkVq8LLcbN3gYBqOP4of2+RAy1IQif1rfIir7f\r\nGU7Y8chNY9vRt0CaQ4wOlwj6eStcoOcBFs3uZlmG0q2DfJXDYy3OFYH3dfby\r\nwWgQ/p3EGXX0BM0hN/sCyX4My3dIkD0gIXbQnnmEMXPQiEm4b2Gxs3Z+/9/q\r\nwEWr+993XdZXHxW7DrzM6uyudX/KWyMTtPaWD/LZmWWVHmRZTiexBzIrKS/A\r\nC0IKu4HstKoAI5eGoLE3DTQJM0PngD4351AI10Toab6Lu2SAOpM4aOVEuUoa\r\nh8hKKFYkHtnNww9S1XTqHDr61r9MXuSGTOSvuZO52yYcNyt033Km0hi5b5bd\r\nFUCJ1lS/gm8kR2B/V5cQ8jO//0o2z6gOOBC2V7CVV6VEP1qgEnDscOa+zeux\r\n6mOAvvJS4PM72uxylVkXwkuTR2SsS1j/g51Xr1x23jSD7mC0xyOX3+zEgB6q\r\nYxFyJY7qh0gNvGWyabAekSvFtYE/maMwsNu5xcMfdUw4VbjtS/YiNWd3v7Cl\r\nx1WtP5V6e78SeJv9tAN051yXYY2vwm/eGMuylR168TtvH+4thtMkZ4hpeo/r\r\nZ0UO9vETaJlODmEHquB5RLuCc28z2gyrjf8=\r\n=cCaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/list":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/menu-surface":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.bdf9d4af9.0_1647465533423_0.3645466569432194","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/menu","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.32b391398.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffa6aec97762e3238bb5342a7f585e0a21747bd5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.32b391398.0.tgz","fileCount":37,"integrity":"sha512-+S+/p0Nj4qbDNngY2obGLVfl+IHMs+wJkIl3UtnkQxxuDvcKTD2FJH0jWkYuolGnPrB0M5X9tbmIWvTL7LCHrA==","signatures":[{"sig":"MEUCIF6uZLVhti/8py9cRg1O6jqg0L2UmkBD9Y82KiMqOj3PAiEAzlJRInb3Z2Zi+17nINX0Lvl/7hktSK7FUWKbLRJ20iU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMZxAAg4KpIEI4tcLSSKdQ7xisqr29DnDeHlHDkc94LPoeY+opu1tl\r\nP1POQVrNZodk3SmrYGXqR9hOq9wbsUp+HKtF+nKKlbZhaL9sO2R9W2kkfrUG\r\nMICdVh//8jF5pVNuj5kPIUlwjuzXyeHvnp9ElI487YD+Rtvlt0xl0ASW8RO/\r\nv9UNfI//3PWuFoyesLF4yZFMsRlUlMlZzI5+0j0DHAEO1S2HFuN/BTRBdH8y\r\nF6004/FK6ZI5FioiNhvFldGmMBz+CbalkkZ4RaG71zxe6hX61vrO7nDZMu26\r\nj3T5fjOy8C/MzzMLwyK2bfFF21J4qDOL87XAzXkndwdcAIXdIUpeCDw928Ft\r\nJbemLpRBq03iiT21bFMp2K+3B7GDCRffzVH1h3TYT7dLpo05cQ6AiwOJb0HK\r\nWK3ZXS9uqcCUR0H+Wye1KDYmihsVBKkxj8yTNbuPxhwb2gyz5XO/yyvNTI59\r\nck41XaKpLF+TFcjkjQuH9SEF+QCenSiUSJShMqVoGWqRDxHHTNclNS6MlNpI\r\nI5EhPiIDn7mrDbcYVjF8NvJHhaFwAQ4ozqyOPnqkxj5BA3QkZA4hqlXbZeBp\r\n3Hhz636t3lYBoeDtyZTpyCcdCAqpa97TPPGAB0m7DE8cKkguUp4tHescemxd\r\nXXAU+fglVoNRVMGEJkdqajijiRYtuFWxqh4=\r\n=vQHq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/list":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/menu-surface":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.32b391398.0_1647540018665_0.4833635595557275","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/menu","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.ae8a6a3a3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfbe1b6052b620c194233bb4cd78b075375cdfc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":37,"integrity":"sha512-bofAiWiYs/vVSsEVCwEVTRdrV6vYuHyQH6L9Nv0/tg5guX4Wec3LQUT4jE8G/ZhH2eqJG7Kcc7M6pWA6RCwn5w==","signatures":[{"sig":"MEUCIQCDZjaP2wP92G0p5NOOPzQ0pnk2/etHPGzkxDgSIkoGtgIga7fIvSIGlMveWQujjKP6SgZFcDVxHFwB4EQzgbORrqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVOg//TL+6zM4Dip3/+t9WRAZ1CA8cMV3zk8ShAKJ2LslZR4NBGGKL\r\nKg54ZrAE3v+crBgo1/0sX6QIJsUBGtA7TrArJxmLFQeoxhDEtg6qofJy+nnZ\r\nqrz5rL76edpI8GzbfzJRY9RsyF4/t2fpwLcRky2P2jlAkcAFPfMZ77aKsJRv\r\nepiBXk+f729BBLlgMblumGsjXzj6CU/GbOgw8Gc1HHYVRpX8e0qQ7w0mnGOR\r\ne0LBeUXk7wJBwhXQmic7mVjGvbOYKNhEWOPclQfKOMvzHvHthiLZ3YYJymGS\r\nczn+Qf7U+T6mi0MI0CgsD+We/qFaEy2i35xXguH0Bopf3rrc+dA+r96vaBt3\r\n8Ny/cdvnO+fGx/yMB2nn68HEr/+Mm+czEky0KOVruF999BFr9K0PrFYlWaWj\r\nddxveBjJyEJ7FPkDJePWbR/qHjw3smy1wcm04PdBADXm8fQ+p8rpUfGE0q19\r\nD58RAGaec+TJsgCbtjiD73tYm9yVhanYdsG/X1iMHk7kZNpQXpZkbRcBe3V2\r\nJFDZBnzXKAvQEundQAUvYjipvLAEJOtu+I77ll1a0d62WPXRGASPoMGZih2t\r\nxikRyskLDlCO8SexlGs6SzKLe4UmIyPhY02zckHCBvSAGo+6LK04VWqb2UfV\r\nxxP4pey4M1/Dt1M0reSKNqHax/ZXsgO17Z4=\r\n=+h3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/list":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/menu-surface":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.ae8a6a3a3.0_1647621617217_0.8434914848955779","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/menu","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.cbd9358a6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"471f286d4d781a97e6ee978e3fba8e109736a20b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.cbd9358a6.0.tgz","fileCount":37,"integrity":"sha512-9c6lgp5nff2fB1/ATNSEk0BBmVOeXhOEkTPwAWZ3FUWVFf/vBxrEhQ78ydj5pATyARqkuNXuHM7446tht2jubg==","signatures":[{"sig":"MEUCIQC78tNQS9yDu994Aik0UojzmzVohOEWjVC4cVosj2FDjQIgHytANd4qDcqncN0WrCM4v9H33G5Hq8e+cBGAfnUd7lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU6BAAlraRPQtE7paCwRiO+XR19IELqFjVnriWAppWn6zfSNCdDA2D\r\npTLkDmaEs8IYW3hBBtSnF48XbOXSvuEr8/VfRtNjKP0xhtokUT4JY4oWlutV\r\nB8YjBZK4jOry7WuQHOmaTz+TxTK93swzE8ZWCxfv+jk9kAq70Aq6gSuq+vGR\r\nGJDTc+pS5QWymssUhM1mnkEw9LZRFua2XVtmJLvJgCH60OJKto9d+PxKI4HA\r\ndFbmLsaywHWaCxZg5wSBxmp+EL5Q65VueIW6GGZfcNJDQu9OcKmDtST1Hen8\r\nAODJiyhN1nRqpsbXapXB1R27CLR0UpbVGJmXXYe/AVr0DNCCDWSNgXl1Gn3w\r\ny2lrnCx3+jYTs/aTqZ6S+3jpbIwEJ/HBFCekVpbgIOKG9oDgsg1/zy/rBFHh\r\njhH5PzmK+puoWEzOsi+KK1bxAGjXcyvUQVkKYXmb0aVDa+50R5RUyqIggq2p\r\nvBYpJ9RoNuVkxWC+vwFGP6U1pm7lGWSVxMjZmGhn3sE1GXxfFYKLqBWduqZh\r\n3p32rWWIC0tUpxtEMPYPeyeWHHeRXcqEVNK2eVnd4BRCQAyA2P6t6B1WPXCP\r\nO7Rda+g3ZR7xwG1PYuffA+qp9Vroab9gvAOdwITI6aHepan/e+d4qTjxryAP\r\ntcUohf+ySbPuyTAdrOxZKvU3ylZhz7YyKw0=\r\n=ZtFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/list":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/menu-surface":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.cbd9358a6.0_1647643988475_0.2321330963313588","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/menu","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.dcfe49c98.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e34b724036bcc250f0b91a8b2e16f17d746af9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.dcfe49c98.0.tgz","fileCount":37,"integrity":"sha512-/gYKj5+hhu9f4PpHvGSHH9K57T2XFULC2QuZx257a7DWH9JmT9Qej51rdNH4rm6Dp2yJ6xZTUxoSQynnaYBmtw==","signatures":[{"sig":"MEYCIQDGmRn9mK/HIIR4hGDz37ti8bw/JCGC/QJbgTHXVg32RwIhANyMCYmXRz82jTnwUro5ZCW/kx9LaUcMNHIwjJeggpki","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMe0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwMA/+NmcgazZLLCniB9dZcz0he7ztSBIveNMYQtLgnFMh2A9d6jat\r\nND5GOKadIA2+OVgG0J1cvPDzT7cp+DixtdhY0lCf43QI61lBIwmkXkcZw/kf\r\n/xZ1AtO8n5Tkh5KAiqIZALSMGB7ix0c+Fn3l3pL/TP4OjyTinM/0mDlLgd6o\r\nGlwJZEQ6YI0qedl2AIScAdphBNbWuS+BlPaAJ9AtFBAHVAg8dd7q+m0AZUsI\r\npVpecVj9Oi9UNa2XVNGPshFqnAwfChMvosMxlp1o1odmfIEUT3Vra3rteQ8U\r\nmiqYbQk3imY7X5tV97VneXaTwhUXlMknOO4k5T3ZPkWmeoltN9LZB4JQ1Hl5\r\n1PcRvFhS2x09jKsB7g0fmo0GJBlwLtPD4uUvlB2LKgFPBx475Q91SCg8yi95\r\nclCzETUaAOo0ItiKOd1sEejq1rYQgqyX3mip03H9iuAk98U60VWwMEsH5Or1\r\niZ6sqjY8shOw/VDWjwvenqIMT8v3aD1kaLxC9bcMl00PwQpXeMxbQrID1NAS\r\nHXP6AopGY9tJDI2cGaC4MWFzeF96ZN5ZMvK+5jO/p12ZR7LVYrB1C6Kzg/mj\r\nJKWMbl/SLwBDu5OgYTJvOHIynLd3j13Unw9ox94fzzoqhQmjGEH/4OmZtSVr\r\nb2eLzuhwjOmtqxYUvLgjIvb+8rnrJtKaDvc=\r\n=YAzv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/list":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/menu-surface":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.dcfe49c98.0_1647888307882_0.6998746998334167","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/menu","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.f31a833fa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d4bd6ad87b037eb4a669d6cf5080b54e5c0fc0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.f31a833fa.0.tgz","fileCount":37,"integrity":"sha512-bKIUzqdZWao8tdl5AAU55TEU3nPCWMoO9h68KLCY7HGEWVneR8pIGfjge/Dr3DRZKE4UZKWQX+TBh7MhFY/ZfA==","signatures":[{"sig":"MEUCIBfI3ygk0GD3OAkVeenrO4DzF0K5zvLJDQChQlYHNqX4AiEA95Mx/+yusJ+6a9piM+MtNQrFlIVrWiAT7JxZsEZize0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDZQ//cjmZsyIajrn0vfwEwgNHwe2xMY49pOrz3APzbooUHz8zZ7hd\r\nySg4/hVdqb/e0Sv+7bWQFjl47DeoXC/McmlQSq0hThXTcbOdEtbojICNSdyO\r\nTcF68CPwKe+iez2Ay1W24SQliGhYzfKloYfsBWHB61BNqvQGBy4Nm6s+kuXf\r\n9wgjJ5Z9ULVRx5PqgsIxLuOsQoTSeT2RBN1ntPC640RbEzgy/rnjWYOEpFiX\r\nBHY5VEAASfwsgrRYhXLSOS2zIR7gtIQpw0iKjzFTcmI4VyAhAwDWPg7tNzfV\r\nY/22twJ+nBfnRh8ak7wCIUFuIlHFv7ajHyYmWg9XyVLGBp6ZPDtOZhY5YWW1\r\njft8IeqccozSnWHm4HSLSKArQ+/7W1WbX3zC9amG8joO6G3BQwRT/NbIObLO\r\n2KJxDObiye3JtBCx03oRElOqzdkx+XEAnVhPB8O8JJ03yhBq+JSQhQxZCvqQ\r\niT7s3GMjwxw+WWs6RdGZNYWTwbFCjoVuhqRL848/6HXBiBhy1idzk+sXC50b\r\n410RM+qyoZgT+pll6jqq0yvGp0cBkXnXFvmXSe6CtN7H6QJMsGQNlCfLiFEs\r\nkMshF6+dzuXTbK0hkHN8KCaSoqisC0CmD7lLssPMUeeVtOGmOVF8eGtm5epj\r\n/UTSrSLuU2ouYna0Idym92BV/7cKP3dNIKA=\r\n=Ud3x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/list":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/menu-surface":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.f31a833fa.0_1647996708117_0.587344286929423","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/menu","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.4b92e210a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12c153dbfe2910747e0b391ea7eb1e285b22d5e3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.4b92e210a.0.tgz","fileCount":37,"integrity":"sha512-rNcWIRQ8UoGAYBnjUsEl2exnY3Bn55jgo1VDi/EtQVWPJ0S39gbRE/DiKiagmjK6PvE7J+Wlpo2cVxdDI8NH3w==","signatures":[{"sig":"MEQCIEIXhwRfSqRO3p5CpwzqlAJ/3eOo58fw+VPRooVRtXKhAiBX7i3Xc1Iu7PDTs5VoSsXGEu7nn2i7MLbXF+oxRkqJfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCnw//ZhItS4KaAxxXk321+eyce9UhmC47zcR/hxY7njZ3WjuEvXO0\r\nL+8WYVBNrm8gGJ9FxYqkMqMGsIJeRtLsyL9nmlkhOR/r2JyMNLi4eJDbDeR4\r\nUAqV8HtDCkZKLSO2SVm3lTtB8y2qSbs/uAXo3K2YQYA6rkeWhDWKlgdIgO4J\r\nUmGcedW9tgv1oArSeTOMj1wzLG7TUoRAM0G6g4KXaLkaZWIT+vUnGNiHUFJo\r\nobXCow62OOUxMJS5+c/uLkMFutijw+RS5guTFR84iC6dHVGEUu/ikF2mneKd\r\nzaeGSJTPhW9JCEuJjmqLM7qBbatSWAmgV+Mo5rz9ESt/fuIcplN6IEBKE0KN\r\n0kQMjE5Wk5+2qsfiD2LPDKd6NmjUC+PVtAJfkJvHYn7UcBA8cAAImUig221i\r\nzNskrNNDKIJvhV1ada/Hiv/cK4fniXUA/zjSzC3KcZ/nLAzUYTSW7CWi34i+\r\nVEI1ZOtVyCEXyrZaakVQhd1kx7OL0gcBDL4rtSEtcDF+i3IVSpYkpkc/sAxH\r\nCfWq117QzDBrKuCb84eiWHgSDEqieSU1UP4QGUXFJHME9m7Aq96E+cpEmQ0a\r\n07pi/1QbN4kI0gxxmDduigoY5A22yGEGbyaVUG++U6FyMiyYyp+oRZuVM1Sd\r\ntQVmb6lGwfs4z8XfMZbWVwVxYI0B6X8KJI0=\r\n=l0zi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/list":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/menu-surface":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.4b92e210a.0_1648153174178_0.2454385500250129","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/menu","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.a657abb61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6a8626bdcf864293c563fd7b7ed1bd9c0f7523","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.a657abb61.0.tgz","fileCount":37,"integrity":"sha512-9vrqK8Ua0FCCXgb5SlF3THA8wjKRqZQDBLud96c6Mjt5muZ4LvBAgVq2PCNTUGbPoOwPxWo3Cmv6MO7mHvnSFg==","signatures":[{"sig":"MEUCIQDB7JRK3yp9p/JTPKNAR7dv5P2G1MpGm7dD1y+WsZKK8QIgURxDNI4SSfNIx0b9usnd/0T3ChEkQZ0CE8rXD3AM+yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNddACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXaQ//aB73CxHlvBm24kbSe1eXQB4Aw/kFNCIQXP9QHe1pkCuLYL0c\r\nJAgNTFD+WWYBEzcoigE45YPqva19Z82krI5SU9zN/f1lcd5FX1Ya5QjIVE8L\r\n9s2rtGr1IEPjfpnAwtMEfih5ykWKRq56lhk5vig29U2nxUm/a4XFcPuxpudu\r\nv8HlRTqxBBfaB+NdfT+bFDRxqZ9FDqMj/GDQZVT3C/rY/dhHHDKxqzUICYUo\r\nNRkrKSRo78tG0W1YV0nisDx2iV+K0aabRUPK1gWzPtaep6UXNZNMdF13hKev\r\nmZeGN3tZAg8KgReiTJs2jfVHV/iYjjGGtvlSaYZ8N0bxXgb2HkRZMmuatg1J\r\nM9rcODLh/cmU8bTJeghcKNKuC7VbV12ucHIwI8vzOI9grI96jKhSuIsI+WgN\r\n3kwQEMoIhGk7Jj4YgBhHY+CjPK3gV44ZXTl1MugbIwbxaqskNasHSVZ+6Gu9\r\nRKD/3dq9tdJVNmubcv4DekAlyPMfd/Cfx+qSXlMTZ13zR0Jp1EHVhOstgO4J\r\n7k9BmHLcez4+Cc09kpWPd/dotG/22EZSLliyL9e6gKGRtNjoAKset+sQwxvv\r\nCYrJ1U0H58mpKqWTRV0/6XSlwAxu/VTUqhbKtmUybTJg0nAMxUys5S2X9xR6\r\nSHQKntGTiIig/YSnzl+8OcVJGiggHmOzP5M=\r\n=KRh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/list":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/menu-surface":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.a657abb61.0_1648154461240_0.7656956669636834","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/menu","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.443f63f50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c28774f6e9374a69d8fa38ab8d31764b9ed8010c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.443f63f50.0.tgz","fileCount":37,"integrity":"sha512-0TrA7tdPQK14Ck7yVDxzJq5mJ1/KiA+z+bL+X/pus8UUElEOm2zklz4LEhdDfN7/pHaZXqI1Zdwhp1Y1Rh3vyw==","signatures":[{"sig":"MEUCIAn7+yyjQQrZ3lmdNkhLlppSRMzE82Vp6lFxN0bCoecgAiEA1Z/PucuBROCuwuF8NfzWQHAZ8bJdxgTc/CUdXfYhyN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkrBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSkQ//WiptEgFEfdzxElLMI2NdR9kEY4H4qtWpr5pHCgonx6tawWtb\r\nPnm/hkqg5zhFYMzD6S08lxUVws3A5y+Aeb+29AT3D8rVv7EWTbiSZh/T+v9S\r\nPv0hvKQqu7rh6iz6+TsD4ML/kL7FkttMz2QuDpqPyChzg81kX8Xtio8IFNr3\r\n1ushwAkXnaoEH3X2vbh20alo4rTUs54rmwWjfLkFQE09mmY8SEMQ67UTYsEA\r\nwAAFZmrKCH+eta7oW+Ool5K1Y/0vq2/YeFgY3eP8g2GQVBSIot7XJkKrOucc\r\nmnhuFueBejA65jjjXddRS7RiaQ1fDW75tVYZZR5nFo6RBy8YweZ4fxoCNdL4\r\nyildCJUmDDXBdN+/pLMYVBi7MnK8ws/tlcORJSAbQm7Iikju47GTyIfYZBif\r\nHTbbPtsKCdtWyiCJPoby0IApSCdVRHbqzWQNlthuuNCwPa434CR+QTBIF7u4\r\nWM8JIBIzXHlLtatQrLVaX/6pdkwhhcvjwbTYCVdpHOsag/84LSUV5N21HiZp\r\naA9mb7bkb+LJJRdopy06q7kSco6WgoOkxgDPV/aXsd2LUJZdwJ1jHA1q5Xpg\r\nXfbMv4vIfS6n1nm5vZ3o5MW7ergK9T7WxwgiexiQXFNoS6fTnfkAFeMwb8DX\r\n93AVouoaErgb4aiBxt8YILEJwA0QSTa1FJg=\r\n=dUMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/list":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/menu-surface":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.443f63f50.0_1648249536969_0.3585894460025161","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/menu","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.eb382f318.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c36146169c4dbc3fbd5914af748cf67ff8a2015b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.eb382f318.0.tgz","fileCount":37,"integrity":"sha512-s02TdJgNo0xOVdNSdRQS5wQqA+PgbQW8vdwDpFOLghHZ5ce8rvcue+/8kGXW322Qgjm2pcrhMyhH42l6+8OzLA==","signatures":[{"sig":"MEQCIGidrFryCoZou9vCC/ZhiDu1ciscPpfgw9b01jWxt4WEAiAR9rNNexwdkpPV/Lt2uUadE/WTJxoK3fmpd/Fapb4gQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0OBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLXw//aK3yrVONQsYDR6/c3pXQ4dNoSKQPsPFar2LdJuaG0x33v+BF\r\nBauWkNnA/BWdHZpvpww3RGzP78WQbxxKkSTslOMPqeqFWDXqZFkPMnughxyJ\r\n82YkCIaBtCYzh4TRK2gcA+1SeS/YdTnxcTXNJYxyAtEOVrmbbXl7YGRXTp3Q\r\nVVIcUtuxPw8+LCXKMGmCCVE8doqPka91P5ZoqR4iI44p83y03mSUxhNb9RfP\r\nMxwZre8V3wF1A3xv42ek+CftIn4y5ITVUtFm8VW0/ANe1/Y8ycMngeuU6sFC\r\nYlnA+D6vwG7irllKUtG1zWP95dl5EL6fbcrv3YXTxcVS+XhTM0HhirU+Cz3h\r\n9yjVFedhe049ySTzAFn0n3DGpOvwnY10xmp/eStjsVkqXUC7dhKcZz1bIgIi\r\n8Mx4TsCRE84PX9oh+FPlBfwMIqN5EnzH9Ik705KkDEh9oTP1sXqQKQkJQQHV\r\n/KaXEXMt6w7tUvBSpkV341TiKmnyF3HwpKu8QEZ6v3Mnr9jkQnZ4oZYqGaFL\r\n92FTNJptlqfC9frn83X4MwDDAAHcKNB391E63IOUR7rWYU890wJaNEGWL2aD\r\nun4LpOFKKlvRJXjRvZ61uJaRaLbIeygeYwfYwcPkt7qW6sndM9m5XUryExng\r\nG1S0LGANH0jgIYdMf2G5K0ffaUQDMVnY33Q=\r\n=dUoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/list":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/menu-surface":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.eb382f318.0_1648575360693_0.00387995906099059","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/menu","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.344d52823.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce5b091810c6601065315254a39c6ae3c666087f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.344d52823.0.tgz","fileCount":37,"integrity":"sha512-p7h5mkfG4k1RaoTp7TmKXEzc3BJzGY5AvF8F6b8j2cy3hIvY9p81N9F8P2YEeN8tsEAfkIQlOmPRT6osRiKW5g==","signatures":[{"sig":"MEQCIAbbUK1R3XrKv52fXk9jlNcFkwW8aleokgg0jD85Z9r4AiBMiKA8zOL+T2FKd3JkS9GC5EBY1NLcZE07PIPBn9S0CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1OEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxLxAAoyBaBJWUayP9jTaVjkDstI9ODUn5f1x06oRrPSWhjvwZXCcF\r\nWl9HRj6FOzqEzjsX7bydEES42fq/UrR3uiCYosJgQh0EeObWhWUQ5Xwv6s0k\r\nX+fogK9JTZlbuJfMZx1nuO+qJsmUqzHWQ9JJQhTftMHrQsDf0YTJ6S5hlZHz\r\nIbCbxl4bHNPjzxJ7Hrsj9ODIo23TLKwo6XwstAGHqO3hLCvbamejtAtf8eXQ\r\nCm91qm95OCr2WUPVUL7YIyb5dRo3mabXwtS+NMbH1gDh2K4WBZcAEEcVPu6f\r\nyPchwy3JiYlRww5TZQCgFWJGGvY5qk48/t7JbC8OSlvuoLldzx9zvRikCQ7C\r\nv+I+crAeTfEapn6JABEdTStFmB2ahT9O+rT70DSENsyY68AkeXy4ZsIUUQxg\r\njMmb0kte+B40BkL5mtnYif2a0TnwwgoZUasqCuRAdjZD2W5IEZJXQnxlA7Ig\r\nYMXKa+aOzjzkcIXmRnTvS5SYYuqUx0U1ORXIWB012dubi6GL7DdndIPqQ+RW\r\n1eWwjDP/5oMB7ij5BnO5qaMmJzzyUiNJgPyhKrNkmG/XygSw6nGoN+uXDDPn\r\nWZ4nbI6GlmtUXloGxYjREnM8qbbQ9AZ1VDNAV9ePbvj38ULz2ipWPuJlrLeO\r\n0TcqscgNAo2qPzKVA6gaDJvUftJskIL5HVw=\r\n=Ldkn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/list":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/menu-surface":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.344d52823.0_1648579460074_0.9465481973801422","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/menu","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.4e372fb49.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e3f4fa7037fafa35d0a222b9597955524a51302","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.4e372fb49.0.tgz","fileCount":37,"integrity":"sha512-csvL0KFbR3PCL24V8Lnw303KIOWpiXiL13PCrO+5EAacbRk0SWAO8Op+RabZDdsLUSVdh5T7uOsaiCzHHXedcA==","signatures":[{"sig":"MEQCIDoAMw3iXTWV/Et3FidAwpQiroY/4JO23J6Ujdm47QkBAiBq6K4Q3M1YoLvl1U32P8opLKy90p1wVGxSIOcGVvWDdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0q4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqiqg/8DPi2wlqJJJopSvuUtT22mTU/TpOssCOHcXqh6gilhtBW3BLN\r\nF+b91hbNf3xU/dXdBvGr1X6EL/GAXk+cz+2mhUp5AY8kMzJSxFwbnWUplo7c\r\nZVuokGPKvtaODcieKAcJnToYeWrmH7oNDKZPMjPF4pLJTOIw9NU3SX58DqcP\r\nZfisWNyE4WrKar8SpIOHsTwujVgmSZqAOgxK3hzHzqGoWX7xFtEHge+Yt0fm\r\nN/TfOHIkhKQWEAQt0mmGK2SyxQQksxFK0YyWe/5/CR5bn9oQOThzkSfBoSa4\r\nb8XI9G1tuOySilxMkJPTAfTyx6X4n8+XHkjBPh1rBZ7EIcZU61VZuLt4zLq4\r\nTV+qsvbLy+PIR3YzQouD7J9QHXTBHcmpg7PlLgDXUpReyHi33jvBUELaqW3s\r\nMJIIRe5XHq28uLw2NDgCTW2JPM2BDx9s1guZ6UeC042XzbsM1NuCp5f3Ml4D\r\nvlgYbeDhxfVyjOpSQ5q/0JGmebbUWRrgckepFxI01E1zo/8ByxEtR+b9yGp9\r\n5K4bTS+CqZLIodf4oKG7BnNmAScek0+yaasi+ViM7PhQUqFJAQfoXzUYHddG\r\nlGzpZ9i4Itk+QXEtsY21/sUqdrxoenYzviCIPCseRnvZwDxEh54zEA7fksZ3\r\nArl7BG5YEeeaOQ+vD2pA8j6eMVmX2TPPw7Y=\r\n=EFtA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/list":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/menu-surface":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.4e372fb49.0_1649363640106_0.08471752182022585","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/menu","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3e30054fb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8862cf662c71cdc6c58b0a39eee1a46f30d1b324","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3e30054fb.0.tgz","fileCount":37,"integrity":"sha512-to02UhuYSor2ItCIotcAhyn4L3mMtOx91Qw5TVUp7uFSCwLDkklGgsBAMvvVN5FEinqd6NdMkC/89hwJY4RaZw==","signatures":[{"sig":"MEYCIQDkCVVwwHV8S6BZjc+oTOh+Goc84bfRQULKKLRUHG87sgIhAPCNrDJqkuYk50quXXF/ljZHDXzL4uEG9qdj9ssaZ/DN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0t3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwiA//XTZSlKL/Ekm5u3dx3p25fXpvXBDwUoJ0zynYVPFbNbvvtRzW\r\n+nYTSFeWsntLHn1d4ZWm6ZmErICDgLXP5G3bScwFoGvXso6Jfn73wE2EN9wB\r\nlP3isqb+cWkALXCM71UD/SQs6M3FXwC16jRoz6CNt/WyTAQF74NAktg3reH5\r\n5c2bvtdttwpJXwgnz/+3eqDdOjvBAy2Ru44DLdxw0VNrVhCZOU4x/swldEFH\r\noHAxtowKWbEamICmvCT4M8FDOnTx5SP8V1s87ZiHV8RqFVp6J1pO85EIZKZZ\r\nsvLLY2oCji7i7VrSeVbrlsh9iW7hJKEv+ShAHT+8dp5T6YuxE1xAPEbDYOTT\r\nFdUDoFHaU6yBENOWfSMy7OnASQ/W0/9t0CjVJtVzIVfEo2RGdpIExQwefxGx\r\nRVbaRGa22HFX49Zut+d3EpLdJHS5FJpGwOcd984RtfSyJKmxq1ElLuupOvw6\r\npLZ1XlxxWw3m635zju5rmNNokVWAt4ccgdHJvygtMYL+psz6P/KMPlwnXGPC\r\nEj4BJHDt1/B0TiWxROQK5mNmQQXWH4KPSl2aT37+7J1qH6RXAMtOUNC13C0h\r\nuViL4bkDHouOxAyrN/ftSldIniZLP/szCYZ/UmzTcX1p3zEgB/qBwUEBE2JE\r\n1w1RpID3LV8Zb4KAHnVzEAcWXCXwPIRG840=\r\n=BtVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/list":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/menu-surface":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3e30054fb.0_1649888118768_0.03381018077301756","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/menu","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.8c4da223a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df3a54e7d27bbbb7170b48e8ac2dabbdf4ca64eb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.8c4da223a.0.tgz","fileCount":37,"integrity":"sha512-WfnEYJ5oIdi30jEgikVhuFq/zQumUNH269KTkRVXQk4hFR4jeDbp3Lsj2FrM0hh+zPwd7kmW8FEEuMyI7pUvyw==","signatures":[{"sig":"MEYCIQD6asPyyYtFOn3qW8K2qVBdjbXgSQyBrKqFAUs2vmaXyAIhAJ/4zk5INbX+tUc4nw35O6bQK6e26ZH4mksUVCNAMhyu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb6g/+OS4W44Vvm72dv7aRFUbaWvyhsENWL6yHSxpmFnuiODQd8qp4\r\nTO63zFRa7/eJciv6lXUxPygxlhe0CRKQoedc4x6RrRDZFFynd+lcb5OGqM3b\r\n/0SEFqGOAo/FZmcw8Xh4gU0cmDJPFkrmv2jo8U0aVoaSDCFgFAhBZOoO/MdE\r\nH1bqcq0yg01TAOxaUl21VWmSFKVyiicMFYgfABexBVjdNRhk4pVMED9dUpNQ\r\nGR3kjZWuM7trGQs2B0nImF39XLx5zLMHQR7t762is6gB58yiF3IbDpjoLuzs\r\nx/hE+5+Bv6BApX03+xqMdc/MCx3jUpYGXk369qyz1qL0weGOD1czyGk7uCwq\r\n/qNAjf0PQjuuqGMNDDjzbdaA0JjgQnIdh8JHlIR4Am3PZYTKGxBVTPzCSMDg\r\nSDTWS3ldxGUR5NGJ+Ygfbf26TV5rnwRgULNJKFzmusCKmDQhZKgef9wSlBwA\r\nGdP43rZX100EfLILKttke8+m7hwG5RByWDIo3sO9/OnRaKJofWQmumAeS0og\r\nUDARo1a/lbJ0DuPMMM98r7kknYykZLlY0g776CS9b/lMgCckNiuaE/nu4RnE\r\nxTzI6wJ6SpZTez3amiZri7lwuelB8ZkfppmUMQP4oHfhVmY+W+LXU4hvLFKU\r\nyUgKAoYyLmW5qGhUD/t0KdNAtHee5EjDjQc=\r\n=wVxG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/list":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/menu-surface":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.8c4da223a.0_1650381915840_0.3372612629552121","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/menu","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.7de8965cc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fd6660d7c0604fe7ec26e8bf8d923d76791195b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.7de8965cc.0.tgz","fileCount":37,"integrity":"sha512-JohizaqNvFubTZ+Iv6hxATl4uXcRbH9VmiPCfrsZq4duvXChhdfK8sybTSram5nZZVR5BKkhmCX+sS4O2ntHsw==","signatures":[{"sig":"MEUCIQDrOQKFrtiYI2ajkcC5uU7E0ovAS3l+cD7mku/qAgMCmwIgV69hLGnxgCs6Vpxd6tsoxMgMJb+SGdjts2qm5FSyXc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Pw//XK8aO3bRhRH5S1Rf58toINPC4nx9H5Fj+TCS3PIv5m4RTFe9\r\nRlL2gdmAoTTT9upg4sxASenNbdTbh9sHrkRDmkdQMBjZcYA9Lk8BCVrRveEz\r\nABJ1SPvFHZ0hfzD8UIS6UT55STiXZNb03AopuOGHTg2n+KJWLmoW3t7bj1LN\r\nXm2kKPwEDlaiSTM/eMz7vCohrWST0NWaZIFQiKokieltHb1WgQpG30/gqCKs\r\nrG826umbqIUslFzVvHzaO0o6viAWvQKQQRbG34swgH0wwR5NOyqHbuS9ysQx\r\nibPhGXZg3cU/ZfQ9jRKSJqA5lNQWCUv4twZNkeY644LIs9+P6RcsDA/JDGez\r\nxJx/j/lXBMsQpoE4qLBHri42DpKYV3sbti7T9DZqY/VV0TJ5WPvI2ECh64ig\r\nskpdksRRQLae9N7FXI9t1O87eNnTfsMVsP6ytjt4/uwUplN6os5Sokc/DzYv\r\n0dTjRa3S7eI6hVSxPN4zwvVtc21vuJTjZfb3pBFbFm9LfJsqoZKvaz9wcv9t\r\na8YEkC+yhGXGeEFmwbvKTuTduTMSR/kmOSlvokq2UBngUq7aUNN+07+cCG3l\r\nFeceFzG56djmAt3qt92QKsJXNudsUsC5WZxep1gxoQBMhIbAidL0SE4SK4UI\r\nzbO93EtLonIMaTtylHzEkvbUxMJMVJ2J6uQ=\r\n=opb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/list":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/menu-surface":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.7de8965cc.0_1650399863847_0.4181910176298447","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/menu","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.641ed0851.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55239c11ff356d763108d628cdf5b150170e4117","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.641ed0851.0.tgz","fileCount":37,"integrity":"sha512-4cijW6VZ9+FQmFnZaEPtjaowpthsyT6aJGI5Dub/c+eKXu3f0E1NcryzqWZ7k1eTXmQ57loL5kKcY7jrjSlNlg==","signatures":[{"sig":"MEUCIQDFFiQSUQj2iEIx3CPkQIb8PA6PgacdTGR5UXaQCRoVOQIgSOn7PrDBVUQG7H59NtmE2Pch06ejX17hObLaeSFHwqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogVw//c2L7aBj+VkIrKDJKSPTepvNjZ7hRhZrLqJe+xEQMFCYA2ubC\r\n+UxvtQH3/q3guX9PY3oDpDz2P6+VzndvsIewc8/8g4E9FAfmiWt8hVXsixYu\r\nQdgMDFgsbCtOLuTsPaAfp2EfuENGM72lTa7nTxaXbHYFCStcM/rNbG09abRN\r\nGCksGg1DYPmnF6bhhOBOOSit16c274oTHCXecCJR5cCCbiuZUa03R/J2KTKo\r\nuH+ZLhvnxqH77vXC29GNbXNwinPrk66vu2IfhmQ12csEjWiHgncKu2pAabVN\r\nO/JCHODIDv04X2SANpWkF5TgZRu9ONErNHtzUqEtV7xEMldICvCqpYHrFE4P\r\niekWQfN9BCN8L6ny7uljdt4FdZXKQNQMExfKNtkDuClcFMwO32n3L40R37oR\r\nMRnhkde99RJXqXvF5m9+L3MNgkqpd0aKFk0p4XRrQWD18p2NfOn2rsBy8A2B\r\ny4gBvuNkdQ66U+EObNzFqYdHrC2I/2XPO/uF3hX/5BJXCXr6YEUomjQANWSO\r\n46mfJo1dApkoHPti7b/caKeFZdRQSGicQKcyh35nO+ge++VzsNC3wU9fXiPQ\r\n2zEZN5mEDHl5X90UoX/Noy5KVe2WEFGfFkbLj6usFHv/kHerL9shYhfuRydi\r\n4Z/bFKJ1xtMDCYJZaGM2cuoXFIJH3ZHb1GA=\r\n=e5BT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/list":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/menu-surface":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.641ed0851.0_1650470808082_0.12526768240082764","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/menu","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.e88f83024.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7cc0f19637fd8b4519a5ad1821ae01f45891e23","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.e88f83024.0.tgz","fileCount":37,"integrity":"sha512-O0EGKYb55r6gyJN/1esgXi+3iXTLelr1+wXykDn5ORybZ5OXIvm6Xwge8y+0jIdZ5gFT1M98EPfI8c3+xo/vhg==","signatures":[{"sig":"MEUCIQCs4DGegACLxsdue70SCUmTBhLQ3iOkyg6Sq27d1VqFpQIgGxjdSGPBv6WCKgyJJxl4Pz+hoKo/j3zx7UdMdqza7U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEeAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDUw/9HLKWhKDgmc86a7m2LLg2cjrhcKBf24OX5yYqzBJbQOkR/QeW\r\n0jw+YHoOeIuBCGCrIBsFI+Dfnwagj2IWjzs/BzRizTSHfV+N8JVV9tXuSpEh\r\nvLdmbKQl3rimtjMm8SV9VZIWshett8XY7TvBTZmwwkqlBk8P4C3fscOIGyRm\r\n+BwMbP0NCnAvzzPPx5FjEkRWx4/ra7zFNJBx+7lTogsaUSsfBYrSMFsORJw6\r\nztDnATvzFBld3kDLBz7D341Fs/XcVdvefat4EnLNxlfDb98x045GilnWn+X8\r\ngLxVllNoXeDtXLXrJDBUd+snyeOKlIKErrAeysTyNID3JMJLGiOlZ5PyxFIh\r\n732S2YOIY44xWnRmzMct2k6/SDwLEN9wovtDRhe/hFgKA59EFVedo143dc3L\r\n6IUjPFqloW9JNG825bwDdhXpfhip/lG2KwoJxnIAftq7lqkaMKgwvyeU8MoC\r\nbPHYvpYMiAvtUytq4gSrxEnyu3y/gXdnjNCYxAB6qKdfZVewrkIaRoWv9MDG\r\n4KEXLBBgb3ZJJFR8HWbU+alITzlKT9bySpWIJcQiOtTjRc10P+u4LQmpauHX\r\nhJx8yNQYbOQsnLVjhYu3nHivHW0vtfJVnW7IjNEZ7rRfTrIAzRaM/we2qmSA\r\nKujxhEzniQnIJ7SqOqlz1DLxC8YDdjuKag8=\r\n=Z6l5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/list":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/menu-surface":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.e88f83024.0_1650476928405_0.7948916800852448","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/menu","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.7321d6254.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b21423a22c1290d056e0d0823b7b94cd6cb0f80","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.7321d6254.0.tgz","fileCount":37,"integrity":"sha512-m1SXzOi6PzEqdeLC9AxbIDmc3di1Y44SoVZy3GOlIG+HABlZSCYLt9CSWiAIkeiuoF4n6byxbDaTCiBPPvVKDQ==","signatures":[{"sig":"MEQCIGyH/h+WJmQuDJgVDE3Ekqaxuxe7fZXDRQHRHoXyuI4+AiAfaCaGnPxTl0yfSEN709bjvXSCZU8wO9nAzHA7e4ADJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGknACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/RA/9H7vgq1keyyhzgWbVSo360UghsB6xon9eV7zh0WDjci9OVsjT\r\nVB/UItEmYSNz6wuXRWKK781lMHvyGBv/AOK3WOUzIyLlfyPPARYqemOc/M1u\r\nZjFqFMoZE8PkatEOZwielmX4RBzcBScBSlmvIKvHnCpV0MNDjweJMRBwQGvD\r\nYep+UPV+lK5UuvgS4mu1YcsZ30F8Oxgv+fS1deJZoBfAIMWicefbFXSrKBOX\r\n9jSkDeiD7XcQEkGA10UzlVIkOuf79f3d0Du7hdfrkSlqeP9UWwLTPy3eZRS6\r\nteqcobOpFQ2y7yaAeAF5rvYRAAOZodLQ7DJRkdKsIZa2Z1ESCDpfSCBy0GoE\r\n/VSjKHiiWXEnIm7h05nDXHHrUhSrJKNuzHOg8+tp+Z29JQ3MrV3UPa+qnKBi\r\nOYLjRcceF4giPP/ZNF/zjW4byfE4byxqbryLPRrFf4Jovm91nl+jSdj+dj3b\r\nYs1+FhsfdU/CDg8r2Wx4Vsfah2o1m4QBqCZ63JttxrhzOHkp0Ibe9CNkifBM\r\nCDzMQRg4e+3/wyK07o4AiteYrO8J9rJBAnqacj4NIPWcT0cO5pnM/gyXqusO\r\n+eK9Jb5aa68yw8wzyqDaZ4PRNt8p74y4Vp36B/WdZVu7vSwYC6WOGUMCgoLF\r\n/Pfy2YSFqrtL5brRKrVR4JXBzdSE16IB0j0=\r\n=KpfT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/list":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/menu-surface":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.7321d6254.0_1650485543056_0.7325729753336825","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/menu","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.3ab956515.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa3387d9560ba39e4d08a98e13d3e34ff5b2f842","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.3ab956515.0.tgz","fileCount":37,"integrity":"sha512-f7HrY4wGnarmOi8mVOlr/GskGytblJi0BH8EUhb/znMq3wY24Hqp7sXGWaW+zo/YAKJkdo4ubZoneAqPmFrGWg==","signatures":[{"sig":"MEUCIQCY1ShJy22NJCUqEnaawpX/QSip5Z0gmbwj0qa1D+emuQIgB8Fhup9aeX2yvtYqJQby5tv6Mzhs8hyUctXyFB2iU8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7VA//QR64sp32IKEoJjqea3Cxn0Yy0QtT441Ce4xWJJInYaqZMouR\r\nFDzeHzhqc6D9l/1ct2j3kmp6oRDXJSoEJpPPNXY/rdfvg9kQt1kFWOoJlSjo\r\n1fH4JFMncRe84TgP0Gk9QdgSHclNl7OrjVE9W11tGfi+wENSGHbYjmNSYOsx\r\nvYT/kE6gy/DI4cpN74BbHrxCfS684eOxZVyiMmQwxqxSfTit9nkPqgQbGFT6\r\nUdXyjHjZeWwRcFk0OtANjlFTc/jDIarf3MxFpIvZpPX215WMdm9ugF8iX7fw\r\nI/yWc5YXf/poqvxj8H8h5sEacNF8/ihEpqb0ECkK7I9PMI05/oWV2pREVHDG\r\nZeq54mZSUyNvOF0BDmIIgyOV77q90OhQraOgF6TRUkBnpC3je+2p49wS0jvR\r\n7L2/bFMnhaOyG2fNx4IcsF28bzogflVVsJZ+qO1m9P7IRLwH8GSPqGHEuity\r\n0SVS4PxtPa+1ur4l1pAO0kYQbN8SxZVPXv7/LKWYU64x5NbMfyS2SJIV2f9I\r\nYqA0qLlWTras63sm5dQhSyE+IZ9aEIbzj1vHO76Pk03rqM0Ik3h2V9fKcG76\r\nhUZq6oy5pVA0Cz+jQlwwR9oRXXWLqs5nSxZ1Ixch2x30woRuWNk1t4GYQDmB\r\nURmcROXReeefQMol/4HunL42FmOvEowWruU=\r\n=N658\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/list":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/menu-surface":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.3ab956515.0_1650898978932_0.968996681158842","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/menu","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0-canary.53b3cad2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d45a417537d1a9ba8489dc9ff093ac97d7fddb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0-canary.53b3cad2f.0.tgz","fileCount":37,"integrity":"sha512-MmYKVrMIqOtP3TN4vdrrnQrS8P81+tMaA6bKiT9V79R1U6+mKsBYTzaLtLbzyem5vF8O0q7bSwyPwhWPtJr75Q==","signatures":[{"sig":"MEUCIFUFy6iAvF8fCkkk+ePKiGOUCjAwTOp4p5wWLqn99EUaAiEA6eZ02J7Eg3uVE7NpYy33ABeJpfNqKQg2gWTfMxrP03k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo02g//T5wKUJ9SirZptskU5Q/KDRZbiWQhwDHpwK/ynCH7d8MssTAz\r\n/4WNIv9x0Q+hM2H5N5ajCwGDtZrFvuK5Gl++NPIXaG/1rMOGQZm2mSCC6O5U\r\nWqktEJvKoOVP+cxLJQ7iS/QMCEs8wAZD9CZ3ZCw5eQwecrcCZYbz1yK/1TZW\r\nIhSzyCKlZS7h5klIdR5exV9IS/5nJaAYYYej+/eoho26gyiN0Mu1RJYM9Bld\r\nzdFy0bw549+UOdmejk/UFAKSLpkhc4fHU+2Yf7h9/KWjkpeAYg73iHmU3XmP\r\nZFT0SKzuopsHJ0X6enIZ4PgwFWlolBBdv2X2YSYn+ubDIHACd7fxj7/98GAz\r\nDlGtk83N+f4iRmlndgAzgyP/UHhjQ+OIPTgUaVC8OID13BcYx41ZyHwSPb9n\r\nOaGwuKTLz2YZTVF77T9wSGnhGypi7OWsLlehcZkSTGluLFAlfYr1hnrzd5Nz\r\nh/uDXKq2rmphyjpIIN1DMYvpuJPi1Vb/VS6gSjcgfHMO+NSqtRdX3bbB5BzU\r\ntIaAX+tsXD3he/tCW8FpfQ3x4TovIZtpY06fkaxstjzRu0TKhlV3rx8k30at\r\n6jz6s2KK3FdALUOPWPWUc5em+DQiLGspecznPcCmT3g3MngM7WZmBIsj6sYY\r\nJJNowigDA/HzMTAOVCLDGQhiIrzspER32WY=\r\n=PnI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/list":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/menu-surface":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0-canary.53b3cad2f.0_1651063584228_0.009085733682239638","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/menu","version":"14.0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@14.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7afad215de05df9b601652c93d344f4cb59eea0c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-14.0.0.tgz","fileCount":36,"integrity":"sha512-oU6GjbYnkG6a5nX9HUSege5OQByf6yUteEij8fpf0ci3f5BWf/gr39dnQ+rfl+q119cW0WIEmVK2YJ/BFxMzEQ==","signatures":[{"sig":"MEYCIQCqNx9vUsBNqr6qMpT+fNDdYBwE1T2Qqk7ST9TtyrMkvQIhAKqHT+MGZWuI0Mols1HFX0uoBWR5vIGKVry1UXN9dn1e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Jw/9FF/YVtWrL4Zoyh2UpsZXkbkS42gpRoJXERkAeKRQTbPTyG2D\r\nKWJUteEWm8DHi9Uc+WxMt4xdBprdar91oUtM/NUzkHJ+1uLNTHR0zu52Sj7j\r\n5niLDu7arUn9xVniZe9MQy3apRw1Bre8gsJlU2Nk/hnBDg6PwNpq/e9fZ06u\r\nSJRsdRk46gFMszXkd9HZM4BOUlSZXYtD/Kq/KdYEisBK2HRZz5+39o0KLwEI\r\nDiwrD9XrppIie8oxWCig+TSGlMm+kDKs6rokb3hw0J1P3K4HaLsGgh4U0cXv\r\nQ7Yp44YSM2+6xs1FJCfRdB13eg3rGF4XjJz3aVK42oy14xQ8WF8BOg4NXEZB\r\nHj7EW9laBEGZLTGgc7SAl23PMH02aUa3uhFK92sgLkZnEx0YX7E78R8nMAYt\r\nCiznQqYwX7qqOynf/C/wDcki3zlzSPfV3UZzW3t9yirsWlX4/6CmCeMM5CX6\r\nmUTb2da2354SNeVcBEWo8/fkRi7ELJ7tu60Q0n658CmcOdc8zdQHd8e2qaeo\r\nwYF8QSrsj1f52YPhyBS90AKyGpNDJNZ6CJGb4KP9qzbyCLZvW50sCdYTD0SY\r\npz6JIC+qFaiZ48hurc0ztNzyICHmvrWPabxNwI1rIm+ogOzwoB0NWprec7ED\r\n2n8JTgmvKRGfrF8dhE1dlYyC29/UFOAXCvo=\r\n=L3Gt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/list":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/elevation":"^14.0.0","@material/menu-surface":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu_14.0.0_1651165024512_0.5416652199073992","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/menu","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.432c815e5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71e454748ff99b6a851908d405afe9faed7707f1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.432c815e5.0.tgz","fileCount":37,"integrity":"sha512-qg7FXm7mAPH6U/LpiZvmgjSH1ENPloJsgdYudCz1gjevmw5HjzbP2UpiKgC9kkOwLGhSr1Q2WiwjmJ0GVe6ocQ==","signatures":[{"sig":"MEUCIQCjLTeqm2tTeUuVKRqWDswZ2FRua8gs7DYbklsj9CNWcwIgZYEFsnNept+e56eo9SsU3zs2LDSMa9A2+0sB2uZtHw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasefACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjag/+LW9WoP6qjTMLEgYfL9pZWhiGtpKzKA94geWe2OnXUj4tW8jE\r\nm3MEW7R2JqCMReTVCTyC1rvs4LGY7xdLJzYYUWdQ4fphjAUpoVUfSh9o9cNk\r\nFkDU854rHa3p+tWcCnrplTIXezEa0q2JxEAFxwIj2BOEOOCAQETZDKyZQZsd\r\nygbOMi4T6vx7ObsZTkVvuWp14fZOnH+VnPZJwL6LsCfpE7f+JwlvhcuDpfE4\r\n8FndNvbUm20ScNu45hKpEMfEJCPOpEcF7CMRUSpApUYrrZ0zTpQWgyoeku5e\r\nfd+iEsfJvitVGx52ixyrjRuy0Ei0X7+2OgcxZw0DZobiNYGl3x7ZcyBDIpJT\r\necoqF2X2wK39fqZsDtmbomAydUcHhfK1eK+h2+ap/nxj3F2BCj0/uY8EXALS\r\nC3EphQMnG4SaEaiTqe0shmGfwKjZQXMHKbmcOt0gThw/6L88jxIZPMvC8bqx\r\nK87vXwSvQv1+B1SjDG97WbMjATGCFO2fSlsSxaFWWps+i353v3P4RXTeyoSh\r\najkZN+XbiFJHjq+5oEfIpsz6tm2iqbr4FdMpNxYXUL2EaCEJEWhVjzyFfBT1\r\ndyewrxT303Vd//xHPKS+Yz8UxhIZ/XLyrE4h08Lx43+TKCZYHBX6u7VGk3H0\r\n0eBIOiFk0edhzReD3+ClBj6iiOHdTLpWXrw=\r\n=nwbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/list":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/menu-surface":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.432c815e5.0_1651165086842_0.2808253333716828","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/menu","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a0f01f669.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3356a247975e636c5a97bf90904342c65fa117d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a0f01f669.0.tgz","fileCount":37,"integrity":"sha512-t1LhLnNopDKgJWE9ELlSOIfNbtqm2gPXBZss4d7+vSUaiDWON25Br204lRkcLonjJ2YcDkrw0vBkd2IqmLIxyA==","signatures":[{"sig":"MEUCIQCf+xkqHr2Ul6UKr/LEmPP6Pd8Wbjtm4Ec0AoNqPZaBjQIgRbwK6ADsefUrNFqqpFoKbGAa2ns5t6EeXv0ITi3laR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHnQ//e2hyf3NRg6ZBbsTbK0/aBwoivhDKxx6jDLekWJ63WEbvwRr8\r\nQWTJ79RGUIdAQVYxlT6om8l7AsaEPUlKCW3VVyp6sCYpFsvV5Uteun7zrniK\r\nDGCXDIF1ixQcGAYezgcQ3S4QxC6pxjEAZNLhoYDMnwSQTiLjIv7ifEDxmvjG\r\nM2OkicD7rhAy9RXTbujgU9DDNYDpaXbaqNRkAEPOQgSUGiUoMuGMCDlHP/vZ\r\nSSBOc+267eni9beNDRQ+hfGdqaxSphAQeTW8IKv9PRNEAoMi2BDp2/+Ae8dA\r\neLmPUQUGrv/OLNwrTl99Z5f8XXW/8GwloEdcnW8qY8pEXIMtVHyVSoB25/6D\r\n7zDhhfl5aNeRQZWa44ATFKsd8kTuBhJuETU/IZ5aatIjmlZlfnszH5Q/9cGA\r\nFO/oZfvFzeNcM131ygDDcSUpKDZG0IOLQg/xzsoFQYOM4B2P1//z5RW+2m0m\r\nkUmlb6wwLOUbnMZA0mKYdG6Dt3fgreol0iGKZefxua1VjxIpS6wUeLvb150i\r\nCRkpQ6Ypga9xLaHDqLC5hNgRv4bZyydgEyO2nV7cymcRfxZQ7A1L8SITHQnx\r\nb2oZOslLXz2y10qJM6MenNCMiBbgwswMCdLPirfDzM+ATrFk/lxI2/wvkOCf\r\nX8rcGcpcSu8scyJ/XU4FtI/YFspLVvtkioI=\r\n=WY9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/list":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/menu-surface":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a0f01f669.0_1651868145518_0.8658644582389381","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/menu","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.276cb39a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe0dacf8a2ab9c8f00bcefc21005f521c960064","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.276cb39a4.0.tgz","fileCount":37,"integrity":"sha512-FiQzWaT/gssyIGkqMlgSQNTRPbWQfPQQ+kNcrP6U/etAcrb6SnKGr1oQnPWXGjwNsNRl2H3Q7TW1EL4ZjW7WdA==","signatures":[{"sig":"MEUCIQDSAxTU7ep2nNcbOneijeFjKYSaOfANlzj6ktgjfTs7RQIgZ6QGLJjMtJ0VNlzQcRCwHkpJg7/2KkNnrFyN88/TYTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZP1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWCw/+Pw3S1H9b21AvbNwc64wxjUJh9KJg9elkXgF8mHEXse4nq53h\r\nc4X6qUR7iZz0QNYgrsnJG5uSluyxD74kM11WVwDYQH4Yy9UOjPYrqX+DjZ2B\r\nq9kvuDn0BaB8hOx3Y+QuA+yHJVxRAk3AsSwJoeh/dfSLd2GDyk2jf2YJdW5p\r\ny6nSm3l1V0VQN5LNFc4RbTRJw6+m6TkEFuJhCiidDvuGAYVcDux9VPukZ++S\r\ns4Wy7XFX98zd8hng3wMY+rLuYp/g/l89wmoEFdIHbbQxtNIqEgpKjTxh43yc\r\nJGRneXcJelwhHKmi+wKzn8Uujb8V301Lnlfp3rC6PuGBU4najAlq/9fc2QkZ\r\nOKXiph63D++SQqNYhtQX4PhcCGjnoF9gdrEUP0NPvQik9nuTAcPGRoQ0y7rF\r\nD4hiRKtbMREf4lHW5Nv4/JajVDl9gGSxvT/lleg0GuaX75akcWAE31+ZwUH1\r\nMoyw4LVwAA/igsZioStAlWnNYj+TBe7oFTOy6yFEyt8Yl9S0VVxjaZORrPib\r\nKbjYLgLn9AFrgpaQWdUg+a9JBQ2YHKbXv5sx+NvLbykoYkfXm7S6rD67C2jc\r\nztWLeZzVCnWhTFhNVYX5WDCNFlmDYIJV2SzImJwkGjCQe8zNkJFavQEf1MG1\r\nN3GA9bbBgV2aP4JIHTYV9MFjrQs68Hd5hAE=\r\n=PCqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/list":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/menu-surface":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.276cb39a4.0_1651872756998_0.44056009363185034","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/menu","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4fe98ed70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"920067c56dfa287b4286a1026365182175955575","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4fe98ed70.0.tgz","fileCount":37,"integrity":"sha512-P4L8MuWx9G1lh3Z3tyPkvDEke2J03grPaUFEvTMyHa1gVW1cjkyHHpws0otbiV4IgnXJK7ehMy5PAelECMdPNQ==","signatures":[{"sig":"MEUCIDLpGpBO+T6YZ5dgiSNmnA/tTIFwiu7+ijUXCcp+I126AiEAorWQYf8eT3Tk54l/bml5yCKxWdBPnSAqANGMNZsTPlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQQg//cixln6gRB2alRFLtz4rzmPBAZkr9Bi/WxLn5xPlVBWleIFuH\r\nALs8l7jv3ScJyJNazSYRJ5q6NEQp1LqSj/gDzLAHgYS6CLneZX4r3a1eD+SI\r\n0ABJ0q9Iaj92ymnzPtfEXMZY74iTBpMKOiEPVRiGGyHpq2b69LE4jVCwsT6a\r\nN9aL7e/MGsvPFGWkBs87NXSqThBsFZ2bUz/+ldli6Ygz/EJAi7OqBq2nea0P\r\nJsZjDB6wyStXVTKcl/jnzXAQLubfqGCw6G/KZBF+w+vxRK6tPPF7Tw847qIZ\r\njG5ZuLgURVURBdXvEP5TIlyxh/5CYQTXTRD7lDy/xlcciomJjDii/uHF/j73\r\no9QYF1tsZ5VUuOLhXN6f32Wn/ZJqIZsQRq6S9AtjuojTlzzcbaaddynXFxXJ\r\nDWX5XA7Xxh88+SPSqCOH7HKOsTbrOs01xbmsgFFTTB2ip89+utRYRmsccuaq\r\n5NI4qWSGMInfOI06nMCrhD5f2COX49uceMSKwBHdgtPwRldoJZ5Zjv605+iN\r\nM3jaHYIKJMgupc8vyp8rDNdlSI3NsllpfT5qOhuOU4uW7H5bqeeVvVMwNb9M\r\n5D8+fjC/yzuhH7I4Fu1BUzsx4puLyEDQx3s40uq/UW84Ma03wwtXGpeiasGq\r\n4V351wDMFKBDWtq+3+fPiiaKzujSclvqk70=\r\n=B5H7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/list":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/menu-surface":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4fe98ed70.0_1651874225778_0.14012404317240157","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/menu","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.58b130a3d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd615a6000b3f2630ac2d92f7d02636644fe1858","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.58b130a3d.0.tgz","fileCount":37,"integrity":"sha512-DRH3K46dxrrxpsRmDjBJw/fuRNDKPrJEOERDlXWZELPMyVgGDmdUbwQAJO1qPIOclMY/0R+ADE8rv6+Ob/OBuQ==","signatures":[{"sig":"MEYCIQDRm6AD6wrwuZwpjSYFpRSMjGoXqhopjJRWE5n+Ct96CgIhAL3g9GRb1ott4HgSL5oiVe8bsMlAfi/AQz3ze57B8hEA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":807705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZo9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0GxAAhGkHeWiCM84v1XLBfa0Qgz3fTIGdBh+AHocowSxGiGjvLE5y\r\n398GORth4wgoHxTimZLPsvxijZJxHFJ/dhZm8uzeasx2Or9Qy7NLbGMLCggf\r\n8/pdSTfJjRnAWJu6h8AygXq2UIYtvNAB+PyO31u4rlybUj1RPnK/VB0CCGd6\r\n31ghh0DHu8koTwUhzNLeGjzmYSmZ5wVUT7GtUSuEXSQwzXjUiEoJgDdCwQsV\r\n6dHIwbahHaeXNpZ+jAwzBgmEEkE7VWKa5n6AS2kTIsZ5bMyEufldDywoGFFE\r\ncgPAkCsDOLCLIJaRgb+lOFUK+KBkSDkNVzdcTl7rDip9X2uikNIQnCPbjzmy\r\nBtml66iV9XP7sp65Y02c2LV0KmIpS+7oqvWWborfcNcNZ1l1oagkDcjpIKkt\r\njg7/W4RNfLVIrbCFKiV0NQgtEpS1fT6ONdUrrD+OFtEmS4SELD7bsRr22CNi\r\nOI66SJ0+RUMJ2Bwke/dCN7/7ZGD3RDWXsFPRIp9xrgJDXn5akTJnIVkLl/M6\r\ntPBcdO8eJZ6Gh6i1xG4APxM/ojLenbimp7DD7HUdszStcOe3bnWMpW0j608t\r\nRKA1Wux0wPR3jj1YxHMAz8ruURVEC8lGraGspQ2dDbVrFsLi3UoAelWcLQhz\r\nk1xWiFLfNPWMnY1891oLkNyBEjXtl8ZpTL4=\r\n=kN63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/list":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/menu-surface":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.58b130a3d.0_1651874364958_0.834639302849868","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/menu","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ae278a2fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a2c037b6c47eda3349b8f69107544b1bf812ca2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ae278a2fe.0.tgz","fileCount":37,"integrity":"sha512-9IEjAuANRqbdHqu56DUjN6gKNzUb3i6xKp1LKezXBKqpPRVURnmvg+LMXnHS3WdBLmnNTdPtP/qSsJFcZn7Jxw==","signatures":[{"sig":"MEUCIQDZbhWfIf8OX+yJzAgdS2+nXvLNM1yqM87pCUm8PvsXwAIgUXgztmN8mxV08jsCM01kmpt2XmseRCqUHpi33O8XTr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbyRAAmuykwLWRlPv7cvVMDqNKbedTZxiI4qZOQrjFpStyqXxoh9RH\r\nEnoB8qBK1p7XHydLGp2M5Ykk779pR7hzTWNAn4LTkU18vR0u7Lb4LuzovN8a\r\n/BO1ke5Cd/YWEp1Tdco1XnyozOlA+BtE6Q/PkS+pQUAFphXoSA4xw2hpY4w4\r\nLXfBOnhC4RUEe1E3bdTaSD7v7BjG35BvjsiZI71Ocm1myASPQlpTzi91mYp2\r\n6q9lX9C5uzINWuxxZuGFP0L+tGPqN2ibFO/zlzJV6loIz1evOo7UyWMNfwz3\r\nInmoNRhPeG8N4WCnCJU/bUX4GRsY7rwuoAgVG1yf1OD5TnHwKSw3JeIC3tlI\r\nZ6lIKnZ/l21z1NUIk1BEsqvVmqiGOyzpYS0ogay5gFUhJUXPwEeBGdokC5Ek\r\nfsjlxnCwS6jKn803jVHHRMqpBfP0Gx9WSlllL/TtKvhAN9EMihXd4wQ6H3XW\r\nw0i/aAHxEERLOqAic82k5zOdsjrq0VdEYGxgCJRY1iOLjlIWHsBl+Na3+glZ\r\nfOrpHw/CMKMII3s0kHcSPeF7zXxaWxXPit0ZJ3X+KS6hlDllBcvO79Nw1gH2\r\n1XeqfjChszHC4GjxuDzjXaSnG9XH7LBWc9uxu2YZqaNoDu+J6b/yF3td9ekg\r\nH4uXScn+LdyCfsI8YGsB74BzWX1iYMbyCeU=\r\n=c4M/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/list":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/menu-surface":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ae278a2fe.0_1652109958669_0.532945337227275","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/menu","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bebf5bfdf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53ef29a8e48e2a0502e799f3dcfbb53db3684f9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":37,"integrity":"sha512-cjhHmjxGtPGsaEOsgfOfz2kgzhUzKY3vJdV7HnXIxUSOsfjuVpoTSJ7tDOl/F5ehsbU0NvVhvHlX8v5SeuMQLg==","signatures":[{"sig":"MEUCIAQgDArypWgdJ+4+jH+hiiRM/+Xy221DaAEs+WbkusNhAiEAhEXfDRaZlvh58Xpe35JrgZs2dBFBm2PZd8uVkfK7uHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu0A/8D00KO1DdZxnQfIhjmBU44I4K4lP8Pmid4ZzLd3fRzxhTcymY\r\n1vBOaz97drVqpee0NwAdv5u9RBvA46vhwlWMp5J4uW9OoF3x3Eq7aCdfvZSw\r\nquoqYEPapCM6ipcoN+pO02x6N2QSP0tKJ4/aCR4++FfSGLARMKCtL72E4gqP\r\nsmlA0+laP7vtGv0g7Qj9aRmQpiRoSC+n1g8RjpGqcseuM96omcTbz7wyqx+d\r\n+QxEy56nraPRt/E3PRXNWr0URpSijtki2ZpcqtDvkg8mtLJGHLxw2tfIGr08\r\nSci4OQZKZug1kQyJ2aIb4FoclkCe9uIZDkv1KW7KfmGzsSnBovaL67nx1+2i\r\nxVEEvJGNZcLrfdZRnezxCM9kzUAsiqiHlsimQdSCqRKN4FTjwbqU9DxlxEoY\r\njTnTD/V5d7L21JBQuHYXfM5CGA+Cul8CkLqw30fCJoJlbsu2APDXsb9YFn2U\r\n9QX72pWmNPwPvXfCviqqeTWbdtBauuXbFzw0q6Y2KezL33ui8Gy18Llkzg+N\r\nFbDuyYZKnfCrVe0X6PTe3AbX5stkKRCvANQGehd0isKn9RAqCtWj8phbf3hw\r\noyqo3gbASB+AFPk4uUX2Mkz/qSEIAg4jp3Ca+g+gCvGTaBzCutz/ZQGG34UZ\r\nhu91SOJDXAHnKIEfLvg0Do9T7z6zilLVA9U=\r\n=zsTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/list":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/menu-surface":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bebf5bfdf.0_1652236886546_0.8590028220184676","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/menu","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e6072cd6a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc625a718f4685966dc4e1b11ea52b914b46863","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e6072cd6a.0.tgz","fileCount":37,"integrity":"sha512-awk0+4CBoWqLIGQCe1m3s5BdGJ7Ahpn/hywGIIqmLSt3gC/JDKQHlyFF2oX9OD0sUKlAL+uU+ZFk0itxTes7/Q==","signatures":[{"sig":"MEQCICS7ETOrjGqmdRveE/8w7dZKi8K0OTOnBh8GFojc9YI/AiAzutbMBN8pvDhThpZzv1MtmsT5COUCRKPtNeNuElRnRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUJw/7Bd+mK9EiG8/1S52DT4VEsIOOaRjFhSUkvOQkD7MFUm5wR18G\r\n/EJzIRKv/xaFCTgfrro4gozWF0jvcCI5QZ3lS/piacspy/1KqOqlNhnx1GFD\r\nTKbid1MmM7LXb/prtS00gsSdZObZJhd3hUGTrXS+OW0aaIyL4fsZhkfY/yHY\r\nKJmN35wPZ2iQlY6u69/57n7SeF0XO2qJo+GIKMY1jXPKSX/bIXydS2As6cIc\r\newz96qlVIlwdeFbAy7u1f1fNq6y0ehSuPsBXZu3ZTt6rty9ZTIGalcr0HiXj\r\nIcofFfA90UkQvW/xw6J2X04V8XRiNtff1B8uYL3joLxT6aggnjCfEODcB7W2\r\nSipO4pbXbSApmd0PuA5HEOkHNqKL8UU5HObieujmZeTMsT3Xlv2w5zGsB7eC\r\n2VQjkySC9YVXjJGVTJsR+88Rt/ZvjBJr0FGxNNVXv70auzG2SMiShwnjr9N+\r\nzuH0kyyO3zDb7gSYPZSDFSbhM9s+HjJvRqJnWg9nT+eVGm19MN5hFDlIavPF\r\npeG1eu7/rqSTENDzsWbEZ2ohW922GmkXV0vlC7yOrtCnyqrrf4n0OXbs6+WC\r\nz2mIwUy0UKyOJyrKA3RKPjlXyZ0OYVGij0gYOWhc+VJfVFMR2HhYB2gQ5rJB\r\nIO4f1rgMDXNEyXB6IhPX7nNld6Jis6OJAbc=\r\n=Rrbs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/list":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/menu-surface":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e6072cd6a.0_1652300371844_0.10283091305281422","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/menu","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5b40eb988.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b49d814b61ae38eb83f34ee554a989879da2f9ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5b40eb988.0.tgz","fileCount":37,"integrity":"sha512-5GO790zVNPM0b+jryB7dHVk8q87bknk6+yIpW4Y3wghkpPwD5FfLGdrL3c359HQCcaiNigHt9BAYEYkxeKNOFw==","signatures":[{"sig":"MEYCIQCa6HvV6IvWl0hO2uKyooUw3B+ChgJqb6VO5W1SH9AkbQIhALPl9yuCyE4lZMoPaliwv8GjOUlUKC1QBSwZpX987m+p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHTCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtuRAAjmCb2v+W8lfrdy0C8wpvsliuu4Vm79nbU+U5AzqBDB+DBSaY\r\n+e4HkIFRU+FZCybm02QLxx0sv7SfNQdk82qxCLsYd9kaRIaAr9+wRg4LPlSb\r\n1khBIv5nVxlvwRw3KT/JsTveibUaBj1s4to3n7KOHFsxPWwtWY5oqVOkrRi5\r\nRAaGDfK+0868PmkiEjI6qrDYKwJczSuWZB5NMIDEbztQZk/J/vzXyY7N6LGl\r\nJAVbsoVevqKmxI9sTiTYS6hFYyFGLhpufbQ7Iow6zk3eZ7NzLZRmbzxqPo7C\r\ns1iBM20BA7IEA4RhvllOY6hV6Xp3NtVcbDIcMYWiezSbg4Ugb99Q4ghinoAD\r\nz4R726D248+VgB4HliINZSSKERs6VvF8I0GpPI4Vis9gXcnYni8xUeqF2Of1\r\n/cY83kyogGXSQZ9imqZNgGeB6r0KCwVhzSZS3B0RBn/E5SjIYL9Bskw2r8xH\r\nOyD9koachvtwpwu/040MEY9GoFipIwz8Un+WWayCzVZenBtUf13MCYiAA/Mf\r\nC4U2vBogmYWSfQXxx28Wbs8c3Aiu7gEFTdpv1ZcKxrSOOIHOnxjGbPZK1A2Z\r\ntDDU+1ds7IN/6NXu/JYYInBrTXJn/yQWVmic8j3GGUyjo8zyq4ML80BnWY0k\r\nUHTXA6myFSacjC8KwJz6L4O6aJxHo++z2xM=\r\n=lWPl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/list":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/menu-surface":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5b40eb988.0_1652323521977_0.028547388771123172","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/menu","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6a61d62f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a8fedb67b798cecd3152a21b6b574ec5b86346","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6a61d62f6.0.tgz","fileCount":37,"integrity":"sha512-+EDLqEvx02PrZrFbr+64YFk9sd8Ux53ANPPoFbx1ZoMp2NgicO1cs2w7HDMHmLrWVqlqnRWqkf2GGkJ9lWDarw==","signatures":[{"sig":"MEQCIG6vKKKNbK9PDu7vBXFdm3FzmJMg3QL1GTrkBm+llnkkAiBuRqDcr1EMfWSCgl1FvZjt6OCuPUl65g1khjI/Yw4vKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8ehAAlTEnyqQ91XGcY/Z8nkucKPQoO+IednHeVVHvTbAGQIDyTKmV\r\nEnzgPDr6uJWGFig29+l3JFo/mRx0J4sd3uflsHMC4zDaS8ptHJ9mvuqQGEBE\r\nV+JXbiHxOg8aPLK8ofhYrcoJDX8oEVOK4ZyU2TRdg0dlS21GGYNysRaCImnb\r\nrZH718OvSzRU/Y2zHId0IuMrkiixEU9eHgOalhC6lG+L95+pFqIyl5gs/MZY\r\nOcUAxhHHWgqGJ5MzzbyqVd1plikmrI0L20/QkxFCyOJmqxafyVphH6KX0l+2\r\nkAn/tGEyuCWRo0zKp0P802cChYypqomRXFJvWP3qbxOTEUAcf7+3iD238Znc\r\nAqi4gBWXfqgUmTvt03i5V6+KEl9hekhg+VIUeFr0YE719S9n2Vdwq0dmptU3\r\nz/n2v9UlSr6RdWPpCH5c0fMVi8exr/1HEaMYyRHl1O2fyGGagOz1GQTNTChM\r\nvTzgJJY0AdOttSf6yscnOgGV6nhFxKWY0E+T4bZVOd+ZOVa648sRLV6kxDWp\r\nS3yjcHu+JinnxOkJO2eEue6XDTLrY90+k3QPWJZHN1tBWZfpQOHbhCWvdvSG\r\nyG7OVcIBNoTJrzUL/PSAgyaAo404C6Q1o/hNU4Zw3/2I5jb7998/ROtBD8Yv\r\nPGUdiff/vaDZ3ER4lmlYUfVMDApq4GnySdA=\r\n=h6Jz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/list":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/menu-surface":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6a61d62f6.0_1652387282036_0.13039306941056084","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/menu","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.05930a453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e257b161e02a022f7b4da60923777a89cba2bfb5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.05930a453.0.tgz","fileCount":37,"integrity":"sha512-qRc5XmZB4I3D/AZPLAOM31w/rGKeds5WL2y0l2Yaly1TSmQQkcHDscrWXVLOZcLqM4wWTZGx1k+pDnReYhWRGA==","signatures":[{"sig":"MEUCIQDy+Bm9TwXCJ9QAiLs01ytHnZdK4PrCD6Qc59JD0k+3TwIgTw/aaTcLqqZOLLIIECLCwg/PVFxPWV5aN45MRmuyanw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqgBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrYQ//YsGe5BnwLPYAw2yoeDkaVrs2HGDNBuA9+fn75XD8PSgLC1mr\r\nQW+L6I2OUBehJck+T6BrYxOtwK5g9JzBfutLKuDVb8//ESRI8GPsa6EleelR\r\nRwRalPiC/YqhS7SfQY5bRQ7L3MUvFzafvMRxEJC3j2LdaS+tzjvoDTY7FP3t\r\nzpioiaowGzR3IjZTvgDX+lympDHDUSGo/was/KfBn1BYJ7RS2huE6KM3YHkM\r\n5E1cRNmHitNh6Sf1Xo+PesCFlmZHHkLSq59e7nUihPm5FV9dgR9Y7+Hfm1Ag\r\ni0lWb15QdlgiQX7xuzA3QGYwk4SVYqxOWR4vPK17FQiIbhUaWGYin5dopPOR\r\nlxLvHdyJmg+VIUIn9CCEWegAuJ6roknM71LnCTeLmrYbtYNrXZ7EybL5otYk\r\nzGxNzrcC1JE/nPsmazeG2oUQdCsUdvGxb7jEpAKP+5MAA4MHyoizvgntvYpH\r\neF4MQQnqR+xQ/bI3gEqhJIgSl5srsyfgnrwLet94sPgZvhpelWwYSzqdkU53\r\nvo5Vo5ZJoQqhTb6nHV4xSaCmKVYOg8mDW0e7JgUIwhWiubIX3CPHly4aBaUc\r\nK20nyCqi5ZzJ6PU5gUcuUu+PFCjtpuOzg7T2CyZa45YQvCqmU/A8AcPYhblm\r\nUmotZS4zX0XauHBukth8JRFGlSm+9Rtncvs=\r\n=btBy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/list":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/menu-surface":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.05930a453.0_1652467713756_0.07026011821113598","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/menu","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c0a11ef0d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2a561b4f3d7efaa2a41223ad058d1cb4b5d7b54","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":37,"integrity":"sha512-yYvfyZG47DZTSGMLaJne5zzCL4YZqGt3QK2nRyM7YjYWNvftiLkghaGJlfIbxSam8DJjs2mOzmkWk7wHKrDFyQ==","signatures":[{"sig":"MEUCIAg4CfViD9kWlhg5+XYkWA5X11MjD7NLxdyBfVgaW5fJAiEA10gPFpTu6RaJOkxNMs2mlVp0ON95MZvQwa3HL11wu1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm0w//djETI8Z0dIXj5AVmnoK4AGU+lwbbvORNqEqgAI3yQ7WJbuer\r\n6hkcqk6mOBSH47kTnwIk0UtRiJ/3l6dwMiXt42IMGsxeJHsqw7yarHPUu4gm\r\nZwSMymK+YGmia2MeZqWarSTo6e0IC6kblrSNZBaPnShAAgKTN8j+JU8bE0S7\r\nrDWOzXdAOGsKFajs7k4VMHEEvc3IF3A98/Rw9KjCLF3aneWdqMMOixQkguD0\r\noOAZhd2jV4xwNeGL23orYxi7kJwtxAfz8jv3FMa2yvroBgkF25YhVZiMnvgp\r\nvwBclVcWRHsJ3KIJzX+T4UgnykFYOyp+CAwzx5T06DyKRcKl2xLh4Wc3pPr6\r\nFDqZpNtPlMz3kethI+/gXqtQ5NJMpaLWeOqypp4SUosC5lqmZ3dBmSK9vYJG\r\nWZmv8jnRq0buD+SHQ44Py01dcu11h3BdnWLCayfww/dHPxoN1KveSf7966fm\r\nBIYL4Rb/qPkVlXG3TtRX21g4Cmwwz2+hQi4Yjs4hhMtTfCIe0vcpZiso8IuB\r\ncKKWyOwHwU9td2sES9mKjg8GS9fAYdoxiqRWyeBwvEHR94lIYFMQqNm7Jxjc\r\nD9VgukgFqbtJvfYj4qmwI5S+LenYlTdvBCJOkdNNfCXxAcgO8nLLf5jypM50\r\nc0hIzBOVypuj8b6OOQFX5f6OZ2jzZ4UJjkY=\r\n=CmXw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/list":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/menu-surface":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c0a11ef0d.0_1652911325423_0.050183870994182644","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/menu","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2f9b268c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e490ad9e721c1a65033c5097512b05ff77b7d64c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2f9b268c0.0.tgz","fileCount":37,"integrity":"sha512-Ar6vmiQ7bwufDc7HqwoAvoCIcceYw4uoxo3v04vHBDi6RV9Id04mdiuFbIm5noMbvlOmbUxkhuM3Xb3dW+q9vw==","signatures":[{"sig":"MEUCIQCwAB9Iu5NSGxMTKJuPEmpYpLPPUqt/uqo7LigpDNWEbgIgRLDceeSsw4WBicEGpTy50nLnvpc5j6xRwMhq0atrf0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT+Q/5ABtfqtyMCByKB5lCXqxDdtoWQ7pfxbCsH3vOnWeLpdWiBj1z\r\n1JXq3TmjdEmg+hDyqoUxLler4kABSExSNgVjPoicr4Ekix+U2cAKAKLfX5ol\r\nUuQdDVkGY8Sw/gaCpDy7VEOfhnEOgVrl0SkJ190A8gJgESpmbcUyIsN9T7wg\r\nml0+GXGZEqpSheOyWaNp52RPTj4hRjlGq0htiEyxzfzqBbfv34eelCih/O0H\r\nHVd3HXIuiO2nG7IgR/PmYZ2+23cazaN5WyuEIRswCf0mjXfufpO1l7NhMSPE\r\nvW7z5KuEHJNMSODllvFfrCfmfBU9Tw4oveQ/m4gOzAGq/5JlxmtgigSB2t1P\r\nI8UQa5ZIHu2KCN62EZ9KxXLl0JzuQskkk4Z/PBlXeQy8svAzPFFLaK6lm5F3\r\nHtuVbY+6Xhj0VSUNnn8klfcf69j+SOMhuuOirZdZu2k/h/Q8mj7fp6kKOZnM\r\nSDCNI5UxD/IkUNcLe3kC9aRkXAAPKh8XfTSc7uU+Mz5FVxmfjyXMIQNJA3dJ\r\nH3r5zkpZ4p1pjruCWU4HpNRzDOnN02a15HCgUbRPvA3cdfr/k7G25BgvN/yw\r\npyyzzBu/8AyeM5ubgpxUe73TVLDcZy/0yQ3AE/MZgi9zidPGcUE4I2Xq5JBa\r\nPrOIkuZL9phDS7YtEoOGwDhgyIqYtl2ohAg=\r\n=WKB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/list":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/menu-surface":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2f9b268c0.0_1653075226567_0.9406677164270083","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/menu","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7741345b8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31016ae3be0738def2f735be2228c1320a9e7491","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7741345b8.0.tgz","fileCount":37,"integrity":"sha512-aIXCk0Y8N2+RXG957Jf6nzDbwch75dnYxEfblx7uFzcNtqrmL/pQcsw19yQmYMYzM2HhKfxgnRZAljOP0bxB9Q==","signatures":[{"sig":"MEUCIDwp6Vjy16SjCKuhuoCamu0p8F3TK/20mDMCupFJA92aAiEAowaSSk0baW/DjmSt2jr7pMUDm+jJFLlXm6WWWOkR6Tk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps9Q/+KC0Q/5uNZdAIwSb+ntbswoW8+3x+if+LZrV7KdCo4nKlPsgh\r\ntHwS/k8na2uJwCA97ZRR00SFG9t/dDFXYPyYcCoTxASY2ML9xUdyhcp6f2W5\r\n6pN1d3wvTqngGXz+RJNjnIqUEngwjSJlcfv7Y/PgzQSzfplyaOgtRmkUMudo\r\nKFwPA4uwcpgOLDXMLLFNLzpyNLnTxAWYSDc+cENdESlGdWNTYQqngBQRzReN\r\ndPsZoIWs0OmtdCAL8RdN/5oD1oeg8ISlA0FBeEYfKaNRe9XozT6wChR53/Xz\r\nx12itSFWbn6DVNPwYJc3uF3aFtArZb2BiYvlBKM+YPoSHMZQ8BTuOnXnAfJC\r\n8HHr5Rml9wj9wcBsSXjl5ffTdNU1Ne9kA1NJcoRzk5rT6QCiHiMZqE8ftBBo\r\nWj2FlmYfv3mn73IB2I5uQjHNgWpUv3BAhUqcsLCb27jTQ0X2LxAbqWrtQDTH\r\nKsaOPuuH3XdPnF+/vWSCYeAevS/6XRIy5WadeDBGsl85+SD+mXGd6RDb1yxq\r\nBrOT26beKuFMWLIaX1mV8SgS1/+oXxURJjti69YFP+JZrSRwTTs4fPEuwTTe\r\nZpDZdYDTd/vJzQxYbNt2PawRYfCvF4S8ClS63EFqedkXRAxS7i99BJvKZP6j\r\nz9jzkrvEu4LsvNX+grylcxXcxs/iAQeBzSc=\r\n=iwZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/list":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/menu-surface":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7741345b8.0_1653077031328_0.9821049047949579","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/menu","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f807e793f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5d3d7e31b9a05f6336ee2f2370986aae2b2fe87","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f807e793f.0.tgz","fileCount":37,"integrity":"sha512-RXQVNCoIBEjcwi5PZ0Pr0z3PBRnHJzDO3ZnUDMki6/dB8eDbPHlFtYRGVv6uWrOC7owuONtjByIcrqyE76N4bw==","signatures":[{"sig":"MEUCICXkN+5MsNE1fG5goufkxl+b1z4yReRqbTSuiQKaUchzAiEA0GOMagrUD/waCptwMqLF1k3debPRdXc1WOu4GS1LFLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBS6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq28A/+PWcvC/cqVUsX3U2Ov4jHJKkJBNm22TwFAgsSj55FF4FkXnwg\r\n1TlMYzFDWwEJOVGP5cExYHYT43LiW0eGQUcB+LwQzXWaD2IrPWtNa+BaI69X\r\nuL39gDjUBz2Iui35XuctE2EpqYrKwOUvI6PF46GGHDAHp5FkFi7V1dFqHUyQ\r\nliPTFxLwSomG8lgkdcTxcUJNF7iztoqFcd/rr4CXQkUuDNdeaf113wKyOZ1l\r\nGZnTSZ2xbde8tIFrTHvQfsSuq9IkzofM/IjNYYZ1B9t9ppetKQ3V3AoEksKF\r\nRaGaeYbl9ymeYoKj89j45hY5BaavDSMjBkUdqKObvP2e3JAzaJqWLIRQwP3k\r\nN4TUvjc+tZ8P+yB3PORy8YiqR4IMl8V/75ci4JRDc/dczfP7YK4QSnimvdSG\r\nyBry3bFc6DXUaM4ltEFAyqvJKy+XRH+yfvewm9zlVFArA7F0dw6pG9WB+B2N\r\n1Vq+exRvRTsL5tuH7U4Z1AqNMg22Q1eBPaWD1OHpQQlrLkqzJ5kBUXbsERIf\r\nssCacX426qYAGsKAajRai0tQJNOwiardnqn04yPh1aUKJlu8bM450pV0n/PU\r\nDnMIF9encRC1j/b4xcfWx3QveFKhBvAmGgDIkPEgLyuAhy0l1zawnPRsCya6\r\n/Qtvru54Ohq7y+E7ECsl6HlM49lbwjn4ZnY=\r\n=9QoA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/list":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/menu-surface":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f807e793f.0_1653085369851_0.008274038326870237","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/menu","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9f53d4a8a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"895a313a9be24fd7bc10a268ffd1c7786e488108","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":37,"integrity":"sha512-UDtr/1tRbQETQG8fIxiDxTged10WXRgHs4L6Gff3l3Eu02hPWPGUbkqb6RxBmC5IR8rf+/dAyFw06uLePwzv+Q==","signatures":[{"sig":"MEUCIQDFM4JwhhbhFhK2I6Bdlc7pCQ5RznLhjNF/p86ERrb48wIgVJAmSf94lndNMHRuTONoKmufupbdv6U/qJGhK5afDx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYwA//S02MD2V/shL0qGYEKWwX+BAlXwMkyCM6inhbXI2ytLLweqac\r\nsW722dxS01TkyGpqiyiNiKDkpgFvjzTm20PCUIgwD6+qHlDAlhXJdb20nMyw\r\npQ/bxx50GKCLX0aKpHK5a9MPpdI3OQx0tw6eZzNKbhldwJaBmTgAhZOZg5Mb\r\nCsR8R0Tbx3aVjujeanEuvTBGtwzHepQrmuduqz+6vGxsXv2uBdDq7l5BKsQz\r\nIoSr95hqctJ2/kw+ndQxbCcdmJD5Xpux7+kFlHA0JWYN76JTkEumEGnjugej\r\npgjEGOfZpPCJ5mT8zvCRnmMQvYmCeC1PVmPNzGet1AtrzWFCOapkaB2iSc/5\r\nVai/ucxbKL5eypI8Mnw5RnBeRVFChyi3A3YVPbPRPxBLlD/gl09bacLq+P4W\r\nZQyXrHvFdQrl9rrJDpVTHidQP630aPsr++GWXPLhpRchK51OAnCzpo2xgLcZ\r\nSYPrR6Lw33Nqaz9LAYJWcBWCyxGL5RU6hlvFt/9yta8EwwruzpSh7FB82Ba/\r\nrfmh8J2nem1peZwcW87BEmIhTzkKeVKg+Ik+gaREPZpeCQd9USZFxXvPSTNr\r\nlSL7I2FgAYuecgfHqepwWio++yc0HV12mjAI8KkNT5brB2vrI7ZiF8RGbzVS\r\nMDL4Pay+5eK0guVHytJxeRQ17PEkCxMQ6Hc=\r\n=ASUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/list":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/menu-surface":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9f53d4a8a.0_1653317935724_0.22872852893051854","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/menu","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.77cf00e37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8833933cc137cdd29fdce1d8a5a5c215fce3c89","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.77cf00e37.0.tgz","fileCount":37,"integrity":"sha512-FtRa47e1vRjjrIeLLQmvw+mPXJ8Fi4tHg8rZ2NaMS8Pzi8BZ7tTwvFqA2QN2mb+qFNBgwSuftH/YB/gAeJhsZQ==","signatures":[{"sig":"MEUCIQDD0XL0LkpX/VoQoWJ3BIXdq3F1M5ymqZrPe/BeEMwmvAIgf8botAo1KXJb7CtDXjSj8A3PA++FATe7zuvNLvAql7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillM9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpnpw/+K+865ZXy2qxsmsqlkGmMAVhq2ZJv1kZ3UOSINom44mb5uVzT\r\nzq9hgf4SH7gljS/UC6vI1eQXIodACEM2UklAUI7Kr4KsOKzUh2V9NvyoEwPc\r\noSgqsS61AOJ7m/SUkLCpU+nsjSJnNFEcwNV3aaKcDGXkd40mAOf4uJvPvvLF\r\nsI+dK9Q6OH/hw31BfsILbfOJb03cwcZL50uLzYRmm2fzuNpSBeo5ytx4Xa6o\r\ntaEZsyXN5x/KjJwPmjzxn25Wp8sOnIGlkbOYbRRPikvh1Ve9BqXZN2TIhbfs\r\nryhSDlPpW6sHtwioyojJpzrZxmrHDEJ8lfls5Syq83SNg2lrcQcOMnX9a6iG\r\ndhRIcJ8FU0udHhZgpUrst8VF4UWgUDEzmFn59+WKlSJcStLcPxdv5o/+YoAW\r\nYw4NIBkfZdqnsPhD5/Hm75lQXSFtmpYMjRDQxUjRIpsP7Mek1qw4/3Fr0mcW\r\nl8gQ+GUU/HLoDuGiZ9YrY2kpCfGQ9vXkygEDKrpYgfT4dxeRdfpr1s1lnEMy\r\nHLsyzwaxUvG4sorHM4nR4ENCXMv+cDtdpIiyR92Nw9+OOWglNMWK9sNXuY33\r\nEBQGYX8Yrtacc2VBPqfChHIenuDwniAfCOqAeokn53zx6WIhg6t3/7NDCx1W\r\n44T+IsC8Y3ZAeL4I9+q0WQWKAiBGxVRms74=\r\n=wZao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/list":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/menu-surface":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.77cf00e37.0_1654018877127_0.02133170235163684","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/menu","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3c7b844c2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4e1322df197fc73960050ddbd96395b26d1eae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3c7b844c2.0.tgz","fileCount":37,"integrity":"sha512-+gJ5BIJfr2nEaRCUFW3+dptukIgRHdapaAc4Gj3ojeU2T4OinWgeLwYOZbijHgGWHY+2OqiDrIFAxzayBPA0xw==","signatures":[{"sig":"MEYCIQDMiXFgCs7F9C7uGjEXAHmeoSbTWyatXBnhyNR2y7fHmgIhALCHdSkCWGtpT2BcPn+sZrMHo2kbQCZU0s6lrV4jxvxb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdIg/+L3nga12HU7upx3/NmskqRQun6Uyk3+NzHiblE/9+w8GevXmn\r\nzDyDworUyr5oRxujqGKbcvfcVzLUqT0OUfVMBLpeNLwE53MdSyJQx0dGCYv3\r\nm8JlJKhXcdWpvVag9gx2Uh6LzV/NfSdQjHiIEi944j696TfHeyxOwEAc7obP\r\nzLs4GmP/Dl9+fUfhMrqBNyNSWUAlLvugU3PSML5496usrJMF/VTgS2rZoIxg\r\nwDtnu4TJNGOEyTYYW5u4jeZVBC1tPO5+HJbfFUQJuXr+hVbLPJuEV8nxNgc/\r\n1iXj35tpXj9Nm8MyS2bLJpY232KBCpr1ePEM5wveGs2MNeg6B2awRW8IHm02\r\ntFJHuaek5k6eIIIsrNMU3biT3xi9Xu7stOegEKX0obHqvamr6i9fAOnTmwcK\r\nFgkmcgPr/TNcw+25RbKMv4Nv8gVhVBtXoAn+SVs8r50hrXnYP6hiojyU3g9a\r\nzkQb8rnvaLEmrjo1IyrWCpl0rRJDDLh1Gq7lJZCOK2VA/n5NcqKs65BzyzYP\r\nkhoEgq5WVWMCuQTXuxzk2M3VxX3fbw418OJFkLMImDqacAWpYb/Oscdn0hE8\r\nqzKXxHWKTLM7LJd+S7Ke4Ujl8sEdpquSEVuTGAbT1fX9FkZggKN7ENDK3hha\r\naHQcjd/fmCB4GMx4CCgnPCw2kMccWSLsBUw=\r\n=3rYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/list":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/menu-surface":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3c7b844c2.0_1654640545780_0.9688593702558506","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/menu","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.df47894db.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2744f5163f17c2f5e0b8a2a8c337ff4195b4244c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.df47894db.0.tgz","fileCount":37,"integrity":"sha512-JLecO/2637l/WaKbWFDcF6/fTRv4/mR9bTwpGaG5h3bcNwD0qw/30yYHxbyQ1jJ2h57TEoNsaNcfWfgcprv13g==","signatures":[{"sig":"MEUCIQCBq06ELygXL/+bE+HPzdZaDwBaXTNH/RxJmN7z6jkM4wIgE+r1cnsASE8RbFPCivhncZxg2vS5wzdSDMcP0wrJEPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip293ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2tBAAh461sqgM2WeG9i3MOZODeR4MnEGtFDFX+Z6cfVstD/Icswrj\r\n/pP/oUBh5w1MXJI334ytfRZmUe9Fn+b7ThGrxM2B2XwX8Dhme9tqD45+cypR\r\nX12S/SgsiSW5e1ELfGXVFQxZl9X9RqjnLCxZYf28wSOOetdwOQVArYtOpTxt\r\nb39xTs2rrTEVgyK/7yDOKaLMj/N68d2ma3bjYCRanRYRslEX1tpZ7Kf9J0pq\r\nJ17mH/qjwiyEdHvz9tfKgBc/WeAUzbs44JsnfynzrzAcOh/NaoYzh/2c4C3+\r\n7rSg4qK+xR4rXq/6AM566Knc+QoJib3yAB8Zuu1+lO8X/cuEN+xRZDcKmFhu\r\nyRVqqK1ONuMl7tzXtM1PNw/GmjEwRsv/0vPbTYjVTk9I+/3juBDwD2CKqSU/\r\nWFeeFwLRHSk538lBUQ+KQBzJSh8PQM+1w6P20l6E3Ab3YpFs+KJVHc2OuD45\r\nFJB66JpQCp6g1xwvsPFT+JXSfOOJWSy2ZRrjqhSokubzmYnSpbvKAwKIDdQC\r\nNqyYFxJ+0xNEpD5iUGz7d1SrNcRBP2W6vvuUP5UcO1NbbQHyP/5cgvsH9d0q\r\nPWVbQcfvJU3Z+9ThrO/vUtsmtQfb512gcWZGfNATu1Bu7zy9pxIdDc1Be1pk\r\nVMNweuhRi5mSOvtxOPWDLVwXD5DWFaxHpCc=\r\n=/RFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/list":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/menu-surface":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.df47894db.0_1655140215236_0.48253944873401067","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/menu","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b18a873dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11843d4528666bccde15ffb8dc1cce3b06d95930","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b18a873dc.0.tgz","fileCount":37,"integrity":"sha512-3X5CD3Uqs6al4D+px7PYRZj3llxIaW6gAbc3KpudCqoEmRDGIFEMys/TGW5ADR9jzIrM9kYEFxXSMSsbOdnkTw==","signatures":[{"sig":"MEQCIFc3+1UP4gl31mm/Xv35xuooUcSzWxGEZfXLbIKEHCFIAiBqvXFvJkwsrQKZeT7dkoTKlDiZJU5CVExQvFxewQ5Wyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCs9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEfBAAg0aOGRpyFKAnYCzV1vRYNLLZbR02Vu7Cmjvv6gzTrCWRc/gM\r\nIkkDJi4OiGnJt9lGhDsu1h75+0NpFk0/7XSgTVqv5Sqt0v3rFFoxZQbU9z0s\r\nBgTOOfWkWj+dlm4nBRVpl+7vC9JxRU027ozqsJ/I9SJ8EPeAXUQvT3T455HE\r\n3bNUIHq/Qb0FSTGevIWwtFS8GywfYrzc9xYmM8OPfqEz0094V87K8CF+K+ac\r\nJIeLlXLLHv2ti4zYwUgNfpWwGdEI5T99gXJlExKt7iGjNKFIryZm7a1j7UxK\r\neDamwvVGQKwEz5bUdqH1JXFhzbldCCy7Ao/hHEbwZLL6o+xLrVhloPu6JO6F\r\nX1L2S8ZHc5RS6JKl09wCtswQ/8vM9hZCO+yxNtEg4L2DlXZM22eSFQClmZxs\r\nV94K4i4mBIEqa0IzT6pKKps2aYOM/eadBI/1QUX1nItcMuxSgRGmM7evCW8k\r\nCyZEEDyeG4cpI30zOy8+R02ZgMq4Fm+kDsZ91FEiKjVzYYflwEVwBB6ev/Dm\r\njq6Bvstwunm5ek3Rq9u8uo4ydh9lCQ25dAzw5JO6GgpwZS+EQcHi4acZt8Rf\r\nL9cmLC5MCIYe3xGQCxkTmPDzBVFT2XvEIMMFMEXdZbo23+HW+xU9MJvUc69H\r\nlOSD+RWbztSM0XXl+HeMPMvDgwHaYv/myao=\r\n=mr4V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/list":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/menu-surface":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b18a873dc.0_1655188284783_0.44224493486723104","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/menu","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ba9c29637.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4d4935054ddefa78f20d4b35e9cee3364ee7f7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ba9c29637.0.tgz","fileCount":37,"integrity":"sha512-ALtfrd+a2YZsOxXAnGhVjNRIrt11kyPZJchPVZqF74UvCErlMNupVSncQ4aokjE8o3Hyn3CUCsHzvKnwzvQuXA==","signatures":[{"sig":"MEUCIQCfutb/lRYHEng5ej4VIM7el+z0kdKQBApSkqiBZx2OzAIgayktxOS8Rao2XQvPJ2hfDftP9gPb/quXGsAYeoJGuWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":808699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNp1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Hw/+PX4PRxVxC2ie9eoFqmayORu509xjOMsY1xTcejd46FHYyJO+\r\nhXy+gSd8NRdfrXZpCbrNp/yKuXROmjvynXpd3QI4646e4maAplvYzOCwjUXi\r\nbH6rjy29WFlhcVnXm5IKh7kVvJVoiCM2itdry1m63Xc5ui5k8wQRvSPOWBD1\r\nJmeSeIJw64fLOYwB1GonY+TmY/EvZ7WctwrJWyMji7UfUzC1J8HEkcNphSHR\r\nalTFpudT+Z1/z33IAD2TlfSQcZIWHllosROBD/JdHHXZWTqhRpDQhwWKU3CV\r\n6SidpBTgZHl4Aedb8ochUdNfVDad1LXtgPSrh7/Ri8b2amNU9Mr4weUvx3k0\r\nHuM8IOCZfbclKK0vKLtnY1Nq4rsQH8U2hmYsGPklQPgdKKTGYfSsewQ9mAN4\r\n/OcJ2btXTZnhDadxjtWliX6TtCEkWSiF0IeJg5vc5bUPhSOrUkYhuiHF9zKr\r\nJDImwttTNmKHp+/CSHcW6SiP3YKwdj75FTL7QlguCXhDmMDffc2jEeqftis6\r\nYsEzbDO58hCBSxhERv731BMhaVeBa0QcbQDwldWHc1FDY3gcbJ5DbFn3ucN/\r\n+M7Qso7GUmmnMNzEkTY8BBak/19P9Op3+PLyiF5TdeaLFRvnoeDG2PslSJ3/\r\nkBjOw/rq0P6gGQtlZgBkmIlAmhhT2XI24BM=\r\n=tDmt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/list":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/menu-surface":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ba9c29637.0_1655233141437_0.8892816385800808","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/menu","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9bfd12f01.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a96aa9445dd2ac7dfe4ec1ab186f2fdb22e2cf8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9bfd12f01.0.tgz","fileCount":37,"integrity":"sha512-5mC8mI8GGfThrY5VkzkC5PdNVKMieKded3DIExiOqTXBwrBZ3QG9qto8iZXRPt+6hQbM3JkNrfTaO9zSdqK6LA==","signatures":[{"sig":"MEQCIE2GxL5+D+whENkzwyH8g4jFZxNFKFBYGahpSSZ396fNAiB4SenJFbwjyW0n2vz2ViK5X1ayjxJsSzl27WHt0RPKBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2xcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLYw/8D6hFh7acQjYDuz3ELs00ZzzBV26PSq/tsDds6AIeL+SE200g\r\nTw/e4vQOujRT/fJhtStegHbRNPp7MFFRqLimGwiJznrQThh0ttn7co27Z0L0\r\na3MFZWX8Y5PTFadcfl1GG+yWJ5vdTgUKSrNH+GSag47q+zj0sfhT7F4Gx4S9\r\nloFUfNxaXHxt0F5FggXg62+VVravnJZ2x52oziy5pXdOEEQFcOW86hP1yuSu\r\nZR0XEVLv8SmqzpqHLHivLNZ52bA4q7FJSGD12/u/bsF6NBSSdR9zPdHYC6Xh\r\nRFaWVt7bLiJkjmY0whefNKf7zaJ5/sTVN/YYWsFQa8H6xmeXZnSvr9pyEaVq\r\n5tiTvir8G5DUGC0TSa14O4ab6X223jIOGrPgW17aoirqQFwsBL5eatOo4Set\r\nEpAARiVvjlaUtxAfbRv7UrPymCTRFqIgqDEq+XqzU+j2hnixfR1MZYFo2n5i\r\nbk6JSfOs82lUxa/sd40w4nNKts+pGwo6Gddkwmpc/WnJ0OqQ05oB6SshZ7VH\r\nziPYa5oU1P6d9LojEm2sVeeqxVYn44JKeHmCWaJEOVIwIUZEEctv5Ot09+RL\r\nxDkP6NIlWKz2ARY6AG6BcumcPZqQdusfUwhRnDpzk1Ogvt0RorPG2cARgcM6\r\nvl4Viqd/Ss7Pf2vZ2EJEdkrJjvzn09DH/ks=\r\n=Xu3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/list":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/menu-surface":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9bfd12f01.0_1655925852526_0.6281272301022618","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/menu","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.764de225d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaa61c6a24ca2dbdba1c2ae361775d2f6896408d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.764de225d.0.tgz","fileCount":37,"integrity":"sha512-S7upL+9vQ9dI/+4GXAmXE2OGE8lpZVLkXFXfyk0LijzIvNS0UNnCHRntv92u//BqcMXqCJ4HvJ8pN+J+fdzEbA==","signatures":[{"sig":"MEYCIQCOShye7+x/k4uXvIU5Bbzfty78C8LwNe7vklCekZeHtQIhALe7NwuX9/cHp5UcVm5CFeqg2F37DsMRgTWQVY9WEzQG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH26ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpadA//cQmxcyojrYt7cn9LOb6ZUhkAXVz0gtYBoulkvC6qS0D5UT7z\r\n/SXTQT9bf6dyUsToK3B9bSfsvd7E9/pwqCe3oQSZo2gvaunN8jMooQnGUxQ/\r\nRa6aIuMAy7lMhHdpycwxzjg8TJJIfbjyu8UblOoCqOP6Sz3JzN1tNp7P5osS\r\nrGA3H9pO4oJ3Rc4sVZky5si8JNukM7EBnQDy1hcAwmz4stkh2dU4Pzd+0l9E\r\nBYUS7ptUAeY6xFhHClxBQUDEjzI5+bm/acH1mnO3hE5sAurW9weK+1R9IEbv\r\nxYToDzhhY1e/oHIKwNft7oXm3dH3xtd69m0PLBWe6j4nojp4SlT77A3gEPsP\r\nPIzq3A1Ds1FH92b9yLbVwiYnTkepW/JwTdU6rLZQPU5jHIq4gwwaoqUGIL+O\r\nEFH41Scp9q/TuunjhGAZ1HSdRyJGWWa+tU5Oka8bmvfIOwQjfEZODnnxWKP0\r\nwAC0T0hdANZCOzpTVyD+e5vVrLtsdjsXCCqAfBpNk6tNld+mwPatuUavw6YR\r\nXYbEC4TyJrEV4PzgC+J3vcicqC4LVdymmlDED1CMczFcSUJ+xUAGQ2y3iNx6\r\nc4+g+F1Uoi3ZZxdyJfaWpolatGRJv//tcVaHqdysVilzbELTxOIRqKkOUv7E\r\n90H2416Cv2l4+LS+eQzOL1wkxbui0ldWi2U=\r\n=MuHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/list":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/menu-surface":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.764de225d.0_1656520122248_0.46478923889643364","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/menu","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.31e517cea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98c551a477ca29dc95ecb27a16a4243f0fb3c3c9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.31e517cea.0.tgz","fileCount":37,"integrity":"sha512-MN7iMJ7/njvSi1ffNnqh4KwPOELoOzPrS/Ewjqy2Iuwo08JS4+9Q+fefQdHR0K2gX93XAOJG4rdrKF+CfvVCBw==","signatures":[{"sig":"MEYCIQD3V2c37ncbH+rkIs8/EDFNrv+gzrykw1AIVBqp4NzigQIhALnCx4mHeJrhTyeKBwcUJ4W8OH/hJOnLDH9BN3xYja0P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg8xAAoK6jUI2QJhDVTW6FUgdX77HSW0usXRphEdclKdv6F2X5wrcs\r\nEdwH7q4B1YQ7IR0dZFPAJax+I+1fPorg8ls5Q9WEZG3UMu4SJ5ux0hoE52cB\r\npscVhPLjzXOchJ9lx29pkfpIxQwtqjYpDjSPed/s3CUytztWe+l6LcsrHBOC\r\nkCHkMZljl54jcgn3a+Hd6uEtINTZYEIhP6KRDLk8UtBGu/KkiT5UAGHcGVdX\r\nXB+OzQ5poZmrRhTEATbq//SgRJm3vvkMRAKSI5bJs0U4S4WMIDIK2AmxqO3S\r\npPPMqf9LoNvgK+mFIXhwq2GlZx7/jCeGy04CGye32E2GIi8KNxdmkqIMZ8/h\r\n+8sPjBVucADuyP2Zw6RsdCGUqceH4NvL9ekGrejju03mVVKsaznjezH5nnDf\r\n/r1LwqZOqvQO67QgP2bpvidIVv0IWrmHlc8kpT3Yl+014pNUgJUjSewl78ec\r\n/0qLRS7I4frwQvQPISFk2H/O4/xIRwwLEFbcK7YzdrHj0Pfjg4iSmwtfhEDH\r\nQcXCeJEJou3utgWYbjfZOs0TISaHLhlCOkF+6vfdoDr/j7k0WxY1aU/ByjFC\r\nz8anaa5UFSNmraHnWx8C91FFQmjEy1XDNneiEwRZiFOo5Ridl/nijTKbYRPq\r\n47o87PT/i282tY8d+tUrK1YUS7nDgRfilP0=\r\n=cJwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/list":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/menu-surface":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.31e517cea.0_1656700201071_0.8893481022802663","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/menu","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9ea4e8e9c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f08482e1ed2442017ea7f2f437ecc121ce861e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":37,"integrity":"sha512-NjUPIeC7FKR7V1HW+sS+1EA130fAOFe2FEc19ElubJ6sROCULmUN5RY2EJUJWp1fBYDErp8m8X+ybCvUGHn8tQ==","signatures":[{"sig":"MEYCIQDNHKE/sHnBjf8pm1y+luFmJVO2pQda5b+UoB8qTunw3QIhAJQtv249ao4NPVy9QXuDX7ZC6dyyqgDBThZ3I2h23xPu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3uiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUixAApCguoex5RUloAQMzL64btyt/8/G5uKTmZd71zQS6l8OUQUdI\r\n4/JFeRwGrRYA9UCP9hRtHBqcBikhP+xCiOKEfbMe9gO6Oam9Qvz4CF3A5qDX\r\nlenFosXO4RHt10HU1BA7t3y2xvZ/TfTyLO2BWVIytB2aX0F81vFb7TCH39jR\r\nU0y7tN99FWOhguSMxVU1dS0OT2df/cAYM0BqdeTlQxBgIh+ladsK92Vx1PKr\r\nuc1HdRrmyr2+O8w42NLB9xonRfe7SfkVWvLzJmtdgjzdAX2DBPrpk/W8gABV\r\npfp+9GTxRL8ywYPY8cHXy9MDiaKfQh5rBHauXNUSVD5qpWdCBgyfAaJwPIJx\r\n+SYvKCC6Qjxq40Y1MfiJrRitgSH77Bg+tHKVDMWQnUFR1uDMnzzQCi1qoz5G\r\nYrYTaVdRM6Bk/nnlRdnVXZ9cn3tgqi1NBH+RsH1xL9DLVuKe0UNb3fpJbv+E\r\nUtqWmRNo+1lBcJh8lNRTwLmWE21janx8eBIsJAQM4w/wHa6oigP3Lv5n645A\r\n9ckVKzN9gPknq0f8+z/DxhH8RkyrmBo+dQ65Jq8sKC5cCuT3LcnGdIqmhmEZ\r\nP16Vo+XJ+xyXfU9LFTTuBujwR7f1Tq+3Yb5lqNeYmu7OzUZSRDf6ILXj+OAN\r\nl/q6X+r4U+vJD2q7q7LcTYMdjo19FTy2rl8=\r\n=pc4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/list":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/menu-surface":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9ea4e8e9c.0_1656716194667_0.6606563859150387","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/menu","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cd5bafabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cffb9ec062160b9cc9ede0670d14a56291b13a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cd5bafabb.0.tgz","fileCount":37,"integrity":"sha512-4Nrz7JIB6/aMdsR7d4gL3ATA84t1g1HDDw/hCWCyUUnNHLjs8lch0Py/Jdt6ShRdjkQ0qoIfkHXsoG0dUymuJA==","signatures":[{"sig":"MEUCIQCNy36wynkSEZGBEzwwovZMPTlJeUEmVa5Z58vzE7RljQIgOVS2eHM4PioZUShHr134cr1y5dU+03n8GZ9/yicsUS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcy7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAag/+NVAGDKaZhs7H3m3VM8We1VA4GSfXtyuCzOY2ObkNVvEi0VQM\r\nw63wp/k4N9xJzpzXB2rhg/h0HkcqVWpp5WXHo19X8q+toEuzM7oeUOWq1baz\r\nGSfoGi7a3sg356Bqpu2M2ahXSTXWPaKG1PMmkaApmAvIJpmqcbS3KjDsx0V8\r\n1s0KqvanwF/P+GrJjaxMqjbMKsnHyzxMd9pdZuRBRYLCshdvAcNV9+etqaXD\r\nPS3yDsl54ZqlDFf3z3sRsx8XXB/mM7bMo1WtAc3mhl0Irjh6Rkgnypxg9MMA\r\ngXptT/oJ3DgO8n4eoKz05ia26eROeqNOVxKtNiuJ3Dk01aK2A6OdqmkbRnke\r\nXSwFgz9/sdgAOzQ92eTJ345CgLeaI2Ue9dX84yW++GlAkPXW9G8UfqDUYnGf\r\nplu6fJkhWrSukoJ1faxeJ8022QUJvIkW9EvgLQFoKXM7WN0KbcOMgLOpUXNP\r\nbYhza/6w0DgT/tNdzie2PcNUvO0oHHuV++RM8ZdVhCt55/Kx0WDNzH3PuMJT\r\nHviFF8f0yE+ULaDDzLGSav5cxUktJtwN0PepUq2E1p3g6tDbEWS5UsfEVeST\r\nRM+yB0KlnA4Mia6v54/RLLwUJOkriy/vPC1lYtJS1PjvrIZok3r6gVY4QxiS\r\nj7pUhGUZ8RIJQsg8vxuTLsrW2LJESsr/pfU=\r\n=nSvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/list":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/menu-surface":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cd5bafabb.0_1657130171200_0.13828721349785233","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/menu","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a02fe49d3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8f983a9205f6f0159d26f84bcf1827f25250059","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a02fe49d3.0.tgz","fileCount":37,"integrity":"sha512-Lwxbfc8Nwmtbb+ZzGIISN5FIKBqZbPep4BH9VeBFaWEhDGk8JeNAwCvdSnIun1P/8CxC+XNcDrnJOFT+aXxpBg==","signatures":[{"sig":"MEQCIGwh+v7Ccb+NO2yFLJI3L3dG3BD7IAThPrw6fEq6kKzMAiBN90Fm7ked5HURjHdLfFcOBbsYekfp8ilMKu0hG9l4MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdn4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz9w/8D1XLEzHEfbLU483aQm0pToaEizsDsdEsh8Pi9DkiUysz3L0/\r\nAusKeK4yjDkDB3EVViop23tWbWiT4cUCQhKfa7v8+bGPh5hqgF5uB/Lk/C1s\r\nvYaNU9teoXfadr5QJ6vbGE8PP+6odcvVKqJfErDRSzrKMg9U8nflgm/l3oXs\r\nSVrlF0viAG9BjKGCgO57jEQFbXVobZr+2fF/D6DAzb4AjLOZQzspZHTthbT9\r\nE2zA0SBZ41NrXjbRdCs+rduGef+vzeFdcMEOpeEW1vi8CiOwcKMFSYd3GqYN\r\nuJs05E5Y5qc0am2VAUTvmV6DAZhVWJ7Ki3MleZcAqXsPuW0JqCg9iucYrp14\r\nY0tgWSmsFhka5b9VilqWCgIqeOzzVIH81ZkoqAIV27g6d+iOBilTuyh/oBBu\r\nMmhY88h24xPjAuzdpTzz5ZJpaasXVLkvnZe4vbXj8OAqWb76RhFmwBIJ9RLj\r\npxQ5lZXX/WAxC4GkdIWbAccuFW15rNgKHY3+1ysSRoRfIr8lWPlcVUYMVhA5\r\nyHeX3lyMPHNArYC9iZofFnjeH8v6S+fxDjkdhwELsXR+Sj9vK2OBSjY46b7F\r\n+9igUyhVfxbk1ckm4R8CsERwRRYE/JhU7woX+ZaAQKNpOYe0hyDBYaMl8kTK\r\nvecblnzAh5GeCzwEXjMpUvT2Io/he+Q1aCQ=\r\n=bQth\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/list":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/menu-surface":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a02fe49d3.0_1657133560542_0.9906169532630813","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/menu","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.826a3d8be.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e87bfdc7103a9c1a4f945e500c3d8aa3fb0d915d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.826a3d8be.0.tgz","fileCount":37,"integrity":"sha512-Wnogct4qiFwU1nH7TA/P/S/LYyzu1xtO1i/jS+3Qxd6WdNox5NjW5mKe5wiSVxWi89eQB6izDQ8R6+CoUKfVFg==","signatures":[{"sig":"MEUCIBN79WYwIZQlbgc+F7n1KA9lmTx6ZSovFnPHZeos4lG/AiEA9r1P1I+TF10niQjxiD+6JKV4k2DpkYHPoRXKcFLNiJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeNXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2nA/+IDuV63cbrsZRDuFUKFI7xAlie0VDG8mQkLWSO997yvQxVc38\r\nKnuHwTtjyBNEjlR8FzKWpaPCI+7pi3wquT7QMyEfVmf18druxbfqBLCKIlAB\r\n8EiYHIa4OO+8t6FyeT4JK7vDPx5rfFKFw4SOfrPupURqmoMuYpaSFg7zCX++\r\nII3KHTiPgjoMZkPeLHjDsdfYos+dvW4gc9vTVeTJvO/R4/k1ZKVkItz6tLes\r\nmNiFbVezfW/t1ef3J6dOlZZcgFzp6wHZMyTN2oSM4IBxVIt+Uq5jf5TEnG0U\r\nErUHZhpPKLQfaU8LpBv4GT/mOc4qnNBo3o+lbbjnQsRL+vwnCPQDdVkUQKB/\r\nqbnQzsk6B1gLB+RAsTIpSQIPpxJpdyEkmltYywOO9wpleCwRj+WNmKHZ3fzR\r\ng1uTaIF3lu1zKXedRgE5eqTINX+INNjSHWha7xNtOvkFY3dsn271hgp/fXRY\r\nw4XYEb2kuCIWuCs97b1h74RssLjSoPgROVREP8ahYYQz/I53lYB3EuWT/AvP\r\n1Izc2JPD8BsDtHmlyfSlYZuY3DcP3DVuw5hmfnPGV+9OzD796Xu6ABGX2Hvt\r\nmQhEP625knwAoFeXRdVH6NVo5gYkBeKwjDm6AjB+jlKPpnu5hiIiQf8ZJu4q\r\nKhJv3hS0XyjjFGMUPEbA17qfn2mNSkkRY0M=\r\n=bOQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/list":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/menu-surface":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.826a3d8be.0_1657135959135_0.14714249715653582","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/menu","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ef276aa93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b52689e2f3d860e4553136e501379f43c9983774","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ef276aa93.0.tgz","fileCount":37,"integrity":"sha512-gzH6TehJWsAM8Fkvb8p5S6dTPVS4M3s+nclTsLePbI8XOX773x704A1kZwqb70E26xTLGLWOIbkfNC3wfVXA4A==","signatures":[{"sig":"MEYCIQCt++GxxHOf0acp0VRwal0hjOj54s5N3Bm89RFiXbvPjgIhALAz7M3PwZ07th3BfXyCyXL6Nn0tDJKSH5I+YERg5Ev6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxIaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwkQ//S6St3F/ItHCFbxpynE45gpAx/u3qU6KJk/bjtAs1FresKUrm\r\nOH9ehSwdoxD/Es/m4nTwrttks4X65EYFpGNvw99qGBJ/kYWKxSmlEougqDuU\r\nheaTNQEgcP1I0rgIKDyGel5xI+aIUSo11IPVcl3Dkvpubkcgc1k7/uF/XRl0\r\nrTwImuLBQjxx2I+yi2jeadEp5r2XtQb4kYRL7IEYswiNSNHF9mCUQjDAAdro\r\nw8P2bBTHsUPl7yPqpHfWOcOeP/g8h/ppLsjG3ziYlm1anF7m74m/24uW2IZr\r\nYCKVgF94HBMWY80NCoDcnvz3Dq/IsFQEVckfiSbaq+CEKhcfzEihLWcOt/s1\r\nr98T2WTrJsyiRKODLWpn1KAwNInyMXiPfstcaHkujAQHvnZP2whaZ4Mm3OMd\r\n9JlllHWwZVJ+pz5NHjPiaDANXiqV9LKwA3kbEBq0jrVBo+v+BvHlOplhcWFz\r\n3U0aTGItKn2kP3GHHsF8RZnY2GpMJ3jbv5DD2gKdjs7jKe7N1zReYOBS3lrx\r\nsrUqXL2IICc0TINl/WKBMj4eO8Em/WFyhs9x6hWblLkO70Bi9qO9wna2ZQ6G\r\nPlraEoxfQ7fULGsqT+ZPVOsukRTgzh+iCaL9iNN+iTChf6CjrwFUW1nVgLSD\r\nT37nDYQ4eHGVc8GkEQADDGBLXDwOfyNsIgI=\r\n=y960\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/list":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/menu-surface":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ef276aa93.0_1657213466057_0.6707256649948761","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/menu","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.59cf61d6b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2ecda93dac75715044a4474a8ec81b39c2b215","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.59cf61d6b.0.tgz","fileCount":37,"integrity":"sha512-Y8jdtsOIWwQjwbArEylBs7fIg2Q3yOFvJVJfLmbFqFSivMpL3gBiErd+JVAFXUOBYC7wbyNC8SCMsiGuUZQM6Q==","signatures":[{"sig":"MEUCIQDA9jveGZHR9ep4URLuasNknA6sbAx9Q3EnrxVM+uyr7gIgHrZ6F37zutNpGMXt3yds1SO3jtEsMiRZbd081QWsVFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxjTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzGxAAkG09VKqLfnelVW8GoNvTgLfc7RXex0/1+r0iVUiF7kuny9WJ\r\nBOaeB9J/RmwdscCdt+a2WKjoZ1Q5byiTtsJ9owCupjQx/FDeCpXZWq261rzB\r\nJ94Ngkm1fTffuVC0atdjXT+woH1tDpDOR0YpCRQKCyPExe9tR5yTaCjRm4SD\r\nUSdrO6bScyoADDgFCObeSebbOaMpxMuYZDCbF6zbI+wPJCqY2ipZy0L/KQeV\r\neEmnEb7rmfpGtjXcftpjmcYEPASmHUNVT8HZOpFUOaDlPywwGnFBnGsBWMs6\r\nChtoHxkH7tIm1oD6G+aNoIRvId4fVlGih3XKi1hCGts3GkvOupVO8usL/SD/\r\nDuuQ991Kd/bZeccbsCjZ0pI6DrsaserQjt56JuhQyW9jLIM4T/9fwYZ/prw7\r\nZbU4w+QnicKUUOF93dUqbTh0BrKySf2/9fMRcKNUDkszy0r9i+4rU6jnQIsA\r\nrEqfjlFt70ZVSbC66VuyDvKYmy4QAY0so3eTdRCk9JRM5XNoTWVHsFl4xpnh\r\nXSegJyt1K2FV/Dh5t5ei/I/mQtAwZkDUe5eYmSdHjyTEfJ1SEdSCirPD10eW\r\nyuo6996O6kwPG5USVLbyJ2NKtjRm4dMUlBsi2TaVE5233vkF4g10nrwVAhpA\r\n2xri2zUE3CS3CiBBpudjdvc0yz4mMwYDVUE=\r\n=fI2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/list":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/menu-surface":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.59cf61d6b.0_1657215187460_0.6939064933283776","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/menu","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8647092f7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d235c17a66f758c44e23cdd1999730938319123","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8647092f7.0.tgz","fileCount":37,"integrity":"sha512-TtFyHS6R8/SIKLCHOfZ4utI4oLFSVz3QB0XUgWH/kqDjhJ6mc8WsnNNseCLnDHAvKDJO7eXEQ1B7SkVNF4dA6g==","signatures":[{"sig":"MEYCIQCU9osKSCNczrjZJgBqwp1r1F81oYb3j9EttLhNMt7fawIhAI1p7qvcXkkVsJ/5xXaV/E8oO3txRQdxs4cIxvwS23s7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0S0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXLw/9G5lkb8jYclKWDdsc0u6/R0BaSABWRUAOtbvsXBvTJFbnUgSp\r\nH+WonSg1Xfmf3jDR38EcCkLBrWuNwcyW/bsWNFGuMHheYp9Cqz9BlRl71R7h\r\n+XkHtKDUShowoRo4sTFNMUb3b1up8rNige6vz+FPvohL33sbaKDzPfUNnAq4\r\noqiiAZ69dRrOTBevqAQHAS6gqrjRm0uqnWknrnEJavK9jpwT+56seY/op9dE\r\nQC23oD4cCSvZWMIvh9BLSUsHtD6licSoLIXj8tFlLFU5SvjG1QU+yGqqftmZ\r\nA2bcjEdoxvn8kl4A3f52/QoVxMs4EVXGcNhQ6YXRbYzJe0Yk704pOi0/j1j2\r\nKTiEnEvL2gow6BIiIMZADBUW5DJPfl+fMf2MDa4ZPHKaEWe9Im94JZkcN6yQ\r\nuYDd/KLxSklbqudVn86nFzz213whNAmggiWkcoip+dtw9kG+0f97DJASEq8b\r\nvLjdyX6p0QZfOWiRGJ2QMokV19jSxxkY5ZpIe4KV8fQl163vGRogJkOnEO8G\r\nDOCZndfjKNk4WzTbclxxKx/sPOfGS4mO3o0VHbTAdV0qNReRkWe8oDL19QAN\r\n8zPUFffx0IlnBwjifeDu4D7wKDsitfT3nZp8rGPE4XLcuYgAWCdWUzTFo/d/\r\nNOo7SYwtKnOrCyogWUuFNn6D1WlWGHh+PIA=\r\n=W9u1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/list":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/menu-surface":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8647092f7.0_1657226420419_0.41633790327803744","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/menu","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.02ecd4d85.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ffab5a7377ddba6389ef7c4d618cbd0a910c16f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.02ecd4d85.0.tgz","fileCount":37,"integrity":"sha512-g4zRwnDgdZrG6bYgu7kbO7ZI0sF8cZ0gXVh2RLcclu1HwTrBQ1hz9OrH3F1eTSL9eOnWq+nhZNeP03JM7cy1/A==","signatures":[{"sig":"MEUCIQDnN8Y/Nz6XebjVZhKsSafp+OmNw1i9Bkne1h5I6nE+EAIga1qF8cDliTXwKMtwh71YyWURAod98WlzCxz3++tBiYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFKaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9GA//fcnK7zbZ+qMM9qbvSTK5zTAbhe8H0YQHJ41lXdhP1/81iNRp\r\ncsqhMHUhohUP79U/HdfnXFoaDkq66ZodBX940oDK55aPwiuqgX5BW9aMKIvw\r\nY83SaCZqrPuZ8xmKpSFdMaYwvlZscGef5HELDh46JZ8rkFm7e+NZvf2N1/Oy\r\nWn/TOQOKgdcXRoExYd+PqXR88J/mWh4+jYaY+8RR+NkljFClR7XR0mNwgpQq\r\nNK7Jpcj6/IyUjKBlEFcIhEkaS1Ww0DlZ3wyfrpHi7aDgmTTlV2uulKAJZ5oc\r\n4X21mJp60e2CMfyLFAu7OILtmPwC+JXX8gKhgMBl15jVib50SWSS5anyXPUf\r\n3bv5F/IcwKiVXocEfzvmshjv5Ze4RAZDlJ4qPG+XEALjtkl7uHDUVnj9nceg\r\nj1ZE7p6qJodJpDiUeloKXF7xReyBFdXv6WYVQWFnMQPpgicGMp+VGtAXShI+\r\nX3V8cBcl9rWWQCcoGhit0R4UslmhLzSCS2XL6SF7IC/QpvclaPRXqR0PVwIW\r\no9baSm1oHv9InP9Mk0TwiTPbmrzd5k/Tx7xO5cPBHkXCC27aag88Jd1VcVBM\r\n/WZbkFJJ0dA36jFkMycBq6aj5mxeL0fYovCrT0BSfV6W8IuhFL47X69HSxpZ\r\nuFoXUiN9ksP0TilLFlVkJvZccffgQUq5/zo=\r\n=Bhjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.19.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/list":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/menu-surface":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.02ecd4d85.0_1657557658306_0.7607975618592573","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/menu","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.63d3a146e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab98f2dbad26119a01332305f974a5a7fc84002c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.63d3a146e.0.tgz","fileCount":37,"integrity":"sha512-9mtS1uzt5QmLnyHE0UxyGA4kLCZyHq+QWt1FtEKN+9WyJP5xV01wQ5G2KVGSIgfxhf4VoIkWQByAWxWFT6KBsA==","signatures":[{"sig":"MEUCIA8yapGYdMeD7MQV9Z8f1zKq36txTlEv/S1FIEFeQNNJAiEAtY+fEmiIF4s709H71wMqTu0fbiIkkJ5Ed7WDuLP2qPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV1DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJbA/+Pm4QfaWhsjq1ywwVBbcdnpGfgFMHylNQPsqqeBH5LeXMYK6o\r\nTGMPekW8iiZGv8UUZyd7nXuhyAuIpkUhtKtw8Za3Tym1w6pfL2I+I6TKSTlq\r\n8hRSrHB7IXDTkfpvBnYbJZmFy+fgyHEsLBfwRdp1t+hwCk8NlmGVdbU2jpm1\r\nghU09PI/VowEuzUEROCMaCu18raeyPViwW7yclmC1bA+XEkKgwEn/OawxBEl\r\nM25+cXhICPqdOaWAwoSkNAFtXk4IVPvkBS4+giAUhN0ybsYy/Uky2FbhrYuV\r\nmIWf6edB9RhYXHmo8798YlFZUt3FbjpaG5eJBUmRWQxsnCc1e5r+B1pdSsz/\r\nAiF85ALKF/f0NwW/SKI1fvgiyoZB4dnL1mbcT1Rc5hMYv+hM0P7hpmVT2aXd\r\n1TDZ8M3nRnW+nFx6W8SWPXpX5B6yz9MuLb68CUnH9LR4d3UHYth8nf4UymHM\r\ncp59RHHe56CHWC9zkyfPkJnolzmHC6KIeM7v/P3cNBZ7ZzB8z7aZOUyM5SHc\r\nTF6+IOvzq5iYwG0tujqhsIYPsIw3RhnJwYCa72REmW2aAhiYLtaFkikkfSrq\r\n4vWmpcUNqawaNYDfdRPnmyJHA+TUUw4sAvPwbtJveq8piimelM/7584zYv0+\r\n5G5xPFSC9Y5t27f2hvquf1mqUGKxUTys/Nw=\r\n=7MD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/list":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/menu-surface":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.63d3a146e.0_1657625923019_0.7335650553205411","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/menu","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.88db01990.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4501050e02e01bf0c5f42e9f6d6c86e8d6acb58f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.88db01990.0.tgz","fileCount":37,"integrity":"sha512-uJ2h4jz1EnOxSIEnpJuGUAR+6AexMORjfmmcAdzGE5L3t9lIsDAcd0oirVBY5KYAEGaiQBx5RaM4a6VWVrQAlg==","signatures":[{"sig":"MEUCIQCL8vv4056RGIpmrYLZHsNYDQr4wqZI3EdWB/G/kyJCewIgTnjij/X7S/bF1rZHLcWUGwfhRBSOebNCLOT6fMxkM58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV35ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW8g/8Ck4SkQU9W/B2TYMvHrarplLkUi2UfzecLieWks6yaNONwJt0\r\nS0K7js+SstXsJ19Flo69slbvIaPT85Cngc6DnRvzAqjRnJckdTeHFvpgTQcA\r\nhJewYJ0kw8+CgfGvTGKLevPgxpJpV+lw0afywP5r8WS0QwBMEx35qthBmiJQ\r\nxMCibsPEFExhd6MiO9eZyKXwoAOSReHXQvNUxvIG6cDBfado9D6hn2uNKv0z\r\n4Ah1aBFKOdeEd+8KW2GtLe/4/T4MLawlPVZlN7JXYaI7KLJsXVSMyGpWVvRw\r\n7S+b90qyPYyAe3rfXDpy9bjqxLiUJZs+5zwZn48/buEQ1GPcgVuWsH+1drrZ\r\niGbhDS2pR2lz9O76k9+9ubJkwMzNJgz7RcRywjtNp75/NO/1QPgFXB52YeeQ\r\nrr4S7rjB864q1IBLFeDZA4682eTWkyIN1Lnas+uoitj0Thij4q35EjK6uws2\r\naKSdHuu5yJOvKuGPx6gxxN982Tv8fFjiDUDfoTBB3bJRXFZIhOuaJ+15Vqxe\r\n7R1gyrIwM650J2ZxrecuBb4Gr7Bsm2tmD32bVZ8u941F6bcRTJMPIXOk4ijz\r\n/losHwk8FaTkg4EQ10YvflVAxBlobKhpEo3LzaPM+Mk3W/Xl7Fgp4BankVHF\r\nUMUqa3SzrG9LoWGY9oxVS0KduwlbwlsVJDM=\r\n=wZmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/list":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/menu-surface":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.88db01990.0_1657626105309_0.8596486835068307","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/menu","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6432d8fd7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1e133fb5c73263ced1c9845b7f343a1bc435b8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6432d8fd7.0.tgz","fileCount":37,"integrity":"sha512-f/yK85Ip2tm+291dNDdAyv+nVNKnIgPHT5gX7oezuN23q79JS1MYwCCRLhfAwW3QwDt8zavfUQlbUh2pIQMYGg==","signatures":[{"sig":"MEQCIFS9VHSALlpkdfgsTAq+ZkICF3ArM+OUgJPC36c++1h8AiArO7SwvzZcZe1aF5Jwopeqp0pC7/SrLUhqV38NYb4yOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8YbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdLw//ecj4CQzuSN+nyCbSjVmjUEfDwUCAM2US4k6k3l0U3J9fXoMu\r\nQ7ZjWy31bmzmHoe7Axzi+0m5u1Dt3ws3+VC2cTwCuoMOiWAJpe7wzYu/NEu8\r\nqAlQw7M69qDbU4bOOBBocSpQ066e9AKJIgR7QWowcPydF5oTb1wIQou6yJlT\r\nA2wYkPVxDlyib/beZ2jTH0uRWaV38087E5In93xymAaD3kLAsKt625L04Dtc\r\nMXrb1Mim6eh0AI9L2CNLcc/dHvZB33huRQJQXiOWzLvgoIiVWYkhCINb2pP/\r\nRqxR9bZ25PSGx1MVQnoIe49TZjepcOy1bK5PUYx9cqOer/9RQtjpvAtuUgdT\r\nwULuQj//cxZ3cW4d75LeMngtBehWpEu2QuJcPoQmpsbvBCUL6Kqt208/YJpm\r\nmq2W9bNLMcy2b+u1xOE22BEzuYur2OnTwDbVBzDovb5MLmpWO3ldT7gHM+eL\r\np9BumSXGbxfw+C330qwXBXSHn484KCTj6iKHOlyGJ5I8lrsTUowYr1RcLMSC\r\nNYzT/tM9+U45EJVXwW2CmxSM+BhB0371sGrn7iiM4aN4RN3xMgtuTtlwhXIw\r\nC4wb6nsIsHb/+QKfnQzVoH8G2qCYQbrutwezhKFc8AjmeHwSmcFmxOpNimwr\r\nC0fZMV6Pcd3QP25T3p+FmfzZK4LQWUFlYgI=\r\n=Byas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/list":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/menu-surface":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6432d8fd7.0_1657783835275_0.7541575199686241","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/menu","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.085f9b25c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb5318e7fafcc4564b0fba558d6aa24303c857e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.085f9b25c.0.tgz","fileCount":37,"integrity":"sha512-wHfFawWG6gR6JbNCPzP3LClKzZtrgEP50eSPHIMq/NOLRGg/DiZr4ofXTj8lFfbGsazPKCdqnJM6BirynP7Aeg==","signatures":[{"sig":"MEYCIQCHf4WG9520jt1Sdq/2AE7BrbbNlbYrdh3R8NhcS9SrZwIhAIPo9g60mD1j1GmmgFRhgyEteAQSioCaCAZ4g4zXnXb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EYXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ+BAAjbZpOOFgluR8cJi323Y9fykSx87zarF5SCtMghjwmAzVRFoF\r\nfw0QLGJil7Sflt78zm2wKAWfI1oaDounBKb2A8c5sL+CszqCAanjDsunvwFK\r\nVIqCr+LkW33ruXyX0KD4ndwvp68qdp1UNo0nVK2KbSIsZX90UO2y395LC4TC\r\nQFisyXdCsATNgtTckRsTaKN9jyXFeXYZNIMYTguZffAcliwAhW6yZqSGeC/v\r\nBTQgnnfKRAvwYgsKPmP35naHo6nPNNmr/HCeOCyJwgILXahDUAuUaDJlqz8S\r\nXa3giPl69QT3qmiXduvjyEk5gcHkqak7uRvH4p6q9OiG8N2lwTWLQcyVAhdQ\r\nJSlJxKQh2NCrycpwKjqNp4TFlRQyU9x5t8bhirT9KIV2g0eRbeot2pXdXNWy\r\n7wfIaeKFFVRDaS1RRMZJQDqmM3eL+FhMGEVWWoPxT4fZTB26jyRH/kKcE1Rc\r\n3cMPg9thpGWakv1YDbcz9PAut6oztIG7eWo3AXnim/G2S0t06dyaSNHwuIcn\r\n3/AlC3G7mjDtbAloOkRHMl/j9Y5glCp2NPxgFytEZiV+POmHMz8rud/xJUX7\r\nkZsd7fp3nmEAv6Ty+HujaP/ZDKAkydBY496d5Rnrv560Ct6dwwZNHJz+NUhz\r\nNBJ9gCfSb5tE13oNMAT3hrGMszPte5OBUNI=\r\n=LXyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/list":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/menu-surface":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.085f9b25c.0_1657816599516_0.02682384136642013","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/menu","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.39f9424b3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2df4f7e0d3c63bd0b447370afe80b1d4c92b2f80","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.39f9424b3.0.tgz","fileCount":37,"integrity":"sha512-Lzu98JfEbauSqcudu6vHzBj48RPuJiRd2YYHfNjwkJWboLl/om87pBnIGJMWpyShUkRXLOTsuzvQ4NGaaRHhcQ==","signatures":[{"sig":"MEUCICKTE4z1/hdkiroRFHZyVU/pKzxfq2RbistccDiwomDsAiEA3MJHdq0Fix1UdcEvslOkjHofuKlLSmNbQiHFdF7oQ2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxiA//TPUK5H0No74hHo1dXgGjB/InuKNbRAyoa1lWNUjINAbJOGqR\r\nkSoHYzp3Bw9/+yUJkLcC9JTx6CevnJFqiwulLayISuxu80N67iXr+v9bcHrh\r\n/mW+BXUTOO7hWRJLJYiNa9/yUXv9DYRmEKR0HSdtLRzf/ExZkh6Wj+wymmSi\r\naes9yYakf1Om/0wUZ0S1N6rKOt8A0e2nqHBz3vjHcmZxm3kFOPg6HYsD9nGL\r\nAeH7vDMmAxJ26MLug2pPdyx972z25Wl6/mIrl0j1QoXJ6vpmJNsZD7ko2MeE\r\nf4UYL/Sme2qwY/ICfEKStWE4o1M9klWAsekqAh4fd7Gd8Y3/NrGlNBbXtotP\r\nD/rPEEzpDpaerOnqMKTIMG7oVROdLJSl/O50jVGmgGh0KOz2LcOzjWGVIMxu\r\n9u6dwh+iRHfJf3zisZWKLDyvjJeVhJRdKVymJP6GB7K6Pf4WjfDWwUL4FMCs\r\nFRA649230MGs4n2szhOdTnBDV7x3Bpyq6dVjis8xtghwJhPOVeuHumXCXJfd\r\nW8Ky+xTEAEkRCN8XEfM3NzXtbiXBxXSDE5TDI7HLie6RHKnHmYqzc+wZQt8Q\r\nNsTm4b+/omncDx4taGj7e60uOl4pBCqmnceB0c6W7munxW/E958IAY4Ehy/J\r\nTW/nm1y304wc51/m+RV7K/Jz2PYWs+D/Mrw=\r\n=VIRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/list":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/menu-surface":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.39f9424b3.0_1657818416018_0.7973008745704222","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/menu","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ae9fce587.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1afb8b4badda2f19c9e055cfd488e343dcaa6ad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ae9fce587.0.tgz","fileCount":37,"integrity":"sha512-dJsQKP/Vo/5/1V1Wcnv5wnDQnsGQAC1IQkl2kv9NC3ian4yIkgrbWaaPWpvA38LTIaEPYWdr4HFnccYIY+9GVA==","signatures":[{"sig":"MEYCIQCgFSfTK2ec8iE9oxuKpJh2WD2Y3k4xEeQNkNiFX51BrQIhANipA4U7OCh2rxvYxdFWVKwPyeQL5n6kRSFMjV8BcQSn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc4w/+K7o96aCSLfaIjZzc/J4tMX0yEaJCJy3mE+M4Uvo3IWb6u8P1\r\nSrywD65w3ZPJG7DaGYgo317Tt6elC4LOJR7ssyHtcFtdpUa2J6QP29/s1u6q\r\nKxcvjnGNAkDGT+GmZqzdjtSXQ9T+OgaGLDj6WfskxOcy/pQLWzfMXW2Ln43o\r\nQTwUwbxT/TgYIhwmswFCpksNxYyiY6HABMY1yOtS/8cF00huxXJRbje7j7wf\r\npvVNdqyslTLMl3UnE1d+8JRJ4H2GYukdei5iPQdM7gKUicyKYq2FfLsuK86r\r\nwVsK2lgPIBqamjQVJpkGg1Tp2XcD+Z1IdbtPtrjYB70XC+IY8yIHVbO7CC3+\r\nj6fRkuJDIxVo0b5ukxRo1C1qvBB0w572icISfnRoGZF5n+2O6CkmaDp2M17v\r\nqjP8ySi6KoRU0YTtTGVdMe8Ne7Rw6sq/v3AVPfjUxQCdUoaId6i8y+HQY2vM\r\ncIImOiqzKT1XkL4TlQ7Jty1upRf4k697ochdNZEzeSS7651BQWjGcnPt8qNu\r\nRo/36wNZ36WN1gC4fZIOhCf09eF4A9wqj9z2v0eWONfwMwlrkli+XQiszC7Q\r\nQZpShp7FDFjgrU7gwE6m8eUafO5w6gKeM6hlctp4URBfwA1ksDx7WumSHIbK\r\na4vxrbZrGnVJPx2E7EmMbhjYNkLIvrHpiZU=\r\n=bueu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/list":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/menu-surface":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ae9fce587.0_1657822191588_0.24921841284483381","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/menu","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1ebddc343.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca137701d82ba61a4e4d1742abefb95bc865005","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1ebddc343.0.tgz","fileCount":37,"integrity":"sha512-i78OzlNLne1/i8l8BxXbqudGcFykm9DyBO/SyCobMEXm47ciFLptBfL6hqlX4hbcC9R3at4ZmCGI4chnRHm5tw==","signatures":[{"sig":"MEYCIQCLti06WKhjm4TDqk/YroXamIRZRKq4FSQ8ZaxZ4GMq6QIhAPGRBItf0UajFkX3rFvKzfyj3+rg/nO54l27aZj8gIbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sp5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrFA//Wrmphd6lzibKJuIm3kaW7kw13/Or41gGYVMHRCDNpyN+JBxV\r\n/z58vD+RGCub9g03ggvz0+4OnTHHHtbb8iSxzOdtf3yqoDzqjnY9P/M0Ol58\r\n2z7PbCefXY6W7B2WWNoETB4mS+CpAajjM9PZeksR4lLHnXixePANtw9Rtb9A\r\niHH9SlxSJIcQwnJdX8rNVVU57/1FBYvM6e2OYofs5bHodmx1U/QrpIaCBpPR\r\nysQVWXAOvDkl35qIQAy0q9BUQcTEeCklfRDzsAeGzM0o6uXfaWOqeHRQr4D2\r\ndAy1Ol1gYYlPSKgBpbpFRVCIeplUYm8I++XgiCEke4XO+ET0hkr19sBeDCnc\r\nI/TLPOJzMxmxUGZvxamGMLCTCCPz35zA+/PcbzBb8mT4pmKgV6E5rPNhE7Wp\r\nA4Vqu/7YYM0xEzJu9u2rGbg8U1pjxRZQKcjKce1QxEsap7oX9Oboq//Tdy6w\r\n0UHvyoV8rwtRQxvDGGP/16rZivk16YukaHMn4wfNVUsAZpHFBBFjzUrJ4PNy\r\nnRKAh+AX30vvunXH+dIQd1IjK7nbjVVekoTXeBO/twsU9p/rxb8oc1OOmDrE\r\nm3Xi8av/15I0l47aVNvm4SSFGlIb4eCB/Y7GkRhK6P4cuH7yt0eFzejm3s0o\r\n4qW9rZ+UiizOlZFfD8Q1FmUuMnpu4QPNOoc=\r\n=NQD2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/list":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/menu-surface":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1ebddc343.0_1657875065511_0.5799371242770666","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/menu","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c5018840c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c28b80510da208dbe7ce02615821dc98208a41","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c5018840c.0.tgz","fileCount":37,"integrity":"sha512-vZIFDChSQxdsu0kqDyh2mUsNdihiWmiBScpYgVGMph5CB1ZcbNqHJGWS2kayYWJfAc+YGhuKof+h7zk5W+AzDg==","signatures":[{"sig":"MEYCIQDzfZCi5NrBdMAq7op7qwtoekxDpDF6WYXOem0AIzl5NwIhAOLVp/PZ18NuMF3AM9cWGiqbf0GTIFrDYZ2zLxqKGj20","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SuYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTbxAAm9U6OkyRmRcdSszvTa7cMnTWtGjc9Z/pIBn7marUa1iA2YGk\r\nJglQxfbWMWaX1bk/ieizJAU+en10k1F5exex74Fy0FbILIpAq4ZQ/ECOHHmQ\r\n5HSFbrQFy1ZCkNsmLTWx73EnPCAoR7Liougor8VsWz3i4VuHlcIg3xQvWi/X\r\nG4o8t01LYf7ikCDqAHlWXUsb2bu+yvcjH1n9GS7dH3Qs//PR0vErLMXqkrgC\r\nMWeMXUwPKDwG+Zf9+3xlEpHtld+pQyyYHM6VSQ3O31emzTek72EeUd+zkJKo\r\nETXDr2tm9MaBz7eoQN2TUhVTnGspUvT5LPxBGfcfOJfCJeD09Am1Av85Bz5E\r\nrwNRlkz/E19C1zuRRdtuVksxe/JRJ2qyruiXHPF82EfD/no9Oj6QFnUVHHVl\r\ng3QitMbdTNlyH6kqOrLIwS0GS/It4J38CLepHrszvJylb0SpzAjFa5qHNp0u\r\nEtDNrN3W2A5WnhqFC1wvsAwfMoiVIIyGDejDSq79U0u7uQ4Gw5opbi2qT7/N\r\nr+/EZ7uErY//iouvx8nKhBwkUAK8kOLsHoHTTY0dN36IUkvlCbWdJAQSUXYa\r\nMKOmZw+znUnFQx1K8GGeHbqpVxtXZJCPDVajMH7IxtNYozdGq7snJGgAfCO1\r\nqqGrpFvOKxbuYQRYW6qxzpITB1UwCNQXtCg=\r\n=Qmz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/list":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/menu-surface":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c5018840c.0_1658137496152_0.910202954604493","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/menu","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.551b40d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1006c29118fe95a280e13eb53392d11fe6061e12","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.551b40d18.0.tgz","fileCount":37,"integrity":"sha512-dMxJQYaPZY6gYhg0lsqOxKCvPNJESIFv6L0Mx9uTGrZhS8X9QeDC+Xt2pMzuYDl0YSu93XO8Y8w2lhNFQ919Ig==","signatures":[{"sig":"MEQCIADhElOcxqhVv+vESLr48oiN6cpWj2VG+3u9jSDtwviNAiAXEI1sLQtJetGsE/imaxVFxReamYyvMTrh1/MSZofzzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S/HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8FA//Wr2gETmnu3iTQ6r9KoRqR3O4PsXXZ4Ku78sAGmt0JdxmtYD+\r\nqeaZlsiPtSAWcFwKFAjyGCTLHC16qhno9mrUrk8MDz139gSOHLNQ1TnQ83/Y\r\nS170V2HlE+b9DsCZxnhi1l3gzcYMC6sErCxhIKSfw9X7CobSipe/FHg3YLGB\r\nnRB+GXNfPmsVQXw4UYkF4L9G3tC/WWk0LBPxfCYNLYdT37BKQfU/iJT5pNOq\r\nYRUSmZlS8dl7hh9Jn6assrp+ht9u1TOYaZp8hCzIrMJye6dHKR6gfnEHqOcU\r\nr7ZRWz1gslJakBy/+GVENtm39dOEg2Z62Y01UyBQnoi0LK/mCZeYiFoaYe+f\r\nrsgOqWqp27n7vBUrWLX/Q/BbvbpBqG6x69ECygHCVnyVTPHnUwOeRZpzLBdW\r\nD8TN+eViZDSrCUkSE1ZOS0GRPiMs5JrE/+eKsNCA0Rjc5IGqGaZhGZwE0fjv\r\n5Ls+WHtNXvYh3Rm2LHmMKAhn9KzbkR2I9214lFU44L9Fto1ddspVlkFZ4qyp\r\nKArQW9OO2OuCOwc3lluaers8jhvkOcH6/UdoZq28Qzgi3kGsIDGBQkzd6wwF\r\nntFUvXmGWXU+TCQsOgHFJTQp5Z8BxrHWR37f/i+eu+tgbjlwn2qIiPRNMuhq\r\nRbY6rw8lxIU2OIkU+Sumub3qqDB7VA/pZqc=\r\n=qtkN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/list":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/menu-surface":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.551b40d18.0_1658138567416_0.3336700039854852","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/menu","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cf9f12371.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8b7c83bee2f31763a35c0ec553f3514d5b6842f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cf9f12371.0.tgz","fileCount":37,"integrity":"sha512-peIWCRpuHxxw/nBKm0A/GrctCMlX9CddphEJMtHKRnTpgunPL+pn4dJi8S8DrPkpctFfpftJHuo8Mm21v/4vgg==","signatures":[{"sig":"MEQCIF3JHEORegiAVq2NKStBYAcud7oCrtD4I6uB7F0pGc0LAiAh3R6NskQwjZPdU0ZFuSngVgCHTrZGwOJYu7fZunH/4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TDCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNxg//TXx7+wp5Rbebk+pOh8WI3QLeXTg2ZBi7ImOCt+FRDdcepDxC\r\nJjYoQvIXo1/HDdbaTuj4hOman+roXWQNahIyxUoL6DEYglGc5JZjYFt6zZX/\r\n52xFemijTOH8FwnPYlOlKNZ+YPhKpBeGyB1OGWYmrTjsXMncWMRtSUjo9syW\r\nx3rf6+8Qir/j93h7CEzFA/wP5zGdmR5/yFFj0E+tzT8lKuBuZL6ablr23LNZ\r\n1sxT4GxENkAGcdbJ9o3d9TX653Ab9lJoznhuPoti3aHMmK26Cxs5IzlDQy/x\r\nPPYV7fR9RV/SE9R3ajnSvGB2Roj0EJ5EaCJMGYi8jgaz58NSXUQdoUIv61T3\r\n7rdNm6uu5rIua12k/GVwXJRf1b6AWwH/KPbe4kYNjGNbQPvK2BlmuvKKnBh/\r\nSrRov0F8vOaEDXVItxrBCjScwC6LtclCm5kBumkp299L5L2+FE86nh7lZcOq\r\nYQQA31HRg6/6G7WAtiLoE7bwHh4d4SzcqI20ir+4KkfAyFv3GvM2SVxv7PGn\r\nykRiddIoA6AUeo48j9DhGez2FD5gRU88UxRlvbs3OKAs4DPWGMz5aGUvfEWH\r\nPJIdYGrOY+KYAU++vAuk9HIoCnnykk+PcVXQjLyD64DYF+QexH6VZGTdVwK9\r\nnCF/1cIKYJQ1I9HgBP5aSqcdZKXCxcNzXx0=\r\n=AX6b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/list":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/menu-surface":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cf9f12371.0_1658138818427_0.8028334345066053","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/menu","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2797ff8b6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f014a370e5558ce0a25e5198a3bb74d03c34bdfe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2797ff8b6.0.tgz","fileCount":37,"integrity":"sha512-8uYXq+53H9UMJq8pQ096GOjzo3SbvapbxaE+bAB59tsFenf8rQpSVreK277CN00YQRJQpBS9ObOq/RNtYzSqMQ==","signatures":[{"sig":"MEQCICEVYuzdRbMRKZXdovQzsySSY1HpLMxP5wTsC9HeP6eYAiAOsUv+ZACdjJ3fxV5h0vuILhAPCTSSU825zU/z68YKtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1foaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSzxAAkgOt0MKj4FPwetdRBeldefi70HkfAug/GvauubXR3B/H+N0D\r\n5G4tjD/XL0NCCGtxr2ViBWPbmKVt7wJPhtCsSYhRBcbMTVPejaHjsur8SKyE\r\nZwSy2pQPkD2V6cU2GW6CUKiuI2XYajThf6LYFbINYFGKthzLVJCY0w/VxS0g\r\nqcyJAUuaQvrxMeBBkxDzQssGojnTCRtBH33JUeY+fWS0x7pJCd7GsyVJoK54\r\njDpUbaBF8xlFYb1pM3Yl+1C6X+ia+bs617ioe33/a7uYqYiA3BkCOY6yx5jh\r\nDDMHtlPR1QvSlL6yGwr7MyDbnuVAvPT+J4kYW4Ylsndgvmk2L+Ndq1VQxhjc\r\nQuE0BZ+IwASyFegZIkaxvhsD5N+Lcugexx5GVdWAcf0tvQU5T0rOvyiWmOQU\r\nPs56plFrPqh53+qWr9UOObYRrHN68pukj/f2lVnF6LTr+cYSXaAf62/TvmFh\r\np0dIm7p7XHICjxSEKx9piMdVjAoXcdCZGaeaQI53hLRxd68iKLxuAt7zcGc1\r\n76WFB2tnw1Lkhwr1bqV+GLimNd0EimUtoTr5qSR2AmKdtI9QvUd+UlpjruLZ\r\ne3trSSv9vbvuk3wrwNWfmlRvHKUvaT6yWqnunL7vs522Bs+EXbDrREvjfgif\r\nL/mGxWQQsILtJ78g2LDjRD5YiDEZmzIFxy4=\r\n=sjJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/list":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/menu-surface":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2797ff8b6.0_1658190361782_0.6020759182453992","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/menu","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.110fafa17.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db57b18ef087276148e4e5ac69beb133b8e7cab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.110fafa17.0.tgz","fileCount":37,"integrity":"sha512-f5i5oPwkTikWV7wZa2Xuq9ih4sPhpaDQqdt/y+nOvOuuZOXhln/Xb7VZYbDMxH5/jaIqEDlJRqRBeN9DsWuYMg==","signatures":[{"sig":"MEYCIQCK2Lw89mnxXjGHTwUkpPx4Y6rxyaTtTfQ11N1BJIRpBAIhALsaYuFuL+NPDjb/K5VjW2lhBicNCFjp91uNPY5IFZOa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17NHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4rQ/+JsIuzd8/Ll6fzhfZNpJ6aVJjZmUpm7KOHaZeYfhq0mznsbpj\r\nS6qlU/rtdshKggQ7OQ8WpS9xUbmgGXTLJE+g+7Bi273GZjCVOAh3uuEl8Sxj\r\n5tqY0Y5vm1yk5Y+vo35PsrA1B+g7UqRc01pv1PdJcxNzIu0bRAlwb5oK29un\r\n2qWu9S3qVeLQ0EWUV6jffI3xcTEYFT0h1bqOsb4zrQ7vMdYM9vxTdG8NdXt3\r\nBRV13xE9Kiy1Jxdzj4v/pgc3KN2D7D/gPJGfFW8vVOKfVcDnxw9mFNlsmGLH\r\ntbiAP1JUg0r12XIJCWfy1UET7qyJEx4s4daFlgkyPQa6SsAk4xWlw2F6xsdC\r\nehOYAM8RDONV8z22Tjv+X6SfOb9P2HCTL2TvMQsqVe2N0mS4NJ2Jetv6N+Uf\r\n6jxCNERigYSXUKnJH0MQexhzVHsHgVtfS/21Wo7Uz33tKEVf/9Lei/uitEz4\r\nk4Fef0hrrK2NHX5x/ZBtdW+sGdVMsoJgkXi7Pq29ThwEqeaGN/EmA2ra8yky\r\ndBkVQgkpokbYhQ9nDEyIG/GOI570MQRp+6Egun9OV5+YEXc70F7TiUvgDh4/\r\nlsZFh0M20zu5lPmVRKgleGb1s1Pgn20Wk4xXpSOMKjKvTY3t/9MTYUBC3ln0\r\nwAkQfI/XABqRXBRJ8BUAEwl0BGFrDvrxHq0=\r\n=IKfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/list":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/menu-surface":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.110fafa17.0_1658303303476_0.5807572758568449","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/menu","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.386ef1d2f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63378c08ba9b5c57da71749eb1a1f1d3c5306226","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.386ef1d2f.0.tgz","fileCount":37,"integrity":"sha512-SzKUPLVnA5D8ElGyFdxUOTxWdhEXtl17fVi8rfZTkuLKu5jovai6mToqiAhvbYTZ9TM0e4RcRRHkfzEl+q+J3A==","signatures":[{"sig":"MEUCIQDRNfyNYnhaiEgOXLh9mRwQsjyYGxGthgpY4ATV53LbfQIgCEoCFPZCuysxx56I3j7n+z4lJDZ3/VEPMQFXrW28vLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EeyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA5Q//bJSRJ0QfNLfKnLbE+376QMPiXMFESb+3SMGFnSrjo+ErVgHf\r\nP8Qu4Oo14ivjtLzTKKElSkytZl/fMsTTfS8d8PA/VE6STXygY9QQxyfwsFb1\r\nhJS4dAKv8WATq7ivB5YxMOTy0oswlBTAl6cH0Ktme/Nz0HgciYAgYU6WS/7r\r\n+UBD2Xyva7quqpkiFRh4DWB9YGjlbqQPvAnnRyOSX9jIuL/iSxJPnYtNxTSi\r\n6Rcp63biNoC0tf3XNq7z+sKZqCbTUcNBZXbq4Jpn8weiRhkNOPxWaHkBWuim\r\nToO5ny6Gi54jx6FuKOZyiAajtarODieJJD5vgXxH7/RchVTc+Uf7Jhu4y78C\r\n8AIWnZEd7GhG4teOseaChyN4zuT0LYHrg+PhSoR3YDC9f2vgz3GS1E98hT+L\r\naEwTATW3pEHVyP4FNOYcN4xSY00ljbjedpQT1MjcqUPhgtPjuFwE0SeCEXbK\r\nxCbWXPTBkx0wWdl7B3SFlOndqAiSGm1CYPmAZvLGRKLO+tgtxafOF2sK/XpG\r\nVxtxfIgRXFNFcqDkIu5HX5/zQiyaNgkibqSx/qOLzmsgpyJLRbN690qSCde8\r\n+FQH9pCdUhd09JUgPXYQ7zHUWmStY2lRLq85CVOa7SMzGsj2a1ZP8z/msgod\r\n3xAuZcY5PSzE4ozDVDpjK3mThf00fWK4zDU=\r\n=UvNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/list":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/menu-surface":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.386ef1d2f.0_1658341298213_0.0734304335011664","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/menu","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c3924efef.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b0a43adc195879840238cdda96e23c70aa70bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c3924efef.0.tgz","fileCount":37,"integrity":"sha512-WwjFi2Qs5eUYaZ6i4fdKLEX1O10zcEvVd6K7a2tGguOuSfr7dNfYS4/9dPI8IL46iYMz/oEDmNDF4CSGQ5mDmQ==","signatures":[{"sig":"MEYCIQCiqwCsvuN5hg9lpBICl2LMOZ2BY9KikjlOsz/DwUOHiwIhAIhaJ63W9LhKXNSj5Ah435PsUCOUPj0+raVsFfcQF3cd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2En4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFyg/8CrOUES4DcQAVUG76rpV6ojDPE7yNW9ymUaee9DhdG55EDt18\r\nXFFsFh+e4Qact8mjD/ZEzFYz/BDFOl+a8X+oFPG4ZxZJvCXRgYo8zwzdDW+n\r\ntP94lUUQOs/AGNxxUggFfEySyGKmN8kb6/5ey41iJ/UHeXOpFUHQIe0Vk2Q/\r\nfc6n7doSxWN9fIUZwT54BL08VEI6sbCOc4ryy52muZLgZhw8YToEXJLc3ewa\r\n3tFMm6Fk1HRS8vxV7GxpYQbcGlaGLqLjv6oKOlr7VMs4B+V6HlLlUdSIEheU\r\nOnnsrqZCjiVfDk9PWvF9/NeEZA2jNjFzzmeDk73Cw3QCOt2b6+SFbE0mk5c7\r\n8F0/LhliRHA5lP2Z5/S8m+QYGt906vgplgD4TX2MguKyYHor3QDxuH1jWAEi\r\nqYp1j9JJ9688ZcDI03iSU6JgCfgFhYgV5ZBiHwOgcyDm5g45gK0wk56fOwGE\r\nqVoKQaSdfgW74iQ8iDsUP3ZT/FpeolEYu4PXNCXy3xZezLxWlvFO06Ghertu\r\nM49jcWO2OVbP2RtQSX37Ed1qKOr5E93br3dVXDwHa8SSpIU6m3KNXKP4YEIC\r\n0SRsjjL2LGH3hjbjx6JTJQLDPc7dlWpNKEJtyIQJ8nmeCtSZSoF/wdbn75Ce\r\nQpCyGiMjzOqQZ+RGNek0u1AGAIW4zxlgIBo=\r\n=c2Yh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/list":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/menu-surface":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c3924efef.0_1658341879856_0.5399041577148329","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/menu","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cf5c5907c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24035fe87d9fc02e4857861fe18c8092fcbfe51e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cf5c5907c.0.tgz","fileCount":37,"integrity":"sha512-/r+/XpKEHGItuImbJh7mlWmO+3BoUbRu14hk+Jj6Hb4I5SF/x7EMt+QXbxjn0UCsuVOoQaicilNGPuZWMx6MsA==","signatures":[{"sig":"MEUCIQChzldIT6Pdd6ZCRukbGzLKfxBR62N6WPn8BtatgOd8TQIgRbnSstbtRCFHVeyx+nYjCVQny+uJn1pu+YdcwfSq4Vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRiQ/9HgiU1N1o6qyi3n9Mb+0HbDs2PSpj1AedUAIYgqCfOVvLH7Az\r\nVlmjmq8t5jmgW+3SCqE38WRldhauZdHI6S6xeo1iqxmXVdn+eptLvBYOvMyt\r\nCiLmGNpeVjh+uvnprTAqFcD4r6c82HCJ8F3e5FwnNjmkbttp/aREdygJ32ra\r\nACknxFwVkI6t5UHO+4AZNqtydcWRtbtVK1J41xMHLvkoXTI8cdRFhn3L0RRz\r\nFng/ro4V9Q2jnS02N3kHilhnbfeXuTbhRtdpPend5gSfAGz1V6mPAp1a73/r\r\nyfXD9HOP4i/D1eODFcMZOV0u1O0xuuxuM51RCLcpNA254vAgqCDuWqokmdd7\r\nGytisxb3Vtn7cuqD/pokot1xtGDLkxERfmblUI+eVYE5XGnoQAOGKuYOu/ZL\r\nDzsSr6R+Aont5hdm5wlx3vgqOOUOjHSupAdZ4kVMZKA7SqOfh26bQXmLIU1A\r\n6zXG4l01IGmPBRdOBaTLZzEjeJxnedbKeXmjjZn3S5/Bitxfjy8Jx6b5K5yG\r\n080BNETKNC61BQUbXl9qyhVVXpv6/uYpF3acYNXgZxIn0lR6/+R0DzyTyEaU\r\ntC7GupSUWZXR/9jEY58JnYjQ1HM6JEMo80tlOb8XYsw8ri6HrNDgXWYYtPvr\r\nUcdRUOkY5eZzPTAWAP8gLjRrIV6qeIt0kEo=\r\n=5ldA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/list":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/menu-surface":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cf5c5907c.0_1658352218406_0.7309510053891479","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/menu","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0617e2319.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af2dc78bcf0e028459542f734e8525704d8617db","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0617e2319.0.tgz","fileCount":37,"integrity":"sha512-ZAnw9fbu6rKxDSof1/Stv9hzDt731Rs8r0Ipf2mapMkjgTxxmjHwgr4KAaHW3qXxqI1AR3GixZ9hx8J2RZWu7w==","signatures":[{"sig":"MEUCIQC3Vq7epi6NPyaeZuRCBW/FKUFB+4EmBi6as+xIRYUJ2AIgZBfm5W6gbMg2up6Jw/1UtFzdiFvYxFxHGvovYWMi1LU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HaaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWYBAAmHAWy2DWS2xGzRrdXnYWS682xFYoU5AqslAOi7ewY5fFFMhj\r\nNQup4dvfQwJeqP1+8e6pK8aG5mNRNQZskIanZ0x1JSlZyJ/z36q3ywAxaM/t\r\nMGdQDPovIIgl8OHuG56IhLLPhwoban+MjayUySUuX5cFk3JJ86FjxaMqb8Yz\r\n/Mf2HH3I1rrudiTbC5lx2+biz6Ojoa/5ZTx1NNju5DGGSU6RhZ5E5BuluQmB\r\nO1byDya9JBd9DHGckC8588sEvGRKfhpajtg3z/xYue9CSyDtxTHu4/05A88t\r\n989N8L1QW0QspkwQ8ThkMz1vuaAkkQY3MVGTuxbpyEWzKeQHEixN0YSZNGsb\r\n8hTndee4Wx+Y3Zvs5wPgbb6fgi2FY0coFMukxvWX6eYzL2jQiFBm8NL6HXXb\r\nJccA6yRax9itxaRb0F0TdfHzZIhhaXLhzMBRxQJoeh/89ulX8hqywDAlmGEw\r\nPlJ5JpA5MgjRMWON7mMcVb2szyX+6dCXJCBnvFZW5GkJh65E6IpbG1+29J7m\r\n8Pzu1I8xcuHJ6+OAyDMKNVy7sv/e/KFHUor5R9yw0d+xeKmVt2VHjicDqqci\r\nBpwllcNSxsZR0Cj10p6br0xMa9sFvO40Pdbblns91qzyQS4Ud14sS/xbktzd\r\nNyzMuTQ1NxIcai5dzb42YOkBtyXzzY8j+s4=\r\n=TCAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/list":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/menu-surface":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0617e2319.0_1658353306113_0.7869038056096798","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/menu","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a743b7967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f6cea8cdd7a0029efee51a7f08985b882734c7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a743b7967.0.tgz","fileCount":37,"integrity":"sha512-Isl1RR8tJiRsB3k1SH4dqD2hh7g/Kj4YuPHEpnVKmL6eOVdvgJ6BH5KzRBVXkPrgr+aqxYPwtun2C6hF4UohHg==","signatures":[{"sig":"MEQCIF3ijGA+xOTZ6xGhrNeZvwGjz/3c5jLi5xDQCnD3a3IFAiBNtkTnDl5IeLw1ItEe2GrLpBLuhCDiJ8A+/2hBuG5BqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HqQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkHw//SlFS9BNPud19BUkdTm15ZZTymnPJef7htb8ac/JimQQ3xRHb\r\nCOZApRFDl4WvbW0eqR+Q9v1aQUTwGQ3AH/LDKN1kWEtjyPW6mRtLhQJbmcO9\r\nwoaHodqEIQf+36LEhf8rYpbySjZReOVVYRa3tsKw0SWh9zIw7VcbuqOOWN+E\r\nXk/FYYRAM7nJL4FThmoH/sOetsZrHy9B0ndTIvYDoxpgR00dLX0oKs631g2c\r\nyQrU8tGnscxxyTZwjqFZl319CV0jUbMclGdzG1SDQaZYVK+/sRbk/7Uzlh6p\r\nVVvVC0ZbytvljxH5xPKFs6uk63YdJINcxhlxEkGzOv6hYcqH3buPVNjt7yKK\r\naXQ9sI4aPWzCfKI3iidNv12YiUGtPer3GQg0OItZmjrpFUBxx+5djvxL4VRM\r\ngPv9cizN9wYeZufoq7sjwa6EQFK6yhLIHfIHk+SRzBzSBFx91jXLAgjUymN9\r\nlh40csFmGL/Tais2EXYCCpKz6IxD7arnsvk+r2am4EiPWwt5Yh2Fgv1guy8Z\r\nNxjtT35mAh/grOyarnu6XubRt/czpOU/seNrcDaOeT2Wp6Ag6R3ricDLDwpf\r\n6sCVGGcVpwpR4C29d70KS0hT11Q8VVp/uiCaBgZp+YA3wX8gmWscAeAF7JI2\r\nVpo7OdXbV6KHcv5SAcXJ57u6bW00icbSjjc=\r\n=tAdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/list":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/menu-surface":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a743b7967.0_1658354319761_0.999666583742634","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/menu","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.69fd619d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f08b10ce6654f127544ed1c47af05c2b1548fd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.69fd619d0.0.tgz","fileCount":37,"integrity":"sha512-jmIypdoYJ+4FNCtrR1kfypGaYd+LrwbVnHK0UHNvoqknEOozy0mD0aDjJXOD2WI4hAcfrwAnvqcy0Xk51bIqtA==","signatures":[{"sig":"MEQCIBf3toDqQDYUlaDl4+gEUXYVaUiECU5yMaXQMe6LMjjfAiAld3UPA82Tlgr9Ajp51LJJ6jUGDuVwrhAqzxUv1bliWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H13ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWqBAAkGDiBbAokIeaeuFaF8DypNlO9SqDyUhqAaNDyjWWj4jaSHEI\r\nqwvjqcLOtFuEkQQYmpQMOr/z+vXTJqyd18oMlXqkFh+3o8PXdUWbDl6m86xu\r\nZUorCVs+8H6EZeRRmHnaP5F+guVG6cA+QbQtbBjm77WW6ae/qdHxMzb2+LeR\r\n+6E0iW2rPDsc+Cq68MwPe+RTaPlznqgSFCsmejSZVMkdmo7kNn0v1k3bBwB0\r\nAOMHczkD6G1nprnf+29y9CrqWQ5UrGFpRH202Bys3k7yH24x6rgBHUaFM3J1\r\nQ2ldS7hs843II34/bQPdcrq0qpu+90UrLGtzwviqBNPTQ3oMYVBanGOB9NiW\r\nq4gAcQHBDsPg61r4Eeta2lCz2Gok8DSjo77IPqmK5AnFyQChoVSBiO5EZC3r\r\nSyNorG9uOI4TC9lS/owq7QX7xkLtcki78Egl5lFhauEHQhmHzRhx7/wdw1HL\r\nhRV0uutd+yPR+TD4kyHdnpV3v9NnArPuRdLWS5cbQsU5177rs1d2F6dR/VQ4\r\nlAyGuY7hSZj2U9CPmm7G84fblmuv8P06TKndK3kotmSFC/olN8kR9VemK7LA\r\n2Y9IEJAcQUM0/3LECH6caSIBtaQsE9M34A9Hm+Qrj84Pt7U/5gEzttHZ2ALN\r\n5afSoCe+GfUqYbYJnZXGmXMLaozZNdROHqw=\r\n=nSUH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/list":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/menu-surface":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.69fd619d0.0_1658355062778_0.6429115855881302","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/menu","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2a6ddc1cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2704496378d87b04739f7beeef8aed1414fa2d73","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":37,"integrity":"sha512-G6aFtze8n0B+yL4QQzrkM1i9pdAAPaDTPY3YPVdBYVkVHBcj36915d/+kre0OJo438DgYUsPR1Yq6tWRf6vEOw==","signatures":[{"sig":"MEUCIQDhAIQmAV+AYQ14TC/SP3R234/YE+UT9xHT/oi5RyG1sQIgOolkpRE9uTuvRveOzkShPGm9eTc5ceErWoTJ3qUmafo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AWHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP0Q//dYXyQox4uHwTzQ7wvyBN1jvWHrGMubnXsEchPYtHLqh4Ua2D\r\nJOzNgUECFi/CIQY6QYlS0aOFcldBB5i5ArXO8+DZKPzsPI36tbS3uKNSXwie\r\nwnGGmbLpXjVZXlmMbEYBrUQDA3o9JkZEJqQ5EhwaZjNTvShENHnUQlPyssWh\r\nVZXhXb+5E21TKglurGEXaMVzQt2xhGDAhVDsc4DH9whJX5XgHCW8ea3b0Bh8\r\njfqGH+8Vf3EBE6G7ppwbk+i+q+ICQDwA6yfaVMx6OTA3IIID/T2mvKd+4kDh\r\nDi0g8HZAV0MMnxiUh7Mkc7hf3rslz54LhjnofsiY0IdywIO7fTjDwF4sJ9Nc\r\nOtNskKZLoE+aDfgYp4I8WBoyQFZeXtmChiC4/xEWgJd8Bse+VOdRRSc6xDum\r\nE825GH0np0Dr6MoHkVKyaA99giBwfGRvsTheWhzYtf47Pb3LdV/6Yi6PWZWd\r\ninUfjd270yyDJPy0IF7izYB6pI4DM9EEjo6wJHszbNvUGrxpiIph9J7SGDRp\r\nMZFqB/ZJB5VkWBsvYFiArueeDOZbhmSNimeZncy0krwDd2ne7dwxxxMbbzeX\r\n3uphvp3xwHEWYj+kFN8nuQ9sIJkryTDYjSOHybhzAAcnC1pLXZV6/lDpw4iA\r\nKwlocZxU/re0OArqhXIeXR3agqAFES5c3oY=\r\n=Pf+o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/list":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/menu-surface":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2a6ddc1cf.0_1659110791111_0.8812038676915155","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/menu","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.86efd56f6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ccaed5c4f9b9c8d66f395dd8e34447462f7a1cf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.86efd56f6.0.tgz","fileCount":37,"integrity":"sha512-ywqV+pxsTt0H0fuVMLnVWTdmR6Xfdcn0/mXfU8NxOOlzQF76DzfHCooDJepnWtBZpPst2yFKAwp4qirUxkiaRw==","signatures":[{"sig":"MEUCIQCag9ZqbTfR4aizCuvHD4MFbD0hTg1jcPUCWaqYUJKe0AIgZIo+6ObNmDGjEvSTIGrSQ8AH2AP5JkNr3C46rFdF0yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Tj8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUuw/6AgMCphqtMNmvAoJIV51kTGLlooZ6/dT8MDowErRPYEU8eyaU\r\nsUI3CdPAxy89aT3YEK3ugoGmufMwJUj1W9jGPSWZOAUcwlMBUkS8FdLU2Q/p\r\nK6ZOEtiQAtAduVDNGxoX6TeSRyhqTmesveIwg9kpmNmsopQXbYwDIbmiVoZM\r\noNqVPdo8BLoxSDoGMEiPWEBIvvM8ZInc/6X+J5OoGgmQGzEq6rQL+Ijg1ZKD\r\nT8EoV9Cr0QlkOwDiIjjtaD+IEUyg95FOYlIlcQb+ivJiGTUiSZMNI6IzrMIe\r\nd41giS9Usokfcc1V9I1Z8be9bUCHtD0UJIfJLN9dflawcoXWaBDqT/AbN2gx\r\n6iifJMNOa/L1RAEsxPV9G/T1xBx2wCBoSXn04rjX9fNHYk9KrSXt0ruNIhvO\r\nC74GrgnOQzxtFPmyM95Pc7o3ZC4VVfuzYfr2TbvYKIPgOXXK5wUzuI3NHP+i\r\nOgfcd6/Jkikwgfm+/6Q6K1lk1wydT15rJnWS5qWdKSY1rK7mYRNQlIhE0PMu\r\nXs3x+DX0TUpwPyQwTVGuRigkZIdntmNq68e1eOHSYQo15OGPjXMMirDL5voS\r\no9jSHF6NrZ6p1Xxgzac6yFsRrIyx56fPI9t2kFGEJig8eVN2PIS4fpkij1XK\r\nZpFQNOoDBSkHlJTiTeafePHSYtGDsXoniLo=\r\n=hBhU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/list":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/menu-surface":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.86efd56f6.0_1659451644314_0.048389392201250825","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/menu","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ccfc24d19.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe2117308783e0203091e8c70d8a68cd7dbf8cff","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ccfc24d19.0.tgz","fileCount":37,"integrity":"sha512-4cVney9m/V8bGO5TcOHEItLexBvx0Zu9kmGlcQQfBNDBgnnzq+F5mJkugVZ9/iJGfCkgq/8VZ3BGGTSUv7tjfA==","signatures":[{"sig":"MEQCIHB7yJ/rr7Yj96JaQsZLzkWVwO9OHRJqaxylnIcpO4JvAiA/K573LaOWfJloMFX+HK/4dRYqdGS3S/3cGW+6Lowtzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rs+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU1A//bh8rMQTqBH6Bx1YXpGXm+u+SFBCpvDsH8pxjGcV+PyamNHVn\r\nViplwWbtN0cDXMdEBZV1rTi8hFFj1iJVDPJLSCGv3BEkNtJJKy6Anj90g9Pp\r\nTdwYuzpY00rK8kVntEAz4Lrv7DHf5V1vp+JY9a/y1RWvDzHlqD5aLzULhOK6\r\nkUBlXGSw7o8p5avLlcqFbpWG333Otzcdj3eCZvu64QoL7mgQFBVWOXrArZMv\r\n0as6AFPJWOTM9ijxSD8Vmel42gCNoJJ2M2g+bb9EtiONzR0CsXrTXaAljqn/\r\naoOAISFqmrFqXn6TAjLgNHs5x+jwzvDaeTjDwLGj8XiJKOyDdLWo5hCZHPpI\r\nq+UT5XvS+7SQkFY3pZnLG7+vipvraL45SOsAnKkccgSQDYj+zxADk46PHB6d\r\nyCg6CYsAho30jmJ8LpPqxNPzcIYwxFapClI28eOkTYkRLXLPB7SLcndvrGiA\r\nWYI/Y2FKK8y3vbq6M91qjtk3ElxFRyW+PR2Upz408jo2O+Yw6D39kK0leUnR\r\nHSD7LpnAXq7/K7MHAv9Hwe//nZPbezl3dXYC8NxZnefZkJYOGH/TY0tfjHsa\r\nxVWnLTy/P/lFgKqz3ddLFDHak56jPGzb0YY9ZZJRS1zBbjuusjdWfRhFeEAr\r\nFIZWuh6kgGgVbECoaAx0na9XSuvU/0E4yYY=\r\n=7F20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/list":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/menu-surface":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ccfc24d19.0_1659550526354_0.6672942687888379","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/menu","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e4570146f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750de5fc5757fcbaab173b04dcb46bc98a629fdb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e4570146f.0.tgz","fileCount":37,"integrity":"sha512-xC4A9dfdbVm2oCab/axbo1+vCOzxIhGpayeByd5b3spjnhlfOAEU50cgV/ytIgqH2xa2VHuc0aIIuyReoIbiDQ==","signatures":[{"sig":"MEUCIQCTCEkMVMJUCv1qxRxPlXLG7NrGwky83jO0CGztK1AZsgIgWFXPzEUnEFg+/zUuEGKP6wBtpQtpFFOh+HEzuu2OJzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sGWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6oBAAgK5aCtaqYRtqZuVGxpZ/AQhdJ1axnf8amAkNnkGJnrhfbGCE\r\nxSdw/Hi94PgdlgPskQ/AIlNX4E1etYyGPrPc6iSdol4eU5zH2r9hZSLl6yQQ\r\nNiJxfJCo+44VYiST7karUQdkRVLgxVkiKBLr5yLYhKV2F/tpxAGn/NbWl8cR\r\nx6hMt12h5ktjOImMNb3XxukdZ+WWybV6/XC3KREP91wRHE8QJcxaAuuSMTQI\r\ncJ18smtiOp7LiZS20h2GYuhtJTJCONXl1j04PBNY+N5C0aV2Kwa2iVmMsEev\r\n3nQzatWnkG72Oi/Q0U+AJ4aDMAyLw/ebBxmhuUSrdzp0CzJ/wz9XU3lrTdtM\r\nmKfZw/daELIP0ENUHzn4nfC1LQFND0ZE8EzvGfZFZ2sam4w+SaSM8KU5Cn1q\r\nzNgiCrQSCMnRtNXSPbxB9jZCcjlCyLS67LZu2mWaJz57lICtuyuJP1cjexwN\r\n2H0vwEbewKa85YJOBAIgsjPHKU5iVxHojr1V07sXtDA5i7ENOedGVl0PuEKb\r\n+pM9HuFrMED7RsNItuPYCfVVqmAgQHoy//ilcHOqKNrv5g22hEuEWvVhaJOw\r\nQpXIL6hunqzntWqCQtOAcnsTdjayjoY4EdxqxoS2ZcFWHVUM2bzmk1ysjwSC\r\nlT5D5BKV3CFLDTJdYvOCfTqq6NXetXWDSXw=\r\n=L1l0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/list":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/menu-surface":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e4570146f.0_1659552149798_0.23777041969216883","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/menu","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6683a36cb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b406a0c40f6f619f6ef3e4cb9dff93be237c6b7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6683a36cb.0.tgz","fileCount":37,"integrity":"sha512-UGjE2LO5cVW9oBpcqinvRX+l1YAl977q7K6P3v7fJ2fF5PswQyNc6l89gmDjZlxV9fBxEfsxx1kRClaTDdLpRQ==","signatures":[{"sig":"MEUCIDl7wumXEW1oJCZKijrKnMwYBTk4Z3ztiwI7tPhvmUpgAiEAxQBSe1xZknCQDryewKVSNcYYjRid1GKgHoOHdBGEyRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ssAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB/g/+JZrvGEqqfmwESQ1ek7qzsCJtCPv3T9vBWvJF3uOPYk0YHjGs\r\nunCLrOx+km0fgZ5QHslK6bJGca5M+eFb21sT2nsjX7SQoBr8SvM47DUoXfJH\r\nKWxzpBj/EZyNJCIJO2n5FKc/rsHR+7xSdv7WJ7ST96qzZzK6E7a8ikA7+VR2\r\ncQQZ1slXUUAAl8jPswHakmH9KlRGx7IAFdVIvAZaDXSIoAc5mXDAvsWxP8gR\r\nHdLmEg5ATYBfClFTflQNA/OTuJFzTDAg85SnDtS9kb0RSdPw2pMPRMmOTULw\r\nAmRFcjVWQldalrHAaeACcgQMITAnGca8l5KYLmn1JZgImWDOnTrifh3FVG2X\r\nRp+fWio7ou4naYm/NnUh149qxUNw4tlhRR33qX4DLnDIJzgNlHHMFUBPdkw9\r\n8y+AxTUom/pR8KdnEF3wvlMBwwBU8xdT2bNlTcvWbyNMq2Hno8YL1hobUpGB\r\ntjQQvPClfa1+VvGsLF5sKbNSYxVzuVUk1ifZ++j7gSH7Va0S1VpSoJhP+6nn\r\nfoLcY5SXzNWT7tqe47xEAvehLTP+ARAYyAMSpMmpZYHruprkBGzUaChpy8ju\r\n5qHDlrbbyrIqbhOWEI/uHJ29Nc++H8JqmXlwzp22s1vhqfHxiIXiDTTegHDA\r\nM7m1mlb7SsMnt86xHCf6nb7iRyZvJhaShIg=\r\n=U92z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/list":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/menu-surface":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6683a36cb.0_1659554560505_0.651651625511636","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/menu","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.10196647d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"887ec0028cb57bba5a3534d259a708755a8c0606","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.10196647d.0.tgz","fileCount":37,"integrity":"sha512-KAlLUkLgnD7NlUu+blYDecR/aUZHWy4fu6BsHwPNLIW2v6hHQ0J04k1ogGY83C6lKJTlxdlb3gkKlvKuQxwVrA==","signatures":[{"sig":"MEUCIGJBT7H3PKQs8WHnR8FpoPVb4O8mTAUj4rBnET6U+LkmAiEApjHJKNoVH0tNc/Gr3ayzsHjChIUrI/JAASFDJ75GfH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrepA//QWBZ+v21W92rKe7vaQAwgYwvxBGJT5yGft9QmE1PiFPWmMEH\r\nlZtwDWOFAIuIkF9pebKuubGhS93f6pJpVfwVdTbOJZONp3++Wy7rrV4+GTAP\r\n/f12KLinkn6IfZjwpMhXsSZzUkBs8r3FlOywm+C7ur6VLt4OG/6byjg2AXri\r\n5CQ14kB/Lq7e5YGn0z99hiN9gok1TOGL1ZlzVJj2OaBGakWRWbPKAQ/WTFSd\r\nlI0f76gpTvJenGzWpyLOFzii/haV0+E3REwT0eHphxfQUiagW3nIZv75T5z3\r\nyN3cI4F4gueq/6kngftqJRle/pKfOmls8ysZk8iIplyKUjciT0qSGgxmH57z\r\nP9HW2boLmJLjQ3aDGJMx1b8n+IgL9HI4m+iEiOyWZvz+PnpAbCphwOxIhN9/\r\nvY0EVSGDWd2qmaBy91ZnJGqESQKxhCgZF8VtF43yzwy8ghC+LiG1sUIXcXKb\r\naDMgmwdIh1zr2dOhj9fmNtlbUnttX2k0Gq1RoHqAtCvFL/qY4kXJV69jJIDY\r\nAS4uX69IlEaQlaE2U7wEod8eKmoR0pdAPjZcCqcCe82xcMtaE4CB9oohcOcv\r\nQ7c0h/pk0BnZ6hlbY4Adlv+EceMDhJrTBa1gZtnzPWeNcNPh73QuDVURtRRC\r\nNxJdZI+EJ9diusciGWEKVeHpnt9jPIOzDdI=\r\n=CMB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/list":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/menu-surface":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.10196647d.0_1659563722763_0.389727775483405","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/menu","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b20d3d73c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eba61a74ac0bf318b1f33419453a2e4e63fcceb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b20d3d73c.0.tgz","fileCount":37,"integrity":"sha512-I9i8kujCCEQV7HSvzLoniW5M6M+XsP3JrMrZfNXXrMNPKzPGt95KRIAtj7H+8mkMEc0YSBkbvsvEZJcT0om40A==","signatures":[{"sig":"MEYCIQDrDtaqzFD1SivMW1zlCd0CO5NPXLprVrRq9xUjbfjWtwIhAOFmb4to7O3AM3zK5zse9QIAXR0rLdkVliIkyaWCobTT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzMw//fYd+XT45mJIeBtPQGeyi2mEzAZcDVeM/o3d5ognkLd6TO9qS\r\nWik36Yd77Aje7dVAifWO5nOlhXgAlO+pTR5BvLF9Q44dkdVPfQsurr985tsq\r\nh9oTieWktgqkmvwGuF9Z8yoglw4I+y7CUWIkqcgqZrqnVaTYSD3++PujaCRw\r\n1mDqsd59bNqFtjZZziT+mqiOipjAwgIoGlqus1iPLPiF8dZ3D/dPRbTiEWvG\r\nR2rD51FUDOBCFoG6h+wj89LSPAp3jKBrqICp3thsTBRY91gSbLuDQ2iX//kS\r\nemJStODXcNTbVzipf0pFkq23eTXAHjTcg6/+7lHvj3udrSzZvvPqQusgVtme\r\nEerg8TNf2pHDjY6mZY5DitSBalnWqUUqo9a2goLPtKoKngd2DOyKtFpe8u+C\r\n4xcNdzlEBE42ps4zURcBtTVjU/e/4kwIXLPB2mSWDqKPBs4yJYMzoSvLaosD\r\nJynj1/zkdfdGwfVXlth/kmN3agytZv/6LnnkfJ3wdO0uEi0SQ4CQyrtf5n2u\r\nSIKTI/hrx9J3FmPKXz11ABHXqMJCl1J+3yQgLsuzdIqes832T87ncVR0QiO3\r\nCrIXPngO/DhoLyxS/SyTmcrXVzlAZ86IsUF8FFoMzTlHwcgj4uVL7e7tunwj\r\nb2TE3iozfklm8lL3nOU1yAbqZJ9F3q23L8c=\r\n=J3gl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/list":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/menu-surface":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b20d3d73c.0_1659653081814_0.8783014600573058","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/menu","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.47c0c6b1e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffc292f4a2a1c8749384ff457b26258cb358376e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":37,"integrity":"sha512-tXZ0GkKA69b1iA0s1b3l30S42UoN5RvKK66/nU5mGt2EvimtCxt9CQD3b1nznmnZoSMwtZXLGt1l+ORsl5J9hw==","signatures":[{"sig":"MEQCID4ncbHQGQfAni7Ow0jBAGnvjmFuzoN5hKh+2GtTYJhYAiAaqq+x6MBxCrAZHYDEx9m2kvA+A7s+zRXsFY6t+nDkzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1VQ//XqVRJCcPUOUu3gw+z3xrM3t3S+wMlo+vdfvT/V+X8a238//D\r\niXH2MTEg8yKUMe2yygrCZMzJzjJDKVxtwibMg/MJ3DQuDCx+pWL8NX8tdEMn\r\nJCefw/evu2gmgj3mDxVJw3Hk12XBss9Qf4aZdGdbUEge6qvnEmvTnoOXvCja\r\nHehrAJYDutdAKoG46IBGtaYsT6F8Siy4WcynaAqDeetG1nwSvIUidOexFM3C\r\ngV2nq8wscw8WMUy2jnl40jiYK+IKUHfnT/Q7jQr4h9nF4bqN6phHt3oR0xoL\r\ne3mRuYgN34evIhFUT2RYxGnQx1qtp78zMZGnDewn5oqE24OkSEkD97QBQ8wN\r\n1TX02BO9AxahqgzAYkvpNBRvoUbGei0pp4727CdlbC74gwVRmzkrAUnwHVcz\r\n+9jrIK4I+DE1sjdBXVv+o82a43J7eoGiSnVXTw1a/ASDlb8QpaxP/7QfgbmP\r\nC+4xeDkBuODK3vRu3eekLa8WX8lFb8yROnSdzupAHI+rYWVzG3Uq9wgxxdcK\r\n38LuCnvWVN/wsT5nPFzmoMmS5CcuYp12wf0d7b+bGegqvyk7r8H2VEW+fSaM\r\nuwbiFytr+hIvxc8Neax3egIikOLCwmYCEAaUtknZijrfF8zp2CmubbGSDw15\r\nLHUnLi1KHCT85u4ezYpphyGd3yXqIEe4V1s=\r\n=XjI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/list":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/menu-surface":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.47c0c6b1e.0_1660058559096_0.9491172470168718","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/menu","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0e3dc8e38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2211d685d3f097b9216261b68d71391187b067f7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":37,"integrity":"sha512-lR+42EC+eCnRYwvA3i7i18x36KtU6U39Czym3+BL4soaGlavSg3yQQ4CYrglE4ZlXp0/825wJ8WBbeSL7RZveA==","signatures":[{"sig":"MEYCIQDfM/1+0oBLbLyEs/veMP7QMJwK91V5Tn/OdBipWM5TUAIhAILLhui25lxKmRI8FylShbNnISB66qZIIPYajGpxwA59","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXlw//eixVX+7NJcbtCwAtoVh4PUbpinQWUcr6Oge2rxn2Tq+LesJT\r\nxvvFHohRKhdfrXCYa0S35P4ZKASyb2RJAeZMlZOU/uEabTKOZtEq916Gs91J\r\nkulLVIr3EGu8ZNiowhBo+Yzv7V6YDFE+9LK2Jsx4Ygop36++ebgHrDgQeZTd\r\nIyzwZ7GTPZ7s8sLTipPRNfHBeNdps7r6Tbq8lvHrZwxmOgc73mVkiQr/ZPIG\r\nSITrMzaCy08DDEOlTrz78n3EaSbJa+d35IAgC6VvpQdjSHTbJnRzYR7qT+/B\r\n6UrdQPegdU9ie0pROniq3eLbfKKlkR2La8uWv6CuX2Ih6Y9Q36c1reSCywrc\r\nSoWkOPFhwFUA6sXSHExE9krayH6uCd3YaXaQQbdAh5kjPo988kGVnj6+VrNQ\r\n3L99fmBFrWTujhxllqJ9lvi+Bz98L0TigoxlY6I1ckVzGV/1QUZsm6iYtyo8\r\n1dtctJry7yV89V0sCdzQIVUCNf6SgS57YievjANnL55+nk8UKtargVtCyUkp\r\n4LsnvZIufZcdhSrv3tnwh4oDIS3QEYLhC9ojBenNJCZtZ9V2VW2ClPqoL18l\r\nvPOoRbIjfUpxMpALhlobCqh8gLZuAG2RGEgskDWFZtec/rC4IoD8damnwGP+\r\nrmv8aI5ru59Bpt/l/RNaNlMaQtex9AP/B0M=\r\n=Mjhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/list":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/menu-surface":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0e3dc8e38.0_1660243663137_0.8681281960465177","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/menu","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d5a11f1c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d31ea97c46b6b12d67aeead6ee7cca36a5e600","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":37,"integrity":"sha512-NvEDiy6gDeCOUTPIJg7OzjVWWKooovbf22eLIm7VNcWBv491tn9yZ4BVDNdqW3YcX6tqBBWrn3dTIoKUmMksHw==","signatures":[{"sig":"MEQCIDPqNMILm3C6dPpywHZ/zIc6r1F/0jCLYcOxcZ3C+VwkAiBW9rJ6PSnrMGf2oqP76i9KNrmv2rLFMebaD3WHVgGDKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiUBAAh6Tl7gMRSf73R3JoD1wCIqhftkxtxE5VoWhJPIpluyG3bma0\r\nRqW7+xIWAmjsma8ZQG11yI8urQaQEX0rt8kbLl7suRx4c3Py7kyZd0hYoCNM\r\n9RaLsh7DD5KLA0Jp5pbMrwDjllJodr8qKnrVgYvvmj3ylNMmlDRCL1dXdr5c\r\nH2mfvTH0og6UNLStdTG7aHHJlpiHu19vN73p7HQwvXEsFhIILKa55KwpPcXj\r\nKTI5HHFMdkHrFFVHbLlO3A4jVHxNQejfUOYmN11yXVkVhDPJQ/ha1ufdOf00\r\nEU0D8ZWi8sPKgErWah87H2cu6o342obAX0M3kNCpEBlkb/jqakFugbTmTXPH\r\nzxrducNWzdnmh3ArE5/zVPsvmXnZTgNHO1GTnrzcApDogYBvlV3j7etEX0OP\r\nebBrIvwOYsSaN77Va4/DXweWIkFtejy9hXkcVfHTHw7KKlvzKCcV6z0CG9SJ\r\n5cOsrgST5JGRUY4czxGLjUoTD+1dt5JwAw7/0O8qdobUw99g0fSWUrc3TQyI\r\nRTfgpwEKRxFTnUrpNnlxN+sNIRBBXixS8239xO9VBpFemncsOoRCP28xmdmh\r\nDLzaM/l0u9N6EfndQDcDwqCbMuMGwZlLdklYLmRW3logyeSqQQ1enTIoGVQs\r\nT3r8d11lcneKfu/zAZWDYyArxCKZgdkuiII=\r\n=tfOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/list":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/menu-surface":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d5a11f1c8.0_1661900585845_0.003304133933625497","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/menu","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bac992a95.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a80a00ec05deaeaa5c8ac4b5cd46b9a7c63e6b49","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bac992a95.0.tgz","fileCount":37,"integrity":"sha512-cCb1s+nRG7zCwwA6LOwwbNgrkmGDCnGcugGG6oY+Aa2ho7Rs4mO7MiTJmTIYwE6kPLgo2NMUugYdIL3aw0M3AA==","signatures":[{"sig":"MEQCICLPl3jwkVCOY9qXioBiwravCgClX9kpvgoXSzWUNCApAiAPHLOnK+LZVudWkpFQbiQaMSadcK4pSeZGdD4pSs5ocg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeUQ//X7Mo1f9l2gVBWgtquqTPe+fuStHE2YL89XKELpyw7dPtkWpX\r\n6OtPscpD82NZ6ydTZUTM3SNzRIiPqQEHQ5Pjx7b1o24xtmK5MGQMXtaBrtH1\r\nPOZjgnK5C7MaoKbdHS/MhSpbngtY39PdsH/IZkIttTZd0chaQNJApR3NLbtp\r\n+QY339VhhkWHG0zyFs7htVukP9zuS7O1wh04pDyQV28JXaCqK8dMqlXGlbcg\r\nv0atqyXDTAGD7ZjHcLTCnCC7L5ycfgnEW1xM0s9j9AL7jXKwwsTBAW5ApvyL\r\ngwHk4jHD+DbPOWIAlGoBgRLx/N3d0UBhCXjMo8vIzo9aq1ujEUKd7wEf2ouH\r\nt0+Nx6fimu987MvB+zRWk6qzaW3W4veWGiODKSCUW/HBjJbg6ZD2zgcbkqdM\r\ntqCRBEWa7SuTSn3Yoi7xg5JIbrUzqHp1z6DtwBw3guq48DbgfiHGgFh4bFoD\r\nwN63ZXdlU95S9vLFoS9eW1sFc0Z298K9J5swyrPxfmkYvpyv13JGO8Twynw0\r\ny3U3ljT5zROTDDkU1BiZ1fljeeEb4O47qsxRwmrxY3y1YBYiTkzNVrbBMxdG\r\nTkK2ckaxXBnyiS2koLy5bAJuwwRm2fdiPZmhfjyDAWpkEXyDl97NkSsSenT9\r\nfQWIZIKLxwY0uY5AASClxrRoQOG79qYlRQk=\r\n=Cexk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/list":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/menu-surface":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bac992a95.0_1662016046276_0.12250679540857257","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/menu","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.920d8a79e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e103a19aa9f0fcaecf42063093524625b9d07c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.920d8a79e.0.tgz","fileCount":37,"integrity":"sha512-iR9aqi5A2Xee2lnbD8ZhQdG/Rl2qcBATBWUpFV/aJfKCfZTu4iyASms/MVjQpsazA6rGOxfAc819bTyaGQvoNQ==","signatures":[{"sig":"MEQCIBToDVtJnZLqk82zPGMYXVaoWb+/Xx5QUimjyZCN4SusAiBo0Yg3Sa3ftyajR+vYjj08PARiTUL+e5tSZyie1K541w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERSYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa0w//VhFr+aScRHtFZYBc1kFOYpPOaDx5cnpZiOSIFCutOSs7KpNF\r\nJZNs8kFvYQrQf9NS2UDAiK6owEt1HZy2gZog1J5hbpk23pYMyH27qgI8tNrC\r\n7mSc+4vLyy+BARMlDmVzMF7+B5R33lLxU2VqudptBnmQYqKu9UuxLuNq8VMC\r\nrRhmzAyxuuDy4YOlHUR8rRu7syYA1UcTznt2OjrlDtXsyDjReG66pJyS3lc9\r\nDpC/uXtu3g8KbI17vQFzxrQssEGEqCT0+a+j64a+FdJm55l5Udcx9kJ7Ywb4\r\nCE/vp1hrao2JbTKXHbF1ko5nHfBOYKavJBUo//OOe8SbQ561qm+Niu9k3gJe\r\n+SPzoezUkL45NETxIbzvJPHav/FLJqF7N/h/OhMIbkgCE7LT0lrtXM4K9rEb\r\nYqYuFOxLghJkONDX9YIj9RWs2EM5QB+2qXVSG3/+0fhNjHDZ3jW6bR8eYvoP\r\nlUR3YLoTX9VxN+sSYOxINUDdDL0n3t7phWPqKb72nLYOwYk4sl8jaVgJOg4h\r\n1Gt9kzznG1yDEBhRpWGW5d1SFuFrYi8fgDuE5jAqNcEQv3zL7wTxtgCWsiQV\r\nVLedWELH8u9BhuQPwq1D/0YfGv7NkaGF6/49S1kMjaC32jQ2qNiaLbzAUQHL\r\na26Or1XTP3dtrGNcKMAWI/tgi5IVDqp3Tk0=\r\n=k7YM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/list":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/menu-surface":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.920d8a79e.0_1662063768324_0.7043602614585274","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/menu","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c363f267b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe9dada2c66ccaef826831c470c15b3685f27fb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c363f267b.0.tgz","fileCount":37,"integrity":"sha512-Rcp8e0cdR6v/Hss8EIQUAPZZWcuQBtbr/NxHmS8U0soVbLtuFk8XjTMenqsyJ/sn1emeBlrbffp7OR0nlVyqdg==","signatures":[{"sig":"MEUCID2OaZqNCSXs2eOlu41Uqg3wiyQMTFc7Pk46LJspTKrsAiEArwnbUxKCjqh55SnhrLdxMZJ29wgI8MN7GUmxGwO7m7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNfw//WpRcXoEs0Hd+vt9RWhxih7vR4CbTen+0eWq7FQKr2jlfpttU\r\nHr3N39f94NiHFn8M76NgtcdKlQjjAJu5PFMDzIBsyISnkaSKwVphkgi0A7i/\r\nnbdrqnZHV+Q5jjGw745OGfzuWy0awfWr6rkhSwKNHPfCD7LQHDfL6cw6F5XM\r\nkI4qbnDcdiM8ofrQkY3perRonOZBKITl3eiKl/tgWMLm2zQ35/PgtopquMLu\r\nt5nQX0yOIrk2prqMYwV7X04WI5ffiuwL5JKL9ptXxWnr3Gcac8jNI1MkHrWI\r\nIV5MuFQ2nAmi5T30iw6048FTq37SvJ7swBsb2bXdSyYc4ZBXOFRseMy2pTnD\r\nzWc47BbEJR56x+z81jGVXFtg4NMSOymApT43RDs3NX9u0C/fpgYmpzKq4zpo\r\nv5s9CpKpLwwayY+mU4Gn2JRyMI5hZZPfZX/XbubUZliEy/4J7lbeRIdBJoKA\r\nStkbFDDrn5XObWeLnruW10r/C8md59vcGFU3V9cVoM2fabSWRAfCqRVV6reD\r\nAa66YQJr4NbeYtdeWZlwf4fXvMkGIB2W0/t9M9d0gi8XsWUX94xrQEivLQ0j\r\nAt7HWJBbh2qzo4tpXz6jtptlSUg04Z00+RS9LfO7gyVqKYzSIzy/sFSjC9uy\r\n21h3XowfjrnHIfIkSQvdjP28nflmspmJQEI=\r\n=oyU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/list":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/menu-surface":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c363f267b.0_1662067207589_0.937197665317701","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/menu","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a4eb4937a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"411e8b295d15ba6226f548e4ced8121f75140b23","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a4eb4937a.0.tgz","fileCount":37,"integrity":"sha512-LgjBWmtNXqvtMJBTXjnOZG22e92aYrFmc7rFTVxw+kIGnKMru2N8be26GgRQ5gvPC7Z9l0d0HJU+YPVv9lnYEw==","signatures":[{"sig":"MEYCIQCsmGpoOZOG/qvA20a7o2Favlf/cjd2FAINvkncRpKJ9wIhAOGbobr8k45fySrXudduHulU5MMKfyvhwLAIcWBIdVJr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiPhAAikm7Q1fYu+CSQIFf798lqtXOMC4VWqdW2spiRb8IELOm9SH5\r\nFk3q/fVETe47nzAhqV2YJFEwq5/0D6uLfUiuKr9VYuWlKGulj/FATunGK1Zx\r\nttVvMmHHRVD6rVJrrEnOdwX7VLkqswQtTud8+UTKJ/gN4ISv1QRwkHdxo1Av\r\nUTi7Ag1t4i4jQP7hGnW8JN+FufH1Oldg+hxzmO/IDhDw13Ey5n3CthcoCb2B\r\nGfCUb/+fbh1VoS5QmUbWB/lFQH1cVHxg+fMS4bKksoN/CbuiGQlGP1jnXmdI\r\nWsoeeZ/SxxfA79H92loVovczb0U/VzTNjI+xLaY+PiWYriYXCiPHDWsje/pu\r\nzOQI20Q9YJPny4nbObOh9rhyTsb9m1FfqGrZqDSDDQNSb7EB69VOLTqNygAA\r\nfkoXaRsSPvLzrV3AN0BWIRumjF28EStiCUVvandoTr+SQrtQtBgGCm7baEsl\r\nppTYaYGp4HCqcUawT/F689bgUOSabJKKSYBPqGImYDGD9f10zhEqOzeDwiWG\r\ni9TR8uQXq8kP6T1O7JA57Wxg06q8lp18XihvoJIF5paFA3UUNln2Xs3SyJEP\r\n1qVqr8E//hKwyykCKwJgvfV2/ctAEVpAIZfTFmYmWS8HGEMstM7r2EpD41bZ\r\nI+08W2Ztc+2+dti1H/CFdz4klYBo4x5eXmk=\r\n=1cG4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/list":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/menu-surface":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a4eb4937a.0_1662488488427_0.051197250038315545","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/menu","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4299717da.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df30d5b3b71022bd18585e8cfe1914f59fe17614","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4299717da.0.tgz","fileCount":37,"integrity":"sha512-Dmq3evfMjJROLN02Pp/4nyGoOKZI8LmjNAkkWeUL90qTxmxdmiv4SxbXXojKzaJsFPFKD5HgS3WY3bgBkGMIWw==","signatures":[{"sig":"MEUCIQDzyxaVonlXMrEDAJPT6EwzuvGOwSIU3ajNA5L7cxzk+gIgWkEEP16iImn+zQR7qkxRwEDuUfSM3LMzv1vNkg6Rljk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMQUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvTw//Y2i1bGvgivS/Yy8qJf2YHLeA+wuzj8vxRtcfs2hIutXebV90\r\nfidAHjJ9zXDU2XmMWvQkPT547x6ghmaM8RjOxQmPkqhXe0fEiQDM2oAD8pM9\r\ngaxo+YGoky3FkxbxuzMBWaybkjiINHvNyhplISjruJgujDE+l3TdV0la5ilo\r\npGr/ZDgv81vKsrDAdGqxnN5qI3wMotzXR8AP/nwrDZhL5eDZ73P1iFlHR2qs\r\nEjhmLmpUD3zvyIjPF8nOgiX5hpxIW76pQFBShgu1vnSS4hJ9use9kFgiyr0w\r\njnv8KDNINSFfHIYusg4T4wR37F3gjvs4OsQd1hl3llRW6iOAFqPaPNClzERv\r\n6fQqje4Pxw/VH1eHieiZtBpscF5tk4RHCUW6PckDMHtPzDwhnb2g9fJVbkKp\r\n4uiDSW8qE88x1BYU/2NQN/aWAZELEs2Q5fg3subFDfreKm4Wyoat/ZkjfiYP\r\nt5FVqzZE61WwuMYRcTiJTHmQDUHaK96MhyrIY32hUDSNWSGWdjG6WXAotVz3\r\nQS0vk9/R/J4hv5N6fZAyXG0QGXWXcaxvj/0HX0RH0fxQnKOyY9/m5QQ/IOVJ\r\nrawdL19y7L2nkG2u+ZJvkzaxGSyVMQMs0pGKTjpxLXXFber3EcN+eldEVgbP\r\na6ZNeagJQ9/DVXq1WM8mDnt9KbmtlgT0exA=\r\n=glFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/list":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/menu-surface":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4299717da.0_1662567444375_0.16494000131766695","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/menu","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fa7d8d44b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f4be3dcf0ebe79b616024939421353b6d6bb5b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":37,"integrity":"sha512-m2wUn+p4R9s7dZGofVkFvHr6RX1n5ldurc9VYEud6esb0IkpDGXp21UEvrILNA6npKXcCZf7N7QHStpJ7GbVgQ==","signatures":[{"sig":"MEYCIQCD3qa2uxzoLvW3lVX3mfHAN9GsBkoAg+M5s3zqczZ51AIhAM7l4+hOiTaRs3BdfE44P3a/ZPAwqwAYsyLFWUN2x1+D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO8XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouUw//ZWkm956o6R1nbIv3uZU1DikuSL+DgoxRPcyttFQhrqk8m0tR\r\n0Nfo3IRunMQqXigH69NGRqqrqgNlDn4JIu9pcbCIcya1FSDN4ZME/sXHE8ef\r\nQpX+65fd44PRaJv1YWcIajLSesLmNpRL0rW15gbLYzuVF8Oh52zTkCNZABY7\r\nYWu2+wleVsVIffgMPTlLTXoFuRyrJQ1rUy2Cf/Yg48OXqrEtl/kPqruG9GiK\r\nMQbPGE/WW7A2jMOOzcMyUc1r2I0bMRaJnakv+gzo3TZ9mYB7yvSp1usurmOI\r\nA28JlJygkKraPNf3yp2HNnOcODc4lq73wrZGfgKYhhy4J7YT1Ay/+DN6wWgQ\r\nkHrlTkHKrwzcqoRredHoRaBpIKHnZ8NAEmeg827p3QWgcP7QD8Avw74hxPN5\r\nF969kxNAy6c1VF7sMNdqIZGnTh6n2oim4rXqeSpCu30XTGZicv0lDi72idiO\r\n7527IVonXdWrbTmsPwEAimlPHsJE5vlocQLAq+x7MD9KGDuCoHXtdqkQU2pT\r\nU7sQ+eOLnijdqevDGpaNt70Wk69dZTevxWLW7z3FRHaJFA6K5scAbCmiwnWw\r\nTi6GsK5s0n3SvukglIq9IDBuN8k0jUmquaOIIaWq84oLhyufkgCNiAwL4fAt\r\ndDpg0eD3nPWgNdHL09Z7jTIY5iBtAqmRNQI=\r\n=eeOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/list":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/menu-surface":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fa7d8d44b.0_1662578454756_0.8108302353293115","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/menu","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a40e3c768.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f751ad93be0eac0b4682397ebaf9ed6e02c1ef4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a40e3c768.0.tgz","fileCount":37,"integrity":"sha512-n0lh8a+jC6EJdWR8WaSKrQI7ndJq5XyThixdkO1FCml1ItO6jRPod6rjF+J/oaF1LGR+Y+XBXSPm/88xnaYXAg==","signatures":[{"sig":"MEYCIQCs4EsWMNI6q5m4wPD9te4cmYkvB+RMZIcZ0leL3B4qGgIhAKazeiQtIQ96daZ+y5B6pA/jARUcxkKHxmVckBH4NhAR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5yYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Pw//a8PQnCKufqi2inxDzwi5k1WekE0Abc2KDH+oUQmd+3/oH/R2\r\nuEipUy/+ICIUGkO/oMl3mjQvJXdc1Di61pjpqv4Ej7Weg1JO85xQlDAQvgMg\r\nIqHfHlxnEppoIjPs0w4yWeruc/J5+rABo7jS1LwFs+DcGQWfZLRE9zw0bUFT\r\nUWRFl6H5QZfp4OsLzjracUA3z66QZh/iLbRRBQYDocUg7WgMxVT62wMSO+Oj\r\niE+seiQ9u8ySMpjBYfXcd6MnOY0RqG4f/AViZusZWCIk0Z0dqQV7+D39ennL\r\n6LoVh9nrfM+dd/tPz0TUeafdE1FyKjqeQQpd11c5oGnyv6wTsbQXoj/kvUpB\r\nxg3N8kXdqW8Po/e226uP9PPeFPzurGkp9AK+3M9cWyaE0zrsQfsXFmixWC9L\r\nIzIrbP9v+d0QIzRrYuT/yk3lDGA3/9ntUvDEsTAZkUmMC397DU7ZbZQpHCb+\r\nQC8xNkQc690gWjk4Kh+QujBOw83tDDQmTPdFpXEhqC3yrZfk1NIHgko647Xq\r\nmv6475aWh3oeXCuoXiH10uQtJFrDSfZQpzaSjrKTw7CWnx8lm2cVrmHwVvAU\r\n4DE/ZpHKF669xC4Yoq1SEgAf3suF+cmrkA85G8PCunJjlJUXvrJML8ZCry+G\r\n4cBHeK2fViOdsQ82WStBrzDvYbdItbMshD0=\r\n=Odfo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/list":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/menu-surface":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a40e3c768.0_1662753944236_0.37665009782876635","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/menu","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7ab3cd3c8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be4293e0bf12ce9b004bc2823b1939837d86ae49","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":37,"integrity":"sha512-oiORaBDZK0Rj3Zzo8u8s+71SdtZdrV5ahriMjcU0eDvMVs291llRukTxjawSmSzk7aLH8U2PvR622ytTFHCd/g==","signatures":[{"sig":"MEUCIE4j10gev3nCePgv/H4mZB7bnnHeIZlmXP0GD9ZRjAQUAiEAmJDDjukelEO5S997omICWV0VOMlq2CCEMKuF6IDzpr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Iw/8DpMY7q4hbpjZkL+/BHiq8hHEh9/Xk9172/VIP+L2+lqNd+LI\r\nwVDXxgZXEyKNC7RSuQyO+zPTdf3lYWCaRB9umwfvR9ywSGJQh4ZMeO71e2P3\r\nU6HSYoMamikYYeIq6Z6UrqBkkGixNfX1YWW7CD69uh1fTEbot0/15EE4h+Tz\r\nhmnWIo8Mg0v+EqvU3b+ZWKkJx1jZuSbX/NeTejJya/keMcwTxj/0jSld8YxD\r\nJH2aBo01DbBRyRaQMGeTsCCq0VbmVCuM1yc/08uYFIsyErhEuHS6OGkJ5t8F\r\nt338q1UlsXonSOgywCrcDs9WicTprdS4eWgh128qSjARH0Qg1npez8m/Mk76\r\nqzhW1TMV3IUKHitojkyASMpNiG57jl4khj+wxZIm95u4yryOsdKlz39hr4e1\r\nyZ+5LimOD46ogeUwzrUUslsyLNlq4OeV5iKxsn0DsBqnHWPkQvpucK/wjp6O\r\n9tYPQzt9dzj9OiDQxHJitDy+s9F+//Jg5jLj3X7n7FrAAJwx1PjM30vjvU7s\r\ng+planzZbz/T/33VhYdYVtZRIkphi24O9RjidysdHGE/qbH/kYR0pEey8Ufu\r\ngLnIOVy0qwOc97i3J2ADEn0lWtqFkYEGt+WBAZix5M/UVtxK7wUuWxl52Jsc\r\n0165hGFmw7xtX/9ktE9QhUOtXfVg2hIwDVc=\r\n=Qp4O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/list":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/menu-surface":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7ab3cd3c8.0_1663108846825_0.6237886215173474","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/menu","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2860d244d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43007a4e9fdafb01a243846a75b94ff7aa53c16e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2860d244d.0.tgz","fileCount":37,"integrity":"sha512-OajIbNpquK6Mds9sGjO3uPdhxffppHcuzRRnWnpS9Ry3Kw1/6AgsMPkb1gSvGp22fxWqe1tI0N+bTmlLLRxtDA==","signatures":[{"sig":"MEUCIQClXNfaZeT1DOVjBYNUkAIXEVyd7nStWyQ/e01bqtltHgIgGlnggvnshi4PY0vEuv/U2t94UTWUJ+N0WiKKxhBv2OY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP8mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrkA//YeHVyUf8FkRz8CSyKbZsbMfO9rZDYj4Smrqu/+Y0OOlxd6n7\r\nrvliPjSk1LrCapf0wA2Mebxp8FPH6rX324Iqe/w5lu3JgmQKacn7P4ceDYH0\r\n1EanIIgyemLWKVzU0joSBU8isqH1MwLgKkwUyDsUaVCInqS+RPlNFhUTkiUU\r\nhZcG3t0sQV3ms9BMznAgo7N+1SAzwBoBHmx5fVCtLN+EpatyI9MZ8p/Yq06D\r\ntnWmaNOV6m2xBsNUSRi+mvebESPn9Ca/tWfcScDl83GEZqDWTmsEN2vSxfGs\r\nd65o9VS6hf1sEMRm22gZR3vNL/EAW0f25BkIUL6yYHlJJlWcMEspbnGAbvYy\r\nXoXcdXYVwGS/kRkdLAspEszXS1VK2Vt3PwzmVNFDyoMzvLeHdwOQkjMWRKu0\r\nojj+fvu+5MPnPia1KAimkWuCePD9AOT/dUbJJLVStJiP7QRxn8w6VU8irwmp\r\nP8HafPXTcyvS2ORZfqzxY7CLFJXL8J4VSimy5LSWP3JLS64Om1dXwwOwK5ZG\r\nOdcMdbcmilCuQlxhxckinqt2M1BMhAJJZi/EwPxcJMr1fj7UXs12ar19kba3\r\nvUbJmxf26gD4A8832Yr9HKn8ujNcv+sTAjGd5jC/SGVi5wFg25UX6drmP+wB\r\npZx+pN1yzvskubjGRrL0YDGX5BgrLy2IFYY=\r\n=J6fj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/list":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/menu-surface":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2860d244d.0_1663368997949_0.6051381795612791","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/menu","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e8726533c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cdcc6b73745be54e4fc26fe8b4758866586685f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e8726533c.0.tgz","fileCount":37,"integrity":"sha512-U3U7AOTNestoGiSyBQgZ/7XKbGojlfqjiDz+GL4pJVaCDMm338htX8rgzddoDvYkFh8SLyJ9CWs9WyoNdqAQ2A==","signatures":[{"sig":"MEUCIC6o96Rn3XItrh4YyXfcd/MR/HgkPWKItuN8yLf5Km9pAiEA7dNq5gNKWO+kUjMG7HHgCP8XdO1EuAXebiEKzfEfDoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiBDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiJw/7BHZjgGHkpHn3B76l3Wt1HkQZjL/aABfrEAKO2VRXftXK5SbJ\r\nj2gOM5ZohvVixYBC2M90LBJ/uRhNqkjOzK2+OgVt5FrZJaUDoBl9LJfzI3ob\r\nmA68XEaynXWH/+p00cYDTKa7khMG29/Z01mbb51EztZ27nQIffAMu9HxG036\r\niWSLqRN9w/TZjFdSlAuj/Dvmnd1wNvxEXt6bHHeymtPAGzAUDhSxptjXWoy3\r\nmH+KsROU85p85lvH+coBe6K5i3nMpyKrJF42/K/tS84tBLIqONq3QRSeplx/\r\nC7sNq3II1cj1+v6lyW3Vj88fFcXy1Jncp1sqeiUlZKtdxdhtWG+dz7udpZnM\r\nG3elVwt1Qe5hZ617A0OfIccW8YVar/yME4RvLFGkhnpTHaWVVokfgvhBsD4P\r\nCO4SMgRpGlBEe3bjESO8jCvKdncoZAL+EsFAxGDWIJRRcfJ06yBa4D8/bSWw\r\n9aNwi21fPoaGM91EX/kyQhUSrnHyPyAxXCWOSjXVd2U8YcMDjmUZgrPHCiW9\r\nWOFEDaxorAoe7ASbGMXMrYz/SVtUOmPss3V1PuyjO3xniVMVY1Me+g+hGdcc\r\nB2hAvPlCBQURidOvyHDQ8oNvtIXWj9FfHCsEENBdC+9MUfyMmevKeGzkYWAC\r\nwO+HH24bO+BTSdBPIIgnU1AkcxR0oZku24A=\r\n=P/83\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/list":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/menu-surface":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e8726533c.0_1663705155714_0.10616422139101855","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/menu","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.00d8de0aa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d80374aaa3ded45c148bcf36c6cdb9d6ffe366","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.00d8de0aa.0.tgz","fileCount":37,"integrity":"sha512-uDiCFGQ+6Ff2Ia+pDLn1ESoUMkUFzI/jLnFQ+HZMgEGdMc9xvyqJ5RMefVBbjC5U7BJZDi+7L9XheJynUnJK5A==","signatures":[{"sig":"MEUCIQCS2lmenIAZmCjlawCgPl1TK2q/nXns+vYk9eM0q7P2kwIgDnqquOv9Kkqz6z94L2kecRKEoDDuPgV0qK9iq6wJRUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFEw//QZDkIGHzApT3JogXWPfNIqh8ENRlUHeRb16bPTbTg2vKuOtp\r\n4rg5gzsyTiXcwR/LdmiOSdCEhUjPwtdMlOtOywEVcV6vqvA4XmrJqIJP+BWn\r\neUtpZU4bo8mrn4iZYUbZXe/CeleJZS/YQB8GLQD92t6y857tJnPgTuw9gTro\r\nQJ3BxwqzzkDqliM7Bgeo3QIAQINbxX4JAuaPFhi/RKBfVgiBTXorwBqaqiEu\r\nUFqQrkT9FasAPWBud3fqaiDoU6k6fcmUkxg1GfhaInaCUxZ7iRJUlsyqUZtb\r\nqVUotg/u1EtYwJ9kaNIe35DV5wy4V49q4XFF5cDjwE2dWxeozsGYT6SrHTeE\r\nTgydM5uXhYZkxV9LXuGii3yCoR3lhNH8qjhPF27pQ2W8pOZQqlGvrUQRilPt\r\n/dIpXwO2MoDyGhP79PLBdNto0kF6+0gkzTGTKN4tp5BhclDWIWTiY/NGX8gQ\r\nJ4iNaQOds543DYjt/tPtgZqK9x6c1aI4rDwQS/f9OuAUBZVTXCNQO9P1eKGn\r\nIVer0nF4bF2aNRww3ptzjBYtgXgX5spAHtAgKrmV4F/eBJ5G671D0bZSYpUI\r\nh2vL8nbW6XRcSasR9Bmpnu8vogwBkBMX+nr0sN2tSTT8BrgOk2H3W+aGTprY\r\nrhxNWbRwoA02UIFyylIN6DWiacZouKPBM5E=\r\n=BbMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/list":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/menu-surface":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.00d8de0aa.0_1663773723960_0.6948016956263079","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/menu","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.271aedc30.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5233717be51347f6c01335b92a12a6ce305abad","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.271aedc30.0.tgz","fileCount":37,"integrity":"sha512-PYi4JfBGnLmAAf3aj8+ws6p/Pz6nArkU/f66S58/w58gu1CQmJaPGhkZu5l7eStg0Mx0VCjB86aLOLT6U7BJtQ==","signatures":[{"sig":"MEUCIH1OJoFu9itVN/eMF9ci5z+7K9uIJeu6bqlLknJLX9mcAiEAmOTPF5ldD2IVEjIHs38fhusZbtBOwV1S3gZCkSzugf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy/XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX4BAAjc+Foq5zKKQxRZ9KoykR8VACVICZgaEcERN/pBH7lnr0mMQW\r\neVrAZ1CfSD1+yKy8S6FwhZ6JU4zldpVhxPmQoKMNSu1dIaWFq+RsEog2GuTM\r\nuhTYbVcvi+WtCHNbiJlgxFzK9YnJHyPXQF9zwRMhoh+ILvE4wBj5dEXqlbqI\r\nyr28E2ysR702zJjFk0NqnMVPWDRuvnJtcaBVKI3ePEUmf3FXlrfLtg7A9whA\r\nKjlCPshof8Aax49Daf0lL8mGcODu51/YyyZeK/01o9QSh/oNGn5pJZApAsEE\r\njKVZ1iTrisyxmyd97SFFpI7BFvNx4LAVCX/gpAF5S0ZEEAyfw/Vgb5eTjt1P\r\nFH8D04nlYIQ1iqnu7j1MIVMdD4N3Ii0iQ4eVhOiVr4FdouHJZrhwJpeX9Rys\r\nAEerQ/BudktiFr6OuPpxvXFhhaK7AyZ45Q1TN6c9bv64b4jqUz51AvNJ2Pl5\r\nvBJN7GbyVJjWckb8bccQkxEPlWuYvcdRoNIz3ozNAjuBWgilkyanp6PJJaYn\r\n3H1G9hkKG7m9xN9yXCriHlKQJwtYcaFZQmwVfcdpDhVZhHwyOxdIwqOC6SQs\r\nZJbOfZ4I6xukVwonH1LV1n/dZ1j5cgbD30kxNtWr23ASWjdn/yxkeVQyYVTS\r\n5FXsbZz9FLsahZVZiJEG3ONhIXMS04Rw80M=\r\n=5n7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/list":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/menu-surface":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.271aedc30.0_1663774678868_0.2703094004140807","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/menu","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d3344c16f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"217bd50c869ef72dc9bc5813b691ed623a7e4530","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d3344c16f.0.tgz","fileCount":37,"integrity":"sha512-2f5OccyXGOOigLLci/g6ozOtb5IVvxycyuhtxS/risAlFSdQKnXnNdrpp2wKyh2yHVJrxhKcet6dPpA5yixOLg==","signatures":[{"sig":"MEQCICE9OcR9Fu4UahaWkA24vmlLnLeTCfrz2R7o8QisZ0YqAiB/q1dtZvoFmzVi5MiR1la4Mk+8GNYuVxOwvXTnFdr4FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCo8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmvw//YJyLPrtJOloPFwkgRFNSwYNdIFq1Gw9L/lVgrfuDRomaRBAT\r\nw65P9TJL21KY7sH2XjjhoEdNoSv74BggFzvoVvbjS7HcYhTUqnv+ElhcqUGL\r\nGcr+z2F1xYTy/eq6QBiGSRtXPZ9NyGTdSBiqAQSMgtox+OJYh8HOdCKzYkf5\r\njHEdMdZ3QRn5vfpWa3pN9Rh+y5+hoAfy8d2OKtKe4kUGf/Lf7wil1gpgVU62\r\ncv2gSEpvCkz6oFxsbbfw7I2N/Y7W1muOwSLf2ZjihAkiG1GjbNB8XRy0Ao55\r\nxgzCWYHeoUTtLYsZpjAn03Zj4aBMFkLx7zorzdzSmASB36VenYlLHMmP7XXb\r\nf5c04Th9Qc/hQ5psaJ/D7zEHllzIvwjNQinop6kWfhOA52Ao+RQhfcR/X5IS\r\n2hOEXF8hYHU2E0B4bjVytRzGxXZ/jA57KqI2dvcSaW0i9Fzb5Edvp0CgCSX+\r\nTJHSScrg6gSfuueLEdg4jwEM5Sg9i1Pu4GH0O7Sr7qF5Ar81N3D7HuiHM6iN\r\n3STsPNi3/OfgtxX/ZzJsX3bJBY6DNwWShfaNkPY8ivEBzLlJQwqnjuM7sPow\r\nbBoU8b48s5Yapp3m9tazXjtGOJw8mgwtuCL921oYdLjtVMwFaBPRk/WQn/vx\r\nYDqAZ3Kx+C4wMqE3X+vNeDqfu54YbD2xl0U=\r\n=593Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/list":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/menu-surface":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d3344c16f.0_1663838779999_0.1234899124527633","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/menu","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.94f20ccb8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d032f0cba31747fb38e8dd53c49405265c9701dc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.94f20ccb8.0.tgz","fileCount":37,"integrity":"sha512-IuGiuinto4mBmNvwhFvP5XnILbSUHe/uFe4cj1wabl+l9TDZUUX3W150Sqq75EA007jAmQvTz7GSV+yL/w7lIw==","signatures":[{"sig":"MEUCIQCy9vYCQ22YcfnICZbXzRedttoqndrIqnvbA6tUvfjGBQIgF5yp69VavyU9VH3qx28NqQJIZbBAe3yrPuOPebO/dD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMpYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqZQ/8DWTzkdEjdIgH4ePMYYVRSs2hy/9GeTmSmRefl7EHBIfmOu5C\r\nUxGy5oDTaawostpcTza1b/B/NNqI26QY2mM83gZDbD/1fkvTQBk88Btyq5/4\r\nh8vuo7sIV7QrDsAJZ5QKpzmdRTwv4wXAVTxbqmgkyf6fC/ev8ittrTuHI4yT\r\nRHLavgfGcbd6u/Z25lGu733sU/Tqlor9Bz05v5kWAqd7Ixo3YmHSP9bKtv8z\r\nkE1uITgAzMc9dO0znnAgyXYiybFOq38EYUaW7yNwTVktX/fGKcaTsQEpgZxp\r\nAOhVaYwuSli+2YLZafjjqcApAzmP24C+lugsvx8BFC+3JFGxp1FOBr3iMJT/\r\nJQWcXSv+juFUrP/cdL/crBijow9tPVqunGxwNqTnFZBp4/VhXm8Vuf0loH1C\r\nl2QFgY65/pWHMSsx9hlGL/LijC5o6QGPNfcI6T5lqaw3WyarhApwYIpHaatG\r\nUueV7DR7li1bxyov2iS5mFG1+CcfqH9xMBmkDtROJzHsCiM2uZ3p7NXKKSoN\r\nx2q1QKai6nnpmLKHFa5AYxGfftazh7Y7/j4u+8psUEN0RBw1NpfxmQw6n/Xj\r\nvTPA6kEK2EHt6bI5Tmyes3Irw3/UNm1rLnYY3gs3/hM/un6315U1yd5X5Doh\r\nya0n6mEXZH3asUoFsZpGGArWfhwH4Cttf9Q=\r\n=WcPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/list":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/menu-surface":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.94f20ccb8.0_1663879767782_0.3415065341351329","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/menu","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.81e4cb7b2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85db86b9ec9d4e12fe1356c1ee9c4eccad9bd4b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":37,"integrity":"sha512-EMZnKBkScX/pmKe6ZQPVtOejHPldXeR9x0KCDKpMXP/up8H2FWZ4+Ttnr9b9NtKC3oH8aSP19iBJGo51stbIbg==","signatures":[{"sig":"MEUCIQDHP5hxU0jeRVZTUdGgko2FrnRoj+c5ShxAuaTj8t5sGgIgGxhGzakTUgdrh6cyKw98TZEtStbDD3pHw9Rv9GFB5Qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcxGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTEg/+JiJr0oo4d+KZhzLuS6jNlpxQkzv7U9z25zW5Ut2MQEbh36Fe\r\nt5DHRs3pSXFUtRVaHPnZbm5jTrtx/efsFEVZ+N4ch57/lqwq4unht3ma0F8m\r\nFJ2TwdGyAGvsDD39bnXvxT8I8g0GHS5Roc8a2sXoj4AiLpIf6p7aPA3KYFlq\r\ny4fIebVeB2sZLY1TfC4uO3eDoQ8oGhjm+MicuFcueA+XbhZOd41aymIw1IQc\r\nz5z4EJJmylQpC4kFK1DW0JII+iKj3GQ5UfKuirhjB6KevhqqXe8FTHHRYGnM\r\nKBwb2tjFwAWkzUOrs81d74jVGfBaKonuGVRhikwzKBGiFy2ugexvrtg6GHxI\r\nDwxOEvSOy1Kd23FpzpHh3/+H+QLC1+FKiYUqDr1QZ56sfXBKa7jroi83Z9Yn\r\npVCxRYr1gdfgkgGN9Lj1xuZ/FXiQNKbdMf7GtwP6rvzBnIgsOK6oTtpLqMR0\r\nW8fCAX89CPtI89uqbclkXeYlkWQtn2Ccsh/mATkV7LTWomF9f0EURsNHCYyg\r\nbQmORymBjXJW8N5rBtqFVPGUAog9TKqGdaOc0n8iXDreyveQb6hKoMlAx0Da\r\n5C5FFkeBExpndi57wKvCCxcrdZ2WHDeIiG0yjwgrXmvFC2gIIxT0vqwSv4qt\r\nQLzlwPKUvUV17PALH1G4Ow6OPmN5GkAxexo=\r\n=O0Iu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/list":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/menu-surface":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.81e4cb7b2.0_1663945798016_0.5331156193864555","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/menu","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.aa85f9413.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d193ee703ea5ba64c362be96c82cdc7d023a1f75","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.aa85f9413.0.tgz","fileCount":37,"integrity":"sha512-em4rozN6nGvx5CRSFM/UJWhXjbWv8SY94ySDmBbODjsP3zR5REMoYWFlBxcAbwnfF+iTqXMiqyoHgPJkHL3flQ==","signatures":[{"sig":"MEUCIFDThPpqYrPV7jiLwc3PZB6WIMgW1laNQc45uqnCHeoEAiEA2+qxPPlF+IUB4RyjGUtqVGGBZswJMLZQYFRhIOALAtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFlxAAmHIuLQJ/4s9m676Wy1ZyM35BHp2yy9Mi4+agcKEB5v8Jd8L0\r\nmkItE6mIesdpMC+nig0ld9yNSwXrg/WeH+hUCar7SU/3M4G4vQjvfdWMkxp3\r\np9GpXPSThe+7p3NqjbYNe9uYzOBHZUidLkwsWp4v7MW/zxCQLjH39O9EuERv\r\nXvl1YwP4amu4xbKsjY6XtuUb7ZJeVRtbap1Amgq+HGnF+YOjBXGJCEVly1HK\r\nf+dK/VzZCi17fS7Fwg72AkMm8lP52WjeSQtmwYhCoftK1jDDZoATMKMeEhuO\r\n+Qy95AR/+TmRRVIrjyRrmZYR+fsmhXV7y7yvknytJZttETwSu3wq9NVSh3E+\r\nD9hROpzr6Z/l8HxKBRuSWyJFbHFtIk0tQZd9PVcspCEaFPEICdTSnTnMoNgo\r\nxZ1EkpHAGqJA0Mm4zU1k5f2wI4S0JncaYhZOONkFW/480uBJtVlrLSJlzxW0\r\n6MZlLBuTatRBC4jjMEeoKO4Uc+bJZcwzKCqsFS/zWcGKd8qhkqs29XRnF7Z2\r\nmyPSYAiUJjCILWdYBPYhAy2tHd8PGn6IqarHAlUoHt95pDIxB+SZAA+0j/2Y\r\nP+XpxBvLxmNQYrd2RuV9zVcsssq67l0truDReC1Yww4pXsAn93trXpg0C3Zk\r\n9IyNgMSBTZu3GATyVe7jBD1Et+N8whNd2Zw=\r\n=sxfp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/list":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/menu-surface":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.aa85f9413.0_1664215085204_0.020269949918938046","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/menu","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7134a7752.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4cf180efec1950e9bd6eb5cf163f7352aaeee83","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7134a7752.0.tgz","fileCount":37,"integrity":"sha512-JL5tzZwTn2GIK/bbZ4BPI0/YYzVeeA09NIQg1Mz5aipqQyQDhvJxl0D1VXJE4xZ/QZqnt7WDnIDgrHgI+QZBLQ==","signatures":[{"sig":"MEQCICI9nJG4JqecEbudDTvO7GV1GJPRZLw0DYLsdlHo7IH+AiA2LlsP1Y4MBCg/0+QzQsJ9C6S+nDeV1NXXzyXSWl7YzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSaQ//WNh0zc3tiOIaoTktG/Gw9Fg1HGHPT2ObcZWw8slJxGgGfI6H\r\nJ+PLWMPvCYqdpAbDKjBH306snUtX7y182nAB3Ks3AbVfGV3cWDVUiAZRB954\r\nDF6aA7bMOW0svioTjuOzSDoCUmqOOYR+l0SRd1P4xlebFb6JhlZiYyjWt0pz\r\nRYztqxC4RaM+P7zQgViYDng4XJ1CNe+dAbp4LuupTXqvQmafm7fkd2AdFCWL\r\nEPh2Px7C0tlGm3Ak5rbnCR7QK+p8EN0PWE8+bNXxXYFZQGS1QBJiog2G7a6n\r\nWTd2xEuVg8pr7qvZ+3hgSIZOl5+4PhyxTgQW2+LdeHgbxDuEGkB1c3fMi2n+\r\neEYMBjyoncIwG++pxGCW6ymbNULzi6kJQs51XLRHPLzLuBVvV8Zb5gX3kk8b\r\nt7IONv2cP6O59AOjgpyiKbyzhmQNt3WrmerWn2osw9p5ctIh+x9sYznQjZTA\r\nvUrqBF5cDJGgWj0mANIqlMOUXL3rMtfIKTBSeHUR/1RtFaFyYRixIT7PXZE0\r\nrZCRn3utf6VYDeCT8ZyyG0wIfYuGzbNrTEQLtyts40Plmk/ZTc2Re5ZrasLD\r\n9x/srNEIQ2xdPCOpujQT30mRzK5u912FO+msD+6p5e1JDZ+i+DTKhbBkp1qc\r\nbtZF5drQxD2nkrdxfd6lW8FcLN5Ae+x9wZw=\r\n=yHqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/list":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/menu-surface":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7134a7752.0_1664229550916_0.6597161838473158","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/menu","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.70b8ac16e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d858812c9b0ed11d2bf4ee25f41d3c9298b4739","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.70b8ac16e.0.tgz","fileCount":37,"integrity":"sha512-YZQ31cwc0tBOaY8V6+L2j6rsdjthQTaiSolu85K1wX6bvqjKVTuIG68qAmJbd4DePsF0y7+f/QLJsuE0T5dbZw==","signatures":[{"sig":"MEQCIBp4Fkk1TAfV0ZgODIiegX4/B2C/dz3abCc5VQ9yeRs6AiAfepkkEM+7D6xrpmMOqFF1ZSpmyVtWgc2NyydtuXpD/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM31AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqiag/8DSZ/q07f6kBRJ5VrZsJ2lcLhn4cXr9V7BygZT7+R/KXY/tiQ\r\n+OXlkbLU5RF2cREy/upSigqq+d3eoBsmAX2Usxwu9//mIHn1STPWS19qwDBL\r\n9zUoVw0Ohvw+EK15nQWa4sqRj4Pq8cbnMAbWLuio+4OuouUHV8qgDgdAoD4B\r\njGy8EtK08+g59x+QS5/HVT6pH/HqW/CabpUnpH+9Eeh5b0c/hIZ3ufZi6ND8\r\n4851i02Sf+pvZ2hI8icq30gLsBCzNQ94e3YTcc+bJ0XXsjT9s9IomKmR8wOg\r\nfebycsayXyczoir/4qmtD1qs+0fABGra8LtPnsSQXVXDCBVUerUlpg3o/mKd\r\nNKqC2a9QqcVjzn1rDbQSjqZRq5+z8upIIkGMhp86Ypl8DSVSLHq8zmBtewHU\r\nxhHlovqD8lxpHIZWh3n82s2mDd7BvtglA2Vys3eOZSFNulbZZGXyB9fu5HdB\r\n+6jyGiTHrLwHt5JqhLbIpWYocQgliJVVFrJTPMVMdaJsUM3wyIuX8CBtsqe+\r\nMhBFvbAYw5jS9jU9aVnAeHCRdvNB+o5q4x5C9pVErQdHFM8M2gGplJmLNCdS\r\nbgDMp7ry45ZFoFkWZbx53qGpsFHLJEJYyR8RI43lJsAgzkhYeBP7zKSmKMUU\r\nANkFiy6XWG0VEunSLyD+uM8zeoHAR0d9e28=\r\n=Upmy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/list":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/menu-surface":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.70b8ac16e.0_1664318783958_0.4481657074349099","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/menu","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c20d74405.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2218b0d9fc5fd941f1a0ca92db84787112f6753d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c20d74405.0.tgz","fileCount":37,"integrity":"sha512-oklbvojewHa04BuMxSEDGay4ybRX6YtVYxDhNsTBWkuRfsYr50sfIICK7u7viekKfpW9FKsmmOXeL0rO4s4vYA==","signatures":[{"sig":"MEQCIA/jICbACZvSRE9tUnnCqVKf7udCA0tyWKCRTbNNfnotAiBorLT2PEdnjOGb0hX4QWF/XwWLS/RalEID58MZlgf/BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4geACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAeg/+KAKdHUnGW3ORWMjPdEO5SDCkionLFdFLrx6vPfiYW4NIgo7B\r\nhmOWhdRh9S2eTfB/ffeME1LepjK5UJrrqj70WOQ5jXFvUscUxMUTQP/mLRij\r\nBzQO1MP3enwqLlftXFivPNiVgfUbeTl1GGmqqPD4Fmt9fdWqJ9wiDiV6qCAn\r\nfz0sGo17zZrbHvSCnaYazCXEljJVh56GoaNuAQuVMU62cRg6vHdu+XEeROVR\r\nzIVXd3pY7FECAvHp52Cz3Tt1J+i6B0vMcCurFMI4QRBZD19kEBnjD/hRzW7A\r\nxBZbNxLbXAtF55gc21FMjg52+yvR/TqV4hS4w+C8xscJ570Y8rZCyjuL3rFi\r\no9BDqrsQMuDoZSEvKf/4ngnvRsGKXWOZXf/kxk36kptgnHUvlEGQPFwsMfjw\r\nxvNcfHmSQpaMrIq0Gg3UEcjldI6Cs04Z9q9OeCWsvc3rS3PSTAP7RX+EFMkk\r\n6oRsrq+J6b5/gVitTjcXsk2q25WEGsVnHXDIF6lcdcwUqG2VcLweHXO8i/Li\r\nn2Bi3eKy2f+dY+mDgOtIpFXJiNq6msK1/eaSJ9qKP3OeS/VFzoIIRtBwnuLA\r\n6coSkr2aMvq2FMS/XAVjBpsQdQBMA8ywcK2d5f1/PZNdbzvd7QowyUcxCeb6\r\noGxszJt1R1K+qoHILWN1AHgsEn7Y28/wiCs=\r\n=ChrJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/list":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/menu-surface":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c20d74405.0_1664321565756_0.2912806366242122","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/menu","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f033fc8d1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b2c1fc1e961d59451fc9d6413d76b58d50f66d4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f033fc8d1.0.tgz","fileCount":37,"integrity":"sha512-5iB98rMUjrLHlR8CotgQG/sWw0Y+aKX4E7PZ4sJg+BhSszsxt7jZU0rkOuMhOFzCPJ+LGv0pNOWBtpv2Vxizhw==","signatures":[{"sig":"MEYCIQCRMqcRH9sDcuTeIhMfk34sNMTvlvcfKDlVRAqgiJO+aQIhAJqdcFdWzdnJt2DIE77MlvrBNiPHU407WQEmY4ezqrrp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM45GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwLhAAgCc1+elkPrVHmF7Fle1ivzncRLNUg/SM5KUAenDUKsxrRPuH\r\n0mwdG7N3qN0YJkBPAfLSn5Ai//84aCY5zwK3NRNLnwBQ6mDvkjotg4ePkPxG\r\nqcRqHts94iiIAVvMn1IqV5l0PopLjqH0UE99OSdU/rGSw9W9IAXVxOcB2HbD\r\nWf+5V3ri0RirL6glgoTeumT9ZdxLhSPsa+qpDSpLNZvuCIbYNtkCShzUlYrC\r\nt3ISybmGRqWMqOfmgPeD03ghqknUrxqun6eG1jZgtFWH5MBHdntqAYHJZagh\r\naPEJs/JBqFY7ri6kHF+5AiM3V1ch2vNdCdtnx7mJpmbYeFAoOEaNzVl812OU\r\n+dKeNDs52KH+7xDkOV30O8cYQgDXgCWBVHPf/UbdCGA9I9WfV2/Gd3jPjTbS\r\npIwajQnZ4oE5YuB9CEo45nBC5eC1aFqBhFmVclGgeSe58k3lOyEfDQHbR6K/\r\n4cSs5Vk2g+2HG7FWuBYh3hju4vtOqKx4Nlb0bqnEaobvqgG97ulIsXjIMbA9\r\nYPOeJwa/QJ5CVJftDJBnJuScPkmuV4ShM2JPjtgO9GwPre4cT1VHH7O7mwfS\r\n/81rDuLeZhWz6BES60XLNujyAwb/qUsSCi5TQSLromOQRDc2JEBYLwRqvSxN\r\nrXLctAFWD/t21qGd3XBpn0wkFiyndmrjzVs=\r\n=CJXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/list":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/menu-surface":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f033fc8d1.0_1664323141751_0.9142816058789616","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/menu","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8d7ae912a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2178dfcb63d5728252e583e3ca6cfd3b753db6b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8d7ae912a.0.tgz","fileCount":37,"integrity":"sha512-GAHuZYsBFunNUimVuURnWuf0m2M3XL6NQj+U4zxtiftgn7j5yRdg4Oz6vgH98gSyXJae9az6XXmOuKRX0ee+8g==","signatures":[{"sig":"MEYCIQCusjNlWrDCUZOvoIrzDNIa3/eO8bd5XZ6PxrL/oqXFXQIhAJx52XpQm0XtOX+GhU9H//jLeLlsLS/oDzIYGb32+lkv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBwQ//ei7FXui0BdKgNqCAoW9Whflyyry24fSXL725V9dsZoQO/Dva\r\nJ6XO52xqTSIr7J5Qd8UiL4RdhE4zc20Df0HV2ieoSO037NWra+ovS8ZcvWqh\r\nE5dH6gwfCbmvAKB3As9RxAXx0Z1976hcEg7IpYZzJPEDSCLwclFJmzLYzKYy\r\nZU1b5B/f2zXC4vAFDE4mc1CppWrti7wfXlkQvEB5B0q8He0jbpeQvK6/X0JI\r\ncXy36GUrctyFokpsqxw4Q8du48FoNecm3tK/sFRlPygjRSdxwKIDQGBpbv/X\r\n1x1Z/pccGzK4/bu1ekNaXEFZflDSKE05hobNd22VqyWWqBsqq1x8h1y+AuZR\r\ntNUcAsGhaobZWQK7cUZrHLOANhbtMaGMx8poBtWWVRlNR/HeoMNJT4O2pzfy\r\nbs0S6pKsIC/T/52eRpZCM9Q4LKT9yLRcnoSpZfXLyhp9fLP5JloHO0ZmD/0S\r\nYbWqTWZqBzD1jwf3oywFwky2KMIb+Y4hc4kSk6/9NN9ROvSaRIjfHEHmV4n0\r\n2PhnsJtlWbyloeZq6X8sApNNVEcihNA4HT2tywJigR51+zYfVN8xSHIn8O03\r\nGL6xOLWt4m8WM+DOSoFkkRxo7u2lXb7VRmjtvzXRM7ytRt/ivoXPBdfd5+LL\r\nBfOc9iIUnCRMKwBIs6K5GqfrWggquzpn38s=\r\n=4S0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/list":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/menu-surface":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8d7ae912a.0_1664351857602_0.16798348104876615","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/menu","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.db414b864.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"455b500239c1fd7bf6e809d516b69cd9809fbfbc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.db414b864.0.tgz","fileCount":37,"integrity":"sha512-oWAxMj7v6sQCtTdBPDJuD45MbecoUm2+nH9Gq1+k2SUmnWn+zj7HY08phZc1btDlfRYH0Fni0ZMuMGUqzqrVag==","signatures":[{"sig":"MEUCIBu24N3uRY4Zo2Falj2e7hN+zCb/OlsZ3RrcstIGdTU3AiEA+bIN9kHurvr6k77CnmPY4PfNPy5CkzIB73uUwIetLmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNGAdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSEA//UuVgue4gJ7ZjJsS2G7ZTrUKAYRBBm6L2KV3IqX2vRsL/6kTL\r\nZkDCPMYrw8zs9+cMIAd7v2xnHwQ0P8pzz2GeMdNrMk3WYGUcLy2zf90YuMij\r\n4loiBvCHgwElkoBfdkj/S0vYpRstHR71/P2jwMykVdXoA3zn33ldI6agC2qY\r\n/N3md5B2T76okxjOygyTi4uR5RpkJUyzJDU7Iau2YNgJ4r5nfx04pYAlsK0W\r\nunbQV9XwGK5Jl0OJ8diODzKudKL1FTIBkjba0wS0FHZru0xW2npkFGr+7Fqo\r\nER/j5hkVH/mMeS70nrwZktQ8rxZ4DWnRKIXgBTjjIq05QuHTv6f3dv7qqtEl\r\nxxu68IYVpjgLau1f0V+021o13mibmQkXOyaniNnl7alpgan7OsB1CWFSjVJl\r\nmY/7spRWUDZrtp/duRDHtoYULCJGjNR2HI4lxUc1hetTW3ANsxxdx+b69XYb\r\nnp9UhGdnp63doky/SkudiGuatSfRWv9LASIIZ/tuxvqpaZXwM1ZWumXf4oLZ\r\nZDwxvw3DTg9khr5aLaA7mSyEWrdVBn33evMulQsyMLW5wgBJJ4YNzfJrd3gQ\r\nDP0NVuINW4k0PAgbPw+MzBwmCd6yNoMVFvVWK1qbtA5/oVEP4v09iCrlnK+t\r\ny/iaUtCgqblLT91h01nYYWzAjovA3/za0DQ=\r\n=9Ni3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/list":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/menu-surface":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.db414b864.0_1664376860755_0.7810141464316753","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/menu","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.28cc6791f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcc9fc3ca9696172bf17205d783016f82b4afe19","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.28cc6791f.0.tgz","fileCount":37,"integrity":"sha512-ZIliz++HYZ8a3rD0Z/wNBBkI0sgpZkgtQvDFKJvnPBVRYiFPzu63hD83tEGa6bZ+NDK15h+v2TC/8MMfZluP8g==","signatures":[{"sig":"MEUCIQD87s0HgOTJZuyqN7i3LAWKoGHsYNIac07+bkZxTwNYmQIgV9ua3r+cZFuES1zm5yYVvCRFfXUK8pLmBSpKGo7EPMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsfRAApA3yaPzZuwjpMOEpFEmoNTiVX4KGYXm6P7PV9kdsKmGkp/cX\r\nUUnwNk9XkUUZCYT0B1zywVeSXOQ2yatDdTsEwkRtNd115Qeudu44NLZwgesC\r\nC7bQ0pNziCI8DX23HkvUV+gFBEUOo02SjYsaLV7L2Hrsu+Zkqd/6A58UaYzR\r\nV5UIpheyUz/qyVZVK3YvtB4V7QEqmhHwwj/z5fu9yr482ps7jdXpBOalA+KP\r\nh8fHJdHybAtpMZHVrGYGhnUR+E6eccLuFthV41AU35RNjW4ZYRG8D6n+6C9Y\r\nHgq6Dae5hy4tPy+OWEZmc9DWht0hnYX4PKeuY2OevzOar2ek762biQAK4Jm+\r\nW52oZUeSmr3ePdXHFDOZkOLnoufum5tGFETOVLNAByzTZrY2ksgy0oPg4B+0\r\npXP9MBRZzSZTTIdDVtqC732Outgv7l1uRP0ZJuuDOrqRK7zlXz0cVH7drtHE\r\nGpmlmopRgKRpvTPLKkwRVnc54mIdgmkIwdhibFeCYH9KqbReHjrPsZpEX63Z\r\nHaLi7TVbFDaqz8EU6/R7EHGCOrru/Ki1HWxrs5PwumWsP9c9x5sUbbEn+WIM\r\n8iFm6ea3u/38z8cx8E3reLEUgBuBWDKY3QFZV6EvbCYlyjYjB8hhvAAc6oJS\r\nM4/DKhYU9fkCM5qF1UVGo18sClK03wO5doM=\r\n=sZTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/list":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/menu-surface":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.28cc6791f.0_1664388527273_0.8621475468328783","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/menu","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a515a2d18.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccfedcd42d4e43805fb9b45264e8257afe0652e9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a515a2d18.0.tgz","fileCount":37,"integrity":"sha512-BenVznmdy3lcVKv1EepZ5hYV0FC0DGd0GRlGpxZ0Rwl7lVYa4s2vnEvicLmbMSCuON3U5riAT0misX1AF068gQ==","signatures":[{"sig":"MEYCIQCIFzGZ8sUQlKPO1+9oqTRiJlI+bRaf677EHE+kDAdGDwIhALlBAalsCdBAQFk1UrBjpICrhRpyA42Ezh7Qti2txs65","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJkSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Kw/9HA1Qktmv170mwjNYAEoevEmE2gSvt+3U6YaoplnpjOXQFeyF\r\nTIqvH1nNiOfDfAPMN7p6ICaKH/jm+PV/e7+mldQ1BcWVJhdpa/489j8ifOey\r\nPHCiXqPuSB9IaZ0tPp4CMU8DfhuAlwT3dnnmFgANi4afQhcLgbdqjsSUDUEN\r\nmFHoi2NtKsZR1b0v8ywWS6y5EOj3FBOLDkSXQxRewH1N2Brh0krTmCaRxXfK\r\n+N+9KOP8LTLfkGpOR97Z0j9XnlkaaA6ULr0jTsPhWs3CcxFzrZmFE5EfDgNc\r\nFhiMZ4qHU8zl4dyH2YPjdwQX7PhHOYqov1OTWCxvmBC9q/Zn+i+BoPcMs9GZ\r\nRHbkY78CuOBCAtx3d/uYVruiD8zYropaloOxLK7g2BnXZVEr+YmXvY1WzM0q\r\nc6/uhMvZ3t3a8u0gsnm6mJmkssqpofyw1MF1kyJyTDVbaYyYcI52eSOgU27C\r\nsQC1BUoArNlJ+K9UaEW02WjXPOEbznmSsHVf9m/1KpcxV6KVZZ002g4eLt8G\r\nQtgk0pieiGow4Haq4pi1c6IjGoue04c8ygdjQMzPfSaHqilQ6XsUlEjTlNNb\r\nfsIuz4gOLU7Wb9/On5+VMrch06lwB6l0DphFqLJKmRPw3B8KGEILH91tTtAp\r\n0j7bST1ctDwEMoE89nEvDYPvqzpIRl48hfo=\r\n=ip4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/list":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/menu-surface":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a515a2d18.0_1664391442042_0.49318405101113294","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/menu","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ce9523167.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"749cad999c4a2feb08710d355c65bde3f238830c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ce9523167.0.tgz","fileCount":37,"integrity":"sha512-Cjv2w4IY1PKPYCbonSHXfExUQeDYPmaTM/PldD6tp9dagtUbHKEZLM04Yqy/HPpmsKeKLl2pxXsMWH/CoUKo/A==","signatures":[{"sig":"MEQCICDtWwumVkllowszFR2Ot95QdBpz3USZ38C5Q8ul3Pu/AiBF6VFWkMlY139d/zozTPt00ToxxFPHQC8BV57457Y+Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA4g/+KfIfk+m5COFCl6tZa28mSSLDOOswnklYMUrNiFZz0TWqS0WW\r\nbmC8wf/+2yl33uOb5tr3qioMsje3s4SKBdfoZZGHgCOirdvl2YqR3/FC2hYJ\r\n8/qkp84hIWz8s2BdBsMXhdJ7Uv2oik1ldoED3zNT0+HrMJkwbU+bW1FWchHf\r\nw1DhVpIx497xXDy3p86Z048zTtJPifRgdix6kI1OsAalHzCYAj3XbRSzrCGj\r\n8rWf/4UCBRH/5/Y+NOWU13jQxkNBOPbfq0KVL6yPRHboKM2W5Vcdr+5T156m\r\n1SuihGTVIn//SeGGpuysQGgF1qZJCWKb3FVz0sdXsg7D23qQ7nJyKQAov1PY\r\nlfkZsGxZx7ongnFM5KyR4tCs+fqUDA4obpdUMsKyWdloEFCv5CGQQR3WzozL\r\nzYJtPECgJKZ2IR/Sbia9/9LpogRkSbYBDkWM81XlI549rquTmsmBn7IielD5\r\nW0ujNNuo2YnveWJl1ak/2lzSrehoSVOD07rWuvdZvcAWLMzTiCFkVPrxxm2n\r\nFPuqQWFlwL/EgE3PNDDoTlH75FGvKZhjElD2YlQBGsypGIVwjRPnuY5NVJTj\r\nr8pI66lp1sHPOEc20aCcVF/0/UVaJre+wnL9hdLrJzvfJqf6chkK+LIybcnD\r\nO4LAfBlMUIdWVKWoYPhyCzpnWjD+mUGGAss=\r\n=avIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/list":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/menu-surface":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ce9523167.0_1664483570491_0.6909000852445493","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/menu","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b2310f7dc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e0a7d63c87e82c34301cf06ea82594a51d793c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b2310f7dc.0.tgz","fileCount":37,"integrity":"sha512-sVFXnxGhfX7f+njlKUXEf7OZRFHCb0ywx6mjApXG2PYfjBqnxkEtfg2cyFqfqPI2hf7HITGgWZHWNGnfTtMWGA==","signatures":[{"sig":"MEYCIQCkiMCEkoXPAFwWnmKIlHGkOscSDvsvr0DR9vGhKk9JygIhAN+R3A0hGqu/r18OaVxZbgfbYYOhzKYabcuoDTUazUw1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjUXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8kRAAiQg5593nHAu/Cmn3QKDdMDmUx+Fmm3GemCnAl4s9vAvPi5rq\r\nznWZoK0Tg5/2kLRwI17kbQ+KKTLxAy4SzOTQObmK75Zd5PaOh6L8TvjH3iLi\r\nWbMWmeNP14+QMrZaPaKDmnTjiMFLLUIc8NLG81bsr5vnrT+v2+BVYiSVqw0N\r\nLz6s6IvaoJJxVKDwEAlIkdd+IUSCGeUzDmmRkpe1HR0NO2gHdO2dUj6qT/df\r\n3QnQgjRft5PDp1ITwf3bTvRxRnHupx0I9DU8l7d8vkHO4onLjnVlGwDItTCQ\r\nHBRVIV/j4JA93KmZ/E2z5Yxv8bu7X4CgN2jY9NRkV36j+mn0E5EVYipBCU1o\r\nvL2DPTiF+R6OhfIVtm7inhHhHuHAlCgHjowSWIbCFtZVrZ5FeD32xiJins9G\r\nTqwO0IDhSMXSC3kIjXvMSuSWsio3PGzzgjLFaDzcrGFJec76GvoqJ5iRUADL\r\n3JepsnSR8Uht1fV3NcUDG/k5PSPgPyw5xyF84VspbQRJF5UCIODKsc1BaGK5\r\n2KNTB/mIYK3OA09YpU5uvp22vkidsyOUlXjsk55NlgPPbOxw+hLJVZ/u0yqA\r\noJ1drcvU2+lkWpS95bEgXb0rda/H3Tit/XsTlt978IncdaMWlnyxr8TbUrj7\r\n607qxXIZcA7u4XYIiHcdVxi+lp/ixrfgwH0=\r\n=QQAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/list":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/menu-surface":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b2310f7dc.0_1664496919438_0.4409686907018622","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/menu","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a44241e54.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fa33becbaf7aa83d1f3440e28aa4f329a592013","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a44241e54.0.tgz","fileCount":37,"integrity":"sha512-QLWknpKC6LqCr1FBJ1wy68ppus4l5uBkfIVOeG1pz0H2Z/7zNQpREO2pc3ssCIXoVmcY+j/oPjC7qPAzxnOGCw==","signatures":[{"sig":"MEUCIQDYTVmAbo/r/hPse9uKxrELvRf4VaD+2b8FXyYqiRv7NQIgR1fH3jbsBqSz4VQaQmxAsAZRaSE4UR7BQG5qfCJDeU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqdNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu7w/+IiSx3TNp/E4iTTfCNiKBQMtFTggMi1hfd7ymX1MdXiSLEky+\r\nIcyDzUzNFNnVaURnAPOj3wFxZk2/bHztaVJTJLRGsMZLhy3YQIFy3Mvtinsk\r\nCLD7CCoTSqmjleCqCEoEL9V73Yce3Aoc8kitAk14ArPv4/V5rLp6AewwdYaq\r\nwhzhOSNpXSGHSWlx2nQWt2vAYQ7ooJTa7n90qsoFtEpwkzsx7KyuRi7Tq00O\r\ncPf0HI3XHG3FZWd06dAJLC1v9ihhCW6J3F+lpMfD1OkwUGN55Zc/jJ5e/4hd\r\ngkeXRqt6pZq1q/flU7KYRmfe5JcQkQvGEvQd0zdP2zSj+5w01s1AUa0/KDpY\r\nIbujf1qa9GIuBleF9WI/la0TlOr82/cZ50k6m/XXkTt15X0smHNaX2eJhXbr\r\nxJKiEVW1fI+urMKLUhrQ59kgOgZcP4R5gSE2hjYlfVUoqG6IVe3lhLnIbm14\r\nRmCjWK0FBzhd6I+f1mpnjpSRVLSTQ/fS22nMKjuoft4YMpE6BibANlEJF2Bn\r\n/NehPt0LIykhrs5eMW1dnb3Yg0tUVyLSuoBoxAp2epByoYZDDzRCgu8W6KFw\r\n15hu4CDtktaL1XLI2GqEshcCw6cqfRDAeDLaiOc3hZD8xsP7Xr+V61rusaKo\r\n0I72rIqWAQRCfAXcuZM8YXAWaXUlo98oECo=\r\n=8GMJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/list":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/menu-surface":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a44241e54.0_1664526156730_0.6048813307560077","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/menu","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0ce81e115.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1cc96e2a425cb5af9bd1465f496505b06dd781","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0ce81e115.0.tgz","fileCount":37,"integrity":"sha512-F7/22RFqb+sAvPXlCWhqbkGIHaoGnrOGtHwZf9G8aRbINXHCuCyUUnouhtWJiBmvcacLcu5N0i0MIIZoPnNw9A==","signatures":[{"sig":"MEYCIQDwn2VdgHtHgZwFAIFp2w//8snFiFod+6/dnyk3UBnUFwIhANEXVb8Nt4lTlZqEvkrMMAc/IC/oFtiG3G0aVT/mqOzr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzNJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE9hAAomP7hklp0OLFEjXklO0yYa2ZpzlliWx/aPvHPkZscFmKyIPh\r\nMq5okg0Uk09tH5Y03aQQ9Vgkiebh5R19CvrCawNRmuByxeZx6bbQ8L7MtywC\r\ncq9tMqrcaPhf+IwpjIDGkvHWElagYYkTKB33A6LZEXiRmTY64Mqqa/nmzFhc\r\nFyTAWKqwvQRiCd4Bl98NfGc/y+F2tFn8P7SkMM8w4Yt/5frdwTm4RqMo6Jc2\r\nQdu87gkjqiHGD1edGt1meZFuMz+LSw22KTWO4m/U3mb91OV4eGAvL8mkHaWG\r\npOFcArjxmuczD+TmlBPgAE/7R+hgrrNoKyfp9nllyiTAFEjQfNA7jNugjB6b\r\nj01ktzKeUOxfigugyZi8yzP55QcAekWczLjgfnG8XxFyLGRNj9BwpaCUbuHV\r\nCywY7IWi/lxiWdjfzalTFh08ymSt2uVVfeZ9w+JnopJ9S2Cil4YFNGsIS8Fq\r\nabrXDVna4u30pzKOv4w1f8VzX5PDY8ZX+R8TGGpoDnqIZgX05TscSlEyxE3y\r\ndjZ9JIZs4JuM8ngMgcon5OweV0TpGhhmA72mIKRW04g7kSuv92ELQqljsCwA\r\nRocjeRSqQjb2xGRyLEn3HRJflKJ9kyanZY8GMlgm2N8UysVdmT2eiMado+90\r\nsEv+BfKgDD1boNp0CGEO4la3gBuEgV9HmGw=\r\n=54Zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/list":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/menu-surface":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0ce81e115.0_1664561992821_0.37768966441999674","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/menu","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3cc30f6ad.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"840e5e5dabbaef9d0a27d3a9c1fb5bf8b053ed2a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":37,"integrity":"sha512-BzsqqlC7RVxLDtMxOVap+46ImdpNvwAN6p02UVNKj0S/zE5G4CdmZ7q/mPM9VvTMVhy8t0PcSAXWFwXfSTD3Rg==","signatures":[{"sig":"MEYCIQD2V8HGJY+O00lsVJlvJLkfRHho8edOMj5YSsfTPFMlFQIhAMhPiSuprlNnHJ9DrrJPsFMTpPBA/MPHgPp6/wTIJQl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGuGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp4w/+O9F2qRARhOWnEzsfEUZi/qjDHjPFGLdswDmAZ4lK9go+yVOo\r\nSChdveMayLH2240Tn8HQCDpFSXr8jrUwy6jHbeB8NB9VEhdJyFIsUutDz7S2\r\nC0GxfS+6D8pP6G8ZInNXD90UxZCr79V9ENLYJbdVjlU+9P8EfvnnQ1AGzIIx\r\nNJdS5rFSsJLwW+UwP2Z9Vlt5WRqJVKDAALdh4g+XYiNAznOnWKrap/+zyMjZ\r\nxroJfzEIuJvIP9URZ51+ui1DTdub8aQGqJk7AC8qvqaQ/AVb9qLAdDsE9s/0\r\nWsnQKfEhrJZu55fVNr4P4kcYwu7RrUoF006vJ/iSBA2nciokyhT+OmBiL+RK\r\n0ZEFbzdOyMLgk7JzA9/HKDxm8XPaSMvWs2QQY4/aBxklFxt821UrgCTjMhdz\r\njBB5vUEqBfqX3sjrZWoD0Ol3qG8XMoskXYhh2NZpWW8iTiaz2/1r0uR4s9+o\r\niIazkp7YRpLRJzOA2ynIZV21miNjC42vmnu/mE3v2bB3ssZ8byNwJqlAl5Lk\r\nX5JB8WX+ZVJ6rzwE7l65imL8nsKE6TMlEQ3C6aFiFSRdLViCnOiTVRCJ7049\r\nGY0o3Rs4Vln5EXcsvVdDviGBtyHJ5fn9WW18sb8m6SV7CXsrbsajPK0ONy+0\r\nELAxGyEo8RWB1wTsnEHyxKzFkAcpg5gZMbQ=\r\n=4Vuj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.0+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/list":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/menu-surface":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3cc30f6ad.0_1664904069910_0.7847659633899504","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/menu","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d9cf98e60.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00e8ad5583ee7ddbf47bde3eb9e80d2493a2e665","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d9cf98e60.0.tgz","fileCount":37,"integrity":"sha512-2lbGpOZx/3LB1sCBL1l65rmM+1Gre/ILnypzZncRUC2H/9+3jyloxD2ZX1O9GsG3VX0fYT9XVaQUP27RxlHUQg==","signatures":[{"sig":"MEYCIQDmq57YsWllY13SKKkZRN6vgLhRCM+HLdb0K6pSsTE9LwIhANC49X044Cd891x/WCJyX6i9b5MYE1vmoL4Fmx7JIxTS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgeA//TEcFohmFRZehqBL11sSGPciamA7OHi2KdCcdDjGwqP0PR0rX\r\n5TITz4YuFXWBNNjUMkXnUdaVlupr/dCSFAQzYtomGLstag2kOimpHKXGH79y\r\nqbff77ZxQkmTu412wcbE/F4Er2xkhH8XEbd9aFkJkqqSVux1tNZhtnrrRcUk\r\nwTIp+3MHnq8muygjEZC0zEBg/FBX5vnUIOcaHyBmb9uTMnMPKVCqK/D/tCKm\r\nmUm9/igbLCxYf3CAYpEPZXMiOCLZtu6pXPjmDpM1o9pofD4H/krG3RIWhwje\r\nieA0LjoGKUTnvUT2M3ZDe9HCbdUdgQUPfPmzWJ4IGSYFIb3bYr+piWJObhfT\r\ntGbAGBaPOD8GH5O/UheTQNqnipScJgl4ngZG6drRGNahRYII9mhZQy0xxz4C\r\nUZqZjCIajlD4uZ6IOlLeZzOD1PneoYyALJ/mn6l2XcayVGr/an60LX7fYPVT\r\nCokemw6hbsYhcoHrxT5gtbOf3TQzyzRhAVMu/aIRpyk9im4opknrCCDhyf57\r\n8jwX6kupbFeW5belkg1/SqpB3Ebner3k0Efd7WqBM2BzQhDIp+bOxYwwotj1\r\ni1iYp4d2hTk9Kem7D67bi1e8+8V41OEyZtuXSy8XPy6JFp8+2pXlXjbXJP/O\r\nG/5YpkeuoGyfbvvQMRT9LOi+y8tPyliP63o=\r\n=u7PZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/list":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/menu-surface":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d9cf98e60.0_1664910317947_0.5414600014813602","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/menu","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d71935c8b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e81460d8afcc6937c1e05943c106622151055f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d71935c8b.0.tgz","fileCount":37,"integrity":"sha512-Fvr/+MdUigGwp4qIKT0X7y9DhoD1G9OSj8OVKN8QPinYUulBaOu7mbgUCZ36o37ienj6wq/RtkdtE7t8aWcx5g==","signatures":[{"sig":"MEUCIB27KRfcfP36pwKihT6q1OokmasUw9zgZ9hpjpBvkt1yAiEA+0lYyK9qAr3ahJtvEuCMwXQMOIhhViOGplZMypwfWyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":816984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdFw//Q/gUPPXi5KPc6vZe+TEjbGdO74+8nVMPAJ6YNhz1F+UCeIIR\r\nbuWgSe8YMadqGQ/3Koj+2TfIbLz9+yIy7sv7p+ATMx7jKpBL8IQFqNlnxoPf\r\nrYBDNj5VuaaANNVaUh1ernQtd1zQeW5rmMmGbJ0foI5yq3ri77WKGngLhvff\r\n0Lqt/tX5WholcHrrGjbkHvovKizuvwIbsgXV9I3MbntmeFuUpiskORsw1Uej\r\nh6dgGkGiFH6SjWCuZM3+w2u+GqETkSbQCsnqdbvpEXjX+rRyYroUif5dpc3H\r\nMhlzgjIJ9ne0IsFSXoHX2VzY1tXfQf2/Z554E5/FR2Y1Ml1qnwe32FjlQAuS\r\nHL718WT/k5+x6vrgrgpGN1j01awuuH2c/K4U4nEZ5qhjGQMOfLADyx9nn7sI\r\nhDhsLvspyzuWFLha403PI7xyyNnkEPngQGZEBsjhm3iZErJU0VcJG2W4PjXm\r\ngzTlGqpvLW8sPbigCtzWh2IFsM8l3U5TuvIMLAVqu8NYH1q6c9ST7DttWILA\r\neB/LyUhyix9/iMf+6Hhivr6vJi1lVHeP+8Zd8dFqEzsRUoILF6dHFaSINoje\r\npK3UOfMUBzwTbiYsenWzZvCgCUvlYZvn6qYxiko9Wa6n1EBIzDNybMZbquAC\r\n5Q+DAD+av4RPK8znuBu5GrswOetjbZrfXWg=\r\n=1sXo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/list":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/menu-surface":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d71935c8b.0_1665044185045_0.7947862526694838","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/menu","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.49c56a25d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"961c814d2a32e95336cdf5bea76fd42afdc848c3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.49c56a25d.0.tgz","fileCount":37,"integrity":"sha512-kmKDWVKhjGSZONGrSFvgqo33tcuhG+Epnoxcw/uxGSbENJI5u68hEjuS2ukzmFRkd0N/xf0W0gquNx0wLKWDqA==","signatures":[{"sig":"MEYCIQDwuyKV3j4N9G1bIwUbGkE3Q3nTWnclxIY8tQMPSCAVrQIhAOQkDIJYdmIdOyVVElzs3lOuWceJLNhEkSp96xC2Lnxy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":814928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWRQ//fvVbb2cT7hmdZDEMgxyYCEQubZAuP6QuOPS+2l9j/MucVcGC\r\n8PXbPnTly7whgc2S8biKrfjk3WU+AdhQD7RdMZlNt6pDJ9Zi+xAORd/kjQ2t\r\nhmdXuahteRI+jr0y+RZzbeplvxOnpHeNc2Fx0sVVjyKqcpbH8Miqx3Sc0ote\r\nAl++e5NRRgU6QSrqzd5Gvsl4/Yb2w2r99AtgFV/OTUX5oWI2QStgO6sDc06G\r\n38vkTI1a/yId4ivnnQwIk3lJ+cD72IuTBVHE/iVn4PKbLeh09UDFLqEt1lSM\r\nxtvosLzX/F+asAkXYUcGT/4kQ6iPsF8kCBfw+YStZ0LaghbfaMVtRU6H7N32\r\nAAKqr3Cm3NL53Ubc7dknMIVIXRNMcF1Yp1x74FfvWWXZSFoz//smC8ykBG3c\r\n6/DYdjzGdYOmbOOgqw9PdHKQxYmY/g38xUgozrtuA5i89jYUefqQrvurbQt5\r\nKBf3xum++Fh7ItbeS1FsGtXNJgkYWTYvrRSM6uzL58Iq0CB8UM3Don+47qWb\r\nQGbPyj/flq+Db260edLKkdgP9dQzCWoWeEAijFjFmcw8xa3lSM6iBeKkMGiE\r\nNcfALI4gEkUHwhWuFYAPyyby2ibg4hYyzjdyu6w14sk6zyN2L0afNi0K+aZO\r\nwk0N8+qPvDaAmqfzGFwY0vBqxRVnwriDmUU=\r\n=Txf3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/list":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/menu-surface":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.49c56a25d.0_1665082344805_0.1989650921978976","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/menu","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.07acddef3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c4e84a1659472c8ffefd9f59100b33c16f48fa7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.07acddef3.0.tgz","fileCount":37,"integrity":"sha512-ZoOu3TQKNe0ektmbSvgtT0uRSDlF5t+3chWmsSuDDdsCGZobbmaoSZKZZAwqDzKJ0V0yXiFV7TxgZ0nLMG11Xw==","signatures":[{"sig":"MEUCIELnfY8JMv1wX25auBbSIsIsfLjZggPaeo+YkMZ+k1BhAiEA26YxI/lTESlyfM6ENH8Ri+N2l+5fyDH/jqeHZuTOkpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":815143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJyDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMARAAhA+gGssOHmCV9zzll/i7nB8XxMgU7ATbrAA0fJhjvuKcHdLq\r\nA2eqkl1mEPFtC8IZ7CWNDJZwoWdJvVS4xzHdHbD+7mHujcxBeyu82eeu5mmA\r\ngueQER0lQUEYLMk368jAaKV50/DowSqRCW0/SdUEFaBVRQCy91/AD5T4NlIR\r\nDPWyTRNUhOy9CDpM3vtPlJ7+WPqUZwHl01/C31e+7YIRG6tU59xDBsesq4AS\r\n1gK2DUHhQjFMK7u3e38rcQG01DiJzb2gXbPCognlqs1SgmjoSw2xgoLc7qGK\r\n93JzLvjy0k5C53664dtG33+RqL1CYcs6UO3rrSG/mlPE1VOwSinTgAtP3Pqb\r\nUgIGBsC1iL75hdca5endHe2fnNTPQoEMd9Z0RHlt42m7tjXOVDhYobcktUxp\r\n3v4Cn7gkYMFMCHd8vXn3Z0fpVDX9naBML7nJU8AwkJMGCpN68YYSp5yuVsrf\r\nFGJvvgtNmHX21gK9ijNKosY0cnaiau8gRI6/gK7L6OoLTOGoACovkaJ1hkSE\r\nfUz1RVR8SZhef+MqiISVH88JJr51elcVBqCW2IzE+M0ud+RrItHTR65vXiiQ\r\nO+H2+vJbSrNk6YwtLAHeemBlX2Y8OPYKgKJL0olUYljLdvlvtJsXEvCWfLKy\r\npg0w7AY07PbTpC6M4pBKdCUpCS64CLNgcJ8=\r\n=E9se\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/list":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/menu-surface":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.07acddef3.0_1665178755508_0.7747029010566455","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/menu","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1c74eb2c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88ffe5c2fd27e584f6579d8210a14947af3b15a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":37,"integrity":"sha512-/yqaujShOGR5vpWgtt3ENvjvUN3ooItpJL4sVPuiQ/PsGUvia2HTzsBHbskBLeFpcz/8AOe0FtKkkLphpwlUBg==","signatures":[{"sig":"MEUCIQDDD5V+QKi/keTwM9wi9qrV/B91mUlEMgqBdyQd6uxpEwIgRUEw4FhvKD5Ix974dUtyngjLrYLcU82VtX4VpG9DMzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":814928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOHQ//V5Z0LsDCxQHS7JE2YNWbVvWF5aVpUQdGqvujQa7oTcKOXDBH\r\n9Yn9rZdsR2drukz68+D0ed46wElS0tQuG3RheRntra6fuz7tGZu9mrzJRgkc\r\nFWErTwwaS6NudC5wbETDoHXdL3Scj+W+OeY8yDaGR7VgaiVaE+T3345dnZ8W\r\nZPS2q6pnqztgZYDFk2tR5ubqav6HmGPkrrDXfAjMLTf6pMAj7tnTEBco+TQH\r\nlLl6UCsmTB96cnxR/CL8fZYXGgmnxriQPC+S2k7FIDkrw7R/AayQWqC3pRwd\r\nTs+JGLPTx5q4Y8H/5VCmliMtKWNrzU5JPyMul2lVKfwNWcUdZ4YYqlAYbDHi\r\nWEeet0x11NuiDBMcj6aPD5F8CEcUREZgIQpd9aFoCQEqByVyx26CJbJXUhOO\r\nBaR46ItCNy3V8WTapcJtm8hAt9RQH8G8LzMSS2znJFmfHtJs+0sSu3d3Sb9X\r\nPQIS2NTQ45XFcnWFyoJIugme0+ur3VK5bfS7/zEVOgXrhXKHq3OuUBmrkl3d\r\nSXrz8cVe5Fnbsnu3Hj/i6tzNznmMQKIvvkYeUPJcSTupZBfxHlXEzBZhsS3Y\r\nbNqpGkc2u/itDSvgOmwBFAT030r5tjawy2iXBiw5zqFwnMZB0YQ8kfhtqqll\r\n5MMw/A1DQN6Di6S2SIgX2dBYCtA896lMK2w=\r\n=UF3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/list":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/menu-surface":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1c74eb2c0.0_1665179826667_0.5197868210213596","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/menu","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.dadfb713e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58bb580af802f8a7cbd7d6fe0f17e231a827f4e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.dadfb713e.0.tgz","fileCount":37,"integrity":"sha512-QgDQzrSPUlAFz2R303muhRrTlBe3ZfpMFYQt6e1Mc253L6l9Ys+zi4OrAER8H7BWXFYDLDFX5Hd5YdYVwCL5qw==","signatures":[{"sig":"MEYCIQCUKd4lAH9NnraaopJ3cKEY8OdoDopTvRhEn+6OMhHF7gIhAOTPm0khdG+p/gIzEuNQUXDKQqu49vujOW7IqtKCJ9BN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":815147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0iQ//ZdBxK14Y2uTxTMVx8HLQfB1MwONO2WfiTZHS3rnYBRhNP0G4\r\n40T85TSSgkG8ljGzILHF2QIKyoHf15PSiAYHbAS7r6QydGnQQRiZZiMIioSj\r\nTibOYVHUbLDxVqmZjCrGV1SDUyq0wGOl92Q3AnJl+FZVCBQlVUyy5LysIJ3e\r\nbsGvMV2xBLAO9xu9U/eNnNR3Htp0w3d1VTSkYwpc9ZLsnZuvuTq9MKMNdZUL\r\n3KdxWPbk9S69zqDGdOWlLGkfYi59h2DnEvJs2CTmND7YfvtTAVSCrSWO8p5f\r\nbwf8OWIZTJ8nJPmRl8e1AKoudnCVhDAtay96MDVj8zullPZfZAdC4Eks48DY\r\nETtNXwjA7qUnEpw3QFKP68OIv5WnOymbZ7MCn8qpWZZNXuaMqGTVo88V1p4O\r\nMv6BhWhm/PPMm5nOy9LEcVlo4B7W+S2dxSSxVeL+0VZbRsBWcIJIUHVN5B25\r\nQ9oJeXKk+FCADH+W5kLwRj/45HOjxYR/QIGVtX71q5DZgixWz5rgaHwVuMMt\r\nnOnAhmQCeJtxSw7jhAnZ735fSNLE3g3Qh3Y7oCBdZbUG9DTI8Hu93uJ7acpi\r\nVNT8azKX/MnanBi+4Fb//vIcVt8C8z9IMV/wzu7sl1y/q7aHARjlZPVPOSpo\r\njBWA8aT300MF8w1AwdCvTLWjdoKwMBHhIIo=\r\n=2ydb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/list":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/menu-surface":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.dadfb713e.0_1665205644802_0.0789137549048442","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/menu","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.395f1ce61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3f25dca51b01d15cdb2613d22428c178ff009cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.395f1ce61.0.tgz","fileCount":37,"integrity":"sha512-ehJ2Ad1exx+DFZ+ttkNXYhYgeTNmdcwr6YULufWu3EUkNfn62IeK9veqSApDIjzD6tN+Gm1ULPf1RIFyvJkqYA==","signatures":[{"sig":"MEUCIQCYlr/hjNyvDaj+qfngWwp9LDXSadoEt3Z97BrRRS7+lwIgYvPKikalqkKRc+Cz3RP7WIdDCADGX6ckP0FwWBRFNeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":815143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw5A/8D2aksMNhV4ORXpZIayCWMFjqhWzpojr3mB1hi9nTsmC+OJX7\r\ndMnc00Y+pvjqPEWKgVQ+0LK3MyXnFW/++XSRsIkg+NIXBNxh0qX+YBUzxRHl\r\nDwGIjcQw40QOFBQ6iYowCVYl6XEvR/W0/BgK11R6l8cnRPhXld2UM6PKfTl6\r\nT8eq57JrNprnbkx/U1aZ2UBhQidVdro2JzlkEyKFpxkxP2cgLFksO6q7iZn9\r\nJX75gLfiEmuCW++ekooPksjR1nsyWAvNrDuc0e/uoc3ruKraJ8nIMARqhsHv\r\nC46dyiFJI/efqaxQKwyDcJQzUJj+EmVgGInaThQNiHr3SM5cwQEjAQcgFtue\r\ncg0ddsubcULHbuNJlBEAu88GGKQoP4J1wOah6yIdEeMlbMFKIpc2oBRvVOxF\r\nJMWHVZh3g2OyyeQdJP6zVQa+++CRnchGRyZZKdkM9UewNklyh/E3vH/rtkvO\r\nBtYAEzlz51bHvrQJS6ZxzxJ6b52BNV8TlrZKHKK0PNpSRCAOUcpg7C4oYeg0\r\nNwCCCxLqKSqjTw9wgLuH9osMmdhIHx+k/1Fvt2jsTOmkO2XW3aIsrEa24cJI\r\nO/5QUNFiSgo92BbFVg1bTwnY2AWHWPQVe+Notb8RzGJb4tYCBQ7mlU2TWyzX\r\nvk0cT27D2o5KhsAPMhBJLfaZZB/dFI8uRgU=\r\n=itMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/list":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/menu-surface":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.395f1ce61.0_1665205760715_0.9782585973320956","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/menu","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e741b5c82.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67625b0aa8275e250bf19145261181447bb0afd9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e741b5c82.0.tgz","fileCount":37,"integrity":"sha512-1a3zIST2fG4gaReLM+9j36gZi9YtxXbcH2yi9oQCP2MckP+js8o1ADSk2qSA+WBef0sGfUwd5O7wJIV5MygArA==","signatures":[{"sig":"MEQCICTDHB/MQv3NCyMhjm6vg9wwkcUBKx5Z+1FV8obWTfPqAiA8c1QAbE/KudCxDOLyIaDGLVygOziuue8/e2xycrfWbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":815147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFjsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFBw/+N2yi3P3bIY5Vy0d0IHutkQQIn4Hj4YMVZfQxdgKdqffEVqDV\r\nG9pHELDgNCQmqQGevTxWWcodTYr1VF0ROJFlPu5W3WjQ86tTpZkVwMsuUUUg\r\n55Y/rgwM05TF8GdSUr9L4bXL6VM0muSjPOzTEmLXsi9EWNTUb92dVXjrqanD\r\nnRsg4VylM4wvaE3m42R5YBGXhNEaPGvMwbk1e9jwJYg3zBSwlOiP10oUjLwI\r\ne/lS3Y8MQNBrl9qXNgamg84k3vj4IOMYvF80DwZOvHTsRqlbnbjKjPI82SuD\r\nKWiRdJvlDce7VLKv/eE3tyk2GLTMOYxwjFMa/3rEKWiH6CLi9CXkKY300N/p\r\nG07vEXER3QsF/QhBzrnfBt+rTOCaECpC+X/q2qaq9RGSwznxRYukykHXlibD\r\nvehWnOmPlMz9tykQyuBCmVNFMhAOCudjq5TraFOll0WwPfJq/t1RUMI3eES6\r\nAThNUImQLlhARcAyUvq+uVGPffYdXRLrz9+V2TN1n6c41irgz+yUF+z1z9wy\r\nbzjZFbo1TFG9MK4hAQujlUzYaYKqSQ5WMffGrRbgEivUoCG1JhUZzJ2gnJUd\r\nDIH1JLhab8f46LE9TBxqP7+w953GMMfBNlA9JSVQwt3n5Wh1KxwV4OL6XXi7\r\nZiVIWCTJjbq0tb7Qjjls5S0S+tL/upF7AcI=\r\n=HkRp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/list":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/menu-surface":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e741b5c82.0_1665423596162_0.02142721590570207","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/menu","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.582f3cc1c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011df769e22331c9296985dd70d67a9d9584f220","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.582f3cc1c.0.tgz","fileCount":38,"integrity":"sha512-invV4U/+ewqV42D/k6AEDmiqbXIOuyWyTF99z/BlIuSLnMLcBEWp6JpGqdjPFBln8TC4PCZySITOnztrFgC31w==","signatures":[{"sig":"MEQCIEuRuES6F/g6uCsGTpdjKCI/v9fkwPdeo+NuoE64YHlxAiAvobLRMtNT6ErPvTO9lSgBkzKeUDKl82w+y2zve9QULA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo12BAAlkDNNqnL7Gae+/B+lZbskF9F83R4oOOkpeSGQlqHE9VPhn/C\r\nzuWOPlKTjeVMyTzzjmxU4Y3D48P8ZHWkg4peK4gZ54kOP9Bf6hn9ivI6fK+W\r\nVL/wmF+9My+cbcFFxI4nbMgQ7rUh8itjLDYMvHO6H/mJ1PcM2V++BvpGc2/Z\r\nwR81wXqrLU1hPJei+eyttHlATrnzcHs/jhF0Vx79BqRjS4OeiJLtwwscTZhK\r\nrt/y5lB2m3Yt4z30yQlAsum8q3Op3abS6TBhkoqymbabcDPrIt7Z3V7RAtUt\r\noRJoSOODJjKCx75NwNglEtU4vldQyenalM1HyDpxrdcNES8AgqwjEubkimNx\r\n3hnKe1fK9Sz58x1QDcCG2o3uuMPKkzS98Z9wGjjeFhQ2B7/HJg79IjX33BuX\r\n9l1+cwWJ2g09Q9HLrmHalgmsO8zBnx5Na3EViOL9XnRpruWgUS+4lfJRINZO\r\nDQg7KD+7BMyKrJuIWOwOA2cU/z6j5B8dQxpLAbkhxcz8+AQu04tTM4aBx9ej\r\npP8Cwg69ypS2C0KQ2MpY1Aw9w9709+ME8ei4Q5TWB9KOO6kUtEgdTw4SKbNZ\r\nsUG/0uOg7HMUHCNR24mBAQZO5RXI+QA/jREy2IEn92k6I5dvvdbjWBQoT6ii\r\nnkiSyVvy+swX8mL2vQcJ6mnJLi0hhd3E5ko=\r\n=Andq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/list":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/menu-surface":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.582f3cc1c.0_1665463843144_0.8900445532332568","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/menu","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b1a6e3e88.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f60148e87feee1382ce46e95bc26a0b8214ea0d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":38,"integrity":"sha512-SlUD18qs8HS4LN72GzJRSRAWJ8ybqbpWCet+b+ghPAR8Mv00CbXBMZ1DeO3fLidSpxdZWXitmculc9lZ7fmdrQ==","signatures":[{"sig":"MEUCIDXZzdst2YowBfHlRpOJeloudPkDlGmqlBT5tmJkmPkrAiEAreEg/EBD1+d41uSaUYklaEIyYQpIbmMYcGgvxAj/Q44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq0wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVig//Q8+xzj/cTzXqCeCDFdczL//2As4CPGAsat46JklyXiJcw4SZ\r\n9Mclzh19ayJF2jcms9HNhV0ADG5RLKw9tAWdCV1nMgRj5Z8iIbLzFmVvBE/0\r\nVOwJrEibLV+bM2KPzdWHRMl6j5Keiofm4nV09+WRsncEnmoWY/6JgULDzaNE\r\njjgIT941knL4viHTm5/NCi3rdZgEBb0dlx0ddh0C2uIKuRNnnPCzXHqJIxXp\r\ndxyDqqjnyYJUobbm4QTb38Vy+tJ0zuitF45ZVAQchY7Sx5wQ1YhyVe6m2bHI\r\nsP6BUNJnrYxnA1XxpUdcStOXkJl2PpwvTCrbiVxh5eQwwviE+FUOKYGdwhIq\r\nPhGAcfUpwtGvaixME/oWlPKJvIuIhsHPI58Z9W5x442D9zD0h43+vxKeUIx+\r\nD8sSiYsi4uMJZoyeNUro8dw//rraezV2B07244+5jn6YA5fH+akUAJOsfPUy\r\nhVtxxk1QF57kblIWI/oeJ+JGHAJEc4Z/srlIP/PhqbSJwSm2ld9nBiDHUkBI\r\n34nw5GioT3Ki3slcX1cQst9YSuLHozVPOBvLI8t37dxEySnQphnCBFBZL+qX\r\nkZEoSpRQpDbGLfkkdodgZNK+W5D4lFQ3OloHWTTFbifOduq/pesGHstMy22w\r\ns6asYRMr301ktZixF4KDvbjIwU+wg7KzmHE=\r\n=VpWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/list":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/menu-surface":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b1a6e3e88.0_1665576240635_0.30221143642515624","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/menu","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c9b1a31e4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dcabf8a6ed5c8993d8ccc7c5b9568515c8cc8a3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":38,"integrity":"sha512-dgTUc+m0Rnz86u/82KlzPn4EJEgK++pRN6n/qnZOTfPwBkUfSt22UenD9mgaBXAu/fyhUQVKOVpLNnOpGt3bVA==","signatures":[{"sig":"MEQCIEe/L1w5AAz7604B9old5FEBqooDIz8vn44CIRPp1aBSAiBupRhqNKBXF15+JtbaXPyTozQ8zfd/ZQlvw88K8kqxtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8sw/+Pj250VvNyPlNdB0hpQb1jIdehFU6xcA7CfL8AE+ucOU9pree\r\n50Y6S4QsZ5h8r+O2HG1UcFedD/p9y8lfUcJFILbJZqSPeQtRD7EXPDYt35sF\r\nLn3b81LJA74nw3aFH+DhBoZJe1u9i3vezmVjDQh4yQqZ46+5HcSUtGQxzrrK\r\nuDs10GREzQxgUc1oNUynjrzdAW7zGEFJ8qAdN4bsd1yOFHoHeGslbStrOU0G\r\nqF12Pjk7Beyvwc2jDbEjQtNGfHhZuuTG1rR43PY/wSej+XnZaoRVEnOHcHJF\r\nBzdxgLJqzd1NxwiJYRUMEAc2e5f28pBcyr7LXeBaImLmPDEnBIuDByBC72Ld\r\n1gbMUdNKA2cHeqafPgiN9ilM3TvSOafsmUX56UMkwHnVTUkwhomAvAdnh1c5\r\nHFJiDTF7Yf4Pfpgj3HQf4v9wkQpOck2rLxNsIo+4hGg6f208qcspERMnB96K\r\nAadKbVbbGsgIuNmzEURSKwJTlSNPH7VwuCKHv2aFmMuGoZ5kBHM5uZUce1AS\r\nfNImM7Yt6iwjascNHN8ajLHt7SCg3xHxAGtUqPR8oBbEWERC9/gd7NtDdivM\r\n6DDWe18qfIZbDJ8eTLD8yefGzSFWrYXXO58UxTf7ZZ71S5GusWPDVoyIZfUC\r\n4flZs7OFd898ZqQgigPQe5TlEnPSIJSBBBQ=\r\n=8wt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/list":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/menu-surface":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c9b1a31e4.0_1665594011789_0.24094774787910866","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/menu","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.13e9b0d1f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85e8346592d4368a686d4c5c1867dca2e249a98e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":38,"integrity":"sha512-oWhucwB2Hd0VcmUMpuY2i9f+vyKkJueq+mdkri0J876f2OLUwlnr+B5QP20CCMJQPJuiq7LMowr5b7QNIwRfvg==","signatures":[{"sig":"MEYCIQDBdl+Q9YCv2YfVCslBP0BtRczDww/sff5HBdktu9szmgIhAPhVXlNzWa7xMelPjVOOuR6udBTBy4E2iNP01nSyRFrJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxQMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoIg//Q3Z3zn/Bp7ObTfogNFMk8icSG99Z0joCFer45kEqzaNpDGGp\r\nXntk305SiXUZ6AnZNIXIVqZ3nWEyLG4c0q9fzaj42Cq5OZGvK9urtJyUSTPi\r\nAVJh/BIeQqrMbLUT5tlA1QFwGtm/qwhVicTw4ukTVEm2g9LkdYiMS6Y+mOVb\r\nUZMsjWrQmLR/piGsq4ugkKi2WEzoEnBj8KdC/+J5umvYzol3oHcvt2uP5AnX\r\nitUTg7OKjW7kxttFtaskXITWath7fSJ7cBNiGolQFJmE7Y3NZHIeGGYEvqXB\r\nwnryCy2rRaEGQeKmE+MaYyRqApwCllU9S0Rx2WKOkchbBhAh1sfQgGorvMlG\r\nrn9Eo0b1KpyW9Jgfld6+UIlrHIl0+IchjqUm4nRSCBdVqQL2ZNlfBfbiJPvw\r\nSeUzqW41x2963zS3ZVM6O+FNXp2RzvdEw1oYe+msFVAXYdi8geNzgR7oZNYk\r\ncxymq19f1pBTo89PYwjMkNwL2QNo8Pr4YGE/Dss/VsP9CG7KaJh59kbu0naj\r\nc0WQE6fbCT3Icq0PAJqVB+O576nDSq/hnygGmJ/pgYDaCMQ8/esJIxJtIMz/\r\nWztF6TEwl16h0hArUa/uV7v/b3GhPa6RU0VWQrVPpUSVpF4+OdXfMUvShoxD\r\nKPh4mui87vipn20xnlMW9nzE1nPq1X/zRYA=\r\n=ph/N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/list":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/menu-surface":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.13e9b0d1f.0_1665602572154_0.9715904341175126","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/menu","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1dc797e7f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ac24f71da8cc602d86e66e3817ea1703bd5d0d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1dc797e7f.0.tgz","fileCount":38,"integrity":"sha512-nO8WZ5YRGJl0QBY4Xe17OSke7ymD8nuFI5ejq3jlV6CV3qVkCph5MxYbxqm6WarB6NnT0F3TONFGc1YU2wrJcQ==","signatures":[{"sig":"MEQCIEEeigyzFANLWn0E0lcazgX5E+xWCwdbi0jEQrh/CeJ1AiAVAiZcrxvOb8sAeBygcLAPPs7ePzNf3vXtwLVOYWYMbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS9AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq4Q/7BJXEVPcx0o8j3h41i+VlJ2rRtNoKNu6RwkK2w9rvtQBXah62\r\neWoqQd5QhkcLWI16uUY9ryy9Gx6QaXHQoik+8fLvz6zSLKqHAPpCISpoa53B\r\nosPXKg5CuH8Px8r4lIHhybEh8h9GcrTao2M5iQMRfnDJItOhMbWHobqfpcf0\r\nP3aAG7O9AxFIoKzs/K3hCy0Dqw0GmLZm7+Fj+zyRieAjzWB0ssxZztybjE1B\r\nODUsi5CMaGXW4cW1jpEGUazGGYMGMQHBy8oDv8PbJCFO63jBppGMCaMwEYZ4\r\ngWWnO+LGja8XY/yx6l6mSJbd8snNNJJ0hVZAh9sdDmY57FSaDAjtJt975VHN\r\nbSCyopWsZJe9VgXaewpI2pMwE7tPmIum6ibcUch5V+8HGISzj3jEaRi88H7/\r\nKBuUV5ytPBUjWBk0jl/kfoaAXw+Ef3wIYBaJoPrnYMfXAj/8Tdt583OTeoL6\r\n5gSK6hRpp1eSRbTvpT5X/97vwJtx6+D2VqsUfIdQpHeJ6Gws9oBloDFzMb0V\r\nF0IU+CjlFvBADpVkIUjGU8bTiJqBEc3Nju1yLTABdlsCkCoKG1FI62c8gNWq\r\n0CP7wjRNWp5jjwmVwhY+kO5DX5LG5MFdCGfC1NSCAAYyqgTy/yncTfHsh4Pe\r\nbcNonr95DUfop5jSd+HMJzkMGpqFvGmZMh4=\r\n=WqTg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/list":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/menu-surface":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1dc797e7f.0_1665740607977_0.9412584411966234","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/menu","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ed4009397.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae3ec943da316d614aec7052278ec2747bbc9bc6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ed4009397.0.tgz","fileCount":38,"integrity":"sha512-8x451MIUM1EZ8nxNQ+m7iNAbLlxmUNfi7F2WYN/ktSfwh2H5ddobHYJDEP3t6x4L3FYmLCuXw9sumucG1q7QAA==","signatures":[{"sig":"MEUCIQCcLyEcJuYJSK7OD1wd5aNGbC0SH92BysoFxmFvBasSRwIgFo27zR1CAnyaO2q6PC3zXm6kvv11W4RW1dPivjU40Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHLQ/+Ot/3V8xeaaCivjut8epcMy4Jgv7I7DkzbuCaOhshS8ZI8UZQ\r\nZgoxi+75zBVSG7E7MiL0dtDFvoCHGiKkNkE2eCHo9QNSJj12dPQdfd73W4hY\r\n6/9XQohqqqnMDgFLrHdE6AQh5tCe8iuUj2dKogDbNzOtqB1K9IKfJpt2J2jK\r\ngEMkpc97WMvmXhdGp166an0XY+uMCpNmY8ZNH513WvB2OnwCH0htk995knKr\r\n2efTBKO3ILUXZlf1KM44nlHzkTk2DBnm/hbCfK0ai8z9l/iVTvj29SQZE7Zs\r\nbFnzCj43UtPp+yYlE8IlKnnYz4kHSBj4ICWZaCEC9Fsov+YxDcOdVaoPltq1\r\nYtuNcstC/LHE3N4wbsYhmz+GPUBHtp8s7DZXnlT6wog130DI2DuGxCO7DDYK\r\n4PtSljmxiZeHEzcZTMgG1qaudRYvVrScN6SLr4rdKLDeePRTg4jNDLvYfoh7\r\neZBZTA0DMmILzXS7bC7i1tJ7GKUi95hd1w9zqfKqOumjB4dHyAiWlFhap9j0\r\nGjE+rbyinKsffYjoVPcKBmxpA3u+pC3tlpZLIuz9wR7MPZpwz4Eo56geJ1Vu\r\njnCAk2yHWbMt4jF7PskE3wY/VF3Og1NtWMrduXPdCCm4w+T/1KdgA95DRHNZ\r\nXDfaD2otZCMwW3V8/irRDgsk+pf8nJMO0a0=\r\n=A65q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/list":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/menu-surface":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ed4009397.0_1665766368189_0.6566509316551474","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/menu","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.95ef196bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38b67d338ac83e32424f5e0abcf806f0710eaeaf","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.95ef196bc.0.tgz","fileCount":38,"integrity":"sha512-vxIrE/gycPY6oSSujL0H+OFKLTWbf2wJl/fTKCFEeKHrUlf0OlUe1k35PXk1vbEw0xYeWGSofqaEAaI5hZiUFQ==","signatures":[{"sig":"MEUCIBJ1QlMQqjYACsNK/DFDSdZH1Mb1jez8bR9WUbGvW4CFAiEApHkqGJ1GbZ+9a0VEbZTFYPcf6cXBmzxP4VkXlWIurk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQCg/9ECIYLf2gjrV88xHkzfC6eswlCXLJQwS/y/cc9U2sRzYfS3S4\r\n16m8U2djW+lOvWBPVXjBiPmlZNUmrKmjwtf8pK3Lisl68+plr06ZeiOZLMSj\r\nMOVZ6HYxQGg4yi6ndHrAsosjh22jXFI40bnvm5KlmWDkBKwIdAjEIkJPji2t\r\nsQhPn2Y8PwdsvEXJTBvNeAfSCDZiUERAz0uOErcnBLS0H7wfK7AGl1PZ0A3V\r\nJ5NIxWX/Ur+of2EsOxuFfZbyRx0Q8CUKyr0EOKY9HROq2UGPqf0KnQI8+yL5\r\nNwGdkwIbMOMd4PH78YtQmRfZmCTzPrbqROuoxOXLeW+SqXjY7RYaDqAIBn3H\r\no9/UPQqSIaqqmZY7Koc0w+Q2IqYMqRfL3xKjgJO3xUnPFqMKW00BUoXl+Xp3\r\nKd3vcF/72GTmNcv9DUjua083PMowHoELrebfxLa9nXYsqeOOuEEPVlV0bceV\r\nYjJ+YWyiZe675+Zv8JrGQs7cL1iM1C98iLVoOppaLgRy8SZ9BxwrcLJ6WrUX\r\naEht6ERWNRfSgSTv3ry1RDZFCGV72W7rBul/o+bXS/5SORa4hv6QSMXfBPQx\r\nOXFcvCDNMRTqehiMN58Dz8vVIlPqLKx/5zefVimrqM3J97oXYvltZlzcieH+\r\nDwWXvltrZoMZFU1FnZAlX+y0qksEJKjLnN4=\r\n=9+58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/list":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/menu-surface":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.95ef196bc.0_1665789330991_0.19888766057082474","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/menu","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.13eea1b2d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03361e3ef49a7c1d186bbf063711434ae666ab69","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.13eea1b2d.0.tgz","fileCount":38,"integrity":"sha512-EZQcUZC9oZdteSAmYMFhi1+cfu8OSEca3vZSg7nHTq+9yk/74FAkpubHvNY2UO4t21krca7DvkXmw0IDf1OTuw==","signatures":[{"sig":"MEYCIQDJGHR6GMTby6zZoxvMVKp+bEo3HSZWr573zWyv/eqfZgIhAIUwpQ3wf0G43bxlIWwS04S0z7dGY8OaW9riI+2vLYEJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA5hAAorOxxHH+QvVPC0mB3xayW9u/h8z9eAmlx4AGUMtvSVhkmc3f\r\ngwyWs2DLe+3g69R1ZOHyrMIIafGDkcNY4F3sqYBCuLZ6pJgjaE7LWiQ9LpTe\r\nQ+KJ2Cq7uqkLAA6ZWKoQjmPkICDNh3kq+egJiapJ+9r6Uafk9ktTHXO7zFY0\r\nZ6ULKVbbsLclQ3N0n8X25+lB0hMdKqcFxcQS+sbSRdvNM90DuCec3UPeMpvf\r\nrRWhZsQuLGT4KK3uiUIQMeLA4cZ2764xWLItb60IT4edqxh1fiOPvP9Qgb5M\r\nPVYKDmpceb8H/wwvaq/8ZVYKFVAoLqm3IT3rr0PV/KZvIypnSS+o01GN97pX\r\n5Q2D7wm2tGpcPFEzZ1zhK4EHfCBfTy0H0o+GzjsD6IDu50MyZ+GJKRDWb9M/\r\nJVlBpfhNe+8ZEKb1CooBcLW/FnpQZ9R1T6N7yWYF7/sArnvKJkKZM280z982\r\n1LpRVSWrxnMk0FfFE9fFd780Ae1CVPor2T5nCQcTrSuC4XMBcd9hZ9Wp8Krm\r\nuKSfMk7UqEm/DLsXl7xNRGAHPmOhJ1kCJFt43gKZvT1RdewH8xqR0l1Zi2q1\r\nDz1q9go/NwUnteOTU3RS7K718jUg7Mp1hzmBmAbhTAozb9Lx6G6M42/tYAfd\r\nKiHh6BtRvzw47fbpaOBR6vtSYsiv9B7nBvA=\r\n=egYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/list":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/menu-surface":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.13eea1b2d.0_1665978790038_0.541731660910376","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/menu","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ef9b2babb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5083c4b6fbef7603ba9c1119d2c137eeef5f3a48","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ef9b2babb.0.tgz","fileCount":38,"integrity":"sha512-f7sdqfm8FahPf8s37CND3ANL/HWZejSX2WJNk1VyZirhadw44FAU+BXMql19SMCEGSpvbM13lHF7jNuIfBwteA==","signatures":[{"sig":"MEUCIAGjJyFjAUV2pjEkAqUeFXH4I7Tr3aw0Rr2ZRRaY2MuYAiEA2L5yrrWQ3Ek1jLm7YbzqK3XfPZtvcsk29THntlO/AK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR4xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+rg//YBuEqZLqka9YOQzyKjamax9Gl0ZqVR1xJyuqzOdRB5ryV+oC\r\nxHGgSrhdgLV4lFiTskoaXo2FvWpJ+VLfvZ/zBQboMZLUE80UFQl80jFC63K1\r\nhr64V9dws/sNJDkFhOTqHmeEXQRunWV5vjTZyt4fJ591NYRkR+uqaC0ri+3H\r\npFGcaxBXCYd6/IzNNGAPGvrnI4vSJ71IakZGjHW4lx9KeYXi9jyh/h32ELGo\r\nP6KoUcA2DK5Y1rOZmdIy6UYV9BmqcQWS0VxgHbu9d6ufcbhGla2oafg7w5PX\r\nit3UzZWwqdZD1kDapKryM9qb/UUqGfFR78/AklsMxsCNniULsFswzZCqe8uL\r\nQaQfmC+LO+8ZR8akts07K4oidvKrAzl6YPbSgcMjTM0j4oqm6uwnnZAyvlR4\r\nMAxS3D6+2CRtIQe7wiR2504FEQHxEob5UhOI01dpZ3kVIj1DpfHdBmVtKAV4\r\nbGYblbUvzfK0ruERRtOYPm7ufrSdQuBzwtkqMjR5cVDXbWDGydC4E5fVlnDz\r\nU0lmQybdaPrkqSbqjqbAbYlNI1O4iY2RvSeBN6MrBX4o+QDHYFkv0gawcwe2\r\nK6VFj6eJJmKNRsQMCoUZDuoyKOmdSsLhifIaa6BXRWYQ4JVfBA4VDAKtGnkL\r\n8h6KN8buplfuOAdXIm0gpW7ONMgLRQojDRU=\r\n=NaDs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/list":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/menu-surface":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ef9b2babb.0_1665998385040_0.25432673739929124","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/menu","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cec7fb987.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8fa88003f0dfea207a6a69dd6c43723aa2abac8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cec7fb987.0.tgz","fileCount":38,"integrity":"sha512-LUseSLM2kCQqtGrfn3eJlWwHQm60mfJnFAronH2KdZ6CK+2pY3rapwI2OLZdG/9VOBN1mZXToyD2gbjQPc7Viw==","signatures":[{"sig":"MEUCIQDziRywH2Zcnp7WcZNKg4BQtfbXqGSasTyke27gmdnDpgIgBydldUYTMn2WY3znnBZCrTs2LL/swxmUe4yRRMlIPP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBFBAAgp3eEjV9A1socWFG2oOXqWj9RSDPGCUiZORBbG1AOdxrDBxj\r\nDlBoffQ826bZuA7vCgXRxYeMt1wonaawhfm+RAXqDqMdMfIpD147NVx+LW+y\r\nrihh8bwrqchw+u1UOheTXo7fivzn8QGWU6BzGR6EfN1I+WmEdjPoePupQ+sr\r\nwaCL8RHzK/H0wrEs1R3eoCQ+Ol92r5FNEXLBK3p7cLqIa/awVlUYdghXuAPV\r\ntbPAprL+NKxS3LFeSR4octbG5HZoVxHAbx4pKznbGzIFb0OpJAx+gbl3L43A\r\nRhtyqwnm+UsVEKPu+LMemhWtNVl4mBvSaeAOhE3/xH5mEjvhb9zkaEXVXHvl\r\nOkS1MFDNixkn60DKRrHFU4EdhIcYS0CpCZdFzS4UcNaMXCNqZnZLUs+0wQDS\r\nA/jiRzTUuCOUnNKHuF0FvnfCx4A2hsyd0xyEvkoGdnQLbzCVTMaX55RlIV0l\r\nlO9sUS1KzaG5yY53u1a2Ofs8yzVXvimNFyaWJKoy8LKVdsYM96Zgu70yRgvS\r\nwzD5869Gk5DfS1nErToCyS4Zc4C2EDOWq0DLC1hcoxfQ9BuchbH0a9r3r1Tt\r\nPg3inKWuc4mRfWy/C28pn69mpkLTpY7OU2VD8VH9Ud//I0jnEFpNWV9iMy7t\r\nceusWxNg+E9lkseeRkMgwdekKLzApmSu5P8=\r\n=Pz8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/list":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/menu-surface":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cec7fb987.0_1666004273242_0.7927842253144124","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/menu","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4fff58b08.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45ddf9c356154a5bba0bac24dff9f76f0d98f08a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4fff58b08.0.tgz","fileCount":38,"integrity":"sha512-u/JkZCwH02cZTvn4nUJqhJ9UzD11NuN9vgWuqxKJsMhVbgFygB4M+32o1AQBSxO6kBvMVaXHgZHwHMMUd8p25Q==","signatures":[{"sig":"MEYCIQChghAh5TTDOifJcW5oadIL6VNaTXZy8LbE8paMqCY/mQIhALYCvMCjn7sX/u0skfwUcD8BGsY2DijOT3myDS4458tW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXOjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkwg//dyrFoWoQUlD5exa3TYyfQAUm65zwp6AjMyQr+WcBAbRGN6JW\r\nPTgo8SzKCy+5iK6EvuFXK76q5yrsLCQWVj51Gz9akdlXVtmjCYdPei4e7kNk\r\n9gaZKaEoLh5tDMpS43dB8cv98VL7m+Tpw58UYniIj7HwSk1AwSQiX15wWWLV\r\nRMmakCyHR7uoE3v+TBQRAgZMgkwRWY9sVK0yWdtZP4VT4xbPP0djr2Ismxm4\r\neHqvXxI68H8W7Ig251OQMBXWlToJAe5PiR+hjwc67doWN5drkmcodf7lA92+\r\naEdFBadQCGLjuNtDDTH/z6xRY6M+EjFZIHKxtGBtVmKm6k0Ve67Rf5ekA89V\r\nlp7lMOfM6HoZj9KNaGHw8P09Wc+yDhZ9WaZ8JMetwToNHVO8S1jr6KlkUN+u\r\nh3f2XTcleLa6sBLnBG1GLMDlbxU+nuLWkxRbQfUNaEiCuzwrgoduNsbgCzqm\r\n5oryP1PqjGyxQl2nh9Oe/1+P5izUT3Ofa0mXKy5kY+xYyyuKtxRWgH44upKm\r\nitfvmr6uYjRl5+Zfj8D6QxqDKPZaEoq7JE3JGVEl1wEeu7IFeelaobvTkcxS\r\nPJqUFaRa2vaZD9+iiA+IqPkVROfqWZT0k4Jw10xu9BmEjVUx49GdOmtX8RZw\r\nCnxPeNy3Cboy0W1gGlk3Sxr1cu+IhwEhas4=\r\n=aGEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/list":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/menu-surface":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4fff58b08.0_1666020258778_0.8544334391799151","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/menu","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.587d8f871.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be2085721f533af98979b86334b486f29161d5a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.587d8f871.0.tgz","fileCount":38,"integrity":"sha512-RuqPPEQql4arYhpsdqpE3KX9pqLBMo/15iXfvGeZ5I1p6UYbfniYtYb6VJhM/MhO0NmsQr8jxaCF2CDsjsG1vA==","signatures":[{"sig":"MEUCIE1Uhqcui5A8oeGHuJ4Kkc4w8X8z4q7RLyEYUxm+OlWmAiEAxcFeY5HFCIxincod+1PI5iOOQXkTenS7xMOB87w2MgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPTQ//f+tBZ/geKrIJZYsZW9CGe5PjiTCUWdN5kQ+9kCyOEBkXJy4G\r\nArDf7Ohhcn1Cr+jOWr9IIfH00NETiwYOxofTFh1SU7dNgyO7mzs79p116JzL\r\nXF1xXzwQdL7c7s/5gLEtdzb9UFXqH2nCyZobh78qZpkdnx1DlkkXq7maQcAx\r\n2hZGWhRDyuWy6fxB/Kp/FsvdsW+XtLYb4piQgYlaygIUSrHOPmvoqVCprkZb\r\n6xOjA7L5coOKlC1+KJdNkv8LcAU2GAOKSxTwzMGnMeL5tBrGErVvIMVRQsWi\r\nNaUBgN/KnAiR+k12g/NqvHpeDOSpsa8sgmHw50zKKzBEOEw7hmnSGxlpwnGO\r\nZ49kFIbBAGKThviFqqK0vZRquLmAGAq10+cx9joVJkliEy/u6gJdIyZL73+C\r\n4gE6X+jzJ5GE2TkNKvB6C6RL5jRY6xcDomwEy/YV5VAgzhVkE/8JnX5+X+dA\r\nhXBKoBRtP6Nb9nDfsHYkHDV53X7QCos9zqP7NWBAHIF5CDJcxp/0K80THVvu\r\nQ7Ncsl3+iqQ0Hp7NjV0ddJPuWZv7zQawM4q3k9h9Lp3ShRWJcO22EBcR2Fgf\r\nLoDxBC4Nwe7t7Eb8NAT6SEHX6LmYcRXS8jOB/cXDXrvA81Qshm7nh/dTCA8B\r\nTNqAZg6Mkw9w2+stCA6CGO9DQj+UlcI1CXs=\r\n=v2G/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/list":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/menu-surface":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.587d8f871.0_1666022317503_0.8631958750338495","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/menu","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.edf4b98d0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde398aff137811ba1e5bf1793cbce6344aeb7fc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.edf4b98d0.0.tgz","fileCount":38,"integrity":"sha512-JcxBnkLCkPiuifYPuKUiIA+SIsgxlgi5iLNn66cF6lcZRVsAnV9Q7GxXtQzLhaSsq5/WZzB6cLlEuWGvwqhz6w==","signatures":[{"sig":"MEYCIQDSKeFoqEs1CfgCa1fke9TFjgOObLONkZqE75GpgEcuFgIhAKvocnHexvVXZTTH/TDTsei5mWNlHJg3EkckwEZOUM9y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZyA//TaifswvjGMGiExxxSemN3OFHRnwFZRtKEfyQY5kOXYAvWmch\r\ndOm354ndO5ozM3Yow3NI0hTw9vstelS9dw1F3gAMzoWso/0vOJboboA5/coI\r\niOwKjCpnI26O0Tp74Vc6sTYaZtbomMapzTjTLmXrkQQdGR0HImz0iHBvkyWZ\r\nNzODBtWMtw2Mh5xFc6KMJCWGZKnH2GTKUCne2YCKR7W7xe0XYyz3j039bBjy\r\nBHRfgvJMUYMMFbvsudEb6LPaClGMo9p8G1VmN/L8WFgqbOE7E04bjYd/CMhz\r\nO3xpVR6mmkjLJQnvcgrPs7lMnkO/mkhOrw8J3nR0VQ7jcsANlgBCXlv0LC/L\r\nffvt20pkECMXMXN4SBfJXY3630yNgQlmvO54mo4CdcyFP9TTXt1kY2mFILOb\r\nlEb3tre11OvpX4hNucZuZfRJFAn6Ywbdjk86UaOuth2LD2Mpvf19FymwOM2S\r\n1YxTzmf5JeNSKc76a+BZ7uzNED5gZSiikHlQOmnR+13DkKC+FdF61N2+9GnJ\r\n4CLyJ88w3UUQbFe1RBEoHh/HE2y6mN1qddBGl5RxblTaEydI9d1PVsejxBQD\r\nhKWH27RxUQ0mbkJYcb32DidCMQr+VyR1NjOrMfSqiQOQPxfHH/ydt0L1S58f\r\ncUZS0J+ueHBEowTzziwnD1lPLleNgveqj9w=\r\n=bZBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/list":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/menu-surface":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.edf4b98d0.0_1666024922911_0.6326175508087979","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/menu","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.024ac5f16.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d60c435cbe12a7164102c5605e8de39918f06f59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.024ac5f16.0.tgz","fileCount":38,"integrity":"sha512-lmz0SX48Ut+sz3QyDAABWQhbG08+B+4vITFB1POaM4APlmlAaH4+wauxycfSEuU87LJ2LM3lYdfCHASokO8Y6Q==","signatures":[{"sig":"MEUCIHZY4AfEGPg8MSjMx9ViFAOXCWQk2p5dMLsNy9LS4Dc7AiEAhqf9D1K28dGm0Z0ncVVAOLLDBrnqlsXvGu28U3uThp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdqsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0jw/+NtuFEWFuAZmINYb32vyUje6uAUlyc8fSrF3KFdj7oohAh6Dg\r\n6lfPzChKyfOSpPrGUOy4FKH+luDHUc1Q+W6xKbnZEeSoxRXm/eg5Dex5NVU0\r\nnRYwqys+VjvwnPTZQ/8al4lh/9RwwEpQ4mC1fekEKykXmquV8MwPlxU5ymRW\r\nn+ZXjvFp7qHS+7SMo8cpc+l6SEMqEyOJxGDezBb94FkI9wi09rDpHX9Za1Z3\r\nBtX7Ljd8cfSEVKUllN7hOzWwfSVXTaMPNynCp3IraxdmN3am/aWII1Lbuo22\r\nuL2RTPKheal/XATCmBPzvGOdK8Tif+DR8e6rFqMPIPUHEVVtYJydZTeBFdSF\r\nDmX3ZUfkx5Ce3+b+dyQU9ZfCsDx204F/ZEhU9ZEL42FHc1CnLTW8RH2Xy9+P\r\nYIoPIoU406j1ipttB0SAn5JFwXLegOaR086Uu1gl9aZiFm6Jvy9h6YMQGxc8\r\nCFof28oFGfFjUlFq5sbRHpOniDf3T+Xy70B2TpdMHxwCe37R8x9TSLU9pMaN\r\nCVfbAcSZn84bNoPs4nZBNNOLMPBAtI3Cz9Nlecxse5rMiLS9cwYasOgbuz4G\r\nM+BooP6WBrpHJJ6FXP+rt8Ak0iUeFspvx8Rfs2MzDKEOrtjt6Q/jl5vAUStF\r\n6ol+iHX3Zlj9+oCzzT/fRtFGwE7DKhKL/9w=\r\n=bV71\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/list":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/menu-surface":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.024ac5f16.0_1666046636266_0.18945492497817362","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/menu","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c8bdf6144.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"091b6a9c98df002c9f130fb55416207783fa5eef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c8bdf6144.0.tgz","fileCount":38,"integrity":"sha512-78+O23svYk14UUFVqi4aBdGMjmrm522fsbqiRxdzkrxAhwIO8pM+nVLQHK8MgdyYalwQUvxkE3laezAdAl14iA==","signatures":[{"sig":"MEYCIQDGCG0q1aHqDmzBg6q0zdCM1K8HX3T2VDtQ9zvmBiB8kAIhANlZytunakYxG38xKpVRrbMb6CjM2eCqDELLLZkh6+7h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquBw//ba0LoyMuq8cTYON/0WgaAeSa6hfAd4nH2d7cBE+fheZRoFji\r\nz9KBpZ3hn57yqYaRWefiGyzZTNvghzM+nXz9s6zlJQ+HRntOYDuI8aueUOko\r\nc55v6sfnv4jekU1uuI9EiNXD1lixqOn4d+QtQ048L8uJGwhi47QlsdLK9U4a\r\nlSKvcUKckeU96BgZlDHybz0628JujphhYj/K2SHf7BCClIHiXf19WgWwM6eO\r\nJ2jCXzd11bAZFkm85bh2rPY9+bguBaH37u3EgNjhpTEyjpbMa0eyBJBXW92N\r\nnRwUVSzcQsps417Z9DMdz6im1SDIbSYtvU5ldqpZGTgHS45puXIksBr3uwdg\r\njBWXGoAxzDHehbYzkKrt5muADxdS76bJ0aPL/ElTtSz/wjhvLermgEm0t6E0\r\nNtZSNhAvsCHRFhwC7iddwloXHM9Sxqpz1BtidLTI3wA0nR6J5Rcs629sTfK6\r\nGAhslkEO0tLehOtrHPLLKnqMV5F9RpDurHZ9vn0MGeT+GmAjwcllX2lFfSr4\r\n0txGBZeLFTb4ctdQRpTgn07RzGC1aHPnQ0VNj4rHQpV5SO2FHOMiB8I1lV3P\r\nytPyg163CL5qCYZHjXm4DVpcfGZxjDcAW11CcGI/C3kShwLNRQwzzqyq/Sn3\r\naZUepzWcosY5OgWpEQ2rQWKoi9PI72v9KFE=\r\n=s2Lg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/list":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/menu-surface":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c8bdf6144.0_1666117499160_0.42815735842241365","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/menu","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bacda4885.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9024912b17716a42370b867034dfdd59750972e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bacda4885.0.tgz","fileCount":38,"integrity":"sha512-WyoFq9ow8+spEdomCaWcztfCIICgdyFTufSu/Tb+3vhIPQtxXZ6IYkfZr0u6YoW/ZzCxhNg6OOyInTc5Us17Hw==","signatures":[{"sig":"MEUCICCh3dzb5Z5hBB30dY+1OofT1IuLInpw4qSdX7eztJyIAiEAwF24bIT4WfhpaomJwq9Y1uAM2FmZPmmzsnvIwBmPmXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvQFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr01w//W+Cpttd7Mu9Llx6Wi95rwlSvmTmrp/oxUEo40mLewszgH/U4\r\nYNgb/OsLuOQhyIbT+kGWCO1MY3kOoKJ8gJBxDSnT5nOOJ92wAlSt5JWzs/nj\r\nhjmS+fkLnMiGcAfJVMkEcnXc1+rFfulyc2y/RmU/hfs8KE9OjresPHxMi06Z\r\nTO0sHpnXpvebPGOIQGiKKziuKccVlSJLdrEbtSEG933toXowt0Z6fgNYricA\r\nliS9yleZNVH+3RwEs6sKglrDDV1W5+uKnBxr+2qCC28KalprsBkNG4hJZc5n\r\nUAHw/oxpf+M0xXlEaW1b6OtjGZACVy9m1yg1mDgB6nJihpn3kH8mx7/SQ+gE\r\nk52lQI2qAYKRyrh3UVH7yjsgts7lxKMJmdXwmKfPAWVHZc7aDne4EhMS01hH\r\nVUeO9vfThMNU7nvyxiBnehmScIUTF7oYGyqDFWUAYpQ2tv3iyhVjNvMkTXn5\r\nlPCtfQSYXR9YoOn06diNM5ON1nXUzJ/OVA6vRsgv3bFK2ljlOUyMMF1gxGey\r\nyaT2xqmHcFmgar5JwOzQMz3YOzSP1cpff+7irAyzVyXysMJlrCAOsGe2DbDW\r\ncUQ13glbVNxna/vutteL1CWkfJUj3pS+vX0Jg5BvBifq2HBtHWXMvobqX7xf\r\nysrpTiE5TuXvoxSpwx0mSKO0q35Bg/a0isw=\r\n=wS4S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/list":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/menu-surface":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bacda4885.0_1666118661562_0.028758822392251027","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/menu","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.92b2556cf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7bd12808dda6c940cf402c3ed9c65ecbb6a17b5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.92b2556cf.0.tgz","fileCount":38,"integrity":"sha512-A5jQGZ3zZZzUNmJLx47VmAr2f9SBYEAfkBrA1gWLp9E1nfcNtOHx4Y0GSGLJvM+Z+cyeoEKSAGra0xuG70BBPg==","signatures":[{"sig":"MEQCIEUGwZQ8iiM+BD/a6OTyjjtrQhwb0yDKefFfGL3HJS3JAiB4k7pmz28+8/vGy76dxfVC16pPqfnuvwhdYrWmBgShEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiJg/8C2chmiTyZv0SetcmJx6RUsVeMl40PLHBlMi+EzJg4gtOb0D8\r\nGJiDOj1qBO3bJd/5NnLkmoh+Z3/KnUJGE05NnfYfCIbbFBFqSi9qYgHAFjmh\r\nxITvhqayMTj5KkPgqJtZxoUionrJ4LiaTYxCi8vQD8d+THG3l+HhmNTmKarZ\r\nE+2GmCskj9VGiJPPf32SyCb62FIUg9CGi5xIRed10MxSYvlji5MvSmZRbHvw\r\nTGcuVCcQ+c3bQ1XOsfo2KqWopIwvQrKZPAknkiKDH/EueOZHBG1CO4A5AigP\r\nWYfHP+YmsV9GV6O0FazjE13rExsZ+1KwFOtnj4BW/JLKVL+ybzTUWfVsxFCK\r\n3HA2po6kTj7IlPUUAk+N4uDoSEGBrzh8m3n2jUfYp0YmCWdjxhh+33y2GTNh\r\nerDb1ohY8PpwwDhsnHYBAwyATE58aRv7cH/8PQdZDAlTTMHhEAxPbYL62N7Z\r\nXh1BhHliffnXPZjxd2FykOyJsE7tZmPPvlmextn/n299fgMqPRQugcO9cYb3\r\nllgv1H8hdRzg54dy3eJrJhxzDw1npArFzXAzOebqtwvRIHBR5BVGZEx+hhny\r\nfD7Lrwpsh9BfiWOYuzvQMTCKSk0ziHwyKL0E44Mln5+TueGEae28jreAQeym\r\nm8hPLPSOYVnXCvjv7Rm+LL3FP+/dJPzO3d8=\r\n=cirU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/list":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/menu-surface":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.92b2556cf.0_1666142096721_0.3392259149503951","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/menu","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cc804509a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f436dbb5f2745c0c3c6b1c665d6381ccad075403","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cc804509a.0.tgz","fileCount":38,"integrity":"sha512-GKgwNts7ra0orrxUXSIfWfEgZBxulxpakYN5V3FSgr3yLsEnqWRdmjIrW+rkz2GJcvgl33DPTjPVccc/0wSu9g==","signatures":[{"sig":"MEUCIG/LCcmhDD+l6Aq+7t3exPCltuqfChUDPoJ1iX8+jc2UAiEAwJdna0Ifv5GVUSz1kzHEPtMZvrKl1gkpRmSyRr2owV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1ByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/qw//QQP1EQPwmCNAVY5iNyqCA0QMdFCKmNMYFrhbBVsvkNnYQnOx\r\na/X1KtA7AZ5Ez8w44MClaKAro4LvKuj1NGHvqhmMMR1HWdRRxFuyMaB+XZLI\r\nmtB2Rmg0jSJf4C9SYksNUyEWnf9klPxbLC36we0ih6hPmQyHSdTkYXEewFxl\r\nE94Neu9bFIxoR7fwzSasVbt6wHN+j2D92W5yOTEZ7crsa1TMKJn+5KNsSIch\r\nNs391BDbp9sHezKlN3UcZTrkSznpwkx80O+yipeR8ikdz5u8P7b+KXjcZuaB\r\nsZn2Mdvn1v3iblQAB7uFkaeGk0XGU2/E9e/jJxh066+tgA/d1nNXEumPFvwV\r\nuQL/qh0Sh6LHGIz9n37yRMZO1BtCBhzoH9msq5DT1NvS2f+danHyDB9fXbp3\r\n/bx5DqJa5SW7zalvNCNp1aYkKrEdXXNQV5yxE35T/yudT6QRNp+CA/INnvZe\r\nXI8pYlU5J7dgS+POlZgOAYZDe50mK8RwoONfGToMVtYV6EvjRll+l3/ACNSU\r\nDRwjmGzEOPTDRCh28xg27acaVLHFrLxgdm1XfvlXyYDyK3kEX54wJYR/9fha\r\nIkN6+j7KbEuGuTmJbuJrB28bvso3jFUJ8K65ua8ewaSph3coTiZicl0aOzHD\r\nRNWmQ7vc+oWmIoG12G7sgZXNzMOR0oHCIdg=\r\n=rx/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/list":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/menu-surface":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cc804509a.0_1666142322058_0.2031530960760286","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/menu","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.982bedae9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e573379e0d35a3ce4e4520032b49fc54ff32c185","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.982bedae9.0.tgz","fileCount":38,"integrity":"sha512-8l3PFtem3gM9Hsy5krS3rvLm6xS5PGwLw6qQbK2tSFzY5BlTzTSA5xFO/B6Y7nuAVnWVgKDjDcuwzLwxPJn5dw==","signatures":[{"sig":"MEYCIQCs4Dqsni/uy8EyBb/JqYD7MwmFYRXv/rWfQvt63vOZugIhAN5PGk9Qt2pKtDd19sX5GpCazDxXJ7lQaCpeFqRK/j5f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1UnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzBQ/7BdpjSop3SOChIDZhHRA9wYsS0V4K0onI165WPiUtGsrkXcHr\r\nHz/d7iurneu3FJTAQA0kQc4Uy/cMUrzINGnkofTxP4nYOlM3Bd4tM/81r6d+\r\nTPzOF5dxocWJo2bPNPecDKPR8V3+qro08ySdUW4ziNZoswbxvukVdnFlnlWb\r\n1yUkMYFZELAmunUZXQqnLHg3DP1dWqDvSQbih31bzMytIC5z8m5nCOtsHAnh\r\nEaPu88OLmUWZlX4FleYI/6/dWF7IEbMMcgsvWenGVOB4Ro1AO9Oatupi6NdS\r\n4bJEvZAEeK2sKp+MtNWsZ62yt1QgnUmC2/yXh5ynz/CFbfROIflsunbObMxg\r\nPZ/LovCvesE93XVIx1C3xRiONPCQyi0kW5TQYiUWrbKQAaOdpipBUwm9qE41\r\nx/bo2pdBfmiUaBt3iuDZJc8RHqU/0lI9NjGAJI0CXejC7d94vw8fOAhBHIC4\r\nBkzOrINDA0Ku5OhFiu4GkSK4U+RkZPzqsMnRQo23xhQI1ZD82Feno1K6j/zQ\r\njIzZliAne6QFBVOdNHRptKqY1eWqL7HIMCXXS5URbc9BYyJigg2uBFuR9Lss\r\nOC7Pg4IbJwaJ5mST0Wp7oduCwnzllp4DFZjmT/uCl1DZf3mr8HZV1K67b0dN\r\n8HeGqH7LTxEA+ZqCY1nlfgbBEf2BTN7mGk8=\r\n=GAd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/list":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/menu-surface":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.982bedae9.0_1666143526716_0.6781299582281293","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/menu","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ee40081f4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdca64177b38187cc3022f3e3c2233443364cd91","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ee40081f4.0.tgz","fileCount":38,"integrity":"sha512-Bq8UoHAewq7nKZ0ZBRVVRWl/tv8ee7dHiAi3ATQSvCWJeZ88eW6/IMKbV5XI+r++x0lMSz7r+iRLmFQneW5haw==","signatures":[{"sig":"MEQCIHvf4pT8hh9JFu63gk4ozQByXc+QrJi1xPum3LEVVd+aAiBSHJS2JpUpKYz+KJ1UEXmqQb+m8z4JcCmX7uB2V2WrFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFpoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC+A//TXPFsyEW+Aid8+kUOujlvzvWORyItEUZfYYNeoP+wecZq63S\r\ntsKSeceNHXAmWSyzG4JB/kQ7Apd+uADr4SeEPLZ7p4TFswA2iPRHQr195S74\r\naxTyfjfTfuf1RlRc7uiUotTjCvYJwkO83gQmP5emEfQbv/4tRzQBuBYW6Sm6\r\nNviVZ7cBcKPXysuDMWWXGTZW0qSSdwyLXfuxY+RyTM7YsZRa4aW3kc0q/zNA\r\nKZBfGdrCmReFqdsdvx7TvFfFETBC6Y9flXr15IT9dPWolqEuaSVYffjkyTY7\r\nqlMHQt4EglDG47DnsOvxHn3kGQ1RvBeocgyDLE/vNBIHHprQkD7P556iQgDL\r\naS9kMnijh5tgMWbiAS/ml0Hid6kK+DLPMVpCVEK77+4N6ZBjHbfSxItER2zf\r\nPpTICC2WMbyjg0BZfDO4+8mqELiMmxzsRv4QJO6lkPkwdCEmBPv+0nOFHlTp\r\n1ebdfbDAhweQATSHGWRTx8uCIaC9K5Y9NoBQbm3y50PPRc7u2C67OCu6FhIG\r\nxt1TZHiANSJ+hOGvlvDOiMAOwJ7+5Wixxs9lsn0BaPUqWOJoGiDXW1Jqt2u8\r\nIOuissa85PJL01BThebQ2LIIkcMCX17b58JQ9eeyYna0KqBrrf9g9ifBFlsF\r\n0ha46nTRQN4l7LXcxYZfqGPfGjLFfNd2dRw=\r\n=JhY+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/list":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/menu-surface":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ee40081f4.0_1666210408509_0.4839208698468731","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/menu","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.98f1b54e2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7933721c8b8d2ef900081533d04a166aa4e1b1b4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.98f1b54e2.0.tgz","fileCount":38,"integrity":"sha512-eOI71PSrB+pvsZaNCpNzi6UMvSzec3hfn/cACAgW6Aer0XjWb+MtMT+isL9UbjXeliskxra93hpHdCbiZv6Vkw==","signatures":[{"sig":"MEQCICi8VO6FsXAfvPvHLRkGjoWghL3hUbz6vuGNF+yGvxuvAiAHXUG2TWJnaEVk6R5h0ulg245GgC21E7bD5UjRDLxusQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdKKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5/A/8CjbvdkBSYcUDvxfEbB1hI8UWMUqzW7e7cCpmjvg25aaS7BUA\r\nnMgpD9XukH9YlyM9qeAYlHJro4mhxp2JCTD4ZjvLieOFtqKyn8fVrZzD+Q6P\r\nIDv+4nes5WjRyltg9Y2iQqsdvF7dj0nVPCx1dA7fwqBvnpV8NsCcFAJv5Ej3\r\nLvMc8yApGY4xJALUo+RgB+iIekFkP7YG40bIPlwcZNaO8W6/sk7PwveYyeof\r\nssjTvKBdH5ckj2cQIqIuuChoBcUmw3pXOqLOYq+yBm6xzY4PH7pugPbhG2QD\r\ntNCwmiiMYq1+v9VU/PInltAx2J+F3+caz17P1W4f5JY6hGtMJYQGoxQRvk2F\r\nF+oEcr/vrQuDwJmSpm//XiQQfPxRCppgZ+tDL/cHZRUmujYZPXM4RZ/5h6Wk\r\njiWhIOcVsqO3eCMMvEyQvmgDiVH+b8Rc6vFtCAfVs0RhYtSHVqxzpB0kwq3P\r\nkO+ALdUTK2SdHQJPmarAs/SmHnbCi+4A4AV16jp6lT92OybnKSMsPqHY3YsW\r\n4nuD9U6LHBmoCNFmVL3aR2KqnvftiZA0XgqhW6Pj9rM+pzAE+9QXDxfXfyNl\r\nhQAcmd9MiSSl9RP7zRIP+KR/9I6IOA/EJCcfzawCkmIupZLTuUSS2z9QU6kO\r\nugG5sWcT+k0O9uz+0R1sw6nRSOQGN4Ez4ts=\r\n=V3/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/list":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/menu-surface":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.98f1b54e2.0_1666306698136_0.14232230090687104","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/menu","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e74b7ba7e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3115058715e93064739155015ea4de6bce54143f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":38,"integrity":"sha512-qW1gpO/bkt2mVjDn1rKy8aZqiQQKUs83jyH+gFZyBNi5/6qATg6pZaufMM5twPw6UGOxs7OP4q0UbLvVyosE7g==","signatures":[{"sig":"MEUCIQDjafEvxtsQ8Qqx/MTw9KVRW5L59IZ0MKC/JzdCwve+nAIgV+9851hAZEqzM2fHdpVwr1rD4cKukAVmjwa56qpWtcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtHJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOCRAAhhsNALLHwhAT6EecE8/xU5oBcLLkpB2Pe6xvhA9ef/nVUPig\r\nRJsxtY0M13TN6hWABbJ0gBKqar5s9RaJCKx48GWYki2X0uK63M6BRgt4G9OB\r\nkbEjYHxCm8YXrdyoFLd3gA6Q5bOwXGnA+DLxq80n1sxsGjL+f2aojPHLd3PA\r\nS61QSLnXLC16qwLKylUIdFret5yQtGxYd5KXsrnr4Ll5mG2U327xaPhNGRt0\r\nPnc9Bz+Z6Vn3j6wRCUUe+dWlaG3jYFMJ3IOpfys0kMKbW9/GrUJpTOgRaUmv\r\nfE8ZVBTSajeG2+V+uoWNJWKnw7xlpEFqmhfnN2e7EaIOQPlkQvfj1ArSseLe\r\n37mIwmd2YgwH2Xh44yrPzLwyZCUTwL0xL9vDImLBR7YsBAraOmFwHLmO8ljA\r\nYR9RePrF7czz0nPwB07F81FWZyEMDYjiNgiUjSrEFlyYkmVpcvSIBwHZ2EeX\r\nRqThe+TtLUjjx2FDaRDpDvdmFEmZz9EVL9S0jlpeGNeYsGka6YjwUhGcj+zI\r\n76fQF0jsI4WfZFXJvhYNclSezdXANvygfV5e3AUQ8LBIK5LN4Db/dR2PzPr6\r\nDX9Blm/TV8fv+oRV8YR56BUBgQ3iGhrre733or/7MeAna0rZPt+CEEOEmQfo\r\nvSlQza14fZqhyoxCRI1Z76lJnqI/zw0E7ak=\r\n=Espp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/list":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/menu-surface":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e74b7ba7e.0_1666372040733_0.3119575923387199","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/menu","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ab55c07d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"856280ebe34f5fbdbe0db77bca89bf7d0fe95c1e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ab55c07d2.0.tgz","fileCount":38,"integrity":"sha512-lJLwc1OVjqb7kNNsGJf8nQbUaw72K5ojTwEPaQ4n4DYSDA6brt6uEEODYLRoH3NQH1fr3zCpELFrO9IaungaxA==","signatures":[{"sig":"MEQCIB1Bm78Hi8opFGD6FbVvC1LC/HJ7IJfyfpdjDjcQW8rHAiAcECV3mhRJjW/jIvomok6ZqIWQTO7HDu1+t0zEZlIX+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDR5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+JQ//bWLUvUtoA0gwQhFHAhyaWpHIvznU8vh4dQ/Z9XAlJeCt/GlT\r\nPBO3AEKbocdBV0f3zMtwh2CTA74kCwqT1dWWEE6i90//LVRXDvgbHEC4Q1pE\r\nlETT37wLBXmp/1iaLvk84L+MQxPxyf6x2eKjHfzJufufytgJbfvgZArhxCiQ\r\nilOncPLX1QIH8tHBT4wXfYiEAV+PN9ONgKKRmA70B/aEAM9YshFWVowyM6Sj\r\npPKN/JOCBdFbocuZfYURN1YxKAbQwXxguPzfOM0JVj9DKbqkRMpD9ypH7XIC\r\ncYx/vIvpRUuYVpdQh4PbPogf290JmtlgTvLjBZF2ecKe3Dy6yU1dAC7jmOEa\r\nEKz08REsdrjfWG95xuM56fJrTffnQ3oWOI0xcRdJzOb3/AbHh4NtvIxMIJ4T\r\nVmnbqLvoBABGfNYP7T3V4WKbM1HgtIl6YtG8rGdghYbz0LQvP4NdX1gKLYTb\r\npsicY+I1EKUF6u7lwsp0+RjFxcrElmTbdOILevcwKOSf5IfDPLUs/5wYmzWS\r\n3MU2/bQ/7+EnH2ZCbwBhUKjTXBrzWFBKpKXvhzSI8Y5var72JEyOjX1mx68T\r\nBkEYez8KXBrjPteCzizfE/1NK7DxUgGr4KvgDr8Pa34VDBzbhUb/3XEG2Xzp\r\nbSV26BzKOW+b0ElwSSahEE1G3kvMteLZTCY=\r\n=TU+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/list":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/menu-surface":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ab55c07d2.0_1666462841377_0.6828744920742302","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/menu","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fc539db34.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3094b81a49133b487db565aea9f6777a0b06435","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fc539db34.0.tgz","fileCount":38,"integrity":"sha512-tTnWqtL+9R5eMf46gCfywhJIzkE6sajYNgm7hCqLyxkfc/4ZmCq7nVBk0xyvWjJp3WBwZoZgclWty36Cv4VDHA==","signatures":[{"sig":"MEYCIQC/gvLKyi793xL4z+k7m8qHhvOVnSMEVt18EzzUu14MhAIhAOVBMcaOz3SThZbu60xKUptGH1msd+l8VGUg/uUDk4x+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK+Q/+IXSHcLx3p/Wx1CoRsl7a9GHD9s/El1M5HgN6UN2K6UV2j1cT\r\n3uJj/kvnt1cDaBwZkIQxGt5PSkkwLmSJLjWMUXo/GC75PSVEsu0HxcdCBc6G\r\ntztWeEmrYn/eYcmUUS+975pX4hbjzGDdq+IsJGzhTzOiFBviLEAwdMcnUgLM\r\nDNQcviOtvWEO7aHpCa3bResmkCfAkNzim90nD6wpzPu4pm7PCHLiNXTYsKRZ\r\n7IJtc/m82HRQvB8nSRFRdHmzwwwnWJJjCzGK7E7qPftlBJEhV5L1TunT7+oU\r\noQ+EbINKbUuGwoK3kcQXCIJfkXNkO2bLgS40PQRoTMqWHQXn+RK34herKGEw\r\nwhLQDcFIGvuAJ0ygzf/2/NEV3RV/f/1Ef2gVf6L/sx/LP9uWn1JoFM/bzC7x\r\n+glgdxMhcHO6HrJAAvXRBHlJr9m2zRmko5Ry/oG9XtOkVaD7mw8VRl7y0QyM\r\nePP32cKeE5onjpCzSSGOqrWH9a0E0a/Gfj/wgg9amxeFLASInMEK0CVKGZgr\r\nm3RUjSxcgLi8yv4cJlly2ogmgbbRbdYmV+UtEjjsf7FHEAiWhZ1LdAudv/rO\r\n1uMs8WvrgSnMEXVtNCsh/WmTsCoItCuCSPj/CwS4Xip7yz/M9oahMAr6nVgt\r\nfYFkWSHTK91OaOY4bYN4nQBPeTE9o5PT7ag=\r\n=522J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/list":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/menu-surface":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fc539db34.0_1666638046687_0.9976712967275765","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/menu","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e340b04c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"369c9fae560c3893acb0750d51939e6e83dffe80","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e340b04c5.0.tgz","fileCount":38,"integrity":"sha512-OLjj/IO3IIsxsfZ8YXrX/es2GYy+9KEkKCKV8sewc8kMS+uLr1F9Jy3Me5xOikdfJpoO4uI8r2JTaA3oiXCH6g==","signatures":[{"sig":"MEYCIQCwo4sZ5ecobjMBUe8uJZF98slrpjnPtqtANDh5F3/LBgIhAIQpqjbpQFMpEO3AWUSvpR1DXEVA4YE5AhWDp3CDkEir","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozLg//cc0xCyaByOZbAn5Q3Kp+NbY/cZbyqPeo1so7CTJb6Gyjt/WC\r\nWSDbJK3RNHsrAoPs8FpNL7mrkUdJLqJv9j7VrUy6mcoXumrTYju9Ewp3ByE9\r\nrTrWNELT0xUrgWKYcYiEaPeA8eIeRzHqvBbjH3xI9kHzzf4j8NcxlE8M71bC\r\nve4ky3aKIykgRrBWovhtNvAjjnnKmXq2Z+QMLyAWd8ATRcfnCyDAxachbLHo\r\nyCqFK4QR4mJxoqyD3lEttO6iVO/0aP1yI1xOdneS70c63EKIUoL1XdU+t4wx\r\ngDsLfH2agrknlkvOpZxojpTzIp9BcV8D7QbdGcYslYeBLxYurvRt8wHZZPOb\r\n6RZTHMpSSva/iA9cvfFJB3x+fI0ajiYLyYrCJin0G3ipdcQYmueRNNcOKKPf\r\nlYumpod2pFokZF5a4GL0Z4inXjKy6obPPjlKUJjiwiIAf1hscwdd0swrYmlu\r\n7ramncIZWeOkHR1XudAZR9Y3Z67ZOUZ56LuHWI+fvH25bJaRMDlaGMYVNuzy\r\n5/uV+GodjstiqOYN4jPALvcUroaLJTTN9m12myEDIBMcti0zQfLGfYLMAIGq\r\n4P9AFjvS1RIMTEkYbqVnp4dXykQRBJpqlUmtowRsLJuwDgXpFlNdFbiToG/a\r\n8hVo3cZ3VYKv7I+WUtOGnN4+hcKXbep1HaA=\r\n=n/HF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/list":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/menu-surface":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e340b04c5.0_1666741596641_0.06488677071530602","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/menu","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2c1a8f8fd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4958a4512e9a623f4a206f5cdb242f5b063ca26","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":38,"integrity":"sha512-W/iGAwfzn7K6M0QjpR5+k2nFbbyamtpig1UUjni5uULeBJtgwLaGPh2RbxXvYLuZ3yOokFN7qJFQV911M2sLgw==","signatures":[{"sig":"MEUCICSJphjGdYmjIh8ISUtbqZXjyuc52ObwOjr/qng8unm7AiEApD3w3eBFbWngDPK4NWE6Ws+A7PHi1SNAzvZYhn4Ji9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogpQ/8D8cm/e4qyEuNQbt+QrG09q/g0VGrUy0Vk/t6vZ915KOIFMRc\r\nSbL5Lb7HCYGwSSS/tJsGQHKKj+ALhxBVCsID888fE98i/yAmm5DeAlEj2Jrk\r\nxEFsfHiUf40X4SkG3H1SyTSCZJB3FmDOUQZz5l9JjYnqdZ2DOVECNGfQKTlQ\r\nfysqFF4qAvVH50rb1mXyuFUCyxbfQ3R0o74y5GWgtMFIvt1cEQgdbjwV3s7D\r\nqkFi4tzUQR3QY+SLqMcE5p86bxiJcreLYBgSzdsQvWSt9RR1IOKiAdcI/Zbc\r\n2PIei8bz49reU+eTTlE35boV6MISnSi40T2WMPJsg0V9qvh2spsM6s5uE/4/\r\nTEA0cj65WgGjDhmmBXHF6lxvYLSVzEDIWCLwR+iTPn+BFEYt3x4Rifwm7XCk\r\nR21HWslBC6mTDNgEFwOIj2JFzC9A6si1ZuR9BloGWX5Z+To8pQBvienQp4dn\r\n8FpcJfGC3CiV9oLor+amH93OTymFHBxgYG64/evGp5Qjqw9L5ZeqC41lhxjG\r\naNFRpT1QZF4khaU+ItTTOu98Jg9T6Mt03Vx5FBhdgCIRmk5Xsb9TT0EsCdw2\r\nCyHUlskjaMp7fYq4Tooe06NFyvtYCkYY3SfFm6oKXh8yQPjNRP5GzC28Xkx3\r\nYDkvNvK0/apXgyRvm1ddjTn/r4atdcQO7qY=\r\n=60P/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/list":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/menu-surface":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2c1a8f8fd.0_1666805535248_0.07831988092561581","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/menu","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ecfee946f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065fa0093cd7b26e571ceab8654b67f95944158e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ecfee946f.0.tgz","fileCount":38,"integrity":"sha512-AKoh4CkyA5DPXoR2ThEeVnMkKM+PYhipbviAFEmukHIOcqWOzC0/GX0XOZUHegstCEvfpsUWT/h2RN6vGamc3w==","signatures":[{"sig":"MEYCIQCkU1J6TmA1d4r8Jf26m2yoaQOzCuKwbW8Z+hi7sqqOowIhAPVo47BtDSNul96oDSmVQiKFcPFU/KaI/jLP2FFhHSar","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZW6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFHg//V/cYAzYLnyLHOto+rBMdEZKmLjtoOLZ1NtjHzPHgJzNUrKYR\r\nIIc28c8PGs8gNO4rXg5HmRcXOqCHgsPEjdMgw8SCz7xr8Ls3sTbqK+6cQwNJ\r\n9JXJgCKd+QRfrzTLvZSxJcto88gsY/XUrMCjVLRlahDZU/C4ov/sDp0e/wSP\r\n00KSrhtdeUSK4EtJEv5k+KtR3nMLHdS7JdLkfty1MOVNpwWrz1cIH/4LgUi0\r\nEGxPXaMb7SfBPoFB3g2ianZK1zliaGjD9HoMlccvh6XSNB4aqt63pCda6IDy\r\nWyecrgJUCZ3kHNnO7+uIeI0AP7Ngmg28T0djY3ZUv4CzpLBpH3NkxOKuv/rJ\r\n1k3q8cIa9hIO9m+exKAndcSJj8z+uSrtIOclFJ2s+OEPesQep22A88l8nejz\r\nRWByqQXkhHQAhTn2CO/PeAKLFF2TMJIyA8Xl9D86Ze24+L+xdoa+mPEZ4+Fg\r\nmyu4dnUebcu2xZtH+uk8OiaE4MfEC0CZwljm9tEm7l2qFHlVRcN8Zj6nfXDI\r\nC/5K9l2HpglSLTkRVceFpKD/8Be3A1FEEcnQoAON8fT2gUoTuO2u+r1QrC4k\r\npQk9kChIJ9bJ+e1RoawnRiW27SCyZi8DcfW4jdnnfZcFAPci7axZK7Ej6UT/\r\n0KGcnoInJ3RrYFfBu3QfCXbjrkU1DFJlQ2s=\r\n=SvIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/list":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/menu-surface":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ecfee946f.0_1666815418518_0.9998688431450331","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/menu","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.73ca9dbb0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f86177a768024ab05bf9e9badf0f2e0d0f323b2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":38,"integrity":"sha512-wKzrScDR/35nDxQ+ej75+zVycQ9JYySJDKAPy2WMuC2FZA8IA6a1e4qY0q7gIxGwlZMFOOptPcph/JilXMXsEA==","signatures":[{"sig":"MEQCIDWrAJKp91vACIxZa0oSOkvppxnfWCzvopzuRkleAFn0AiAk/fy2kv1EngCAYt8q7wE1Ys6ejXEGdEuTr+3HEgKhhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAcLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHWw//WREUR1pHxTvr0MVyMtGqxdHP3ich6tVTLvwC4MH4c3FdQRWN\r\nP2Cju8hxEXhDlaThMeOVw7G7+a90WUbUL1Ehu90rDwC/tTtdz8Jj0J6VXBrL\r\nVOhyflFbPvqQGwEH4SBYQLNCM1UtGXf+TrHGTVmBGXCFvbbuev8DIMQG1XOd\r\nHhMCTs3mQa7XP1NCFS8hYd8RCp3WJnMPLBHR4FFsISomDgdqvlAdwg+O0CPD\r\nbLB/+AXD2lzBctOpkc/JYvUpJ0vspzMc4YqMtU/UXFGprn9PKtxFl/yggTRd\r\nxhtoTazokz+BaFsxcgoj77vk6r38g63z39SZ3tUG27uPsO3xKV/sTECqrlg2\r\nHMexJVnGVEPC3L/ZMqVPTHYmPSTEomrxcy2BdtaFRN1gvnmpinBOGCZOp/1X\r\nLk9LNKFPeggfWg5oQIg/XrwaHeznyk/XsGvvE2FL4QFN8/EH1byB1d8PRpkv\r\nSXOPyyBHvgjgGxpXXj9xGbcbud/K1FZtXui0WCQNggAXdFoNXzSijcUVE2jR\r\nrE/U30wnd2mrz6TYFeEcU0ZXjxNQrULOird+LsRJ0fcjXkgJIJqKGGg5tSYQ\r\npTO9O0hajV8QdWP2QG5jExyMBVokPnzZmB510+6/gJNXpuzhOXZbJ484SU7w\r\nDOPDfjSxplPpuWUkAmzY3qG3/ESqptEIm2E=\r\n=2TXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/list":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/menu-surface":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.73ca9dbb0.0_1667237643379_0.899848310261407","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/menu","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.357f2e5f1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df726f7a0052710e80a8f3a8641d76282d538a36","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.357f2e5f1.0.tgz","fileCount":38,"integrity":"sha512-tN7zzsu2PiMpzpN4jPyvts1+D8hvAlQV4/uJfzaFObM3dWZK+3JEsrmZPHf80XA4NviPIeFS6HN7tu7CEjbVxA==","signatures":[{"sig":"MEUCIB2Z6xJA/J+/9CC3LGqB95c4oAljUNwM68YcXRFWC3atAiEAptENl+7qxZM5nfxry7/spNOwcS+g5RawKIvrXO1IhQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBkhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJAg/8DeKFHGHUdvVA1ZwL4lzdybFttwRsO2ZjlcwpsDyfkm32qd9K\r\nWJvx2OTesWTO8Dl9JkH+7uUNetxZa5SHy12g4EGCpprvDnwdu5YQF/wUiRYm\r\n5eKMAoT4DJCP5xY/ywFkMWLr2C1eBcXw3fOIeE9FlxbdBivCO3CWayO41nPC\r\nm1R+TyQxVMsUlA4kVxEaaOIkC/hHtfz4axdy6j3i1n4RtH4tdMEPIyG7qJMQ\r\n98x27rKUrbDZStzRfMpNRKts0Da6uwA5JqK9Ts2+YKbmYWiVOXr/YUdoqKQj\r\naEd5aK1es73g8QmvsbauaeM+LYHrPnvpxet1CJ+mNn0P9J0FLeBJ1zdP4lq5\r\ni+8YS6FPVEPparzHUeC0WfM7JabnTve0eGgLZ1+iCFmYORvgLhWJWUII1jlU\r\nzu25MUdc7VkBYuAgvT4kcPImDHHOPBmofBCCI02txnEb4niOC28YnU7oYXWr\r\n5NGe+PgIkhmrOOsrHn0j5oNRvln/IzeSV5U1ZwGxuuxNEnGDH0DA7mm/oAtd\r\nojNf2sWaCuSb4HjtVvjlr3ZA9AsYgS8vzlPDT0jLgTvl+LL1e8S00hCBhy8+\r\nWNWoKG6tVONi8rAOeEbKJGlko/HT3Gv8UdBk8SscsMKOGyn3gSpJ2wii5p2s\r\nTNeLMPmB7TbJ6VczjSw5Rx2sNDME2QvlrmE=\r\n=NLYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/list":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/menu-surface":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.357f2e5f1.0_1667242273372_0.21209067660197456","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/menu","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.eb103d4b5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5016dfad9c803b6ae5958288045941b1005bd31f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.eb103d4b5.0.tgz","fileCount":38,"integrity":"sha512-PMHrqfZ/OKKQffYsfSPtJmzKLL5dvi8XWaU80hclVfe612p84DdzzC7woN29ma5ZyaB0x5RyOMCTNGTW+UjeUg==","signatures":[{"sig":"MEUCIQCo7d+ABfrQ8pLuy/KFpE+j1rPg5OF22Oo5/1Z+UGfpKAIge3xaTqJ6fHe49TtxYy4/RyYv9c73PdEHAyyCLsgqQJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCjNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzvw//V0ROBxIYNcLZ76+od1RtMg5XXMEfR5s6+PX2zIs+j3uRgSoq\r\nzdJ/8DAJS37uYGEHtCqoLeqQKTsNnvAFbCHabnV6mxe+cMQYOVoR/xaC8FLs\r\nAhSOVl/E2VnmkblvF//pCU54CqGO8A7TYB3D3W6gK+bRMeTs2kx54wVTthVp\r\nqrX/nGxb704VD39SXSezD8lnDsCbj7O38bNoYwkwTyPQEnybg9Z2840un8zT\r\n3Fi6/+JFQYPUemENSaCRnsVMJD3LxDQG9hQFyS+BTZjxZJ5HyywwhuBD9Osj\r\nRyGqpcHDcYmBbsL8Ox+IDjTVEpUH0XfVcqnjLWmGSX6mOxJ+45aUDOTXQKxM\r\n0+l4FunQJjkwt9d3rvXqshgkTcfiLxSxjJYVpeods5aipEjJ61P47AzH4aVr\r\n8feikm5HlvZsMxb66kZSfoVtOwuV0kcCMCGy931Evwxy1/9eE+j9WeOF0b7j\r\n3FDznyYvbuGgx9v619TEkVbJ1mx52O/iGlnUqT8JtBJxMapLQqAto4fQGMQE\r\nmaLfTTJ3J3vcDBeqDqx/L0FCI+mvACXfphSmlyuf9KHt/JojMAGwbx1cfY67\r\nA29VokLnOSKx4XKdldGhiyBgnjOHjpO6QOYrDcIbddnRCR6dE7F6+UDKRN6J\r\nvC3LcdZ3+TcadX1hJpj6M7BkHynDfr6Trmk=\r\n=asyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/list":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/menu-surface":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.eb103d4b5.0_1667246284796_0.48648083856378","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/menu","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.af5f01223.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f8ca572d661d761538273183ac54f68a97d1a4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.af5f01223.0.tgz","fileCount":38,"integrity":"sha512-7EjibsT/VYHBCVKvuXbFb61bz1zSkgRh1JePe6X8OPKW6jR5xU8xWtCCUy3UCiA+tE90dBp6U4oqpTsL+iLdNA==","signatures":[{"sig":"MEUCIQDJxNDSZTWTUfFlZXiCGPNdSVoHHETCGwA7UzpQhXwHlgIgBKDNTpY8Tk9CXXSACt+fprbadGAvky7u9HaB45pJr08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWeiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqroQ//UKAHEHvcCq+Ao9pYc0TFl0+u9AUTKGJclHsuaG0gQoTAtxRL\r\nE/EutZNZDVzB9rgjKTkXE/kudmHlcSTeUclBKyCsBJxa8mgM8+Co8MpdadDF\r\nNVVvL615ib5Y9EByLnau6UVGHLqrl0qVP4ut9Hl/HGIGPkuswapzLnPug972\r\n5phrUjl1+U1m5ULTD93fH9ZgKTrSVUUSD0LuJjPqdoxhV9nA1SBn4vySl48c\r\nbKj8eMY2cJ8ik/rnY1mBVuhFi9xaH0CuDD7zAyz+HiHfytUozsXVm+CBk7hk\r\nPhexKllxnmSwl9RgKcyf8mUu7evvy45qFasNk5X6M/O4GIpbcojy+gMhQzQC\r\n8ACE+t226fSWL6pMjUFyxQUJ6XhErbxU+hiLoyCk3XMmh2YBGospXTnlOwlF\r\naMPlnEcjiS3xne+nT4Xs/EAYVMjYTt8Tmx+Q+FMEgH4hPjJArrdcxXyfaNxm\r\nG+kFx7MD1TP9HMgzoNLLGfMF+bfBVCLV/gENQg1gneFZtCO/fpPQbPi4k2ov\r\ngHFtH1BH0Yp/swKGd8gTIJHa21KIQ0f7dX1HamkxHDUZccm7ii3lQJ/qraqr\r\nI/yG9FbvHDm98yasqhaj5TZ7KpkHW4Q7kkkcqmYbXdhmINC78DK3F20V5cud\r\n9AXSeFlYc7YFpAD/jmDvXec8DbTdlb6JpJs=\r\n=I9/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/list":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/menu-surface":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.af5f01223.0_1667327906717_0.9451523452913433","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/menu","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.58733ef41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d742a2233f05b39eb0fb2aa3ae216f26679df9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.58733ef41.0.tgz","fileCount":38,"integrity":"sha512-+yaXS5Kwu2e/oh3NZimnGCotR9v4DFzA+v82F8segDi5SdTucvZQhES34lMWNZevxQFVpYlVGRrll4krsezp1A==","signatures":[{"sig":"MEYCIQDEdV1qxGGL2l+9iHTJ2IcPUS46LU6KHiJInR4uytC8TgIhANhjXjkwmJKPk06iw9qTp04UtBpvHDmrQ6s8W/rF4iNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrMEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2GBAAifvGLgHNgeBiJ3DGNcZDwldt7+wbfEEC20LY+wUIemk36i94\r\nmXxsee++ecewvkbSWyJ2/DbvgZlhkdP1ua22kQSelqZYAkI8nmU1f5MQm4F1\r\n58sOehaMxDEIHxvToU1eXBobL8H77+2pigj+m7QVZfCPPqPUZyQAGbMZzmut\r\nsi6TSWeiryLE80i+Aytl9Xhqqc6b5Wk7EoaXps+IkAZECtaEAO60pwRJU8xy\r\nDkbiYxO45sAosdYHgSXfJXIQSIyRyl+M9/FkJXx7ep0cZPR001JQkme0goY+\r\nt7yZ/zZNgy4UVCGBXdEX5MsHAaDiT9yhYhwlWu30vA5WlOU40blMz8VVwHo7\r\nTzKCgenyFKAXB+MxSSc8xjZBG7K9Wzs4qOor2lyMJpp2iH6WtXTsFrhlEtM7\r\nCuNOf0AwYyFJeWcJNun12fZsceaw1iwj8xN6i2hVMz5/6TDJslLmoOI369Xl\r\nE1N/WibXc7KKCgPSnioExQUrP5ziaHBODk2L74tH9R73WORkcmzHFm+zwynD\r\nH8kXso0EezxUHbR66TEs+6ZzLeh5X1IMDoNs8u1tvBAdxSB2Og93jhBceor5\r\nO+ZFJ6wwtPV5dNfXuc1ATXv9HgXCc5LPUVYESnhRHhrHgwCAbjOmzkGgcOCz\r\nmU2cZjYochLJfj4/gQ5gyTJOmTPM3o0Ddy8=\r\n=C4Sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/list":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/menu-surface":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.58733ef41.0_1667412740440_0.4276633143376114","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/menu","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.909b48215.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b6085460e15d83e24c098834219311f139f5214","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.909b48215.0.tgz","fileCount":38,"integrity":"sha512-Eha6Y+cXrB09SoqDqESrpTEt/3Uas8/uFWYd9ti/B/Je8GWibgMzs8LtTrcAEJIj4QvGSkTByaI0bsCHE5S2WQ==","signatures":[{"sig":"MEQCIECq+lscCrpXk5dIYh+ZKg+iry23VZ7YabWgDiacLe55AiBCb7obmO69VCCrG4sKVo3TceJ4ze4lh+LBhuIuc1g8ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWRhAApR0D55aZaxvSPT4N8ouVy+U3a3rFUM5fIJEkHzkzm2NlYCxu\r\nNQuMqstROWM4BG0MkNDiYX31QHhUyzCiQabrT2YcIMkLUZYtdzUdkmqeJ/WS\r\nKJ2GdSRrmG2szMMpVgmQos7tQSnfvtseWwWAeZc6gXYGrH0zWdf5LT2XHjNF\r\nQO7wDK3a0NHwi6QQT3xIf9/C6AThebTA6c5GoxI0j+GPr3/E6xFMCtDkxVhg\r\nKP7GB7LIGp41UOouYDHJ7Df8mFskVx8BBrpHpiJ9udkxGMs+uth+EeYx0jOv\r\nRpboJ/ADjwpct/ipqlODj98qRzXT27prK8S/ykUGShwP8XL4EwDvV0wk+PmH\r\nmWuAqqZMyFd0MLVXai8e1IwusM0pKaJPv8mIkczWhHMqUg08P8zA3G/ENGwS\r\nud8YL1XjMIViWC+IqTapXtw+RFXFNYulIFEu4yd30cmSga7QZUbvdcou1/7V\r\npTD7G+k1WPWS360R+HqzroI+XQJ4QHAVp1uSx6XE2SVfGUI9a6i9T5HlclCO\r\nf4iXr1QvIw8HD88rgXLbflwviYd/ug5Sw673N9H6LEKCel1+J80NxmtOksiA\r\nbPOk80FJi4GIjuOCaJ32aUX5BAe0lhhshFOL/xbXgbNeVVpJxg2fkuJGHW9G\r\neuz8uHjLr+4ffXd7mjHpX9j4M0pzqqdaBPU=\r\n=IEVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/list":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/menu-surface":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.909b48215.0_1667448573903_0.6880642291825101","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/menu","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7f17127d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d2ab6a20553fa087e1b4dc71d3132f06bd68a3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7f17127d5.0.tgz","fileCount":38,"integrity":"sha512-WHaevU6UmwnEnEezPiFadtxs79zhMxrdYTfGjq4lOxyXXZTt+ZxfrCkRZ/QDfFGTQduYxI4t0oGg/clO3LJbrw==","signatures":[{"sig":"MEUCIFbF9vxrogDybrULJNd2q2mk9IMPVjypk1Ke5V8+HxNWAiEAoZ9eC4cKdvKUue87S+xZMN9HXlL4sJcXYew8Ib1z7fU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAaAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+sQ//QKK2SUNuwKmtMnnNS1NPUbdE2CTOzhY9UVYRo4Pm+27mktxX\r\nTiZFW80hI6iiPtigkIv+WsXuP0/sim3JvM+PZPBUwD44BCukXHbz7AF22jjI\r\ndkPoZ8XnqQIg+/BuzKN7TzIdkF36IWXhxRdZ66VfYkLC+FiaBEVnC3yREuRD\r\nGW9JYyxaObAjqDL5rWju21H0w7BCW0LwGu4Pbm1tIVt5WvFWidBOEN0W3u7i\r\nIGZucDFSBJVXDFIiPijYT6TVSilWoiAp9C2YXXXEmsP6SDKJUAVH1TGPpWW+\r\nBBkhO4gfbnLeAaA+kvE2Ug2GMQJktg49aXXc6rTSSL/yLnbZZzTPwNZAW2pV\r\nWNlIfe0vBMiRKrnDa8kLzHbwayoQLhB4cqrOyYHFih1M3zbGsxMHzJ/NjBt5\r\nTyAEAHqxnp4gd+FJExVniBgF+085wD/nYkHqUorTzjxbpwKgA61X2ZWYrk9y\r\ndZF3jqNQjAZI1GTvMHPQGN+hgN/ikuPIpVpfniOSLHeCzm3/8UYkNZL3efZS\r\nwwyty8DD1j8zPRFcqMNTVNxTFeusNfpJddZlQxQ2RSv5/7IXSOgPWpxkPKzM\r\n1h0VKQ958Pt9D/71ubV9EmDwZXz6vXInkQ13BmoX3eW23oMoJFQrV8yDtACA\r\nHzewX9o3B/ORgNPwlZMfYxPRITsSsWYKsyQ=\r\n=lzwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/list":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/menu-surface":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7f17127d5.0_1667499648103_0.3367079629668104","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/menu","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.da95e2a05.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cde9227ba1c87ed54145f6efe6c8a77d5f1a1b9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.da95e2a05.0.tgz","fileCount":38,"integrity":"sha512-uzBc6lTS5pkLjjOeV65ACG338vIi9C6GO0VQRHlfhorzw9YOGxzc67QA6+AT8+hYiyzVBBYMyjxNO2NHrSM7dQ==","signatures":[{"sig":"MEUCIACHygs1xaxfERAxJrB0d3KWltm9eVwrOV8WML9dWMvoAiEAnIwDrFGZepuPNuzB0m4n8pGUZwjpzwHZ6K3jsN1z8Xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAkA/9EzThreKqgDi6h0RHRZAGDnuEeW5tVMSkVRxTya8HyR14sgay\r\naG549lSBPwyMnk8sKNlV6KYNIz4HzqkCH0EJUWmeKJutx+SRgX3g5kgQO8Rc\r\n5pTyKz+KEhEEqmW1NMzcwFXF+TWJSosQQA2tvRVOra7TyC36343i/fHfPluz\r\nftU56Gc8vCdMqHEUn2Oc+9bNWFBBJg6Cr3cF65jy3QHX8IXYCi0Tapuobvua\r\nGjjetVFtj8nZQKvLl23WibVpw4fISMFvfOADhiKMUgkBZGSB66H1n2YUGqkB\r\nNtj3JSEwyBNFM4VL2+emVgDhAXAbOgfa4A75TaAhoGWQCljDUpqJyvlibCQQ\r\nieJtP3wyBW4/LU3+MV0v94QGLhvXZkXL+FC5XG5usNnJNXWAs4J35wMz3e1Y\r\nvVuygz4kcgHH3c+4reTH9sGyallEFoT8WPny+I2pcvKP5kbsEqKovjzpR188\r\nQEuXpmACWJolS9wecwBbPdK6Me9uxyO3l8PNZIqAOCNZcBXJgTQE0EElmnw5\r\nIhV9CA8JBrc8+PruUymxSEQZz/eoeufK6B+c6nqmN4gF66w+DgTkTboi65sP\r\npodl7e6XgIlu9orL2ShRCDSjwC1iKhXw/pU4W/nycQPdNIMiJy4ZczlRqyEj\r\nB64KhVlTiL5Aa+2ev8HgC94NaHCOt0A/veM=\r\n=e1nH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/list":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/menu-surface":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.da95e2a05.0_1667581240510_0.4964705700110872","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/menu","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4832e2750.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f8135e007ad25eae8a178b65c76b7795c48c17","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4832e2750.0.tgz","fileCount":38,"integrity":"sha512-VtsfI5+m0k2hF4TWic2SOK1sYafQCMNHBzZhopTRQjoTS5d5Z2Pi0VdW0oLgn9nqDyq4VJy/GwbuABjp9zI/yQ==","signatures":[{"sig":"MEUCIQDe5LbYwn99po+Z5JgoIZLR0sILpYLuauu+mMxAlaLhgAIgEakI0JFIXjMoZfMFWZW6yJJ6DOSdHDPjXCAug9M6RIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZX0BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxCBAAhBCIoNZQSVSJvdoPufNj/8LwHXWlI27M1qtMXI10sVSC98n/\r\n07RY0f9U1EutGVv1/N7fbfUE6le956eMLw+EFsSMhxrJsIN3Fl5lDIbfm+MU\r\nayM1n6r0GXrr4RolMGKpGqxYqmx+i8D3p7XYuOKoCGdTcrXP4ISndLOTT2k3\r\nNApNYT4OpF+DYn3vtInzhQl+B5RZVyW6841czHR9M5l/v22T3FrCC9OsZTmJ\r\nxsvPwDtIBDNs1Y2mSFL0JuoBsl+LgbFqXnJxaZ1Y3LwhKtm7mPBuLmK9OR1V\r\n5vdEAQSUZFabmyClIW5gE7UnVPZ+w7RueXXoSHrK/1oN3vH/sNulzbfaFqpN\r\n9Q3QsIXX6tjO63c8InbHgOJLB1pQbILayvvjNgYnHyX9e7hy2GM2O+JAXRKV\r\nMEogXADPpUH25nzgynrK9CVDaHTbkBg7E2PymDrbZlV0n4Jui7j3vAtxlPWG\r\nf7RIOnzEMI77i77pX2lRch/FS68AidjfesG73nwldqagN3O6zQ+uhwhZpM0r\r\n7gykiOSjXJjB/VDQwHynxublW4hawJmnM7egVo155OUzscn1MbA7GTpdQm4a\r\nn0UfwPF9pJVYNKP6NIz9arqwdh5JGFxE49b4QYXytTu4R2QwszvlIE2mjrrv\r\nR2g9lt9kqCOltLBaCg3AGb50jZBB7MxlSok=\r\n=BOsf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/list":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/menu-surface":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4832e2750.0_1667595520738_0.8091371928168385","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/menu","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.215506426.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ac4119bbb7f93a9224e41665881a8ca1dfae46","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.215506426.0.tgz","fileCount":38,"integrity":"sha512-kW0Ih/Z0I3JcZSNsMbz0iJWZoADBTMCGbB+W1mePg60DQFtoXgn86S9u2v1vwrpcF/3YtUD8M4dad1+0L9GbQQ==","signatures":[{"sig":"MEQCIB7NVFidxeJ5CwWhKksd+4PdE3EwVci96om+viZG28JjAiBVKKGvanRkkqjHJlpTuP5Mk/ntQncI1sVKvtYiK+0WQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpESQ//Yivggl41otiRsAKRUeo7S6eeA4WYHqG0VeAjDEHC/ui4Xq1R\r\nC3h4mGni/t77VHauie23P8wD83SjgovZwX7LbJhkoQ1d4PjRQYw2WPmYlhmO\r\nZ/iyUN2ZMvzgh3V2NACfVdtnIt7RurV3sLszNRPnA4fZuxD+C15pW7m3bcGl\r\nnEmCFnLVl3Rcg1H4Vcm5zMlX2fr6FudHhw7PLYHWRVqJPo2XGI+h0jsgzstB\r\n+i98MMEdSSVk8qmNa1tNe4ZCveEr5TIWoqjsJ8yinrVtQGmrH1zHcxK3nRWW\r\ngguefTqT4dALU5EU5XszsgQr5Q+62Dw+7Pm/ke90k3mVvgnPPt2pHpzbAr3t\r\nl1BO4jDtWuZAVM6aCuDj4li4TXiGZWP85/8kHlALSRzpZc/oibZfH1zFBNi9\r\nTYt39PnXZG4pySDiuyKMdAA3506BpdAiSTNKoxwZ4d2LEXsHl3psOPxU2Vjl\r\nhKnQpMH4MTGk1p/7OctFpTECP82BzzR2JT/26mn+qHUP3QbeK48eIy48QC3K\r\noiwavGkdjeTcYrj0Y5MtqVBr5UYOGaR2vNYBMl9LrKhKWu/ErsCSpjl947IL\r\n6oDdDZXHdNZjBmgPxuVMl10XWiuRZvlgGzuh5eDZBMF6IZEC073XFhyH2Mly\r\n0c5g2dNEuefSFTn7AkExCjMqrhaaDtDsWvI=\r\n=0Ij1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/list":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/menu-surface":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.215506426.0_1667610457483_0.01932672171671168","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/menu","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4cf917476.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2898dda8f67b1160a937c266c9e59cb9f796fc1d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4cf917476.0.tgz","fileCount":38,"integrity":"sha512-u1GbJ8jbGiks5hK/eObLqhc0vT2G75WkNoCUBAhX6CmGrh8Rz8eTSVTpdavxBTPWEPkPoH5xSYco+4PcpqxU+w==","signatures":[{"sig":"MEQCIEukeeiUTvKNX/DLUXPTKIAm1ouI5U8fBX6lvgxiiZRrAiAmFRP5ys7Ml8Pm2PVt6lUVjjrvmCN/w5C1LOvpWWWbFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqX3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIrQ/+OVY7m4xAthp5qe6UbSnmkR9W1DzF/s+R7vYvPj8Whz7OWK0A\r\nUvSdrbSl0pv8IG7THuaugBIeh8MyKhjbsWz6/CMY7V+EkDrHRPtEfUtXnbKG\r\nA9kZCqpyKYLGr64sX4+KvOOM6pUwnWA5oSm8fbJ1xtpqYz+OK27K1gYkxcFS\r\nbjNa5vH6m6r/SryuxiqEFafF6CiC3qMRBAgiGfERkyTymWvbwtvajheh1wsP\r\nKUdPT4rtQFOOmAnFJSxdfs07kmAAbZdNyiFZ2xi3Zlk975LtUc0shUPOXA6P\r\nDjBTqDueGqSFHz3hjuxGe+QcVi9MkaJqWJlZdVEGxH5vdbzT0OGPhZlyNA05\r\ndL8juplWl9a0hjzwfhzAey7Xml1fMLiFgL92x6o2984H+WCSgqfMNgNQha0t\r\nWC1ypAjE/n7DfNardt1Og4LgXzV/e/ZKPtBmZf9bYZ9yH15ZPqdJeAFsLQWT\r\nJzAbdOemCNB3lB/RfemOa6IEMZtL2PXyIm+Wca4yQnpXvs52s/NZtsuM9g9B\r\nMfEEE9JuhM+YE4hPakACTeR7OrY1TYxgAjP/kUOLZEuRYTkX0NGiM5OYIrt4\r\nJf23P5MF9voDus2rCRenO6Rbq1okxxj9FQLN/sVn/7wmGjYqRN7iEdRBLIII\r\ntYyqE/kggXe/XnthSEi10XGsonTHkqyDINY=\r\n=6PZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/list":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/menu-surface":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4cf917476.0_1667671542961_0.9721974063882719","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/menu","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.eef14bd32.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f46bf19745b186d354d51022e21b44a8fcc12df","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.eef14bd32.0.tgz","fileCount":38,"integrity":"sha512-JLJna0o1x9W5e8qYZAyVQGmDOcgjbaM1rGBdwTq39naAGZHpAsXEnYDkZgRtLHd6OgZ/f5YpCSj8Y4S8qthPrw==","signatures":[{"sig":"MEUCIArgUwyPqBKsyzQvmqvY9uJmk5z3lvkLwrlhMs3+sF5+AiEA5NyEbiyw6Cv2Dat4uGvA7xpSrRLb3e5Z/h8bdNtfMdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":819664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqIQ/7BH/J4c6elsRJlJCnZb841HJNqdx/nzKJw49+Zh/7xhejx6bD\r\ne1pRgyAgwU+RQ7WleYCIKu5pgEXNfIHivyF32zpdv2EqdWyRvGJDjeWwbgPU\r\nzg935hC5O8pX2i2HiUh2iXX/p/BtNpk2p/JLD16JZSrrtLQMLHaEimr8ASPx\r\nLZ6sqBfEe+EaSN4U7Z5Q4L/bnv5UNDps3zi9CuHZcGYTJl5VUUb1ShAngK3p\r\nUJbpfkMEIR/Ui/c5wXGX8V+9zZ53kZX1PdaSL/BfVwfVqMNUB7djvB3V6rgq\r\n4g0JCFvm8neme2UHhowoCH68G8pv9bveX9+KQButpfFRlD0FFTdle8SwicjO\r\n4A+k6lHVXMh0CsGPU3wByPYk3oTjdPj+sH/Vsxq7QuwQXbrH57QL3tOwcrmo\r\nXcKNFn9Lz9Zlpf0SVqfFQwhQDs9T3lzjnR7u0MJMJnW9MnkkL1rsjybt76oC\r\nizEB9FtYdVpLFZrtf/t/GfNSoKBPXtVnhezVg4wbzrMA0LC14rjzr2guZikE\r\nxhWfSTzVVqKu5FEG6+OdzYRa9bC70+7q2AFsy1pZcp3Vk82rGSlEf5j8rBLD\r\nTlfjuqaUKjrX20Vj1KszKY127WGEW3zC9+0SzuSy/VMyx1UC/OIFUAYjT448\r\nMiBXXQqt/oqohI3bCOaaqWhpdGQdJGvtOFI=\r\n=AueH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/list":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/menu-surface":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.eef14bd32.0_1667755567985_0.507522897015366","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/menu","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6faa29fe9.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"265e9e8ea2d38ac179b6224b73a4e2d3ae082f96","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6faa29fe9.0.tgz","fileCount":38,"integrity":"sha512-ZHbAga/zdutDyQ08VyYx0WGQrd/hP9ghUmY26lgAiwDyIROoGrFgC9tXBYmx9otMW6KxUJTqnnzW8sDRTYDFwQ==","signatures":[{"sig":"MEYCIQCDo/YI6gZh/3vcyG7PQxwsLxCq58VRz7OO5NZsAiOAMAIhAM05dWvCfEqaX5dY83HYj0+J6Ojf/bSx1xiBmd5RX0ZG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHgyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3hA//bJr8J06lgeVCmX9tUZpUOszhrvC8f4zriRESuTz9HRoONITT\r\nCxS1SXpouOA5LZx7L3oKXhJiyks+MTHoEbsSeiciLf+A6xCpb+QA6Nszf10u\r\nKVwtc9+2lb5kPUgYiwVmQFF0fwXx0opEQYCnnIt6OvUX9Ko5XWUhnutnvrCt\r\n/NtRnoVyaSVljDdV967Y8D2HsHUSD+5JxGfYFym6isBX3m+OolkZ9W2NPjWz\r\n/YdV0gKfYZkcX0J2EXHwavKl+p00vDoFGuvvoUPUHQiNaNdi5bgTFyWltDcy\r\n3Hagi6addl84pGlAikIVVBQSQYls6seIQY3JnvUu5zOulUcrclXrzu5oSv6u\r\nDOA22FE8pkeVEf1626lMrFkxLRO7yUG2RHiiABslh7UPsvXR4rp5PEi89yXv\r\nQweEje/8CjrUqv9o8t9b3hJMg0xDBYDVNMjayc6XSUw77++e61qKOpPN0ljj\r\nON6khqm0PrNlKjW/d7ryMRXIMFNHy1USdWXHOL8H2lpRWdnN+sDuMZo92iai\r\n/hH/COlvrw0G3sVt7tyLVttxTkKyQ2/4mT5oUzUY2ksxFwqfuTJV6qqNT15x\r\npbyFW293oZ0Xu8MPF6o90TlR9s0VOaWK1mJKvKYeIXJdO9e8zVyrRrz+FdpD\r\nErXMwV80nl9thqaPV0KsD6xUoA2TIPiPyvY=\r\n=wqaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/list":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/menu-surface":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6faa29fe9.0_1667790898248_0.10967527757308315","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/menu","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9af09b967.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5781397709156c81154a34627472a1f365d270c6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9af09b967.0.tgz","fileCount":38,"integrity":"sha512-vAsOduOfZgihgfN5Xa8eXIdQvA6X/OMCW2WtZy+JN0svkhSZ87yo7ljnJvUqYfGJXsICJyQ7UgwudVJ/TK82WA==","signatures":[{"sig":"MEYCIQChebh4Td5E5LACl+neuGRulylWJyur7WXKafnmrD1mOwIhAIpUjTuDGBnb97Jc3x1/Uax9IgEkMRba7Ma+qrIdUQr9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU6KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgMg//fSwVYBXwWBoLb5cN3+LrVwMY9FhlNiGctS9FrQ9XIfWkR1d1\r\nc6hRrGlVDKtCCOazSZSlmkIA3ZVIU7VJcLG2UnimmoY1EH5Tplgg+hN1nuSJ\r\nZFt9KtKgy16Xqi3Wxz5XHDv9bFagtdqqQlCUpmRrNvuDPttEgaBlfPXmDNb+\r\nEPH05gw+g7ymnQOR32Phpbcog5GhQ6/yFfSyh/jbZVC4s+NBOpVaFui2rNgi\r\nqbMbc1L4eI4MWa5h2PLc8ZqOHCVu2vUm5PNVTEc7Uz6CHg7C8PHEW5qZvE7a\r\nuo4Yk+j6753T3aGrtStFMKy5laLwV4J5dDoqMNE+KQ5ce//ofzdU9NBzHIn6\r\n0JFtdpRaQObmEzbuuDpo/apfq4ptLb/Kj9cW1a4eZQf4gWGeVA45IW99mDji\r\nEdQYJN0+87VDfCx2Ued8z2J5VEiGKud2De00g6Wwxncfvoc+MqiO3HfrbKvG\r\n/IP4e5jdlmeU9+QuhGbrGxotI+6YGG/8ghOPQz7QONx5ZhtgkNzakAFRREaG\r\n//YzQ45LbOGrGZMtZqOGOFtBQ1j0Q8MykDa7b4OnojsuyntAY4PGUIH/5M8k\r\nI+Zg99O0j3T3KV+uMl6mpWlioX+lbNALUGbsh/BUXgMYPTaSZEQb5qROrYLT\r\nT/wRCJTwhLKBhlN2p7Mws/E9D1W7eXDKlJU=\r\n=wh54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/list":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/menu-surface":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9af09b967.0_1667845770666_0.2402098646075299","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/menu","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0f54fbb93.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0f98f719370bb86ac473a42b30e8aab8814ce46","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0f54fbb93.0.tgz","fileCount":38,"integrity":"sha512-zN57tmCuJxUoClCt1inIyskGVSDRP/by6+b94r6bswPQ+Z70x1RpcrnGClHW9q9thfN8eZE4oe7dtzOQOOa3Sg==","signatures":[{"sig":"MEYCIQC0KyghrHtwH0iycnd9eOq2qNNutc8Nis7GDYyh6UeR5wIhAIeAI9B9B7hueJh0AGEeDlXnskMyFRcNniP9PB8lpaal","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpldhAAj3tZhXq3FY3kMC0V2XZXefNlg6W1Gx/V+zX17AmYq0hkimxC\r\nWJ96l4tRpXQ/GOsMzkowZRrAxwvLwibzP8qiyIHlE1ntZHhricHB6Atf0N6z\r\nEiL7rpYGygEuvq+1FWLNqeTlg7icWvIuUyo5oBhGOE5ywW2d1QrQpyqGqS5C\r\ndYPvcyEoJZW4wgPZn+t/268l89uAwnQFHJ23jXEwqpFml752ECRHTWHjing3\r\n7KN1VfiBx4IJ5ZzBLFKKDRR7ET3YP1xBtqehTiNmKBjdGstdrOt1P96uHKvK\r\noRbGzdBRgdRMenb0C0FZs4ga1ou9bgzzt0aKaAQEMWiRkWdfxKxfzKAlZm1P\r\n3fVu84dJBjqtGo1s8lgZ5Y0jaU9mrMXRb63FKZ7HxdA4+KoU8/VoP8uwFxQv\r\nRuYw7cxQCX5jvRvAfnfxW7Y5Ca7pVILhy/n8WwbLVNuX/Hp9H9Rfij0BjCXu\r\nRIyt9Flmd0NdDr6RWarrVltZI1Kl7lx2Bwwp+8Xh6DE5L1teEOv0sltj3GZh\r\npT/uquj+B7ySVq4+KsEXfoIx5mTv/w8C+lisKG3eFmE+6HVOac+Ut1ghP2PL\r\nNOeQ4x4Ej3vBJhfTb+WtYxd6HCaqFHKmw6NLzZDu+QqCVN/MRifdcKwbAuma\r\n39sdbsuCHGsagjf/O8lTnHRJauxVPZj11qQ=\r\n=hgjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/list":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/menu-surface":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0f54fbb93.0_1667944687342_0.08377063354511205","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/menu","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a8d47f9fe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ec7c476905aeb073b08488f5762863d9b5fa11d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":38,"integrity":"sha512-6tPpLOHnNG3+Re2VGB96Aisf6sBZgaops772iadiZhUYLMCCXVkGH8PrMhbKSeAZ1QkMdrwv0mAslCbWDl1SUQ==","signatures":[{"sig":"MEYCIQC8zGjj2jUPX0HjwR3xNsvDOt3RuMwYTUgsffBEQk4ZnwIhAMqMsmoVxFIXdj2tP9AbTfyka1xwlQ4c5BpxrWNiNSw6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaypjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8nRAAolSeQSp4hhOZDe+FqoUK5QM+/0XRsSXfVXZIhSzS4Ki0xMPU\r\nHqXL9WFr1zfp51LRMHDmcFHQ+yFy1ZXpnRdQ15I7IMVUO1n5K7cupDC0eP4X\r\nQEGN6UV6HDAC6DZl0YPw7FDUbytYa28FRFN/kz1BaMPmJSGLKFSBsQ8mZBvN\r\nIGQI9gCQOCmMlleWmVp7+91AfafoV4P+XoMQx0XLTmK6LT6xuzhCrDIzI7F2\r\nck318vWP+MrC7rSJ8JSqIFq3l3cu3fh7G0qqqzh9EXA/Jko0pRlrJCwz1RhI\r\nM842w1HlR++p7n3qDJYbaemzSs79VKbqeOKq5+o/ZffBQI4BD6zdfdZPfk3s\r\nsgX54/A8EaRocqAUNoB3nmPF52YL9q7OmJMKyu+008/qpXyKWjdUdriEtBVX\r\ndozjMrYxeBQjkPpk0zMFm5IHirdqMsSDSEPrMxwS0ZcIsot6LrTVQWjqHOJN\r\nA6/ynwhgzKlkZTdjphfIkuU/jb5VETOWwHUOccQ3HJ0FfmF46PWdNm2nKCO+\r\nKPVo9SKrkBKXABM3ETVTKuPdVWw7EVKT0e+V7fl/ZlSBb20TqF0B5A/TrUUB\r\npJP7dFzEKHHGxQ9d2D9ioubCO9gU4EisVh+oFKeagkSUhzZTolZgGeDpQn5f\r\nFMoApRuhXG5D7GEBqmFPlAaRpuR8yvC8yg8=\r\n=lLBH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/list":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/menu-surface":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a8d47f9fe.0_1667967586883_0.09999399976617562","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/menu","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.66a1e75e6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2dc9f3a692526ee16d035248df539de98401431","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.66a1e75e6.0.tgz","fileCount":38,"integrity":"sha512-x9WrEcDzrCJ/xO92HsFo+Hnr8/6AG58LjIlP2pqYVoBoG3/KARaHUIx7te+75v42dmZYKAPlUloX5OXAsNZVzQ==","signatures":[{"sig":"MEUCIQCYYdKNJmLZEPa4IiRGlXRv3lO0jkUgWwPV3s+b5N92gQIgUEhBAmGgiBXjBh7VYg1bF8PhbxOCt3hhvEB5FG2K3tQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3TEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjsw/7BgwqxwWU6bMHJLRE9km+vc0lg4G0mgini1ntOjYeLWXjFHR0\r\naNcZXxMoca7F7SjfFMz17kpQSaKnOKFKMFbUoY+ah/eKWexaQ30Yl8rcEb2Z\r\nt16LWMu15HwUeSPgn4rtPDzYOPnzQ0K6ZV2g+117HhNucvr43/XoLrQelqNo\r\n5lUztjEXudw2ZRPdSgfEtw+zF+dHmdGLvAcMBftYpKnnIeW3uj0n28QsrYBa\r\nYN+jA1dk3LW/+1xPruAPNhWbG14qLBuyYv5mHkGPBF+k6DkM9k3Jo30xQc2p\r\n+ZWXo9S6qe79Lrl4NhCCu+AwAyKalMyGgOBP+3iYmdYKCc031EXeR3uCk6b9\r\nnZoXU97j07MeTG/ijQdQ/S7/N0LIlgMFXEQajOW9T6pV73WOAwEBRnYVd9+g\r\nVA7hdIO7vG+v9l33Aptkt90Ls1B1c+MsVn5l05Lv5V2NqBU0rJtyNWXHZXID\r\n5KrAMqIvteY/W7HPZuE0z73PsgYuHSX1rxQsCFooVSCr/S3N9khOKAoxTZBZ\r\nGIa4vX/+Rkvn/uVogKC+dy55W8QjSN4HQjb1y0TOItQLFwsRGcbshdbrBRLA\r\nLZq63pKVU1XgoM0SGx7ujD11zGEqXktXZdHG/bYgsAfV8Fml3K4yCHsTfGl3\r\n4gKPP+FNLPGUMBob8bfZSY6rJqXnMjrLjCI=\r\n=im56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/list":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/menu-surface":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.66a1e75e6.0_1667986628299_0.9748148787768891","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/menu","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5e5c2afc0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7892daaa2808941415babc3f4edf8ea5f5160889","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":38,"integrity":"sha512-bo1u7J4HzgTggMuauqPUuDHFYgZInwGq4dUFo/SvBVmmdJ/TUi1hSQS+EoFiOQnGH2GQHMpN5yNx+XJC7lTHsQ==","signatures":[{"sig":"MEYCIQCUWWxHPRv8es5R1hZMVN5dXdguBdIOwprQg7xR99FXTgIhALfZqYSOTn5cWPbiRLOrMfVIL1futGpIH+yxR8iKxdJO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5ULACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtIRAAn6snThUsBKMkHUY6ZYGAySgRY/+iJcLlmzOqY+JDXpeJX7Xz\r\n2uap61oaM0HgdwYYPM0iu2/Hia2LVNJvsbZ3M5vUD+VgqWAIbZ3Jzg1opEoT\r\nIfvQqJD/55+Up9r1jXN0InpPYBlG68yRsY1I9u9Y89HTYuQLpJL8IK9FR0Su\r\nZ2SdwhmYhhaTVI5VY2Ci+CfCMnTT73Q5iZhmWYpMRlsiec4cdYKSwMa3lf+3\r\nRpjeh2pG5hrw95zIm7YxvrlJlM4g0j22irB8svDXpfsivKspNVFSqeTGGkAw\r\nzmmQJWTzfJuv7ScikEOlIPGdbZme4F8bYGNBzHKAFB1AwyVDPE1OVMFhkipq\r\npn+Gfsn6A8i6TA5sYANkLtCa+7JYX3VsC+l8z2YLxy1MEWiRb16+gkgbWFjX\r\nrPILOkQhNA0ml9VhO/OiisJOFvEB7P5mNgg63lP7A0Dfh6EfqNgPqSorbKF9\r\n3bXwuYEOUJXqFmDGQB/UBJqzC1lBmICa+mmxwLouWIm5+9Zx2fZkHWN25p7I\r\nvOL8L5u/n7TEMiHOIMDKNmVtwWz0USXwWkwL8SLf7QriPJ50VIvHaKnyWdK9\r\nkif+0l6Rq9bz5hDOL9KgPjkz54zfZTfYlD5XNM0r0+dv6owayry2EMBwSNvG\r\nAO1CNQb7nX01o+5NHp8KmT+qjB96ZEss+UQ=\r\n=H2ii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/list":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/menu-surface":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5e5c2afc0.0_1667994891394_0.16580665177514642","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/menu","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3e3f43359.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3436de0dbdfa2f18eb0f4ad83eac1adae6fe0ac1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3e3f43359.0.tgz","fileCount":38,"integrity":"sha512-qyuoNfQZo1ntqOFmll1fkVKkGENISmsMGnnPiposMfBEddXS8zIv/g0Q1CLTKU0Gkv25lwfa5lAgqCYzGEgc8A==","signatures":[{"sig":"MEUCIQCaLrKuAVzAN1zgNosBZicCqn+hKWtbUIoGRqUSAdCHjwIgM3VAEL9gdh3YB9IPFgjlRfgBk0DuWw08ZmUu/yfmt7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAfMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxXBAAloJbmDOVmlHAgnvd4jSJ9jstZgnuIsjP7DGLCEL6inJHA+SD\r\nJLN/y/vbUEdJGppeuPSgCe+0hopdS6e2Sp4YLyqKrNd1N344EO/rTBS9B/hx\r\nZYxm5ewWJEsBeJnmspK8iNrmFjPTc+0bxXBx3RbukKVHeq55HjPJbCesYk0Z\r\ndF1CNBeuTNhFmAJvMTGjHNBjEg2vPpwIB/3VT52rw8f9bYFnw0umieUxCZN4\r\nF4hkaH6Vi04tbN7Oqnktgn/955GT+FgktgOAv77GRNrRr/Uw6XtFjRQ1H/l/\r\nZmU6dQodihCCKoc1f89iXJLw+5lNJ8/xZB0lHd5zm6fDEnfqKdyQtAsXwiTG\r\nGQmXuDGsJX0tJ1N93XgVwlbsPLGHWyhYMXeyPWgeRigzcbqqFShoZSA1jS1g\r\niwjVPY3YKdZuQMbiYSBrzItztYqoekChqPHT0T6gUrJUxHU5/FuP7ZfHB4kB\r\nf7BmwXG2xWRfV6XtpPn3bKg17TD8IbkTL74BTYQYlZDNCVCFQaPcuCkgruD+\r\nmT1nV/ZEDwnRcnmXpdbQ51u43Q0Yneh4sOC0uzov6pog72f3LfJ3sxp1TeGv\r\n/Z1U/FH+bE3r8O/FzXrGQo3e4wfIZl2jQSDWEAGvQDzP9Xrutbhtw6Ng1T6M\r\nW9thDHG+nn69Tn9AYPFR+Dtqnk+VIk2sWm8=\r\n=nNv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/list":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/menu-surface":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3e3f43359.0_1668024268569_0.5744866695211044","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/menu","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3f667fac6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745980ce0845e78ced1a798b9f7447df966d2bab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3f667fac6.0.tgz","fileCount":38,"integrity":"sha512-jMPHpGg4M7to/8Gp2HqrCddd4wsUaDNli2wiq4U0mly3FrLnEhCfs38pTkQM/5dRa0ckuAmWgatMnfitFvAOBA==","signatures":[{"sig":"MEUCIQDhnfwSXwZ4ADuAP5/X+OH4tUzIzTEw5jqQ1fE4qqP5sQIgCJDfYGjFw7oUWh/EIIxrPOEEIkJ7AwffZE/8zBgahc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCS5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNpg/+L6Z4GBnatrwjMBBxYyubf1q1Kr7naCNnzWwr9sQJ3NntfN1J\r\nKM98EH3m0ykXxw+cJIJQdJdzZ3LGaMSLuL81zgwWU+M5snn/lrUW/kZBCkgu\r\nHtADOLJeCS5Otsqnofoq5kMD8VBkBjLhf73ZAb2pV3a9WRcVDHyX1bf0KYvk\r\njiWI5SeYvGFFBNSt0kAPjd+C+NzF6bKdwf4iz4QLqSwiYMZxlEMSeaIcx1Be\r\ng5vtaczPYqleYKD9reZIRDAlyTynFc1fvXhlG6lw+N33AXMckOFcMxwtUzF+\r\nRXaxFyy0rbmrrrv3IocYLryxnoIDsDF0u8TQtq9vJPTkAzJUGaLNHj6jKiUu\r\nH8Kw9Gp/1GO5L6TAHP+4eTzH/0S9PthABy67Mugx96c5KuPhaRXkMoAkLQ9o\r\nxl3oA1xtRGJd+FN4p0s87v/dHcHDxj66yDSjS6ZCOg5ft4OR2VvxTdF1AMIm\r\nMsHoM0KxWBxn2NvnUKY3RlvbBEHRmAw2HRxO0xzihYtmYNmgNvSQuq3ucC3I\r\nGIMHnIJ8mybmHyT0SrlfAR5hj01WkShQBgzTjFJApQdw574uDqQwwvti0IJi\r\nLsngXuFGzd0yjZO0KLdKMILYqixYVwtohH0gJ4hsGglG8z7/Z0l9B1DPtHI5\r\nC9Eg3wTXenZ/8qThBFP7kcnVukbfWb4deeo=\r\n=KcHB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/list":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/menu-surface":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3f667fac6.0_1668031672942_0.44821663482492835","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/menu","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.faa28c1c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7859e27d11ba93a86f95d06837eca251cbe2715b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.faa28c1c5.0.tgz","fileCount":38,"integrity":"sha512-FJfGvRbjB5AxR73tMwtn/3e6EMNt0livKl+LX9MvMWX2CAi3pDPOwVCTjqgO+NIAwjoaPxYyqK4L/kIO1D23hQ==","signatures":[{"sig":"MEQCICkMG3nJgUaGA1N9cdXw+/w6M1QxazQYr3QCELy/pyzxAiB2/WavLkbR4UtodRugix4tHw/kOQGbjU9UEHvoE+owDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkthAAjMSUWe7vkFQOHoBvR3yZJ/Y0y/irC//Uk1+5+EUd4qrwfmgW\r\n/UucbmiQA1FqjpD18UfAkr0Qdo0Dn4PYHB0EQKhKp6cqRSAnUAdexT8atu/z\r\ntqPCriLjBFh/hsDoFQivN9gyUG26R2nIu4tsLkBDXAc+MSut0qJeho/Fpo4n\r\nWNkieroTtQPtBX2LCdiBA+y6o9AJDGzfjjW70o3sQaFp3u+MhUZ2DelC7fsv\r\nNIbd5M+cKlBJzlgSluVsaSOmBtIpwITml3fEbHR3jfJ52r8ElTUh9FzEyQqJ\r\n8NuzjmbDKFLm6kdInj7EDG4Bi227qQCnfseW+kuKpuVxYfrHhIgOCeClBvS/\r\nJb/nA7PDII4ZD/Ng3kZdAjUL2Iw14ta8zNZif1Bt3ikwut6kABQVRWtcZXkU\r\nlLzYA8C3obk6SouABhdYXvnSg8BScy/Lg1TgRQgVSBBVONAKmpoa+OrH9pMy\r\nAfM/l3Rx/VeWGwFvxMTmd89QuAoUauqBlUgEKFOMfuPcxt1fLizhLaueY32S\r\nBw9W0EfeYrtnkPkVo4Vac4PLCPItAjSId1A6nCACprDCqaADzYLCgQHBuxUW\r\n0zEi4IfPdlGd7Qmqaqk6NPlw0/MM1Csal0KovGCr4L70B5coyNZl2a4i4viP\r\nc/2V49k7dNtRQHKA6sZ/FgnwVZd65ENbapc=\r\n=0ZZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/list":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/menu-surface":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.faa28c1c5.0_1668184649519_0.23436336503376376","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/menu","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a868c7866.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf8dc8d27d1d6d13fe8c9fce69fa4457247d2bfc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a868c7866.0.tgz","fileCount":38,"integrity":"sha512-XkL8ynJSSurUpZnDS7Fgif54ebD21o4G3qwyZ372zmvrHShiOMhiEkBpwiABKSCiz4MXu6wn47UceQ+gaiid0Q==","signatures":[{"sig":"MEUCIDZCQs0SHZk94EGrJA0gRhk5+OO6CPyFl5dLBUOEQqcbAiEAvSYgBoXUZA8ND7c1EaKTBPtJwQGHZ2GCIvjQLzja3Kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnp3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmbA//ZBo2cTJvpGSuJWXEssFeTJATxUCavVlEfeUAaYo5lLEP8DWR\r\nzqa8HLX+2mFPNSdRigHrWQ69WCbDYvaoqy3WLqgsxtmR4Mu5hj3srv/w19rV\r\nl3xoFBJ/Ju7NR2t7jNIgLEj4H4ocmjZ5kLsumjCRAbEhI2P1MXRn6jgtJEUH\r\n1jwbHSNpkjCb8Uczt/YcQW7im0gdf73f++qdlQ0kTegy7y1qts6kFZvF9GdS\r\nPGq+GxvZWxEbUzHVXWVK0B/3Z5VSOq51nlzVYAdojRIBGK/p2PvP9O2OBp1s\r\nTDTFp/eYeURrvAlUZA3xMBLD9k+5lvrIeWxP9+ASYOYIXblZeDoZO6ogl2s/\r\n/5OIBgwAv8hjnjAovCPDChw/MRP0buFfqBYkK/DmavmlKBdvquG4Vz26HpGN\r\nR2cnR3vqhaYgvuKrMGNMWFRSntRiFZg90GndaiLHoThQlah8MKgGxj+mxWkz\r\nbAEOONm2vG9LfcCcNMU0of5B0S+L/GVlbGlJOBO6EaGohD9252tKjuoZYlYw\r\nfP5oeD0SXNEBGaAKR6mnSNhEbOTt8TWYLzNMWdmauTq3CDLX5/tTBroCo0BJ\r\nYMgHeIryZZ/5hjZA5kKX2hnOqvlBzwSdt3zFvJXTrqEixObAZSYwD9CUjRdy\r\nTpAxHLeCyUqb9ptbr2NBibCVGvWPEq9X6e0=\r\n=Qzel\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/list":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/menu-surface":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a868c7866.0_1668184695078_0.44438938491829694","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/menu","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.602fe8efa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f592aa7e5efe4dc1864377327307846c077da37c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.602fe8efa.0.tgz","fileCount":38,"integrity":"sha512-R89op19TBxjhAurjr3o0V+GbkvseY+jFGDV/0uhz+XK5X0tHD1r5v6dYf1+he0nbryc5uQnb6tn/vlcbw9YCrQ==","signatures":[{"sig":"MEUCIQDf/lRR/2RCtuM/+o2dojdxyepBYYrWqIdEIVOtYVVu4QIgMABXQVeZpPojCwE1v+f+M5Ip7CYP6nuMTlVcBDlW0QQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboK6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW3w//afCs+U/kUXkbJ3AbForYcyE/i3epAGyO6WfG/+uIlH4q6sjL\r\nhpKLYgWympYpzTJCgWm8qo7v4Z1QBsmfchgmtB85LQ+StR+jxfTHrRQr3EXA\r\n8mEdjNgvlKkoIMZ+JJ8ILL8FXPalOeHvcN9X1OnygDhHyS/HPqkzxi5ytXEk\r\nJnk0lJpJVBJOUe/KZIw4egBTRmQzFD24lbJtEEdiQgeeWbb7ldJCfnqiltzI\r\nTkCuaz3w6nnXL6ERmtsfkXIjLOhdS1ZOWK1iHWofX1lDwL4I3htOKIkWGsQ/\r\nbdpJgXK+9xDC3Vcm6Qb4WoVy1OIeMmw9qxLHzf4WmUDX/4o1WiSmNQTExk8t\r\nB47DsjPF02vUXIOBLHTbd2z/M2j6WheiMuDHBUz/15jaIbAnG371L5mqtba7\r\n4oQQgNDvXJiyYzLELel1YCOVA3U2QcppYeyCqeb2T6nzkcCYZIi401pjtroF\r\nZwiFvRSgJpYGX1RcP4wQYnnCo/64d0PHFlYfexuJmMWTkgzDMTynt+OnjkAz\r\nSmmhU1RAfnFniOp80DlZwAupeb6xBNNPQCULFOT5psE0rXK99Wkt8XMb2BGx\r\nSAVi9RdlARQlCLzrxt8sQQF42SBT2+JxmmDPVPec9CUnxlgAX0XhZKTh8nQ/\r\n4uIB49rhixdZTHrqZWKswLitDPpNyX1wD5k=\r\n=CyFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/list":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/menu-surface":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.602fe8efa.0_1668186810147_0.514174804612022","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/menu","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.558c2be62.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e673aefac8bbbf15731aa68557e440cf496a9f9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.558c2be62.0.tgz","fileCount":38,"integrity":"sha512-XY9TSph9VGuMIOzxPp8bQKGICYmHfsEgA6yIPA/PRIKwuzpsVjpqjEzDqzZg5opIlaFgb9ZN6tNi68AHgKN2kQ==","signatures":[{"sig":"MEYCIQCLwBS02l5pEQFXAty8LzgLaZc+aVTeGUkPSq28N57sLwIhAJLNj9OYZGVc8UUcGySXtoIU7XVkvPeCLXO04WfPpNnE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7CRAAj5wRbR11EsVCFrdy70Xq9RZ4FYIiWfkEtF2MG9Nw6RtE3LFO\r\nZ93/Waj8lb+Ux7XENsSoI0bilE2qeTNZzytsqVO0eBEQ0c3i9keF27PpO+/v\r\n9cO7RS35PW76UK36qAfmzxo4jSq0rSp22diZUPbhVdoLE0teCWLRMgvkdZ8g\r\nP8+KN8lrNFdQ1SMdIL4bZjMkAVuD2ac6lYswVwNtT6zJ2441XrWywZD36zWV\r\nyyquvyRjdgW484gB5p4pmkoK+12/BnHr+Zd1oGAMy9Qz8WuGs8O6MhDb9pbY\r\naoGrbK6YF30S5viuU6YeEEv5bmNpMqWsMwvpGEbz8EK5KEPjJfWYLtzSVtYT\r\nskV3aBlVTsf/KUSP7pKEm/05JoHWprwMEfghtGhZbPqFPRA+5YlrWJ0jEEjU\r\nNP4JD/oQVxDO+X9HrtEoYBbeZx0bW85qnPQRd+ja64VbMuiOCG1doxl752pP\r\nEq2ypQZ5q2AgkV7DfItXUo8sC+9CMCWjuTD28wnA5KMVBuMWQJZdDOhwh6C7\r\nzgOOOqMR0DHUeMryKWo7/v06GRcIBxV2oD3xaIdEsIKQ0hlepq9BMYP4fv+N\r\nRewkDyXMwH6C3FyMYyaJxD1SL2hxTxpBKvGefQJAzSXZIFKd0vYM7+tPam3a\r\nqUjewu68/GZHgyoMKqcZQRU1yyAUS3v+4iU=\r\n=0npj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/list":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/menu-surface":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.558c2be62.0_1668206809863_0.7521436301953246","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/menu","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b5c13a7a8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1533416e0aaeb4a6b212c732ae62dbcfa3592a7d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":38,"integrity":"sha512-VCZ2Cv1zOApK2t1ytJAumiume9ndXICSxCbvX3aqJT/oFC2tY5AzL3Yg9l8ZaaCu2DeFEQV5wRp/dyhyUs6ckw==","signatures":[{"sig":"MEYCIQD8QGJfPSYZujHZ0in/KfrGml4FR6Jka+zgZNUWlFax5AIhALjUnP0VESH5gusVuVqiMsMAkKP1oUuiXIMWR9NutPgz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Bg/9HNBdTawuIYUk/dSfWVBfCSCvWtTIXhbxOcVz27xKE9EYudRU\r\nCHg/Rklq56NcVPy/iTBopdcn2jLRxFfEZramEm8GP2bxXb0VWHQgtQGcwxk5\r\nCCWzxb+gJ1I0/mkLMYgADXN5ixT2PerXtHfeGb2u2F/c587zXrVwJLhXEV9o\r\nU68ObY8e25J/5Cd9YsATBW8v2c/K0e87wixL80X6hRehUJVFBADl+DgHFBto\r\nL+fKb7duTHS9AAlXPfn2Nb5YLwOHmXhMtkF23vYeCtuvBsfGK4gvOhDx9+AB\r\nhf7E5aY32OCR4P/FLy7goauo10lnIt00VAbfD3nXvRqWoUqk3Md/wuuudzIH\r\ni/dOv2U+yHSc+D4VG7/XgxljhxgX4GcJBIUxsl3F09OoaRuWI4sBhjQKDtKd\r\ngNPO0oy91SN3w7qqD7c8sobtWws7dHL3tsZXUk/IydxTm6ylPb4iZO4P1QwR\r\nACy7aFFn7NR2YVw/7u0GRfYw+11509J8Ih5GjspxGHgJONLUE+IAXqM486DZ\r\nSsmPizQaRZE5e4mL18UuWTNLdrq2pZQBRKBM9FP3NJKm8MzZ2DZoLxIhU0Dr\r\nhr19mk0DpnVThEbTPxjU/EsoXeaOmeeEAX4CoEPeKJKPNfwqH289+KUALSmD\r\nWTjVJixs4+YgYddZ1tT2bE7JDyboJ4Db49A=\r\n=hakj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/list":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/menu-surface":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b5c13a7a8.0_1668441614024_0.033099544467174","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/menu","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a6e1c0702.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec95afb84091b63c39ea6b337677fe73a2ba479c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a6e1c0702.0.tgz","fileCount":38,"integrity":"sha512-bqPuRUIr4VdNBsPQMmShtC0VJb8+H13EmCIwKRNG7pmMDMeNdYzTOELNROx95YG2Q65HNe5PLRLVglSR+EIudg==","signatures":[{"sig":"MEQCIFTvTeIAtnyDeSOe/8wJ96To0fWsiGWSVHjq2EVcIaOuAiA4+3awuylydbGgBztYjDx0dPUsnO+IjUPDsaFiD9BkCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnrJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD9w//XJh3AjaNBjPWhZuU+lBfZHbJkVQPfasfw8PUZ0F8k/4kqbnH\r\nSjIMyWSri032XVq1TVDWZJqI56QOP+0MGLmrgLobPsEaZHnQHFKp47+QbHkx\r\npL5kSdr004BIcxekp7Y/IO7f1d680HJor5OWXRNzqdKZSLvyUp9ch4FdoVaP\r\ner+hR6KfVlZfVsAF5Kgwtns/7/QBv+MaOFqtWNAl7sBshpNqbJXZKq40L6mj\r\n0lmRJ/xBd/iXrHViN7NCG+B0kFjn9+waUgfXNxBFFSdWlWqNOoFqL2Paa4jx\r\nnb+BBPziugTGMjVsxMyNUl7n7mcrYX8oNOnmWnfMvP6PXkfJaBWfjBZr34NO\r\n0qAqn2pmajoMuR0fIJ3hjx7Ldyl/+JVmvcYs36jLVZMeLgMhYINEmsMDVRYc\r\noIn4K9X55C01adtuqRCpvJLILBwy4eqIV4gECCjcoubTM5RHy+x41pQXqUeP\r\n6mBML7OE6cZnGDMOmbOAQDtZbPVTASQ/5cC9Z2prF7Ds+2ro+DyHeoo0r2m/\r\nstidOmFz21LAP808G/ZdHCz5tuckhwWoF+Lk2SUCknjn+qoD6npDX8ncWkDE\r\nUV+a7WIv33NJJqhdozUt7n13oHsh95hcRhuq8cObh3idrYn/MNJuEFa/1XoJ\r\naQHdczRYjJVN3N0RJWHteNY6nKh37CC+MMo=\r\n=IhJU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/list":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/menu-surface":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a6e1c0702.0_1668446921375_0.9690800823520789","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/menu","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b6f8a06de.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af44b8d835650497a0df7d02c47790cbf945ebd1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b6f8a06de.0.tgz","fileCount":38,"integrity":"sha512-kdgF5ZR7OFPCrBlkxEHEm8ELqP/wthJUSY2ifteXTdsgVw8aU2qBwv9NY/Omo8jYyuKXsQWAiEtySngbTFZk9A==","signatures":[{"sig":"MEUCIGhXHEt5nefEEFrsZ5SbjfKO3Kq3U0D81toeTNloMoaKAiEAiHcm1fwzDNuwmFx2PbVFsULRxgfNUyED3EXadVZBdzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGvA/8Cl/jcexIiPyR3zYzYXlXeu1T+UKPM/FMherfISCw7fXlFDr3\r\n870Umoq4HqF1uBRD+zzgHgmnUsvIsuqnH954i92fikqRGhlDcU0A3a13gYKc\r\n0/BjK+MwGfrjjraVYTQDGxvLrqclmtehv1zywPM1DBzcaNIHZ44NN9ueZjfk\r\n8extXQIp+R5KCQelLtZJit1g9NxT3myvoagtFr19ckoFF4r6zTArIqrMwJDX\r\nKR0jUT9mW6ndegWBcSRQMZpVSKopSzbpvFj/orjzVCxmNMW0V9MTgU15aeNA\r\nD85GkeZHZszSRu5RFLgnfeFscCN01QbP2TUGn4Ip9zLO4cANheDzgjDy8XIG\r\nBCQ4gDAdPj2Y/TSv+0B8fmrkdSszfus2MhUtvSUVT81qGVqvsgw6VNWc3Yph\r\nNlCf/M6+Te+kV6XwGrK6iP0oJOEjisoSi8BleCYCJmRBGCHa71k2HLSC9JJa\r\nUZCzWwToOXBcqbMcqESL2Ac5Z+i24t0IrQUwxkWETMP5Gh/ugkQWiVycO7Kd\r\nw5cfLvVX6Dh9+ocPgvoVmiZrOorHHSgIrAdKGu0JhRMR+7lLxgTjD5486TYP\r\nJO4VZ/jmQjZ5Hx8wzsqPDuxyrQFFVOaT0F0TkAn5hBxMthC8fyLDkJeXxwaN\r\nfqjP0B6HPYqV59J8zBCvLJX3++qMfb7bDME=\r\n=Oeka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/list":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/menu-surface":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b6f8a06de.0_1668504604869_0.8198613872967919","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/menu","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0163f3ba5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5c401577aeb5538e98e8717ed9bde72bfa5fc76","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0163f3ba5.0.tgz","fileCount":38,"integrity":"sha512-Q92EMVfgHPN8DlLGff40ImKTtwJ06aOLilERmgRNdB6Q2LSONFpOeDj4YPi2BrwLQIGfu8OiBz8VwKsat3dulQ==","signatures":[{"sig":"MEYCIQCFdBFInbIDWH5Pxl7ROiXwTUen3cxuJv9pDqkiICUXwwIhAMusPxL7gBunFh4D6CapkHzRlk3quAZzGRKxgDeXIVBe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9SGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs/g//X8HbsRpfumFsj88p0U4sSAKvQ3VUcLt2Zdehm1VZJjWH1CXH\r\nfSBkp5qDpQZLsrlp3squbnZ56sxqNgVB2uPM+hMH8mBIe7QtoO9+ztjgoKYL\r\nKlUZt3n1UBrXyE31FfeDiSbnLhkRHXP9y1K8lVTWINT0sXgTK6HdUqJZZaT+\r\ntFOWabqcz8HP/4h/9rUwlrP9OeMdqGBIBIVQsxgRFOe6lRuRQlwr/oHeppnx\r\nwS3YOB1G/2jOX3vk09FtBpTrOTLpsVZODCrR5HDfSEPlAP1SlcMzC8CuX0ca\r\nG+cJzqk1TXWixJX9PumeeqrCN2dTLfHYWzU2t8RBDmLcw3fzx4EHkTw+WzP2\r\nzIuX0vLeO7QsacBoJF+oqAWRZ65IcF1pkHzr39ibNu/7peKGuRnaLkRlidK1\r\nvhj3/demcU/J8HCsamF938QppT5779yCmergF3n3/kAKCrsUem7D0isZHFyF\r\nceI+I/hgnp/agGfIC1JtPHMoi59v8/qRm+Wj3VRj8c8hlae7V5dq1jZB/dZJ\r\nXvaktYms6SUIeBolgeppiS7OFi0k+q9GHrD+kWgIBAcRBddtYwOSgf+jAiBN\r\nDPMS3eOMzCEeVRsFuPKxcDTNwZAoGxhsX/LND/tQQ+5WsX0YrJKscRnV5P6+\r\nVBikyeZ4AKe29MRYV3ApdPVCcxrhLjHBvOo=\r\n=t60F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/list":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/menu-surface":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0163f3ba5.0_1668535430198_0.5680995747664372","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/menu","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.66c5cbb94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fae466778ddb2eab641c21372cea6c5253d1996","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.66c5cbb94.0.tgz","fileCount":38,"integrity":"sha512-7ezAW472yxxnBzl+BPORZxYrb33RUlxkB5UfYlA8U7AN5UXZdfMbV7M7TMLL12Ry8qM26R1B6xawlSEvay9r3A==","signatures":[{"sig":"MEYCIQDicnu/ZOMHA/XeVELbg91wKy4eu18Xm+li3SQmXbqe1QIhAME7VZFwzGznPvvcZTDioU7bAuZhqp1ER6LwT/Ehlsyr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+kmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpFhAAkYBQwF2sD9ApKlrDXjbY4x5hZelbqctRbhBL9a0H37ozDsX7\r\n9sHJxXGJDrNF3sbJIgekzXlmrOnXGH6W+xcFUYSoc3nUmE8Ge8OeVzXnsAlT\r\n2UqtGyjNnBL/tmDU70Ebm8ES300dNlPH6E4A99T8RXE5rokCXqxsTjX9iwlx\r\nXHOFKgJvUidp2AH8NxzPfcXLSpIZRwA6A4rjsv544kLLsH5ZlwTzcazdfBsk\r\n/nvGk7l/CHeXXWlafgCFfvocUgimHiMbxBS9vtvAiQbd0nbl663S9LG2qWcP\r\n79crSyx0brmrXc9SJiWNsNh9LJD2IVgns2iQAh9vj/GyoHKXJqecJ1TOWzco\r\nB5JX3TEM1k4Qsn1jUISC5qdF+s0Bw8t3/m7O6j36oDo90qT3eKOj3u8SCTeX\r\nnu+aFm6pghUKThT17aGhd+uALJf8KLAAmMgoYBMsPCpT4UnZ8MPmmD1hfR8h\r\nygUP/qBlWLJVkeG3XEO0pT1fLBQ7dspROnxuqA6IC9GInx2e6OqTWKI3TH5Z\r\nXcrmS2pYHxmbLOKZACON6khCfeccrwDpvIfA9Mh6LwqkojBKP0uNOVQB4I/q\r\nMoJWbgOytcOp2GB/ji23t7k9oPSOiWexrQY/haJC8e8Ttvhtj5F05vp2Bw3c\r\np54s1i5aR+uWKfZhv6llwbq6MczEmOI88Wo=\r\n=hOeu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/list":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/menu-surface":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.66c5cbb94.0_1668540710468_0.9967148384142175","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/menu","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b01136063.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b47e8a8fc7d39355dc956e5a1b4aa265e04afc4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b01136063.0.tgz","fileCount":38,"integrity":"sha512-lLJqPVK80Jxy9fJNxkuyrGPj0HPvLKuplDIYZ6Hrj05nvXz/CA+GnQtE+MMNZq7G8rLljQ9MmR459rFroAfBSA==","signatures":[{"sig":"MEUCIQCIWRA+zgka9s7RYR/24ds33i5tQNzuVFlTIEgw6ybcMwIgUI/Cp6OYUFIEoYl3VAeIXfh6/VELc3leTgxyNFEkjqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCwgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog0xAAmV8xCzPVkCrLGyxu9V3WnEzTk7gVgxRnjVqOcDFvakbzvWtD\r\nExdDdJLA8ZF6rRmtkfI6qhapffAJd1RNqUD6xxumoyL6/2JkwBnT5Z6OX8+5\r\nrCXOGC52Ho2Yo8j/lOoXgLeeyCRfOjhC1uXQj/GUZVox0okWhcg2G+fWYLsf\r\nhtk/PMhIk/4gdXo7QbzU4QAuILgovES4BNbRgDtsPB+ZJXxTfkAYSIs8xRVJ\r\nDPuiC5foTddGT3KHpoFC4p3/CYqHTqhPPZKBbMZHVEko1IW3ULtclVVVEBSu\r\n5tlWvN77EOZFaF9nTSYxLU3H5DNmHGmbRY1jqwWocOwP77x6PlKY3RkmgTue\r\n17r9mItjYXWmfUxcXVPTzN8HCezNhi7dtoUPhFYow9pOzHtmd9MKcDPf9mXM\r\nNhhecR7DJss0qTuq5sbyVDuaEdKPPZFPgFxMPlswGIZ5f+zjqBXdRFasodct\r\nxnnHL8TRayVuAJUQWTG3MktqD55tTrCRKnPlI9pSqcf3uj0OxwSqPvgsweDy\r\noKlQig1Kr57RoBXCRLx3DE3uaF9Dw4yHUDUUBmg1FbfLQc8BXMSn9Cer78Z9\r\nZ4Qy+GR2pYryhv4HnNuP/5Wh0tv9mq+pu9D41tBkrADDHJKVjQsxH+GNCaIp\r\nvYTzohyuBCyvH2ElPvFyzk44N3B9IAYyarY=\r\n=MUbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/list":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/menu-surface":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b01136063.0_1668557856649_0.04891578204374336","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/menu","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.01da0cabb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a23a5f6847ebc84dac7cfcb5a27ea91d089bf3c0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.01da0cabb.0.tgz","fileCount":38,"integrity":"sha512-+kM7A4ORBjeAbH2bmXBZnNOQRlu9MDMJn/hNck+KP8+nE2110ZoWwbR/EI5te3AquXHy6x2lmoskNna95wliDA==","signatures":[{"sig":"MEYCIQCNVmlJ4DzHtrj0iI8bIQBK6RoZwVyaZ2IWovkYOvFS4wIhAK/CGpfZaNkMIdDLSidrOY0UeOqOPE+qLB0RbW02z8+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKoUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGNg//W2xoDR3i1OjT/QnTAmtHECqGOUJ8g9yJ5O/EL7DU0Da5PLxq\r\ntt2Ikzry3ItOpbjgk74dIpZ+5u+DywlXUjYPJ5WVU/zg+DCSXM0uvQKPb/95\r\n4m6ZRqQg+eQTNZa81ZiYUpkQGR3I/uwTXS1RNeQLI02wX/ofyT1DqjON5CVv\r\nDhaWaZTfa3BerLuHPZpctC9fUKboJQyG6gW9n9RFUgB6iaNSVtS5txG3JbOs\r\nYPmVm9J2iTcHxNIEMv7EFK6JSoMs7vFYEd8fXus14Z7+u/gp3v17l3W40XtJ\r\ns1nh3fAsL8VlMu0uSLTCn2MirA4cEn/99Njb7T9ZVIOJd1qszo5Cd7CRzsA6\r\n1/NB3J0yk1lMecT0laFzGWY988t/6HV9Vsn3ZsaIM3kR6PvAR1hZuioukxGG\r\n4OlPK12jjaS4yDwdXpli3dpH6Xw3RulSiPSHe+9UA00rTOYtGfcI9OaS/4De\r\n6bzab0Edle+lQAzhbtsG6HdXBer0H6KkKLeIryZgiWx7DZzHqbjsySjxNM5Q\r\np/EiR3CVDzx0kMPl+7w3/wKqYJGlyNlOR0o5ngYUUW7FKqlYfRCX7iwyxKvs\r\ncr0fwLhoLzOoVITJBO+ZLQo4wJbQem6Jcl5BvYtdoGwB0yCYjnmljca0MOgZ\r\nCvDD7So57DD2nFlsP4ct0s7W7qXIbYIqW6U=\r\n=tOyr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/list":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/menu-surface":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.01da0cabb.0_1668590100366_0.5752684007835525","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/menu","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4ac393164.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3f6033c7a6f707c6f9b31637fc32b6453b12778","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4ac393164.0.tgz","fileCount":38,"integrity":"sha512-tFBIbzO8moBIyQQFbbVFPCFnw6Rob8yQJjqTOBnqJvZLDup902o5MUNMIkLnL0GgvkZD8OV0CJZoWj2Iwu2/7w==","signatures":[{"sig":"MEUCIQDii78uf7tPftDNuR4AuqabVcW0Pwvspv42NF22A1yt1AIgY+qCSfyz+Wy/HZM/2hvUJ0ga6pz5C8MFVIPmDyYOQ04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKUw/7BjHHMdxY4Z3sOt1G7FP+Fjc+bK8xw9ZTfNrbN24rLZzi1Pin\r\nOPHaQhXw3HpR4S+RspCNQMFqt0XPb29TPx2BWUAxe3Fe9y8mZ39Xo7nZRTci\r\njmxooLPDrm6JqzYVsYiy/OJ0LaF3CK93xJyl2o/+RBlm8Iup9nL4Ucgz8RBg\r\nW/CkxcUgRTJ29wB624/QkmQCQeAo1AFid9d3udD7vjaOhHH5YM31GxL+t7Vj\r\n2PGY+ND4GIPH1ER5Wcqzr8wif2NlsN8NOSukhtk5ex5EM1p9g2Z0dkiiTt+e\r\n3daarJn1tH5Nhw5K58a4mjqjRPcQn2//EqAbbWxgyrwDXFKaIcHSFsvAAQY8\r\nIJY9oOIW4MguE9lGi9qbbvD9pmcV+mchLwanzNS9zFkGWk574oFDQH08bHmF\r\nYPV8AVe3wG5T59eAsrNcU5ET8AGLRs7xMeq+WEZBGw1YFpwM4xTA47PlR2IB\r\nx4knj4DriN+GGQDYyO8EoKRVe7iYc/bYglbD0C8jYiueyr4cSWZ1fo4UacdR\r\ns9XRQGJv4rcpHul4eKVJZtYZshzukR4FQk5jseQx1gYzaUoBmH/2olGx3pUS\r\nKdO5n/C1BSdG0Pbk5ijASutY0iHMZo6JVB5KWdRllAFBr4EzQvgUfOAyyFt9\r\nk3hdpZiw/nnYgztCwG9QEVL5brQjod1Lc+o=\r\n=y0Vs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/list":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/menu-surface":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4ac393164.0_1668615438782_0.031394165350248526","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/menu","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6048fb563.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c1681f1daf1d63120462996938fbc9b5b229ef","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6048fb563.0.tgz","fileCount":38,"integrity":"sha512-FNBYgbRE57u8Ftv2gKyN/1iUsyNnSg8Zc1sfn9H5BNKiegr9gbSC//ML+HiggJ9pdT01LG9vJwUFxa4adxxhCQ==","signatures":[{"sig":"MEYCIQDFAKLnGG/U7v9d2wCryZNcdgHvZzyP5mGU1l666aj7TAIhAPf4gfgVWqlWbkQi+oOf/az5hnCcVRvRp1F1r8vr3TrV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ2WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDwQ/7BeRGenjJac1lFB86PEpCz0oPFwNHcHP5QkYebfBicJeANEZC\r\nn25pVHXtzJ8ixIgpRMv+2qNtePjqsJ9ZKzacKtbjL9DBQRqsQioScw3RhuHF\r\ngAFj7/PuIiJkIQmviQ1qVbK2n1FVufb2zG2aPYjeUQkHMRSygY6NwfW7Gx1c\r\nxRhsvRWdyzXWhmWWKgjeQnkA6MVGqHXy+tz6ewJfXvUJZt8iaGa/VEtAx+LX\r\nX4ISMRaX1tGba3vzlyzn5QdyfBaFS31O0qIYD3yna1/XrscwfC1ektE2S1ZD\r\nju0bvUCrWRefdvV7m3Nx42ok5pc9+4uxBeYkae4q8h5gpksBBKraNnQ52asH\r\nRbbvsaZX0O321cbwBAc540xezIAq+d0pDE3lUSmni3gwFr+F8dNbbGQVuykG\r\nok0iyggpPes10yCGxxvTI69nj2TcmWLt+SRTV+K5NQwkWFqAsmpdvwlxq5TU\r\nlX04WqvR/1vZ2sRrTm0dYWRcwK9Un2zkNAjd12x1rLqaR7ZrW6WstEoiRUuC\r\npobeaXWNFG7q3NE3P+OIRDRqeHg+iDarvtnRYx7lwl2waGGIsgDOzjfTuhIm\r\nAMPak/QA2isbvwoOyL4Qhd3nleVpGBXN/ylQ2E0h/R2tuTa8WSIZa/YWwnWk\r\nNgpc90k1QpVeA3MJFZkJ/ufraqBMzC/b+VM=\r\n=nZ0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/list":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/menu-surface":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6048fb563.0_1668615574018_0.03246786401033752","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/menu","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f7f56fff7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee39d8c9db169b4a365b2bc05e427e12ea45ae6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f7f56fff7.0.tgz","fileCount":38,"integrity":"sha512-zCqC0cRnfS4j4ea6Jw2yoE827TNAHWYQhX65ZaDzqX37g7XlCDThSmqMtW3pslkFAV3fV/OCMoFEZa1kSWCCrQ==","signatures":[{"sig":"MEUCIE24eOlJmgZ5A+XUoNbU+Te/canpfAMEIR3glknC0ejtAiEAuNARE3DM9rMdlqN/BGSp1IyMflnLEJN2awSj86xx8gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi6g//cylUL47GeWH/JFw9Ay7cPD3d/i/oqcox/KHniFHnDhxQje1O\r\n1XXDxGooxZxjeS0FP3pX7Oh2iggse3UHDoJI+95wer3gSwWx1m4ihkJR0qbz\r\naF8eokUGmwDTuNbUN79fqNEJFxY4NP9sarKik49RK9enLc8VhQbBqGINJnvE\r\nRpEv94KUUSDf6HsNE08yyLTIdEm4fMqoW2FuJj37+xvlodP/4wYmyxZzjxva\r\n4pwrXtd0mQs/Cg36saNdqRroHM0aODOpmU/V4t8GpLzH00p9JxR/4zFSDRLB\r\nI590HaaCJlGavMDL8/J0d1I4i8b31qZKePdbWLuold4q4kZEgHfGWBF50OSw\r\nmG720w5o7XObrrQ1Mlhx6appezX2p7t5bfkclL42/EfYBlLUW2m3ONKQ/9Pf\r\niS1eE0dW9+tFExeRO22eT1mvy/LNm/PTh2SGd3mI4RghFR08/WTalhArPp8U\r\nhvug6bNXTb57vl1b9h3vHTlDTAPgSb5axlSm9L3rOPDMX7yyOjcUgb41Lm3R\r\n/N1quHNuJoF6Mycp0VoSc+Mh+gRklMJmNfl27pTiVwg/+9rxLtWu4Laq7t+1\r\nmw1uPqvIbu3sTKUzJpoQ9p/KyiFHRqNc9/BOFwdhHpGwhGgju47IFxXyIqOH\r\nHfQv66GDIOUYM7cylSkAmaKydVACdnS855o=\r\n=tqjB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/list":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/menu-surface":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f7f56fff7.0_1668628663128_0.8682204850446702","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/menu","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7c73f6134.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95f10e5faaea619b44e2c9bcb5061858480d999","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7c73f6134.0.tgz","fileCount":38,"integrity":"sha512-NgEQdMxNSGA/9q8F4uNA0BzkpVqpF0ffmb0zUgr/rTHdJb5XT+T7xVouhiPTx/W57D1b64SKhmNU2ZyumInWFA==","signatures":[{"sig":"MEUCICuq4y6Y4kbaB0av88qICleBaBxb7xu5yBRGQagey/bJAiEAtHdFlfEoKoTY7XWzL3M0tYRh4/meNTpXmDw07VqCidM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUG3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzaA/8DECCe7brq+RuuF6wsKjeT2hgN6xTIMFQIK3bTm+GU3CoxbsR\r\ncAtU9thGcwrIyaNakcOgBNxFr9ktkERnsPQ1DJAF9QNUj63ZaQbZjs9D9ckN\r\nDftzxfUOgQkd+JDNR/v+9ZSq7A6p5r4Tl19+O52D4U9Oxk+bU2jjtsCzsrjS\r\nZaVJGOboq2rRdjCTRKp60h8y7mlgcgkBbflIF+8R+5PBc1PsTS/CazOtNMfp\r\n+o5p4TWln4no5Bd+qYJcS/ExuRcKv/DDUCQ6xv55a/evyO2Xu5fzkMqT49+X\r\nbGDQFMidu9WOB5QC40vl5MHQpVQ0lu3ghQQ+lU23+AuZ9wnxZvdmvu4QLAIa\r\n6KMfpRkhMIPgqJLpoSSygUJKvWUzVCDuFCzULXyEWW3QRh/d4GnnRnjhDkyN\r\nyQq5bfkt3CO8BTXQ8ZCciEPIoi+jFNH9bBBWPaXdXVwdxELx2K2UIRqeh4kH\r\njSa6KJUU3QfkCmLuy4HZ9Fck1UnX5h0EpqtzG6X4Uru2fKEZvi8WNbPggZB+\r\neDCZFaUjWjLf+O/UykONbN4VjQvbZ62yAQuJYJKyFQGNm0uxDPwitWLd0Qgv\r\nMPhogDs2cnXwYMcHSiXMTCoVsjrnG2zEt4K3kxM6SXx/gzpPqcQacMQaOPEJ\r\ny0aVPzI84VmwTTqgAYvnkt47SaRzXIaM3MU=\r\n=qMro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/list":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/menu-surface":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7c73f6134.0_1668628919203_0.06805870406745518","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/menu","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f1e037150.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df1c4a9e7b1255daf93150f82bad4a230c9be096","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f1e037150.0.tgz","fileCount":38,"integrity":"sha512-ZpJKxSB83S+W6KrfYXvMAxicev/0/i5tB6VTToBIEha8cJkfQAdGXpE5YEFUF0oTOWNxp4aS27zK0BeAUl9klw==","signatures":[{"sig":"MEUCIQD/ExWUfrE/vYv7XGdPX4bXU0s5R3rXXgGrrSqls7TelgIgQPC87GCnx7BSpYXkpSr5WoLHlYyyYvOyWTePLUMP13I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":821168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdULtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre5w//cUqjIqq5SCusYlomPsG4E3BINOLAXZAVRm9pG0LKcbXi03cO\r\nITOUFv+iXHZPhKaOYhkaPeJ1PzZwrrSJDBDKFNl9XuUnWOXu++zqXrTaedxZ\r\ncKR0ADRVI4YM9Lwvcr8ilvei5AyKgWpjCdClad05GRlXFka38hHiCBrKy6te\r\nw6W29JJ+Bneg8MBQcW6oa7k2oeIBLwLd39GCbtUgOsOErs53NKTawxbUQxO+\r\n85mrUdj1XYgUMNo3z/7RaSKGb7vL/eG6W893XPxYGy0nXOMso9aabeskETPS\r\nHaZT3tkOoIzT0tyU7CdIQvpMocBWPNuGb/91Blb9xeFYVBuQStv88Ulp0EDB\r\nBbeC1NCJao/XhKJIJBibEHi69+M78a9NVxRTdgwMeg9W/h0+T5CVAbL8FU4P\r\nR6XOe+xpEIBV7iCgrup7FRPstadofCTIhdw/4UHGtATb19vgPPPBCxIxKuWo\r\nhqlwd+nSLhXMGj9OdWFriW0WbG632qPwaj623Ndq9uit0xE43P5Hw0/9uKic\r\ndnGDJ4X62K/4NJBrycKoLhotuZuiBuTDQGsj/HsmdldyCN5R4fa9DrI1zsV3\r\n3hm5nVFm871p39NK2iLUnkamh4qXGJItKBN8Ww3m60xffxv0Pf78yCB3+Xzu\r\nI4QhAtJHt3J6M70LM4ty2nSi4leeoqpgg3I=\r\n=hU16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/list":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/menu-surface":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f1e037150.0_1668629229464_0.8469158678419388","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/menu","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.40b18d043.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21d4937ee8656f8be0cdc48fd04a5fdb18d51c8e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.40b18d043.0.tgz","fileCount":38,"integrity":"sha512-rJ883Uyk1ENcZZwS6upzDvL06YQ3rek1P1rOousl2xT/Z8q9siODNrQy3ZxTo7pDVw6RspozQe1UKHMJBqASAQ==","signatures":[{"sig":"MEUCIDg/Vc8dXNLi60W19A3a0s7fdMbknmqEDyP0DrHJdi+cAiEAh3PxAnYPGLQ/00iQr57RpyPviJ7/Ke2H4S7CkTl27ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWuOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8OA/9GRJF7dg19SpPO+Naxm+IpZ0NixJhLNho8rm3rICV5VB0WGqM\r\nBloB5jov6beKXkzGzwLqWDipMmqPkOwoY957z9JMRCtGtUOHe+dLEjoK19Tz\r\n6sr0xuQK2deWHDwxAOx1CERcnp9mZU/ryfRSNIP7snShL8UsVwLPZ0hxAkRc\r\nvmD/qsLU2fOkQJUmNR+vTSTp27vAmHRG6v+n7Z4Pxnji5LqdbOyLc5OVbmud\r\nPOKJoLwa9V/eoc+qRz9dUmykhvhEDzv1DbTVDEiLWel+2pCNs522yhy6eKAq\r\nKh0Y0qJyiVnpxt6Er+LVNEmVtnPM3h6zlxFl6W8Ip8Awbs+Vx4O1PRCt5e0v\r\n6jIB59rn9MvGdbdB2uvaIeQpVNW9rDajMptOX5DFlUKF2QKyR7YoShG2fQZS\r\nFIPlH8ChWxqmZDGjANiJOiYhPlbFEHeVDMrPqTReg2+qJhvp+ewwJAHK9qzC\r\nnKe4lY8RFNjt5UEY2TmE1YREkQySep/K3GzSHPkLAFUOyYLrXuZAiQOQzkPw\r\nB+MqYcrHk+zz0o762yJGk9tRHGQhp+RBN+oIBqoXdPQSDyoE6RNtp7M0O4Eg\r\nfrj97DoLeJ0TUVK3hTgNG3Quc9yDjVAKNGX/OZNo3yrKtYYkez8Ieq1hjHPh\r\nZVPhPGwZZXm4IpryK5bae79FGQuS2DMGWNQ=\r\n=T9zE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/list":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/menu-surface":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.40b18d043.0_1668639629998_0.7556486737889292","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/menu","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.86bde5c06.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e129e39844c44304b7cd7e3108369265bc936a91","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.86bde5c06.0.tgz","fileCount":38,"integrity":"sha512-IwaoxL4LcJmzuXApS+SgXbILCWkZtEOMeQEKqPoLomqRy1qLgK4kPLMcX+mfT6FXSQCm0ja2pLdwR4bMn2MH8w==","signatures":[{"sig":"MEUCIQCeeoYsS5wY7LUR/7d1/+oPm7cMXBzld47QtJ0eZj0LtQIgUiFotmNQogGy4dTCybt5tMAhZukqe6bbdsoW4eI1U/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNkg/+I4x4V8D+F3jOJ8yz2aBOwrlQlQWD/Qi7GIz31yhG/9wIyeRK\r\n3uO3yPcsEyOOX1+tyAi3/c9VJ3nPtC9lEhdlzErrPgmvlttwLOis/Cy9ytH2\r\n0lTTn4w2UQ5+7g0jP2tTUodTmrR8GOkrWPeW7I21UpKIbX9TX7cDRy/VFidk\r\n8hyuacXBNfe2OnHealXkTjcg8PSw+6H/rYo0mEFlA3nXf5TeZLP/1kxtK33x\r\nmve1AYP7Zy7NsaWYsiO/CI86taWYVpOq+kurtMC4s/3eH5IPWbhAwal0I3KZ\r\nSG1UsKSfvmJQtMB1M32413pQFrB0tVFGfsst9x6advu5WExTIkVca091oO/m\r\n/2i0qin0Nk+Qjrc9FmhjwNHhxCRwHljkjJN7mTCYRThvIi2raUJIf0wx3YPx\r\nkm2s0h4ihLVXFK9RCcOsledJjdYoTm1xHStfRY+WCJ6QVSTeKXmk7YWq6Ssu\r\nKVd6Vl2iKcm5klon3ZA2piVbSrtAoTLJFfFDjaBGxoonn1n8dZgFt8keV3Cb\r\nUSopsgGY0fOPg1T3q8JtCwEssh77C8dBd0ako3p2lweIDrWlu74np3hLWkQi\r\nvmfJV7i7yOUFWn6cYrAcG0xfRmU5KBNg7Q1dLriDIWH4G4ppijcdvr0YuDLd\r\nHbmCD9X2hgqf2eHhnmvXT2916kN+AY34AWA=\r\n=IHdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/list":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/menu-surface":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.86bde5c06.0_1668640235551_0.18599763275115544","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/menu","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bb7751002.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76078065e58ba294dbedfde1052e27271870697c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bb7751002.0.tgz","fileCount":38,"integrity":"sha512-mTYY72E7yu1mgSUxy1Gn4iQvrbbO9B1fTHGvezxGDxRKrosynYVjgD5MnWdqcneN6VtmHAQgy8xEeskHv1DHQA==","signatures":[{"sig":"MEUCIG7PcKZU0P7+QnmIa9UMVTqhHDsyWRLnFErjoGogyV3cAiEA7dwRZBijCiyuvi8Q+wtwSzWTN2tatsM4LJq7ihJx/uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXnuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2lQ//USWP9ePz5jTjaVfnimeNKeoAnY/SFepIqQ0UE0DsudgGBG0h\r\neAryZ69G0zZjeOWpfNZVqEbJ7c9CvTjMYjUYJH2VzZizFrWf8O3neGySjBCb\r\nbk21+ZHkSj9nRK02kYTAO9wofagnqtW9c+rU/MxZww4x7TYtgGXrgL+y1zxm\r\nDdIA3fDpMZ2YDgNZocqrRdIraZKgKrTPPfmCvtfZPErhIhj8eetI0J6EagIz\r\nv5s2eqitUhk4l3C/VBLx7z22fcRzCgGfBFGYc1VWfZrqY259kW3G0UatPQ17\r\nPWwWS8SQ9VuI4Sm36XJicWKuHiMNHsCyKJV8a+SrnE8LCBgxVtvxX7Eknr2H\r\nJMCV6oZb1JTOxjsj1v5S/Mb13TGLcC6zj8Sea2x8KGdVEfkUhUVqou/8jujt\r\ntz6sX6ZH7ImF7RApEnq/ScnfzvLmiXlArUa3vanDgLuWFF75bCmhigHlDtON\r\nw/KmT8LM5RAr8yTdDCkdva1l2MC0KLQzqcoPUP9H799c5ZjXnh7gf4y3CB/9\r\ntOacPeBRAI/gt4as1oIddesT7rUk5HHXN+s4+PSvnRapW6Mq/Uan83+kK8NA\r\nrWVT0G5DfDRv/ydBLhF+M8ecjHC1iV9NyF9qSoS4E1h6AC/xddfmdJfr1Pm4\r\nM+BhVbpES++KkccX5y07Zjr8RLrxCmfqLbo=\r\n=AyKh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/list":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/menu-surface":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bb7751002.0_1668643309968_0.2320685763079242","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/menu","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.63aca9af6.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d221116ce5c31199537ff196f333aa2788047da8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.63aca9af6.0.tgz","fileCount":38,"integrity":"sha512-1C0LsgTW+82exT1kVuZ6jnBuOEEx7D3v3Q8mTUUNle3dKR5OKoVBhWQPmbczn9Oouv1OxnY5rWRG7fkrbpYYPg==","signatures":[{"sig":"MEYCIQD16q9eYvd4+/XeIy1JXgSn3WpaB89jkk4bsGdOmZLuKgIhAMcXDy1qyBYuvaPYJ+3vIYK0YLKgdwPsTUd1tnVGN45N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQQw//UIkxJJYO5xQqcnnGqM63C21b3gXxfPIo6AsKeWFFXFkCCPHl\r\nm10J6BLVPscGNM5zuH7c4NfeUoOyCMxY+JfVJuzzMdYfT7uwQMskK3H2cRxK\r\nl+nY4HDREQhw37f5X0RDvfczkqKRjlzBFZEoRNlswJUwZkNkHgxuf90YfW0H\r\nhSGQn93NSi/VENscWDhEZgoLioK5teRM8mJgtS9JaAoeOm07hVmffrzLSByv\r\nzO6tglzF7LSKBAkFU86uTKlFew9X048HFtn9Zptpmgl5f18hrHFd36TRc68q\r\n7dk+FsU9yZc6c8txDq8QnpAS0vzZrgWgD4/HemzYNZInakqVFOHCAA9MoOxF\r\nVXUvuH576l4+uNOP4BrNRm7GXkw/9eni2qcWXdTP4SWwqwYLQrMaIMvjr+XC\r\nofJmVsImCuekWFTcdr28T/EBnNars+7wuG0C7aNNWZh4M2fa9lVAzwUVKSTB\r\nXRMlHGVCViwyiJVd5qJwQJPSc33bMUidATjYMdXctFAfYUgQnD0Bqehpn0Vx\r\nws3y601sTUCqx7ZBDE2ags5nuRg3y13v7tVxp4zE//EyDT72j4FFrwVT/DyV\r\nkzANudHZqyTVHf+LQKkhiif8aZW+mUgi0P+W/08kVEkN3Npc3ga7+0va7Swq\r\nim9qfuKihh1009ASehTImlkaoX7zRDCxuzI=\r\n=8klD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/list":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/menu-surface":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.63aca9af6.0_1668711789389_0.36544029101588826","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/menu","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.56482dc2e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87222bdbdb41a19a184ce22845fd56f99a51d5d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.56482dc2e.0.tgz","fileCount":38,"integrity":"sha512-ZDBtRlnnsjPez+cvtB+gruE6HUcL393SkjNEM/od3zndbFubyRRwxKx+zyc6aIpVOZYAjGjyGCRLm9XRbw4ccQ==","signatures":[{"sig":"MEYCIQDU4JIMY4bVDTzxoY0zgNZ1NO03NSC1Bevf27IYpKiU9AIhAIbhikTpkuI2XDhItTlN7qnNZE7eGw3NzuThTyn6m2uu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvsQ/9EEC633cB3beQeRv6NkjaMBuQBDqu2q5+Ovd7m8FF2Kn3aCKf\r\nramrE3o1Ax/dA6NeFEeoXmrpGbG5Jb3/akTETEg2Y8qNG903v8o0dy62Fe9n\r\ncXH2Pvj93QpWjvISljeUH6/+BAo3ql9fticFXS+3xxwx8G7Us/UkEC7XtfXW\r\nIXEzW39b3dGtaCwvKUG1qQllehYe+5kGpB8rC461lHwAUtKGds2N9FtjfBkO\r\nl6r+4YkzMAsA3RWNK8goFBQpLspCS5jPnpr0o89q0mXR/3LabYW2w2TsJY9a\r\nH8esStqRDWJJJdyxqQlWSaR9Uku4kVe3YqNjZDxwNbqyiAZFP49BTgIYHq0I\r\nsdHyfC/Rnugz1ypc/VZP17V9d1RaOAcUmILk3lsoP61c+rsSg0kSMvXBdAB8\r\nAzi8kaSHRkAASDYSM6Voak7NAtQ00tHRPAcBQBKvHJnV58gK94A88cHMre91\r\nRh3qVHRppMcjaLmngBNlwOellpbmTCEin6lQ1C/UEu+A2ZdsvnH2bsk54N3E\r\nGhKavsHgrXGc6a5rRmqHzMBS+5VMl/CTDKLPZ8M8HFPsVnQolgirg59gIWZr\r\naPkcU/BPsgEVRjgDFpy1huYSHqwVJpsR7Fba0KSMzub17VZbKzSEM50yI21p\r\neRllA18A/6bE+jDCOXTi17inC5tj/+tnzxk=\r\n=Ujvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/list":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/menu-surface":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.56482dc2e.0_1668722214850_0.39725700263049823","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/menu","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.953e689f3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ac6dd2f556cdf1d5b2e218af33297e106de4b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.953e689f3.0.tgz","fileCount":38,"integrity":"sha512-6TW/n7eNZACJZWiZaqG2MvmquRkYVLUMBjsGNNhOfOwQ6vZ3ma3SWyRJr1g2/YDhdf+iKpC3CModQVHtf8b72w==","signatures":[{"sig":"MEUCIQCBKohhJ9eUzyK3p5/oFzsOtLC9abMyqN7htAA76IfkqgIgQn6qBgn1XAv4uL9XM7ppqXl2c+zxcBsaN4Q8mrM71Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouHxAAjEDTVXrWaZtEgLNjqpbnqoJ/25XFfui87THmjCgKRquRkDhD\r\nKNVoQTOC8ClWcSRMBJzJecFVBNIgw7bS0nscDsky72WbiFxsvGYmWixZHrrm\r\n9IvTuoy1N/wBd5NjAxzm1+hSMP0ZUc6KrVDv0McnrkaErsif/5x+Y13u3GGB\r\n6XUKagn1PiA8PDHHerHggq1/zgL/XK9ma4bs7sPj0U4qRRFXzfrrRDi8G46a\r\nJaML3FI4o7qczNIlUsiCzsMvbbRvVriLmVi/nsaV5b09s5x5prsGP/MwHZD0\r\n9CPFmhW8BvgmiunCQbUUewWXVLrqYwsVMcm7YZQNpvP+jniITDrNb8aNa1Is\r\nLauDd/YJUUylYhenExB3JT4WJYodyzD+WDor8IlBr77p0JIPf3T1hWIQVzAw\r\naa8agMrQzda8/YNJmB3QNWVAHbobY8yvllADFb5Im3VtrJgEKOZ5III+uGG/\r\ngwV4y3Y+llcoN3XQ0r5J/ny7GpVnj4YzhLWI+40+80DgX0b60E/CPieAEO8y\r\nrZ6l0ABvebryV+zMqtGClpXEFlLN2EJUzvYjtwHoMyjXQ72lHaF86kLbuYPj\r\neXiftE2qQCWXkqs9eZwi1Y7JhElRilPD8CKc4HWDtxthDN492020qRJjsTGZ\r\nnYVI4DMUz9txC8N0gHLpT62BgVAZa1L6vfs=\r\n=FwMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/list":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/menu-surface":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.953e689f3.0_1668722785333_0.8833189040047882","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/menu","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b5606a793.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae37031b8ab458b6d321935abf526f07cdb7a4a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b5606a793.0.tgz","fileCount":38,"integrity":"sha512-YbMQPjiFFwerGKnCNyENCSTzJ4Al7lcQErIKlsZnxdt3JdFErw13miOanOrX0zH/oWDciT/LpYTW4txly9nRcg==","signatures":[{"sig":"MEQCIDtxZIZWkjY7sLJZr4iAEUA3zxpjfUofs39qQG+jSeYfAiA1kX3KmIGopIiOlpKOqC0cNf+SPI0P5mXrTqE/q0HVKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1z4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnChAAlb+kMT8si91uplzVzomTupAe3AZZEleFIxOYowp3mxlMR7f6\r\n1BU4X8ItmXlLGeiCLxKfr7vvWWRZimWSrWI1hnpDrOTv7C7e9KU01sZWxJcn\r\nebUccobj7O3DxgPTN9N42351UQ9G3+plIULNPk7MklUgoQ59khJjDWZKyo9t\r\n/mWrwPnxB5JQTyBIKfRiZre3y28B7bM4HJ+kCfr3Gi0ZUfBOmYvw0PVdsYn8\r\neCmuR0c05IwvzbkpDpxfc1FXPG3adYMDZiXoOZcb2UkOGThoynXqwsPdH355\r\nMOm9nnsQuI5Dqg8FwOo8P127Fq4csyS62tqPr/yxW4UaCqdiLgXPPfvWODqO\r\nJPNybNYQHdfa4ah97IiB+1t52bSDjSFbeuy54P1uwBhbZ0kbx4LBbHvHxLiZ\r\n3i187njatQwQo1A5cc02I+dYkyAbWP96qOl94sUbZv2LunIly78dgCiBrZjC\r\nx9eUXU471K8wKhjIAozxVwU6kLtRYe2CQxtpOHZIF/G4STT1QIJND1breVMq\r\nKvHnp3wwJH0qEfjYE3pubKglspKjwJ3IUa2lntVZup5iTol24UTS3Vr8W/ST\r\nloliSQGJNpjXi4LUGfLJpW1V+92gYUBPURdUNqjYIVY61HWsAVGST/mVqmIM\r\nOZm+AGeDCVzJmOoVPAoFsIbkagKJdPuo9DI=\r\n=VG18\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/list":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/menu-surface":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b5606a793.0_1668766968733_0.8466775736552545","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/menu","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8c5675942.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd726e09f5decb5ba13d3b01bd89e73abd93c6a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8c5675942.0.tgz","fileCount":38,"integrity":"sha512-eRgV0hlPCTYZmxN7suEbahmcKsG+gqYr580oJFHI2y4m944NbJVw1lNqjPZq5j0o+5XqkNo26Zqy3FnnbC0IUA==","signatures":[{"sig":"MEUCIAC4x370xrUQ8DOgCnyo8epNS7m8cLcVv1GTDeaozqXUAiEAxNo+QIOe2d62oqkkqsmze1FbjZTuAaTpBjztkg23LpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6IvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOTA/+MDgeDTBMWCq7lIsIAgMxNfmyX0IhPHRGBeCv80cg8DzEJoQi\r\nb+AzaGUT6uKxajj8C1Mi004jmBOo811FnuLyrnqq0k5o95tGnGT4HaxeMgS2\r\neoah9lSkrbTC32p9qkCYUc2Mk1jRPe4dpdKskqvHz96BvUj+tBQF+ScgGSeL\r\nZ9siWW063YCKDvnhgQhuDWxWyo69knb4aUnU4mKvVJTUqbFa/GcDccXqqGZw\r\n0vYr8Wx7L2HWLKrAvR3B3+ovw4N85B29JZIM+lX+FnmtMgZI7OUMmwQc8stu\r\nGuM4O1hWjRGU+xecR4rCvsKXUAk5d66WeuaXgpHRsacea20SCy4mUlVsJWPn\r\n6/GIS+hYsznsor1NsQK/qlpmk7te3nOHzH2ohygBwXLFqq0g0fL2VEmujjqZ\r\neVnXLEkwN8zWJqCB8rLiqFotdyQ282kns4ewngxh7gejMuJO82WSPhgWgqfH\r\nqlbSwn92R6V2FeVfNiNGRVavON3BQltwrALaMXJGJO6rgb6VwEVqszzY4krv\r\n5bF4H7+McxdrnhC7YYc6FVXP30p/APALTiPgKZbZjeZf4WJ4PQEwkX/7sxgb\r\nBZ7mMrd+5ZAuXPHWUsveTAD2unmXw40e/L9CsQsWj8qb+8n7BS4Niy8eAMLe\r\nuNnLUuclpC75Rn9Dty3sNDTnsjrTkw1cwXw=\r\n=9ExE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/list":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/menu-surface":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8c5675942.0_1668784687445_0.4999922222626514","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/menu","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.697fbdebd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f59ba8a3b89c1f009e4008483c583adb1da33df1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.697fbdebd.0.tgz","fileCount":38,"integrity":"sha512-4aQgXp4cUxOnG7AM7oDGCLGsHgrqk3sp8Hvh/O4pZzYKoDlHxSFl7DekqAqwWMRztG70l680FmqA0R8vAIoZgw==","signatures":[{"sig":"MEUCIDLef9e3NCQlmkQiCMtAmr26rkOSEDxsFn7j1gp7kK2KAiEA9KpOI98FmcovAi3hEaTyPx49pz2qvnDCXDc+rPy1d0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7q4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWpw/9FR3zyvTyEdVemDTLDGTCHO5gUcK7M7/vR0985pOWJb2j9TmA\r\nr6IDs3mAjoPV7bRGYj616pfOngfUHAe+Iiiq+CYizTMta7t7PAGABuuCrS7J\r\nhvDLqh9C+313SHRwxB0YlQFsNkJvwyjlzzdcuFl6OKLH8cSyL0TLC2ZelqzC\r\nNRb8iqZYEC9M8OLkgUqASe7PfpxG9rmagzTWlsi5oZ+lg1h4XEsCPjsntDQz\r\nFT29G56Rg7kBeRZOwcCGElYVpuFRvlfUAbTAa0WjKnIGm8ZgwNKkobZpt233\r\n+WgN9CKlUtrlg3rVFkr6tf4573DcSRVW38a18m+02FvoMzQVq0TiNTBmFhu1\r\nxH6UtZpFDre7SsL13ThAmvhz8U5UmBMfz2CfQ6eKAO2ReDFwLR4P2ImOTroG\r\nis47NTk+u3BrXWfGUdQC1gPq/Z78wozu2p6zlXn6eHWPMkb1M1L9KJ/gEJDd\r\nGgDwLUdaVV3cZayQb9MWUvQ1H3Xz1GzN1sMINAe9ZbagEvW9KSj0+TQEdtsi\r\nAA4RFyndKufRf2FgqKTizfD/92k54hqPUM68WKsYvBO+7wHHrmPezeMm1d7n\r\nWx8B9qIpxjIylKWRIskxWF8F9n1Xs9hOkEx4Nv6810b/kEkO5yJf7CHginvS\r\nZx3KrTo5IPOydn3lj4ugxSumDn3zu/ilWL0=\r\n=XiMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/list":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/menu-surface":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.697fbdebd.0_1668790968392_0.1089973106836819","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/menu","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d58410453.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"437ec606c57853cfc15b4d2f6ad76bdc5abb793b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d58410453.0.tgz","fileCount":38,"integrity":"sha512-P7UIM5+WXldNZDqHdl+CT+pahn7NyHz00Cxuby86l7gPADBST5O2Rc+82GiIsEJEb+EoX6G5DuLKevpIsZawKw==","signatures":[{"sig":"MEYCIQCEThD+egZX8NhtOOgAzwR8grQEdmYrDviEizk2srX54AIhAMIjzBdV6n42bvC7NzRrQ0Q8mtJVIMpxv9PNyBKYOZXe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9x8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC2BAAmFTOb6Z11GegpsMq0TxNBm58iXz0zqXyQADahJSEu/exf7UG\r\nunknK9RTtdngbrtw+q1pSkhykqLMyRdmr24PcO/NhncEq699yT7yc3bUmj4e\r\nN6FRMwYRRu3ivHlOsj0jkd7e0ARa7UyhTTNcyDPahJrc0QpHi3dC0ywJVM/r\r\np78VpbPpM7/Sqeruzs6HvngojXBoOVbqrrkSBIpf4WHcZeCu1+s53wvaQbEz\r\nkPs7onl/O9OgQGaGkahAtty2bRS5BsYoD/wzp+5YZ1uZZytJm2P1cxUnFRlD\r\nfmJ0Uy5phlR2Q9X+13iDt1sOaf7C/fjQS/jyR/F3dd48w1X6oPyyV45f12DA\r\naHKbXm3wnGakNrbK9X+uae4pLXDbCCwwA+qB92wCTQUZ2KAulcV5CXoDxqXa\r\nSmWoM4WEyushfKXigvKvigxuqGcnEbGDzyl7tyhjclMZZzkaUM69nlHoO6jZ\r\njJeEnnVujS/iN1CGNBAd2bKiFqSEXWtUjnYiTvjSpq9RJxDVxMGx41zaMb9F\r\nizqEt4UprTS5FNy67/tqp1JAXpGUtxkXiPh3kXODro8Bmgz15RVQAINXYxTc\r\nL70AxVFq+VmVVIpDIlaqOPMwisgE2SzhT8y5W/+7LbTspdN9HwychtqDtrm1\r\nWrL+dHYofjYv2PBE5bENKBHYP+J7tkOAFes=\r\n=XYEC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/list":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/menu-surface":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d58410453.0_1668799612385_0.7056434024087752","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/menu","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7971d6ad5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed4880637d14cedef684a615ed2ac2f2dca4705","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7971d6ad5.0.tgz","fileCount":38,"integrity":"sha512-Xa+tXk8kMFMhdOYrIre1ye4L23i4LzEn48FN398742m1K/VY/IxAuslyQ5CmX77CxkOqbQFqwUarUTod0rEwjw==","signatures":[{"sig":"MEQCIAU0DKxslEuX+XWpiG9fMfwbAjvMTJqkMaHhIEcPsRghAiBOCokFehsa+/kYnUdDhbpwvEzVZiTwm/9H45HGj5Yp3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJf6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJPQ//fLDx3OR0n95PUrPamUhv5EDZe1Clrd5+cHG7JPoAimN7AsAD\r\n6Wfqu5k6P0ETxj5+7wWYlt/cuLDG6bIIWOuqhpCf5DMDWzX7HmyrQYVEw9gX\r\nJ2uovVplRzExz9K4E/3c/YSlusgAI5VBVQbFzpHU2C6/PzVE1+HvkgtWt96P\r\nlT/csFe4ntKTTQ0Y5TZq9hbkCy5916l1WLxylHjR51+eVJ8aqGVLPv508jHd\r\nQ/muXZeGEHJ26FcdBSEDawJ4+6DeBu5gXCzRTUonvI5+vHEfG02/hxntoRRQ\r\n7FwKAh4jslkopg1lOdTHC4fbqRUeQxNuUy/LXE4LaNsku4GlDpHvXG4j86nK\r\nvgWx3d2v0vzB06BXAjv7DfbZ9LpwGRAufPEsyOeIl2H/kcl+wz0fYWyXFNvE\r\nh52FjckGIJVEQUDZio5IQAC0H9BI6ov53+YHPFGaKEmZYVuaa1dHXOfVACZo\r\n6yO9tmRF2z0hwm/Y0oFG8pERQJCuydizvzmAtMHi1MzHnvDkEvmQrCiv1AcG\r\nDZlXYsqlvOuoFGJEhvE0nBRVavHnRIijn8LZwb20sKBZLE4G/UUaAMdJPnc8\r\njGed4Z/+OccOh7gvuGYaOM2kvUrq173G5ANhsrI2HRtkNo2rmer3RU3yVdUW\r\n4yY0dXMFd2brW5OPdgfIRYlYfO/5vLNHVa8=\r\n=isxb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/list":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/menu-surface":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7971d6ad5.0_1668847610256_0.18031432334143882","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/menu","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a0ae73b0e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a206f3f2244c7b9b9a35e9be65dba10227e8d5d5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":38,"integrity":"sha512-YQKlt2Dy1kNxKKEuCR/Y4onL0b1LZzVhoCEgxjBPSul+Z1jtzjcUkSLMW3XjqRqX6TbrC2cyEuoITVpDe0cQyg==","signatures":[{"sig":"MEUCIQC+5dVOIi68iJmsntdpVKdwj+oOEJY2VyaeUVL6HVSq+QIgYfJs4mSTIhooDi0AMpWo1VVgE3AX66uh0fNI+/PY/ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1kwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA4A//aVqrbAm3hg9Ka9kwDMD6UjOlVA6JUEfZnAHUEB/+D1o6Lg1B\r\nNYTucW00IOnTAYdeUBcRqJL+WNv4dgmGVQsv2JCdgwwJVj7ruxyCv8XgFzHk\r\nw16ittln76YyCaBub6GdKkhgDjObxBlAtaq99sBnGq8Omvm8NiR26+FUwKKl\r\nU7qFOlMyt42njeiQ8FLQNmmqjf30lNsQh+sYjW31st83pBHQlI41bY4azU99\r\n3qSxSL9ZKYYx3DijTXCxPErYLJJMdzxtnah+ExO+gvFfvBViyD1sAL01BFVg\r\nEYXSsKJ3A/3HjqglUl2bzer7aK9vPa0KPVUtGXP94StPmBLlOCopzryLQYji\r\nDxHuS7oL9pz5VNq1DHXsPZjtNGjSURGJYKt+KSS/hv/enSRV411uUeAS7um6\r\n7w3jdlVyC++nef/oh6xVKfSuM3NKsy/5/Irhd77SPYJ1UrWkall1utUkBiAb\r\nV3VNGcjBKTaFDEuQXd0e0by+oMbzUTqD18NcSz9sunXD/SV7lg/MM3O168hi\r\ni7+ce6Dj4j3r7LHCHb0o68lpK7xyitm34pJnUHjEzNpV/4zFqiBMUMH/3Zrk\r\nusSf4/DnA8DIlaENPYrftx3Hm7MiOev8y85COQa2igyx3y0MUv5J3mAOA6ty\r\nYNT+ABiddjoFJTeEZ/ky9h5TGdJkQyDmRzQ=\r\n=elJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/list":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/menu-surface":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a0ae73b0e.0_1669028144108_0.33198180284481005","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/menu","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.96f472604.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05baf21d329e7a799f09245c09d8937bc8bd8119","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.96f472604.0.tgz","fileCount":38,"integrity":"sha512-keQ5uj3EdjYiVAGBdz8vfu5wjiYfvJ3lQDIdenh8iX7DW5mNS7QdUWLpgT5sLgsqeaC2pQChOkjVfYXv9XrRSQ==","signatures":[{"sig":"MEQCIAMs+HjeRKfcBEEHVDOtJ6kKM8jnh5ezNTumgGRGau12AiBE6/PtYpu9Ziku4CfqM1NISnYj10h2f27qYLKNIDxeng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3UKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplCA//aTP4cY0hl+4pCV5pmgl8jYF1UQ71Xy6VdV+ENdrcgyYgnq2k\r\nvRkG3q6/EHKJr6h/Id2YGc6m/RK43456LwHUa7o5dKRfLdD4Ro36TlOrrFmw\r\nYaiJFwG3yXn6+iHhgr1lXLWubgg+JItRAqi+uLsZfaOw/44TGbPmU3wSKvGe\r\nz/nPbeuKNXrxSbUg0epz8nmTCw7FBFxWXWqLgzNymMvKiwaNoLVKtY83dLN+\r\n8kSPSisFenIjJMiYcQjS45SXa/7Ciyq/HclU9YQRklU9AHHWNojhOErbnm/6\r\nfepsUshQ6rMIIM7cOYNOr2u3Eil6JXfJ679mUw45WkQyNTxaRgdMLEGTHL5h\r\nr2ezjqKacFLYizo+1ciOhzvAlaWSKIulbm/wdo3J2cZja8VhQaBx/kzePk0A\r\n/IdPxDFG2gXjwtqNH10CiuphtfDAAyevJMbgAblxAxGi+cRUaWLVFTR5YvYD\r\nleU38PUU2ig+FIuWZ/X+5z1C/vfodgyO+TpSreHtdQHK73uggTWYNW4MtIu2\r\nMZ/tYuJmAKcTa5FPQcckZeTArpA8r17hAwtha+tEwkMXrhZHXt4VBW6cVF4p\r\n9ybOQDLrQeQyWt9EYe2oJF/uI/J0xxQYBP2p3yEkMU6FVIWa/Jq3dtDkF4sn\r\nWGE2eaQFqiJBoY0LaUT4zAQnLfw208vnqCg=\r\n=wzkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/list":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/menu-surface":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.96f472604.0_1669035274538_0.9949039786360063","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/menu","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.18b8f31e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445ae6fee1c91d5d4c3bafee588c8755d75d43c8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.18b8f31e1.0.tgz","fileCount":38,"integrity":"sha512-WWsUsx+OgOgS77z06dkXve0oUSFPHN+SLB/jLoIrdXHjhOuy9EZuw6n3tmgmtFzCBmHE/uaWmpQq5Wfp29zPwA==","signatures":[{"sig":"MEQCIHpYIMozybgti0R4RMjdiCmLFpUkiCcYeed6YvYq64GlAiBM2E3+9K7Z7TSgqMnLfRPfkMwgi45atyiz361U0z1log==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6GOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC3A/+P55AXvgLVtp1KffUy9Ss3uouNR6NyYeEDcWxHF7twjWWrAO3\r\ni0yovyzuszIY172sHho2/6eBs/J7Y8jGAcUrNWse1A4ERmVsf+drJnJPFsT+\r\nKCCDa5F7TMiA2EsoE7MJ+PqHLW7Va7G9hhSv/eJ9d/n822VdlYGhM4EwvL36\r\nTKTOubl+5/ezVE1GNqInVZejlv+7VrAlB6EJLijQwinSmxkDNml4qVJLuxNA\r\nTcxHhjZjgY4XrwUp1o6KjW1UCDwwHWO3897zaCISvykpaKxnovuiBoSTwOzK\r\ncCXsdHWKcooOx5fg7b866LGSSKBxvejx02/eBP7ETy0ngBFZYOY9JlSvzeLO\r\nXOYARaSSX/Q1sJlfRvZizFTx5uTgAK1OYoPEQyM95Q7HzrdvDCxAhYrqqHso\r\nw3xAiUbE0XT9wju3jT6MzHJ7sAhKkgo3DY+eaa/RtcbqVnkX+pJNHOJRAlhL\r\nW/EMo3zQPzrotMn3thsND421wgGmsA8+BLTH8uig5aBfS2qtTrArY03hqqiK\r\n4PbrFn5HejzJwEKVKgA1GJDfmPoBdU9EuMO77ZfVX7WBoSjAg8d9AeLpfrf8\r\n/jILDz1gPvYkIIs8x21F36ZDZafR94mBgr3ps7zNNIs0rLgF1JYiAmU6+guX\r\nzqqr+XRdaPGEQfDST84/ibw+r6inAhRJgGQ=\r\n=0FUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/list":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/menu-surface":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.18b8f31e1.0_1669046670183_0.5956496258286939","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/menu","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.912f33ce4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67382a8dbf03be93ac9c5c667194d88415fd3b1f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.912f33ce4.0.tgz","fileCount":38,"integrity":"sha512-n6ri46ZKX8bIrL4ofIiPTnbChtYf/NyCTozMHejf/zDKEay1yjsKXWcca5XUW/GB1CnNNLlh58tfU5Wr6+FJzQ==","signatures":[{"sig":"MEUCIQCyaeLComWQi8t3cLcqjPFCv+mCMDIp9ndpd7gjF7KRfAIgeOD3o9qNMWoluiMCxPQ2Hac5b3dUc7tNm+dA2mJNZa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7ukACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreRw/+ICcpL+Bv+g+wMSffXo1ISWGBEsXRLvFDw0aL12wWgA8V5+ay\r\njbvKrIQt9xUKF1I/XTSK0ilmBZ1o8044VAK/cIan50AsKLWJ71T9xUImzaEh\r\nVAzU1vLHBNMRq4+MvN+KV9wNqWwByMA8H9e30Sd95G+USmoUEUIGs+vJ/0Zd\r\nYTgcgpRfpyuHEI3Mu/vd5eNbok8mNzepDwoqQxFZZmazBowzEkJcQo1w6TGG\r\nYdHmYKa7ssc+RzVPcmK1DGyvZup1rbb+UA2VFNnepPHr7i99+8K4qTSdFLfB\r\n+UhRdq0S6Rc7sIYyqg8Pu78YY02ys/ZesZarUboXYFeUKOmdowNiR45lJm9k\r\nJUCCNU5rYTvjfyscnrXFSi9QINMvc1pP2MdxQTR8A/yLPZgoFvVHsok9QtVW\r\nNwhUSsc3xulIgUNFbhEWzaf7fm/0U74z8Aeo6AvYBc/yEeGi+aV0Gy0mzASe\r\nOh/RfmIiFdFupOyqyobebADvJrwae/PmZvoO71SxUADckDvJtjQSf0LqJbVb\r\nhspWWxg1eEhEqcQU9MvDqdMvQnOpRfGFSAt6FTuaKfN0eEVRReQ4ytG8VYGg\r\nQLQK/gmMOQWR3zSe+TGox3b1kkbpq7TN9R/VWtl2n3YcLdZQbUtuZDhtxy5E\r\nEW6LddO1tT6AkDTbb4FySrqtPwQzr6FttbE=\r\n=oYFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/list":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/menu-surface":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.912f33ce4.0_1669053348403_0.952069993257534","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/menu","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1e1b1c369.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"047f67f4c5e72ee47f3af2fbb5a913eb8b8ddbca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1e1b1c369.0.tgz","fileCount":38,"integrity":"sha512-t6RUWmZMigoFyL4/3IqaCAJuWnqJtAZM/mtQduldNLrONaJcEzWwnxYvzq8mzaZH/34MyQsEC523S63Ta6Z8Rw==","signatures":[{"sig":"MEQCIDP2Cw5UAQr6/kF6L1pk+HPYLBpaniRjNMjU+CkjDFwqAiBYwYrzyAe7/PTPbz3444ypTAFu/ziAbZRuP7n03UdTkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm5LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaQQ//fFVvQkdAToP6swf1E3IdsPV50CZQwlZIsjALuPfMt6TN6tcO\r\nnD/w71tY7n9dap2aLVD7TVpSE+OHNReIOHIuVKQpBakvGH3sSSbEMjn52WrD\r\nMleJ66U4wJ6obH8G4e8bxFR3PMN8EyqL33rDPSKoMvUlzdWEP11SNlUZ7Lei\r\nfo2TaR5ljDAVVIhBCePXR46eSLRKZhmE/ck0oAPC0pkptoL+n+xkxrSWPg19\r\nxB2DS7BQAxYvRFA+siH4VdSA5lK9zUEX05WawSpxAzJWfDHUGGIOL2k/jHWh\r\nCgxGle7d1xmrwBJoRwWBgNMc/ZSrfCGdQnkiRxFtFwc1DIramfwug3nFKCT8\r\nf0GmUT/a1GiTMyN8B+Xzuxnch5pBqOYOG3ZLgsPwyB6obXJ+EPxEJCA14ZVB\r\nB2MGxwMHtPRgi/q+8W8IRj9M5uymh4tnVTigotAxe5akLATwvozUeSyZF9+n\r\nEjgu4cE0wtfJh0I0o+qn4RH2on8P70klhsKiDyeBEcorUu+KUe7UIyooeH5h\r\nGv/TGVFkIMfggI1NZcFT0gUr3JM4YBWVxf0M3kW4d4MDxipwQLYDcooHMBVx\r\ncf9eZJZfqKDaODqzBmb+9890b2+QrS6iImMcAPNH90oJYTlRnACtbAoHIIYV\r\n1Jl+UYjg62A3tfYVdQCdEUPL7ZCKDoLnLJc=\r\n=/C1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/list":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/menu-surface":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1e1b1c369.0_1669230154916_0.06326506682492283","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/menu","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a2ec49244.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d91e5750dd74a330ab36a0a1f269fc9673852cde","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a2ec49244.0.tgz","fileCount":38,"integrity":"sha512-Gx6SJfTP5P1oWyYW9VqgdiMoDWU782srbe/cYtRxsI58TMeVznUNWV1+lp4esGJyqI4xp0pa5K3LzjuzxZMlfw==","signatures":[{"sig":"MEQCIARxlIWfof0g6b40p/TzVfH2wkju8iXJE+pI/V1hX7c+AiBZPZCrIM56DjOm6KvMIqgkJvJUIyEMfLvIWabNeD/Ocw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvug/+M7my83xdQ2+2WKbBBxWakJcmbzZlUowQ+RK1isTChuqyU1gr\r\nE6jfK1iCVnjyG3F272EH2nXI7AalDhEq3hlvlbD4B0hFzZ4swUzeDwc+EqVu\r\n5YgYP0etngcyUIJ7NnzW0yta67ms7b8i6cv/8+xIVNrQCjGB4CmV76Z0uXLy\r\n0CMkqs4ytRarygHJ198a3JQ1JDn5Heg+L5IaAzXP2RkVpiG1V8L6ukFfpf8m\r\niNl7EMFl9YDHJVWdIVxmftq3AJU6Ol6ALWE/hV4TV5le5P19Ryqvvr+jEWpj\r\nlmTfgifSD4EtYqGJ3n0NnthGGuU4S9WaZT3d25qobrVoY9Y1fgOa0LesP5xd\r\nYPiU6T4VDMqh0TSDRpZtb7EIzVLlN8Rp2u0RAC6R0clROeDprs69LSd2Aun5\r\nfon4aPeCc1TWDlb6l3K9J8lJGyEh6lZjy0mem9LQwCUAVNCmVagj0kHXrTRf\r\n0q4zp+Tjc2/ko1VBt/GkGy/VQ3dz0Og/fml/OWEEv5PSDpgXXZZzIPGIVvDK\r\ntICbIW58dni+fePq+2MnxqxLGfBdnDvcMJkOcYbTsq5FCRLyvpsWwpEmFRIf\r\nsUrnQMv/vWAjYjXkKsKIgJ2hq39X0FOxSMyLjsml5ltWZ9M0771l1VUM2QGa\r\n6x/n6WDi5irRMtOhZdyGBWrnFZ9tOY9DBVE=\r\n=L+O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/list":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/menu-surface":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a2ec49244.0_1669231959195_0.8071108238953233","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/menu","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a7458ba0b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32ba13e243f93ed3aeca34aabc6877ccd18c625","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a7458ba0b.0.tgz","fileCount":38,"integrity":"sha512-Td7fHIssBuVGyxcv9ArDTUrONHpdtmzJHA4zcvxOPzbNUGgXGKg3IeQV1JHjkmoiUP1oPCIzJHdUXb2/v4VeBA==","signatures":[{"sig":"MEUCIHbpgRNWpSv0jcxLnkiSbjL5+hn3UBqqpWXmm03jo1N/AiEA7WLV1sTyFnx3pmh0tIZyZGew8OwwS6g9wxbuJungfck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfoAQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotVg//eRKVbpj+qlQ0wPW0381tA3DFt92mWNAqMcKuRn37zQvxW1Pn\r\nlKvh+gz4pkgfEIo4l8cDqkhGMyEX8uFYBalaEyfUPgYioh7YnC7u1f5kFuWj\r\nczlFuLm+aOfKHkL5LA2OPQgSk/tuYFItXUSyjBxjnEwmYpduAxDEC4QPxhcO\r\nw+KU0pc1EhccOD4X87HJt1dGga256QwsCEGh1MGZnvcovrZrlB6KLTKXwWRM\r\nDXGWjKzPJT1El76+D1KQvUx74Ih2spuYIkC3/keBq28EzcQIHJVRJshuSshy\r\n7SRBKK3VFzSUXCCuwrDfSzMmOUTjL5U4T0pWwiWW5ogEwl9aIlWyT6uiXzXx\r\nOcJRlUtHihZv070LYmNSCACSWmCfRKkQ7aIvb+gIyTnrGUGn71bQYhotEeOK\r\n4F+/hCp3QROGCSp8HdHuTvpa4Jw0iPWBLv/3DajAN9sqtglxVAv1i4ocnxOz\r\nQzU8T36jPD3pxFtvezLJE3MkK9YhLlpmy/vfKJUc1dADAgM1c7VxfseBdz8S\r\nyd2lf34RSF6WB2F29oAeRsBAC9jjciOn7XNZpKkwmH0iboavFUHPxrsRUiH1\r\nVELNpB8hjqHUNCImcPuHqnQKlQkcN1yVfDCWrUTdBdOnr3xHYAglf2vBfhfr\r\nxpx0ezNdyAkw2nDtxBVPE2fSivftF+RiSXw=\r\n=jZBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/list":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/menu-surface":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a7458ba0b.0_1669234704325_0.19070422284289879","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/menu","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7c35e5036.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6da1b577034a200de97bcf0c234f7797dddaa8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7c35e5036.0.tgz","fileCount":38,"integrity":"sha512-bXYo3t/D1KLOvzfXsJTU7xKTvdQKduaIvRxdbi8fcSmW53kSDD7Q/Pa0aHxPJZruXppRP1UNPp8JQKRrd+Asew==","signatures":[{"sig":"MEUCIFijuP1brIdH5vfHrIAFvMMXaK/qWCbwd1RMAsZJ57AcAiEAq8MJBE85pqB2+5Ffyr5jDwn0C5aDsQrLGmwH2cgp1vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohXw//Up74weSV9QX1VPalfaz9jaGvuLll262md+qSRADnmuv8NwA6\r\nKUBI3JbRJP6ViUlkNJk+lTQ2pSW8+8oPmRyQKp14lqNdYPEGs0m1GeH8GywR\r\nOblWJgBt9mLoOkGLOoxEszFIc5gGvXkRDwvHMAwpEcJsJ/jc1npVYbfM6wYy\r\nGRWGUUg1+3/jhsrkyaymUyP628/9Y1NSVN5RrOta88LfuffU76zZbZrGtHpL\r\nQUwtUAvW6giH4X+vBIwPbzQIK847GOLO46TQrioffS+tyIfzBeA6FK66+n/E\r\n/OpbQO44Xy5K/OeUBegRRABWs6oC+WTG/ZyKUHencVzhX872DQqvEg7DhtmM\r\nFmdp2N618EbpVV1Y/wrODz1qfhLyy4EeiFKteQ/8KnLcinO8wACE6L4q1bxh\r\nOJLRwcbaGTn7h7CzYNZ4SPDES3Kpvwas8sRwf4Dx9XE4PogRCw8mnRdxXSsp\r\ng6JYSUCqtES5YzQaoY368vfA4hEFCHCDUZptri/o5cidKjyYkuRCMkr425xI\r\nJDKVINzUPel7MgiSyWsPKV58p5xgSUTZqrO8kMxrq7LLkyiaNiLItZhhyZjR\r\nR7PedQjiRUpzSbxsIFGKJIHMFgpz+tlqQ0h8A/u6AbAG+s5hP6TW1zi4Wl71\r\nEo7HFjCOsOcHdiWiPwti55pZbCa/CwgugnM=\r\n=qisX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.20.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/list":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/menu-surface":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7c35e5036.0_1669279271954_0.12237188531419618","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/menu","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4356e05c5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b845e11cb6914eb1765eb48e6e7f9e2795055a42","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4356e05c5.0.tgz","fileCount":38,"integrity":"sha512-/qs6U0PtNXtmi8cPCx3XplkdK+MQLywqlHyvBknXWn4KrreR/PmNE+dSBHo8rpvGfSOPJqvGZm5pDC2uY0ptJA==","signatures":[{"sig":"MEUCIQD3c5NZaUErVUliwBfgHlTgb9V39F6MmtuQ9jsZldgV4QIgVbdotQ5PntEXSwPtbcFGiVJdeFwKoKvaWoDKgHDQzQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0BJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogUw//X4xs4eeibmHRYLUyxgXk5zqagLAdeVvY/HwM1ly5QnPG7ofQ\r\nNIHEySZ5uqozMfRqRgYSSnhyhzxYvMPLj4p/kaVwNVr1xpK7QvgScl0w9fSF\r\nYQMhYFETl1xtnFyZxzp4qMb7YJiYwQR441q0X9nJb4BWgxMVXv9XA91+QkGE\r\npopHuOhRuUNf0OP0gfT9Zm1c+HFj/TgvfoAHgvSlmN/qbo5VWKULK6SM/wYG\r\nfwGtAD0de/1F292gS5oFFbD3wMrKYCaR1wUaAUWzdFZTuB/CRCs9/aeBJE4D\r\nccyJgKrffTCdRQNyQ/WNnGe6iUoNAjB9/zN9tvAWDHQc9KsVy8ci/PvULMYp\r\nrnRsqdakkPn+8CfMKngPQevPHBw3oU4elR/lnzzbp+nqfaaA3bhO0lt6lwSd\r\nSbBqXYEmbunHX9TSi14ZU4/jKrsBXd6fOuWd9Da09Oe1bTwcwI+Tv4gx5eGy\r\naRuhhhLCeSz1r8DKTAHfXpyBVdf0VFCw0BjyfoV2ag/VUTkPjK8cicvhOR6U\r\ngzxRimH2hrulPhC0s3xLf7f66dLxuawyYDjcFe05jIM+Rx5H/iE/x0Et2NJO\r\nZ1MoOqhz1E3mGjFIDidZ7UIPF1mzLCj6A7+r7x1YG5f8fuBjkhrVqUug89f4\r\nGMMxMfFapDhqrbUYJ5ytM54R0IJyagRwJPo=\r\n=2m3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/list":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/menu-surface":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4356e05c5.0_1669283913013_0.6065783725826748","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/menu","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cb605f8af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb337b1b9a2f1e2cf8b8f12ca17483911df5bf4c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cb605f8af.0.tgz","fileCount":38,"integrity":"sha512-sQHc81A+a9uC8+K7n3dgBVGMSWElSnkngcnf7cd6rAnxDcrI3i3GHi9zfQ3FGfSGhPZoEUWkT5nPFGlsWb+Jtg==","signatures":[{"sig":"MEYCIQDbCf1btI0MZ4tkQQStdnIEgfOhwhfv9xI6bH2l5hjvAQIhANPhvmTyHsdDP/Zxm7gma65PwCorA98Lxpt2iWGywCzp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0TMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCdg//ZMD1/J4OxV8Iht8We2OfsPStR0F4Wq1kasNtsVIoKrqEn1Oh\r\nRDj3tKhQFbJ76V6KAlA3CEkCQzSgbsukdBo8MiDGovSnq7p78UWeEEyfaikH\r\nqJH2m2l90K8yuwePAr1vxKzcJ3V3fRYWtMA6cYjbY4QhYCI3MyvvT5ugHBdh\r\nvOttHfw7VpVDZcz7DnTkQGvyRueacJ8YkAs+bNJt7nhzoNx1z3j6AcBk/XzO\r\n8iQKX3fjSm1WLuPdEw/X7ctpx+3E3ys3gVQ+XqJqQ9L7eNqxfyXYkOVFRIvG\r\nFAXC67E4BZlcqJkMHUtLiE3j314U8avKh766mSDdE2naLQIf2981MNLlHeJ1\r\nCGbkYEHOAee73XUI8ky/7WRO8CkPM2v3GM1IKByxfJ0ez5hJS0MFvzL7F4w3\r\n1t5a65vM9lVSWFlTaF79xFbhvek8Doxad41H83WT5/+Uaglroft8/TSYt2BV\r\nbw+WG0ssnA0IiJaz1BPxe5K5rwFQBP1DNonlzjDcxcNC7ev8HB4ha6HL7ofE\r\n1PzKg4EWXWgnVmmXSzfq3IvvRUYTreNYT9nBvhB1KPwa0dUM3iY7sU6vp/dA\r\n3xe28bsml5qV70U7cqE85NKFTSuo2YMjCM4AgL89Xfc65gUqVygUMxC2/gTg\r\nIDR1EmDCGDyG3fhmV1KqXvEBezdmRd6eN9M=\r\n=lkiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/list":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/menu-surface":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cb605f8af.0_1669285068454_0.24722199788407662","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/menu","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.05fb07f9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1facccbf85dba13b06cf8ebc222803b8f2dedf1f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.05fb07f9f.0.tgz","fileCount":38,"integrity":"sha512-jtofwkIMv92RK2jG2tDK8F+V6GFFFmUtANCImO1DV87YATfTZnndlRYTzZS18gdl0naWpgOtO8b6Jgx1hVGoXw==","signatures":[{"sig":"MEYCIQCtFTsm9vyXKqCfW28qcWoWCkrFeCDgCWNQMtfR5D9JmAIhAOhxPGbw4dRnnWrJCm1Zt1LgBLHB1NQ5pYlFI7xPdv0p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":822760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ayACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs2Q//StgCZ3O9mA/+3y+sYOY8ZUPlXFCiQIrcZzUkUab4m5YqRgoz\r\nkcAWyUSBUViwDmfZ4Watjvkhj8L2YR1/r8s/F6nfW5jJPTS1vN0hQSX6uD7U\r\nu+B/SFfIHm0SkiLl4qMqG94bUqdw8HWwc1bd3P+3bQZikIL1n2MJ6WCVEs8P\r\nWswZEVAaZ5E6+dbMDnoeAlBzvoqB8iRXwQIsrD/pfbP3NLuopalpYR0OIEaR\r\nQ7tNqABAwv1U27G0SI1FKz8XyGjwGYiQzIakVMwXXjWvvsy2g8ozrkeISA+r\r\njgkLjzuiNMVKNYR7+r9YwgRkn8cmRHtOCoeN50hBt582gFMYxyxqGVpR+ccZ\r\nN9V+fNr7KcZDekvfd4+wbLzZc/ggg2h/8hj3EYZjO2vVL+mgw/wik0srK+wI\r\n0tT8H+BQUG/E3pyOa1VwZ2LBgpDWq0gxOhee7MhH/sWTg29HtEPhf6XePm2Q\r\n2YWVYjNyo3djdhL5WH6rdv9rwpOLDrb9GJYjSqCLvLVLOz0D6PO6aAhS+BCV\r\nhT6BtFmqKbwh+Yac1qB1xvsmSeTS4a+b2j0s8Rn6RZVr5UmR3tYEO02Oy/PL\r\nAuvwx4RRm2lryd+cuYntvzw0p6Yf5DtNgNKhQIYdDNaBB+dkwAEsJMsPB/sU\r\nugXPc4z9WXR7WXoca2Oa4ELs2OoOkb50FeU=\r\n=ZFPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/list":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/menu-surface":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.05fb07f9f.0_1669310130706_0.039098230366908515","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/menu","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a911b386b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9559c8a32376f5640084a52bd8586f1480944f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a911b386b.0.tgz","fileCount":38,"integrity":"sha512-aw7IZVgNmrLg4XfmSrH1TMYaG/6w11l8kNm8RQOC+9g3M1/jY9i22cieaiIKMB5MtaZ5w17j5ftn7diOcRpngA==","signatures":[{"sig":"MEQCIGzPOlHxx8rKi0ARP/6F0K35XO3RypahD2Mg3zIfLqwGAiAsv9gKPPEnQCy7v6tTHqPgpWV5WjYygS9PYDvxi7rOXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":829020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOaEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo71Q/+O0Lxh5k2xkgryy0flZkAlcbsGWJ/zPM20+jnCznurAx9XGRc\r\nHK0PbOtfy81ex9eCBQvYKGELr/JRSVrZkO9rIguUCfmfi2G8EjjaUInSRLaq\r\nO3dXMc5p/8AJ29a+CkEquHCouOBMdjprLIV87jbuvT0osXIcuY8bO/E1CYiN\r\nJjHrgQLtoArywMoi8B3Gxe9zXExIvKQFXi3jK7LImynVpZdgUvvXiX6T9OMI\r\nE+NST20ADk1lnOUD9kz6DNwMgI/FgX6MSlCnp27oHD8NGXKvQO+on83aWeRu\r\nIWT601koJdyVXBjiZY9ZiQFAbVm24EcqIxOfp8lI8dSvtkGVQ7w3jhDzm6F6\r\nvH1ilK6BNM+Fsd+YCQ4s12wRD+3glBlO1yxs2dz1iRA+RBglEejCURkSYmnI\r\nWEXmcke73v449hZj+7QeNZ6VTHRxqKEXB11tjceLuCVt4ZZ2Sg1168zQwcaj\r\nNFw/MRw6ukFdPhL/jTWrGCDFWCo1USRstmTXJpNuVR/I170IP0P6b0aJFUqm\r\nLsAOFwsJHBk4a5lIsottFoQK2y+tjzR5/eH4x3/A3S7fyyGbky9I/i9JLDlh\r\nqxynarwg1aW8NP8yIxyXOF27fGBfkcbNmul8j9cB3B+QYG9ULJSqegAVdSj8\r\nzlmZYXVq/QpT21PSu58YFduI+nTi3B5gBN4=\r\n=k13W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/list":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/menu-surface":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a911b386b.0_1669654148309_0.2980215976316245","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/menu","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2aa8050b4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cda268ec9134cabae414066a4c33c80eadd9ff9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2aa8050b4.0.tgz","fileCount":38,"integrity":"sha512-Tbqb5Wdt7XIMeh6Uarckbso4a8NSDfSPqii2fQwwYrJ5HXKYs2Ov66/fGAAcI7/v1fgrw1yNap5yrV1I/GJhQQ==","signatures":[{"sig":"MEUCIQDkatUo5ZE+VNjqrlX02DxGzN0TG2bomWuTm2a+mAs6UgIgN3wTBHBsQo5IZiyocbSEF53W7bWupkfaavOGDGW0DQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzzQ/7BrMwY6JMDXrwAvY5n5MnRcOJvZZNVxJKOgQUAjKKrtfAEtES\r\nEWdiq5/jxddyqnQEMsaq9oRiqV/8DdHP9aUIvfCqtxqQm4IEU9A5ScTGXb1A\r\nwwMA3XkMMhBZEGMyej4n6LRbX9eTVw6wVfe3heTdGBIdTKraWUNU3wVf4zmT\r\nfpV1mgyh7rQtg93BYhGwYSUZURKdf82FnWdj0WdtSYCBoJt3DNsUvGVe1pkE\r\npIxRQWH1Kc0V290EkTWzqzRXBl/T/QSxa6ZeOENVj4nQ1XPwiyK7HSiEr1F0\r\nqAMg1LiMnFXsmUvKBg5YOTWBOx9Z3SS6Q36XIdWfEmg6VLH2ckTqUH9epQW0\r\nvO9vmGPgwCocS8k8a9ZZYDgSlcCcmAI+qCfUzyju6FzUiIYSJ9jGESmOiPNe\r\nVRSUiHorlbNr4iiplv6OzH7N6UukC78wRVy1Pu6GjvkpJTkkS9nUYS1uuF/z\r\nwsZ4VDYcs+nAs85zB5YEXnvUZxP8MTsrV3OKplsF0PVzS7vHcjrJjCcIsAfe\r\nopqKGjBMr4kFSZiKXFBJzGOntKpnOEN02q0nAkLSe/umEjrjQtKU7lKvF/xd\r\nsw2bHup/6KOHqYs7+rjuQJcc4HKBklmvkAYn+IsUlCnQaPGzxP1V3flj7GZt\r\n3aO0hg1kEtHUTex+acFlcTgb8sL4mtsPUzY=\r\n=bAby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/list":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/menu-surface":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2aa8050b4.0_1669662811018_0.23418023963260515","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/menu","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.323904a9f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c4fac5e667874ee8b1cfedc784e7564f581aa8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.323904a9f.0.tgz","fileCount":38,"integrity":"sha512-Npcr4YWPDjv6U4q1+f66al+i3joQ83BJeCqpvuTIRkkCQLErbexZSugz3AsIpnhuMleDlX74IF6d8d3M6h63+g==","signatures":[{"sig":"MEQCIA5dPlhg0bkLW4i7FlhQSChTIeUE7MGgOm4hJaABkkYFAiBIFs8eGfeoVQ5UZzyV8OFNpUh6kJ0OmJTNzZztOYY1Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhibaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaNw//ZfsJx+B0LpPQ1mDAN2qznlgnHDuc0QfdnwwXopUZDVn7ZuWw\r\nlqFeGnheQ9f+PwyhGXQZO6ZGJtaHuzz1R6M3O3Wa1V2L5D211zhwFPAwGPw8\r\nxrVY1Da7uTD/uF7XFrJOYNtbV4xmdBryRq9qPAYvNCAV8eUEQP20WFCoufXs\r\nbqT/fOZuBbKw3cbeyDT75mKuqrTZcHAd3GRIcr2g1/v4mx/qVIzUdokiQRGu\r\ntPO2E4Is+XRBgMAWwUmjZZkRtw02EVVZVbBfRKiuPAMtx/xRTWpC4M7IaKSL\r\nvrOHXTY7qJAweHtr5dDbPo6UE0veNjveez8+AE4Z1v3F0Ggpp/yX2UvE5KI4\r\nX2RlEXMsT4cuvvcQ31kmsZjA7sQgNkD4VQY8wbFgQfUGNYxdPE4Wl0TVC4NX\r\nr5l/MI1ev/K6m9HPxW2V2in9vEna3ULfsYfMWZZdOMdCUQRawkwIqhv1ubxa\r\noSRzgclXpuagyamjS9fSItLcbs7DgeqZRi24S5AiyxP9h+s84nsMJJKXLd4e\r\n7M3/053oZ/SWN7Nj6B3Np+K1X5AOJBLSAZlvkM+Mz/LAkYXV0KAbAqC7UFju\r\nR4CVQui471NFWpUFgjgmu7axn8cohsSvSPraolPUz+ylb233XfOux7fw1EBk\r\nxn+w30XVhe96IHCsW2/hbO8BruLmB8NscS8=\r\n=4pio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/list":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/menu-surface":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.323904a9f.0_1669736154094_0.05776971232029959","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/menu","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.168a629a4.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d33f02cfc21f1253fb7497663fff17b6ef2cd013","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.168a629a4.0.tgz","fileCount":38,"integrity":"sha512-Raaposmz+3NsEtN5ypnnD5wBgnu6Aqu8pM/qfY9GxUgW1JgBFwbQTCGhNgKUL1XZzwQw3uNT4Ykh2+ylGhyfYw==","signatures":[{"sig":"MEQCIH/M6iye6fhqmwhCMemozb+L+GAqlvEoME2qufSaPFmvAiA2hW3QB2T+WUZltVgoxDrpGLYBQTlHuCnE+5Io0pZMZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDzQ/9ERuvpwRymbOiI0xxIbYP6dBoijLfgPnBF30VClY2/J4j4prX\r\nwTlbNrKlIuxjSww5Grdh2aR7o6rlNmoMiyDVQd/OJa1JOYeMXvXACOhDQ9OE\r\nLMSg3Ka54eF4APT766GCL8j+PQhs0MuBxGG2LwJaLkMS+TMrAxCThcif/Gjo\r\nrV1Lqg7sta5YYj4deQQfMnJjy1Enklu22mt5cJNesazmqbZjtjHNS1Lfuw73\r\nA7w7/zPLU+1Z4Km/OnMXhlvPVfMHf+xyt85nRCHhlnjleaBbD04cVHALraQy\r\nNCfS2YjUvJ/18jwuoZuLDrX7/eJV2YiohFZQlRNepJDetF2yTBv9C6NwTj/8\r\n0Z30PfxBXxN/hTJ/coHGcfvqCaDzpG7F2mwfRb1YnGnTQ7DNIWTsbYQKj37e\r\nFlLIe6uljvzH96X+L97E4nnAqz8CJLe4kBeNda2aVGECO/SPeAXCVOK5g5w4\r\nJmOs9ueXPcdYHR2NMZWrO5jNJwRjbfvhzcBBYAW5DhTLdfMMhuOoyp9ZvQ0o\r\nBp2/MU7eFaTwZBHll0trzYniFS+NLkRkRzpnduWDr2HyoM7BITP5tos/nyuL\r\na7pYWQ6+cjXJ8eikmWT/uD7LjjkQIvbtZuLD0MMVODdmuM5pwQmzEgnG+4YR\r\nG1uBMYGZ6LCo6x63vXFsXDn9xDqSJIJoxPs=\r\n=8/FX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/list":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/menu-surface":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.168a629a4.0_1669740656430_0.7771269714268176","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/menu","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.65c411674.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0dd887faa5be32cc8f5e940d57ed532d37a75f3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.65c411674.0.tgz","fileCount":38,"integrity":"sha512-A0MRh0fnkzLt+ry+AhbQ2YNhQQLyp+PGkAoS05jBvxhTKu7RHBMrJKxYqpwc4ac7fLrUSUIpREk+JMeWwXOKWA==","signatures":[{"sig":"MEUCIQCRZx21G5ggdElre95xdDb+afEcuH0VubajvNoBkiJV+QIgZw+SXj8uPl1j4DOL+PFxKeou+IHY/M/UotokdGt0W1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkQRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp92w/+IFXPiQRuAtKcntRfRyCv0s32GpoA57zcBDTID6ZYMNv3YU2o\r\nAzN7rMffdFG4Tyk7OOFnmAs6O6C8yruruI5ypAntBtSo4m/jGyyswmWLa4R2\r\n8Kwawf1wXA1l37bNEC4Rj0zvKRwW5WwJZZZ3BlzZkF6BSdpKN9Pdvb2fNlDk\r\nO6fFf5JBS5So7WZpVZCjR8nwvqn4aiFKj5FvFUDqCBWNTc1AgDcFWovCsHNy\r\n7DRO+3Lf958GA3GaLyi2u+dYLzQl8ZSLL0JbR/UTrGQEoWZ1+fn1LGHN6X1K\r\n9iX2u+1xxWD2H6DVb91CjPcC6XaHn4xdO90BfVs5IdcwrpmqhCFEbeYAdoF9\r\nmVdZCyaa+jys/pMn+fKzx7e4AR403TbFL5y/MfBGs0lfQeFXI4WUP/zuVIuv\r\n7Th+buxt3baod3y9xYzXLNxStL3JTp4iOX+KUzT+T9avx6QyqivsP2w4gb6O\r\nEdvvPhMLfl1TyL3JaC6gxHqPjim6++LJV6qkratjIRCFXymbu6Q9X4nNbXt6\r\nPT09bsHDfp7pv2j0oQienHCFnYFkXEf1P8yowxKjjnOD/PuIYh7Z5uAygWcl\r\nOMJlraLssBiLmJt+GI7fykYEM0HOrOpjqVumwaOCOahOCLG2Cl9rc0ZirzVo\r\n3/L7cVb0iIDoPVIRuOctJ8TCmKGiVZUGbko=\r\n=rAT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/list":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/menu-surface":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.65c411674.0_1669743633541_0.15533568929720176","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/menu","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a86d36fd2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745a90fa78fdfe88967afe38dfdccb159855e9ae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a86d36fd2.0.tgz","fileCount":38,"integrity":"sha512-jFwwfPfbP2cTK+wD73766oDp8QiCEfAOmV5hP/oWxtFpNTuz9Vf32unX3sibZkqbK7qaNtK8ZDHrqqBhGUpSHg==","signatures":[{"sig":"MEUCIQD4sarrV0C+V8LdcZsPR6YSnFzCNAObBfWB5y6Upi4ecwIgLzIdFhBm8vWX121we5CeemNN8q04ZlNfxy4EuKGAFBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW/hAAoZHoucPz1+3WliIueLxmYEBUd2VTXEhpakgctFrXmV+p44mv\r\nEWhoYyVyeVk/HyLi31bL682Fj8r+rbhHJnyc0mdWZ8jM1MzJgV6oT3XIHjSH\r\n0blxdqN7s0VPH/+eOtsv9EidqTP7JG9nDApc83J6ailzOcBs50nhofZ8cjt0\r\nmmnFiPy3Jm3SwqcDNcPPwVVBSDn2uVrXhtKpywWbLjtrRURj6+/gnSauixJv\r\nDIPrScKp6cwTFnu3EO7T3oPhIgEDVB/iQI4HMYuovErqkemb4IZAQEX3JHzj\r\n482eJzYtzz4jZHdRxbHa2cQBEQ9M2FNQbY6361ICyaYsKX+3U8cHLE3PRGxO\r\ns3EsXMs2n1P42kfHno/iA/AXOlKtkHToV0PRN81nkZRWbA18XLisNxiv/LB5\r\nuLXUNkgX7fA0gtfpUNY75QnYcBGQncxnncQiUVIXWMFEPlMl/oDIXTgOOy5d\r\nEeOTgNCs9wIUexbg8lmuStpgNIZ7tdBlttfrDL4BKBVARv1Z1dVtEwxxKVmH\r\njeKGFyRThNaFg2cj2T1Jio8kgOmjtq0bwveMxZnSaphbdpJZMwWyTBoHIOBn\r\ng1ZrxYRMhDBkClDjOoVsjOGLUFeG7FQtPzhzZFejAiSjjM+Zxpe0ip1JiYdG\r\nraibEMCleqpJy7aojjJVyUKpRQzhnjPsscA=\r\n=0G+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/list":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/menu-surface":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a86d36fd2.0_1669774560450_0.5583420937176151","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/menu","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3a1f46c66.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e078f5ec1ebdd0c9047bf6bf657cced3fb202f95","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3a1f46c66.0.tgz","fileCount":38,"integrity":"sha512-yFm9tD38Ql2x+SDJA4YhJ4lc/8wJb/bWkljV1V0tJpBRTqMJA58JhXlJdu0AgUu/w9LSq2e3n0hEzouRnhMqCA==","signatures":[{"sig":"MEUCIQD8HN1BASxFMn8U+ilRE2NP4hCJxraUC1k44hbYDTrM2gIgVblAA+RnME+KBGKp4nGjedQ5l38qeVoAx4fxXLC731M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0gCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt/g//arRvvZDZsJpGGzvOPfbBhKlv/FgrcCRCP8updTtIehSEZ4R1\r\n5M0tKJ9SJt016TPJy8U8uJuPeYKwQCGV8L9ZL8PwzEBqAxzg4IHScm0nrT3+\r\nqqBzrz04Kep/Vm+0g7g9De1Mukz9kGZtklavqXxDYlN9+O4LUv54Ft1ehP2+\r\nzPlVWEvW7im/MmXvHFhOgmRM1DqwesgHtSAfCcEg0YOeY/7+mFhmawb4dy9x\r\nEsaGHr6xNDwUoZQYAwxB7/axSSCA1vKvl2L6iQrfDVd9OZ/KQzijblRnLHFZ\r\nnmavRXIenAxXSeg9L3NOgtrjFYrqAhCI4slaW0ThvF3X+ynDOr1SGOWBOpaK\r\nyFC7/OPWA9AuzBPIGosUfHPXNxKMA6uM+bLy9uZvZ+xWH366lyojiQheo9+W\r\nrdx7eqmH7UkM/TWurmY8MrxjpV1sf0+tD8CVfvECr5qQRa1fMsxRgJ68yhTg\r\n5vzJpXNmrHvmrt4j1cvHp/yxL0nmXGqqN9OF9Rgy1oMI+jzrlRpvfS0vBeAn\r\nANkcCUaA82/S7m1cGtoGa456O11EWlMTNQVOejCiJygcvrNQgAeSNPC2dChm\r\nqkiMazNeH9ILBnDxlevzNMHwhbgzUaVx07RWtB/BsivX5g5eyLsyKC3YcU8I\r\nhnf9X7IWHsyNdN4uerMLgwZRCNgK0FB+VfI=\r\n=jSAi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/list":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/menu-surface":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3a1f46c66.0_1669810178201_0.2873270083756332","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/menu","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.32d8a9648.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03c3c4b5496a609ecc738de48e5102f6fd28159d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.32d8a9648.0.tgz","fileCount":38,"integrity":"sha512-kgNPBWMos2Gn+bUgUec/f/I541PdtErZg4XKW3XvpEUR9c2hRSjv5IEq01U6opfAGZ+68QCBbeObAlCN/i3O7g==","signatures":[{"sig":"MEYCIQCvPVFE0wPDKicVPLY4U9qs3/+pxyC600/pZN9fVB5jPAIhAMjECtDFb/XKL+tqICiE8PcVkKFNzADUAM2aUN9kyADn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZzg/+JLhTE2au31e0e88gZzsq6YU0avN2PUmpd1qjw3E58oR6rO4+\r\nlLveja2PwwIxjC/wOR7UdNZ77az5jsPzBwHiFJKaMB/a7YaOezupmlxfHj+9\r\nJPPUj5H6Q5RP+vML3hUDtb3koP5hqqaclIp5tHrPjKOM08FOD/QounsE9iBQ\r\nRkDt0ojbF4LhNKXPrEk9wqLJ7AyhTAyEVmrm+k1GnTbLcVBDUYMqIp/TOx04\r\nCzaz548mfrD3+ZrKnAnrrKguJ9zYxXVYcGSf20InzGEp+e5C0M0BnT6QDkox\r\nfT47prpSJoEofLwSamfC93h8oRaa+Oh4qfB0MupTYmHblDrQ1/z99qAxH8Hm\r\no/yw7zONxK8mmV+0uwQPxHBMOmDg9rOpBp35JFF4JZMjS7fDyfkkKi+Blh6O\r\n0TJNghmHKiyQQOx1+HQhG3AuUDwAmFEoEoNsPU8zC3wfUuiGFxOuvJnmgqCa\r\nP2n0mDnPqsJsd/2174AF3zOznYX0F8A51QxQKKv9LUwb5eYQ4VN64eBRXs6e\r\nAYA95dLFPXuzmVGZoytDbpcJ8OHyWfXvN0h4fOWOviRfWR38kHvmD1dTbqWP\r\nMGV0Oh1His1cbON6VNYdeYsAdl9rZPML6ANDfF56a7Gxl767h6bVSkeFBJV2\r\nFn8cGIUr25V6Hg9973vyt2iS9Ed9dlffKXc=\r\n=vEyy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/list":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/menu-surface":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.32d8a9648.0_1669915865400_0.22830820202213564","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/menu","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.03618ab70.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88aec5d1c2aaab5632e3e4e87e1ad89f61c95209","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.03618ab70.0.tgz","fileCount":38,"integrity":"sha512-hlZzOre0e4v4z2sjEgsv/3mFC9ZRZZfe/E9ju8IvML3veBH3NeFkqZkLc525WET5/GfAvQxFwq5Ili7r86HAEA==","signatures":[{"sig":"MEUCIBJ8fLMu/VAGGD7GIcNkj6qKLaVTM0XIv9hb0PjL9i/MAiEArgAbEHVHtF3VgXWRkQEnvnWFSbhtRlrtqe/7I2/gRck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRTtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqogA//Xt8fo8Rwcw6Bcw9SB108zVykgMEvwiW1jBP0p1PUvnN9HXfs\r\n7l0e3lyTFpGz+/6k28eGxVEaXcEj910+D/6CC0MILKJDWFI+B8eiXLl8eV1X\r\nBz3hQmiQrWfRdoQ84lnavDCrf5XOsAezb21ZKKzLrjGP960iD8InhZlJdKv3\r\n0nGTL992cgGI7iYYr/7watgYLXVnidc6VkTDSbqYijfd02auEiYZWYHPTCN5\r\nQsH0sp34C42jHzLvhLZHJfGXQixTm3mA/ii3SY8CNy+JNUiVYFFahOIPqPfg\r\n4V/5cs4ZybK34HCyRfwAEg8OlgRp58vwG3rsuPYkG1v4DRe5udAoV2Dq+z59\r\nSFwwt+wqLDte1tGVY1PiozpAIYEjCqtHFfoHYZ3mw1ifJYrwjaxtbPMPwAie\r\naYyDal86JaSp1KhtN6Dbsxm96Zz5TkVOIzuXM0PA+nuKIWwsm2bJHiThD8EN\r\nLRuFOfJ8EMJ8a94NYAP54+rvge15/GSFjTPbELvoSsV7XgnMCXQhGtvVrN6o\r\nrRiygTb1m13p1/BgbVAzHzt9UX1qFvnFZEymcJahy3SMq0qfCrLY0VnhR7DC\r\nNt5Reieg7/Wt/SQim+kdGDvJj70nJS5sJnlz0lYIJ1j0DTOJ5s474N6E10m3\r\nrWaJ24a+mNRzSnSB5BwEpT9dGF8yKXDMEzE=\r\n=2hqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/list":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/menu-surface":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.03618ab70.0_1669928172833_0.3310970563240234","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/menu","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.68aaed940.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a66e0ef3932a23042935c440bc4d6083478edae","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.68aaed940.0.tgz","fileCount":38,"integrity":"sha512-3xotJOVheDpGOlYWEa7UTrbOGfGHkZcZxo8KotmNqHtcC784EsOs2g0hSCJL5OzcoVzHfnZhMmgFX+94jD8Usg==","signatures":[{"sig":"MEUCIQDoZKqnB6ysnSkUHgEtMVcGxN7Zxb72juGzcPO1PxaMTAIgVLuc5COruBGsYN3A7OdTO0C+V1HvISwx/4sXm0IwZEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTng/8CFkETIsRPDlEekYtD/jul4bJKC8NkJc6u7KivhdTqY54ve81\r\n0HEv93eaxKQ8tKWUZp4z/9Doc0u4QD0vyB28Rm+taCFHPAI1LDBscrvElZKA\r\n+yJvzOcLxSv9K6OJuo4BTo8nT6trv7gfZdprwr/0FyCjnjSlz92Qyp4r2UrI\r\nw0GCcRIpCfPaqerYjxkLTpF4DLcZ8Nm2lGS85IKhCF0cS5Dx3Yza+oSlyjD2\r\nQOqDQg5loOQtA+g3+Xa/RcNOUgaJKHT3A5luCZCHVfdZbXnCfXuCo4UraVNI\r\nx819vOF6d+VfjBgx+4kqBBfc8zUMUIIRZt94mUxcJvqFQbSIjSnfkwqF/sQE\r\nb5zIaHHRgXVnfY59v0U5QmceInd9ST3/de9VJjm5pkJoUNPJ3zKQ97ELGzs1\r\nnnbRQ1qJye/8K+vEXlzNCRIhDUwCD01M5pWrSFkX/a0+mYIO585E5e+5FYOW\r\nHJByqyBxjLGg9Bx9iYG4AWwo4ZNgU5/ky6vMr51fqM+8O9wDJQPyX1R+FUMY\r\n4gJl2J1ln9tmH5OgKyZQl5Mnx/rEINig9IZegCNSWupU2THUgkDEr/rOeHZo\r\nB/M4IaCw2cdzRhF1GkxILGANMi+ifpW25KzBKXQjYaMqvjrs57Z+D+qyw+Dr\r\nS27sepiqzL/gfq8oUI9d/y5WK8IiNm1LHfY=\r\n=ttXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/list":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/menu-surface":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.68aaed940.0_1669929961822_0.1348528481700606","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/menu","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f0a0bbc75.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed47cd72012f7d02f7036a6ecc560ecd0dc362c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":38,"integrity":"sha512-2+qAEO9GVSnWv2rul2Ny7sWTAV8Hv6AOymovUi5zRKatPos80efIfr2NowhzI1zJDst1jR3UG87OdBg4iR3aJg==","signatures":[{"sig":"MEQCIA1jNm1OeuSIUn/AoBia4p77C8+1my9IaWjf9pthv3CBAiBymgPg7r3bFTSjZhEEgZy+eK/lUR1+NoVnXOsVUjBPVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof9w/5Acj/WxTjdAqDUtjTmcv93Kpcj1/SsbG1uPfctgX4BunP7o1M\r\nCzgpeshX+qEA/miExAHpqa0rs61NcrVSTdmDoAUONMIfyDKveebj2aOzU9MX\r\nsmWpilICM/zbZrm5urlgq/yq9djOSIbHqHoe+RdqwRG4g6Sfw8YY9WIPjgJ+\r\nBlp/CzDECqkgrppBEGHbrmxA+sDuPGfkLqv9bgUTzzM49rgXmxNZG1RG5Ffm\r\n27VdCVEG3JGMdXact4bclcK4Qsno4DxkSB4jD+9czD3NtW2aq4yC6L2vjReL\r\nRgIKasOivvWeFDiH/PCIoUJ9ZLofti0EsnVhLgI3jHts1sEBd0z4bRTqH9Ck\r\nqy7jWp7KZSnE1xDZEYTFkIvf+OSbPP6ISgXxWYVco+DenF7ukLheRRfH8aHS\r\nwkIVLP0qEZKqFN3jwehB5qKLppPcuEKGDXtPvqZQLSez7oON0LLuLbJ+58ZW\r\nsNUgyltrjPQoY6tSpwZX9hOdbSqJaBnX+hF3faarSXg/9/Shfl5urFpO9eX0\r\nJRQLJx9Pf/0snGQ53E2167X4jGd2ibUL3So58TrkYtIm5/uABgFS2FH268Yh\r\nNuT6jRZcNSWkD/lVL0Awakt2tUeWafB+8QypNhsyKER1bZh/k++BxSxS+FI4\r\nDz7mRtpurMAQCRsvDTXyl3C/Vw5r0/P9Vyk=\r\n=IoQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/list":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/menu-surface":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f0a0bbc75.0_1669971821937_0.6836268024286944","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/menu","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.dd99c8764.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827230ec34a19e434e9af4c9d85661e6a393840c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.dd99c8764.0.tgz","fileCount":38,"integrity":"sha512-HGFON4fn9hnBG7L9b9jEv8GotPXWN+zcI7/thQ6J7IPs6JMaiX8VsJLfhG7XiVbzSOmhfjCqZXnwOvXOCTLMGg==","signatures":[{"sig":"MEUCIELf5PMMMM7g4wm0+2cyowJj4skjZDdEaec6cgEjDdRfAiEA4cP4B17r5wx0SnWVnfOZZAX+FQJljzqsu3uHY4MEovU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigWIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyMw//X0XHu6kXHRLtroELxwt7Ge1Seu/B6yh8q05Wrgxim2+k+grw\r\nJ4KCkWWRCv0j9EQrdBF5h6XwQqgEKBZr9KYm/2UWr+ZYAQXr1scABdT6681s\r\nXoMNj8AWF5HR4sCEFaWLz11K+JRr2pnwfjZNxTpTIvcO8WiUixutYRXswrQz\r\nO063ndt8ztAjAnY1t2+4hM3RGIP3EzKb0BWf/2xeRmNvp0SLJhzyp2eKhnLw\r\nJONrEmlclPBhSvs3po/7h9Oj2XmIY9hDTb1izLFvuuD9JLyirh6QOTS0pXF4\r\nutway8ZEYZhWyk3BhxO6r6ioRZtivN2Whqkq2SQnJM5cFu4tbXcTsGftYK5p\r\nmhVdEZQPRx3KmLWyqB6H6BGl5E6hWsTAagcKq7SC2NJ4v5D61Ne0AorPIWVh\r\n4UYE4Mc/dryDmY2qJm4F+wW84Egv6PE36ZSH9n+gVwj7J8/LbHse+yyVZm5r\r\nZUBz3tQH3CJQWIx4eYDC3+fBpQDj7ecT07NOUujhjtx9seZwWbiwyzZReS6U\r\nee1MlwKaqyCbsHFxOWWQq6BxTsN+a+s/xy0PqPiJGF8wWtuHWy+cNZDBD6lc\r\nTXcXKc8gTI8n+Kntv2fpGB+75a32PKM8PDedn+OjwuGdz4hq1I7iiQANHNJg\r\nq/5Sks0F2U7laBMn7ItfFnLDfZBduQDeuuQ=\r\n=6tBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/list":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/menu-surface":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.dd99c8764.0_1669989768276_0.344370778542485","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/menu","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fabdcca3a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2793c90903373959228f4a4144c8fadf6728ad1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fabdcca3a.0.tgz","fileCount":38,"integrity":"sha512-SadJgNDMW0Nn0rOIoQpMW9Tjt5r9x1DAAojpWNxwUBMGtc8/uwdOFke0dma0VVopMkgqICg3yqJug24N5HnEAQ==","signatures":[{"sig":"MEQCIDqFemmUaYWXOx/otiEHX4N+ZtUtzhURd9AnxYVqKC2tAiBE9bXtbh6Y9jL1aaH2UjoY0HJpj5M4nKg/t4udVrQEbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihUDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuiQ/9Gr0gwSTJC54yOjQm3yZx7coHD8a/8rZJTw/xZ5GoDNIBwdNv\r\nLG3KlYdVY8oq/FnpGIlisaBAYbjYltIyNqJdu2s6d6dqmQcsmXcv9r8gRiFp\r\nr4hJEk2ORZP7U4GNWQSFUK/seyTELhyUhJHXMcHzCjxdtCenXaoIyrLUr8Hf\r\n0vsXbLvhgBZ+hUPiWMedqj7F9V0AeiDPWyIeEAEW3P3Va6vDUe2Y35Qe21ic\r\nywwCYY23yOSavlDUq0/lSJgVQp60iDYAStMAIX43GYNU/i8ITorCHMyhr+ze\r\nKIMkjXG3L5urrR200oXoKFdTmzjTlUVj4haXb7f7Lx5JkdsWueq9RV0Q3QAo\r\noMR7ApewAUn3jrLtR3GGA7Nse5rdereSpO5wHZh2W1rhhr3wsPd84k9+jQ9U\r\n6wPXvdVMbSa46Epn7EPkVHgOOKtO0mqkiUqTtmnIbjKAw2OkRxQmXQlIRtd3\r\n8RjHIfUU9ggGLqoCSJeiH6S3p0hbVwa3QdXNW0e4u5XmMdxgmymUGhju6wnm\r\nz33m1ohU6HmRzcnD0vauWwpz+xMLlmwLD27fpKc+i1ND3FdDgMpqn2bmEy5f\r\niHhvG9CAaTEdm3EgDEnzYadqFGNUJ4/P9kAnGGyaMkbr+kcvfOnaSycxDB46\r\nQCBtjaiF/otHcpD0rwnvLa9fJECDH8mW/PU=\r\n=5MAV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/list":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/menu-surface":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fabdcca3a.0_1669993730761_0.04170988193128711","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/menu","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2d26722d2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ddf4919499e853af6c6beb3a3c6d6b82f70696a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2d26722d2.0.tgz","fileCount":38,"integrity":"sha512-GVpIHPAVScxL8MQ7UhO0pazXIzNMVLn/r/gQQNPIMYsdr4dkDlKOzU+Sd6CNDBYQ2E+zEFg3B+W4ZXJcBBBp2g==","signatures":[{"sig":"MEUCIQDO2Iju4BHGZJUmM8oshWTVr8Kmbaig+cBl73NMy5aVxAIgBHh4XtgftVYiWlMBSvZrSQGwTGLJUQ/82LXpoR189nA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiiesACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUZw//R5+B2dGW4Mee7YZbGUAuYDtFFVhbgkiN+CEm5JmUfEIR8S17\r\nYWoMUMgkGtZN6zZtU85ZYB/WN5eDNVnR/8Kg/r5jcJnkNrkWerHTSauG1q78\r\nnPjjUd/d2uMoBZ8o5g+T5+mAJF4+dWp0jg0+DwQc9dM+XW6TBcVYECDXk3z6\r\nj0oy5RI0/xNgAW3vjDvsy4OJl16m5n+P45hlakq6QXT8h9/7NBgzqRRKIYKa\r\n2P/ewSnXmqM9CmFBrXizt2kP5pzO3qcWsljMI5lA0sfdMu++lUuYdLtiM2rp\r\nn22Iq+C0xTuo470ixpXGsPNTJKDMRRZL47wlgeVjHJ/rAvmrJHiOgjlbMB+f\r\nA7N4hgUxjCGw5wMq29pZUrFphDfL/XYkwINAth5BvswLkKCQrPMTq79Pq37p\r\n+BkpaXC0yBi3ooqeFnLvz8Pdit59dV7gw2pm3bmLk2iJ1rVthM7hnYbTFRcg\r\nFTd6Gvbv1sFDHvxLHXxXZqCUp8SBOopl7/cxiB7Ug4+ZRcqpN08Uto+hQWME\r\nBPU208XRDH6nVjHXlALWPOcuRyEgW9bFcRVCyjpmNEwGqZB+fhIxzY3sg21J\r\n7aSCky9HDSnjEHeetWN7O85VvaQibHW0vzZ5fY1wfs/+GUZWwa0YHcWQB3rt\r\nkQLeNQLSGgUCPGo1ZnREGKIkwu3ZVPlyNDg=\r\n=EQnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/list":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/menu-surface":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2d26722d2.0_1669998507861_0.5478496441708132","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/menu","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.eaa0c3a86.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76cb64dfc5c5647ccffb476678041293523496a5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":38,"integrity":"sha512-xUSsdfFQswT+0Lk0w6eyAn8LkMHuYGBqdhHWMaFB/2c2ljMK/A+hRBnyBOSmAMRyg2tYUpsodBGctphqolOioQ==","signatures":[{"sig":"MEUCIQC6cLbv9Bn74ycS0DfYfePySLkZNay9uqe2jF39xKkCOQIgTDA0/SI/s4jb9sivf8w8xJAzhG/wm7Z+Vz7jcK3Efog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijmGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0kA/8CxINTIDLEOG3SIRupAkfQCC6+eG5LewPNTkTigHoEwp8b5YN\r\nJRN9MTt/vyvL8FXG0gC/sql2PCgaYLUUADQUpnMTQEwWv7ZuY+hQherJ2Kyi\r\nXqvewMEdJmkFL9yfWfUNcIdgKJVVsy7qMEP1cmNWDG7YpesKyOJmeHl8gtup\r\nqfgVJyCof1tvLZdZPQ3AmOGxhabJ8Z3e7VGKiOldrKlozC0Amvu4a9rNUYbQ\r\nwhWFHWg5I/hlbclogQQxA3IQb/boUu5ADzCz37uIPFJWByjpzDPbP0ZLCVBg\r\nYbxjczoKzYMa33vvwHantwG4QHy2IS8U9/AKvhnSV6HdZHl5KV+7krzba9gF\r\nqW8D4jCUuiOaDk2AtPrFfCcBc0W1t8U6Fwyt0k1Pw01xNtmEYq5vsNTqx5iQ\r\n2h8iqmQ62MglxoaplLq2idY+aRXwHHqqKnrYkV0NkRB0rHH0h/tUz36FSnJx\r\nwBFlxK8JL/ApPhTSj2m+F+quY019i1qYRbkG/1XYCJAR+5lnikJzcDuqNaLX\r\n7NgGWEmsF9W6cvIXzF4lSrYJKMtNvofSIeT3r/6ZX5UTskHNvDrMgnwnBfm9\r\n6pLjFskiDPPKPLXFQrwvvuA/IIl2ubDGS/PAG8Gu6UZQbB91dUBwiI+Fl2SJ\r\nJXD4QVm6HWkb6DgnE7etXQ5rH7+sHyBIiCs=\r\n=8/4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/list":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/menu-surface":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.eaa0c3a86.0_1670003077656_0.4020306772644793","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/menu","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.79a613bbd.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50b43c3e8d23a438269945b5de2676249cedbce","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.79a613bbd.0.tgz","fileCount":38,"integrity":"sha512-6HYot7j3FhmImrK6csFVIeEpmtEESwyeeY6mxStaB60iNVcH+PmADMscADn4X1VRzCBkzChjJJsi10+QLulZmQ==","signatures":[{"sig":"MEUCIQDYZsBsTTgapUBD5d3cVNJXROFavWZmgftGrcDwhEjWeAIgLYxTYnV0+qVKGI5ZAZgk40BLjdhyCJ2f1yiprSsBCKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1FZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk9w/+LlbAQp7QGhNZvywtmRpVwIU3Z+65KDaTRfs/sImCOapyQIAO\r\nKwenAPFV1TAmOeMspAzdsPyfCXamHiCChvCIZSiEerGTgZhABoVSNYkcnyOw\r\n2lKjvi+kTEcNEQEM3lKBNJMH64UcLSq1cmjox067tLmpCgbXWTUCtO9YzIff\r\n4tIMCPYE2Za7+oD54idaaHmx66E/NQ12493FD6v/5JDBZF218RcGxCm7W1GN\r\nIw4R3nmUNCPGC8ufdwv/gv7+ysarVgAsi7+oBds9wTX8ds9RhZiD5ogb8Nop\r\nmNkUiHhw3xuBola8LPX26TQ0MCCG9x3T7knjtYomG7o/RgDD4MlHP1iXxR8p\r\nnpkpyqoJBlOB+QgXjRrzc7DY0lCatRDtB6esaafz+QTYj75NNGxb4mqoFRBn\r\nfbljEjqBXT+oEJZCIcXnBEjciz7otZYrOrIXbP/4kea4MazKbJ3UbURayp00\r\nj0N1Iql5KOLBu4dQRkXTiOJLf/MrsKJBAkGK42MyG3NtsZO8TYWm4T2kWtQj\r\nEPclY+FivHmVWlJ7IImvrqzk4vHVegi+r3rhNLI0RNFJzLK6JwyvK+HxZBKn\r\nitDrWKH4cxme1lOI1050ALEnaiaMfdB1kcAlNpCf/FGnAqBBMwETxQC2Ikks\r\nY7OrCV/siX+5NBJynL9ldeg/OJ/zpCrM0SY=\r\n=TCT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/list":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/menu-surface":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.79a613bbd.0_1670336857651_0.22800472642513947","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/menu","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c871fe61e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28639cff2b546b54a9b190b04e1ee8c31faceb31","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c871fe61e.0.tgz","fileCount":38,"integrity":"sha512-RBPxa1sOFraC4V74bKgNfjIvDwGNV8YygRO6A470rH1S4bTENj6n267LPy5t+eRo7GuCA98X9owS5hZr3YcPTQ==","signatures":[{"sig":"MEUCIQDYZAqlBbdHAxbIcv42JHPfBcgeN00JSQ8HMHLURtndNgIgLKI1pj97DQn8aXoIyAC4Aqo9/+2iJeKlqqo1ZNGM9p0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEaDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokzQ//dE+AVjMLxqfucN274wyU+/OzT6n6lyCZxHDb8rnmjJgk7JsG\r\nTdjX0sYeFQqwXes8kkdgDFs7Y9APwTAulWDWZMGNvNmtdUfCR/AeHoRDOOgF\r\naMLg/17V2En/J2iflcFiFlTbn+7hlgvq5JIw2st2QvzjFEFy8W6XkIeAsqpb\r\n4UO82eomqOCGxe/QM6wmHgzHe9vvm+VqPWWwnJo7ZuqI0q2EU4ecSMeHegL6\r\n4xcnmUtnWewjzh8c7XgXTLeH9jUvM4zI7BM4lWQuxwvL0tnAmzGgD+N70QwE\r\nTja4mznpe2yRrkgvjFiOK9iWUxr/jjLB2GcVdq83N2l9JyYMzaYFu5NdgqXG\r\n4DwA06NIXW3h5f7F9QdHhdKAbjpp9OJ7X382UMClKtVrDuh7RnIc0cSXPjBn\r\nSw+W4SOLrbhGnlTcX6KibXrezTFUtt5c+KvbxbPvBiH4B2ynhHfLOIH9swy4\r\nAdAKL+U90a07PbNQoYXG3HR1p4rTKDN+PEZfZkgjzZeFnR+wKEZvKF8UkJad\r\nHN/xEYwmeVnYWs/rEklbH8f19D+XgPEz12Ib689pQrV8pdAFybZ3D8am7hU0\r\n417Nh9VMUvrhDw10P3TqRPaAEshlyJpHCdLfq1ihz3e0nurjd6ImxCQ7QVv6\r\nYHxSwKJRTlWSvYV7Dx5MfvDq4cM2wz4RFAY=\r\n=PLXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/list":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/menu-surface":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c871fe61e.0_1670399619382_0.6875364797344135","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/menu","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9eaee7936.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2adc9be435bacf5839f84449e3e7770fab0be08","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9eaee7936.0.tgz","fileCount":38,"integrity":"sha512-rFzE97pGz0A6KChDEWR5+K52KYV4CqlmL5rb44dvjb1O7VIDQe1fa/OfaN62k9Qkx4JCGUeBflcrbdt+leYaOg==","signatures":[{"sig":"MEYCIQCvkhjeWyQxOaaErM86EHo8vjCJOihOOeul46XWcvIfeQIhAOnuSbl7uHaH/vxCtR9ImmMUeU4jGD2Tik7e6IIZ8LIb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsyg//cChJwpjbl3B3T3jYbEIPiOEdS7WtCTwbGJADNAYVhC1JqkUs\r\nPvgtyLOxs8eGMMO5iUKH098IC2LUFBJDagpK2muJUeB6eZdS+pSJ8ajiemXz\r\nQgYOlAhDeEB5bfRU4AnJoUv1B6rxUUJLnDElHp1uPMcUxSzZi8DzGV7hOwFq\r\n4wYiGXr/k9FBL2zHSIPIahkwElL4Wxae7nWeHxHXb1Ws9LnsupkNOqBoUred\r\nyzCfJEPT05up2eEmcANQnwGRm6tC0TIIJ+6ns9nV96c52k9itns/hyKUIN94\r\nmrv54kQyarYDihLHi0DQeVP4A0iEoDliNfJkQnq78npcgdMvREFdh4udqFr/\r\nIcHMxev/Kce3akuP3gQaZf238sVnoYp4cSz6lSamUmJZlB+iU8FYtMwvph2d\r\n3piLFdCSDAhdRcFhUoXje1HawDd058kIJ4zKNItuQqhAkWHpqmIuF1gmkiJ4\r\nrmIxsexg/9oUZbc6Qr2zTy93BXZRpTRprq3v9rcFTVDMrEdJiR9TCtkV19ju\r\nt2ViE0HIEYHJHQAlSWzBLnXBzMumsJuMSqAZPXI1zy8ll+4un/JWz1sYQ3Rd\r\nY5snhXA7nSSNLkIfFV31Q5iiivKYUMYZ26m1vOxWdqCETRtc/3C6C+idN5WV\r\nunGjRocJdMk/6q5NInM9Bd/X5ZcWDL5wnkI=\r\n=mLwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/list":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/menu-surface":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9eaee7936.0_1670443529982_0.1593196263113026","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/menu","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1d37bf601.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5330402baadac4dc58f7ae7e48fc31a81900cb27","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1d37bf601.0.tgz","fileCount":38,"integrity":"sha512-M3afpkjy5erSbm4IFmO1nZEHPXK2vgzXhC/NnZrO5naejNbMcDh0uwgTevuOlLLWyQuC5M3IHPOLoyaHiKl2xw==","signatures":[{"sig":"MEYCIQCOMMqLilwchDV8d1CeaYvksuDgsdjCrlfIDN1bs8Br9gIhAKgLsBtxpO6moRxq9ASFPsgEnGHS8SL0uCTBhxcKx8cG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9uQ//dTAret51RVXilkgKz3CiRH+mMPFRKYNDDv1LFPdb31Wu6ZDc\r\nnRohluQ618UyIMbLRESY7RbSYWGAPb0Tq9tCHJs8zA6QmkmwAK0kLVQO31hi\r\nCZOm5Nd1lJ0KVkCDayBSR1pSeFkVWFvWMo+GAdOxWCXeiE6MzA6sEf5MNXQJ\r\nJyQ18sRj/W7K+vofZJsS0bjmols3IQDgk3TqQIX0pDMM2xDc8lUJuoFcaaSB\r\n4aUQIt+p+EghCttoaXg02inJU71xdWjBwwuDvyfCqllEYyKiVi0d1MvzwEs2\r\nn5uLgH2chE8Tqh41eMEeP8anToj28hWdaW44234WaKmplkoRYS9YoigSL1Q5\r\n1wBKzL/45apJHww19iJND9bjUfd+PkXZ0nTs/dI5BiJZNbaom13to2a+wprY\r\nePa8QIVxB72DJ0pXU6QfDh3kbR42ZtALHq/X0JKy+8nREXcNOzVDtnRO8CKt\r\nXsKX4Zxnwq1zF68bbKwWs/FQz4rZ6B87B9R2WAsD6yxMnkNdp1sZO4DS8fPu\r\nFO31/auz8IyNVcCZ2Fu7IWN9xp5J4r9bIxy/ganCyr3tUfyHPxaqe4YoO3Ir\r\nlhkHDKnGoljVsEoVIW/DpSJoXh7rKcnsfuvPaVSqDazaPm7pTSNPmBDhxZYd\r\nWHoUzALTN7MqTh5Rvka2RZQKYJc+SB1y8so=\r\n=AV/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/list":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/menu-surface":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1d37bf601.0_1670445788764_0.2790711113640043","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/menu","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a5fe069d5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c5ca42a898fbc22e9cbb842a8eeee152cbf8a80","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a5fe069d5.0.tgz","fileCount":38,"integrity":"sha512-aYlBqS1tgfc0xyhgqNUwWnpxosY/pEtWWpGPLgAqSZ3j14tAtzS/wKP2upWJ95IFvAofzBJ3itYSoX+ekbUkAA==","signatures":[{"sig":"MEUCIE90AZR65MZhChkKE6UcBKvMVh2U9qT/I6DGVvO+083oAiEA3Z6f/ZTayADTe7TqLjBSbRRjc0Rv1qjB47Q2bFdo36g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4J6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0jg/+LQP1Mf1aunqQocJiqhm3/+j3AjhD0luvqrjj03Z05vnfxi08\r\n2L95p2UhiDZyoSUPnUz+GZTgWTo4/b6T48N/naqm+heWzL5pW+Vp0pooBwcx\r\nhZFlN/9+n5rfH7HvqGK2cc2ide8TghmShfaUmb6ZPkci8BCDfE/PgDqzvaw+\r\nd/o35gDp/4DtzDEwmPdQDSXNE/EpyP5RXbGLpZSIrPDuewkuzYGryY9Nld3L\r\n+fDDZE6ZmtFOcprTRqj9yEK8fFYtYhg4Vq5fTiMknfh3lK41f+hS8GOOCKJv\r\nSxmRSBVpOCyfH9PQhoS7xFDR0vpfXlTRLdz/etJB0FKKJJAci55tvipNDdGI\r\nUkUgWyqqBN+qJaS3+F1CzH5gf37X7rdQaevONOVpTRKYsW7ItxX9OeC9EKEe\r\nVon6tjxaMuHzoka0Yn8CHK1tA4sXRA8ObI5LbbcLwXOMbVTeyFoUqA2vntsv\r\nmlJM4bhIEU1t/A3QnH83uPhFiitahe8bNn+uJ0j7yDNzpcCiVA4Tfbeczyt0\r\nWS1P/GoFID56sQczzQM4GiKPCwC4isPCj9hRRhPvWJSwYmsyM3dvNXwBkI/X\r\nu6wwilicgQr8r3WCFjrmnSTacM0j3fE02mOelHwPSV+nh8gap+K7L5sSBJ1c\r\nrmwZIKt9lULrZRHsIrzfWf0I0+NcB49ne0g=\r\n=8H/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/list":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/menu-surface":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a5fe069d5.0_1670611578627_0.8380337303805308","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/menu","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ce8b5326f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a590e3e86dd12a196815f55ff6d6f5833860d6ab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ce8b5326f.0.tgz","fileCount":38,"integrity":"sha512-x15glHqfqGFVsoueF/HYrRBYcBb8sYrwTpgU6c39f21YWvJKXTi8OKuXf+wnmcX7JeZkcd7JfOxYORaeqGCuhw==","signatures":[{"sig":"MEYCIQC5lY0lIu/hSaJRGfo6R2baaek305jqb4HhwPyDO6lU2gIhAJayVcNykMGCML+KiR2bRI6YsqRVpl50BWypSOAD8D2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTqw//dwlQgcvZizOuRopv+K1rnLaUV/yvaw8AjsqtU3vgMxpmszI0\r\nPzh93XT8R0lHgfxxPp93FtyGSiVJpR7lXXcV93GnasxT/cwoshYW0Wrsz1dG\r\nMqXhhR/nqK2fip8jHykya/6bkfzaT25smACAKQz1J+rRJB4exCSjuY2KSPQf\r\nqGS1ZnNVq7T4Hqc7Z4ttf6wriVsFc7TtO17AjYnfSqWMmBdOsZenlgJHvskD\r\nOYhxrxL7dHA0IiWLf6KRU5Y0VAeJ1Zv5Z4QTqSDOhORBJfRvJ98LqZq5fLfH\r\nS0UGO8L9nVTy29kzziKWey3HkQcHdVnum0R9HwfP4HIdbfhV+2A1pLRzi2s5\r\nUg7A/DAxXcZjIljMHia4CCXI91CZ2nXLTdkw1c7pLFV4ySBbD9ee9lOSMewq\r\nOa2A6Yas/U/9+RsHEGgAD9JXuw33ffOk84Cb/ObpSJ9JSuvq/MOcExgWNaR0\r\n93NMSFDla7i2Rq5DeJokmTiNZSgbEc7N8pL0XwTHjw3jjqdy72l/aQnvN+GT\r\nA6UO1zzitA+QVm9anEv9TnPepxt78W/XVs8yer6mAoO/j2exDFqosEfPasna\r\nVJf5ArjNBkQkKyJvAOl3he6NMzujKK8U+l+QgD3soTaDzHTLzXxqFw4SsyFl\r\n7eSXed66GhsCm3XOSsT8/GY5xjCvQZfugxI=\r\n=kjQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/list":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/menu-surface":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ce8b5326f.0_1670628756427_0.19566433329096133","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/menu","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.43f5323bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c131614fb9e2c9fbac11e484316aa9d7e342fd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.43f5323bc.0.tgz","fileCount":38,"integrity":"sha512-DG7PKx5rn+vSRzCRBGdbifab1C70Wwtjb0xhsh3A8FHFtvjnG98KfNM7o3w8oi6+2gftYPAr5FFQCol8LehXsg==","signatures":[{"sig":"MEUCIQC6ULpX1W8a4ixtCzv/ZbOKTEPYoBFmiurdXD5dS97ykQIgYVE72Dfs1fzICZlCSGarONfNLuEt8xJ+2FIUcpSAOu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1tbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrveRAAmO9T3R+/xCZXXwzxwY+Jr9aH8/GUQjAYfBEjeJaCzigvwBOr\r\ni53FPWk/BfTv2TM1bHNRczgz6Fzfw2PTxOjxQR7uixkyYLMa8MfvYEi252Z9\r\n28tat8F5RXKVNqon62e65Nk+o0mb2OOhjd4HPmMmfcrusyqiOq/N24cSh/Uz\r\n8SC4JEqvlsHBfSG0MdVU7a3AvZH9QuiOYIatpG9IRsv82DMBkMTRLLb3PQJ2\r\nqpYrLZmPVQ5aecex2CHixO+anxdQ+v+bZfFndZS06B6AdxMOJgm2yarWmLLQ\r\njSDy8mN7ePwsPuJbenoKVmyNhqpZhvw3yGoBQhtg8b7fgy6rkpzafjuFyvfL\r\n1bcrwRkBHlMbT7euDvEmAzC8kxlFqTGqwKC2HuRLEgqCmioO0+5eoDjGQlam\r\nQzIrPkCAl+/HKfH/A3HjDPoBHkeqqjmkFmZLYNjNqcBA6Af/GxROCy+d+IyF\r\nPEjAqqrGfiIdgaJRtdaJS2HARhnNolgzfZGLDaDc3zwwBuFWLP5didsiP0qg\r\ntNvfuU71cykeCkcl+sdSsIUX6Cv5g+weMOSiXpExjDseiRxw/9qJQeMmDlqr\r\nQfAH3LKir0dJZSjEgUgNZPtEEh0IcBXv9LpARtQl3Fg+jGOlkabVcCSx2fQx\r\nhSLUhrTzUQ/Ag37Cq1yMaT3GMbS0lt1YbS0=\r\n=4uak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/list":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/menu-surface":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.43f5323bc.0_1670863706962_0.47060709640499243","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/menu","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5490e32e7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3a203c8058149a05320512775c659787fb8097","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5490e32e7.0.tgz","fileCount":38,"integrity":"sha512-ebX7ddh1+ekrDuOVvknDJIBrPJlbIBBvpbY24QCEjx09/N6y/pAkVCjIAXGd6C1WaOjCl8YNvQDpLAtjPAIUlw==","signatures":[{"sig":"MEUCIAFDQlQ365Rq5yqedA9a6Fpse4h7Q++T26M9xtmxrfPiAiEAzdlIIjetk4IqelJFYOd36K5NhAtdMaOmqBNp2baIHUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl18IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR3w/9HIPdZ2ITbuD4gkUqo/mO6539SBRQ3T46K9AXh32dfKk+0yiX\r\nB+t+HUS5IPOV/ItDrkqj1bHeYGxCO5dtfQ6v3EooVF6Ki/ZfbK1xQ+YU4Yps\r\nFm1oJzyCodWKNmIPZORZzmhTpyLZ+JGgfY9+28+3UEiBEElTrSwz97gPt5MA\r\nZ2VxF5tYVuhUaWo0QUkX98eCum/3xi+rRn3qpT+Pk9NDrzXQpxAm3VdSQSTu\r\n5jwgPGQGRXsBfLBc+67KdK/fWDShWRm4jkZOX7ViH1b0jGE/IGpwJ6fnNn0p\r\nZ6WzHsEZHfBi6tKs3nqfstDBdcc0TH3Gs8zLki+Bv6rSIRK1106PVBDJ7JLj\r\nD3rf8y23rRHmaPZzJ1CDictanFgYHN7u67jR49RQp/KRZkSZJKN53PCagFI3\r\nKv/JRigZ6b+jHJWEbwCQQ6OSxtieEMquReV9ee4GyIbIICNLOnC1243ZHNUT\r\nNVNBAeWDacbRSjav2ZZ47yTMcQy0ezhO+mid5rqPlz91s45gjB4TDSnNLU5+\r\n4aOvCobXk7CQbtd/J53ImNFlkAlE1B2xBjQSOyuUAPq5Y0OO3yasRgDEv/xn\r\nLPz2FfYPOq0oNZIHCoX/MjkxLnqtPgmHcWX4sE+Ck2Yb84IHxdBPOGEyEeJM\r\nPWhds9kCNanOGwM12e+8o+wiqwM0QVo3wTs=\r\n=6oys\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/list":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/menu-surface":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5490e32e7.0_1670864648264_0.25002563861800575","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/menu","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.817002c29.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d002d0d49245ec57f65f15023ff77cd70a3bb5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.817002c29.0.tgz","fileCount":38,"integrity":"sha512-NFa3I5xhyCnnGut/VbcBGGDRRy7M1Zp5OLqweDZ+jMrZZFOdZXBqTeuVfk4rr9xvDYC8iSifoN0iP4naKwQdIg==","signatures":[{"sig":"MEQCICJE/AQ5NYKkmUZ+jYss6OIU419bDEF4HShB6IaNa23SAiBDyFYGX4pQVT3rQxrmfVq/NYzLIpUWPgKAM9Ylw1308Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPTxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Ag/9FbEeCsjQYn0weJdEEyw3/gMckwxs+3hlCljdvEtW9Xi7e4tj\r\nKIJLbFKxjNRpmyonSdwCgu5SZ/gbgTjPknfyS+zn9uN9qYAHOOgsPxmwxeGe\r\nTK3i48VrVI8G2FXrklQIu6vSSgY8Lp9WuNCiEh52daRVU6hSkiS7tB8fwYb7\r\nO5XhxwQhLyRqvkHlEMMwf6y8rS5L7mFqIXJ9A3tDLQCxcDOpJEuY7xEAdxgk\r\n8iCY/30EkZieTVSQdox/M+12pjfQJKL7Darr6TPEu6eNzHY2JnlSuKL0S1uo\r\nhyGDK8Akje4J7yqdD8HV1gnhfq7cfYosIOY5BMjHBK4uvJqJu54yysZ2pqZz\r\n71Ms7KxtZOcUMiBaiZkrjM0EY12BPTMCNzXiXAAZpRK8IJ+jV1dtRbPfep+x\r\nCDALAkNLV0FdG2XrRjjGq6h1uRDSHXkmc4OvSca5m+KQ3cnqqtIWyUGSHIXg\r\n4wB2y75FzVutAm+dMhSoinBsrpGYWpBtxSsdK7Oeco9fDRrfjXMjEqK9E80d\r\nnMxrSajTIHLx3h2Em7wcsC3LoeG8/Ru0x4CaJqgjqVqDYfiC7g8JPpWkBdTi\r\nzL9QzgxJstVH+7M619GIQ+YavAftHn/nhDksW099iQLaRd+X0acc0c2ag0Ka\r\niz4rFd434GXiAs4Pu6gaqaUP752sUM27o0c=\r\n=bsHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/list":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/menu-surface":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.817002c29.0_1670968561726_0.3120252052838426","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/menu","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.313a1326a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d95fac3e8e02cf9cab1ad67617ed9f864b43fc4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.313a1326a.0.tgz","fileCount":38,"integrity":"sha512-mcz+1XLRGHAHl8ZKg8XSDwvVdizCiv5isBWBiTepItLLTv8BKGFFw+9Orr39f08qKcSj3HCrf8T5OWx7K2ylpA==","signatures":[{"sig":"MEUCIQCfbO0FgH62pukjsggpVgT555x3EVN7o4hJjWbhHXT4qwIgbVxZ2o5aun0ai9PEDHE625KgbCuEZQOBbFWsVWssU+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGiQ//QUQtBTvWkL0z+YVP7EpeLuYy3tpqTA6bYQxfs8FzrXzLyZzw\r\nFXsOaoIhosEAXZJ1qNGSxTWxzfaWc6PgNWKU8pQvm3Xljm21Ez7sleGAJ8Rn\r\nTwksyW7riig5G4A/IVAp+gPfXph1v+hZ2stucAm4IubGP6pQPkPK8FhnZR/L\r\n5hzr+7Dqgwd2MdRkrY5w9YpXaLwFnH1c3svWxe1rayo8z0CB1+zKxLufyirG\r\nt57pYofuRLeV03LIbyMpYEJOmmGnJhRb0XvgQJ3d4vtCA/wGt9L64WVaAIpJ\r\nSRnBPz9yWHmzaOhv3FCJouuJZOEvC3J3axy+R7kDLCU8XgUei+T+jMVr/kV+\r\n5vRrgWqFynu+sLDLAUvB1YvQBMErso/F65FLAr1EQEOr0tjhbFWEL79Ffjxf\r\n4iGJmOaLTIePPIAEARSkOQxgJk9G9p8QVv8N/pN/aMBbUAfB6KLAdiIPUUYd\r\nYJpSlIDBLoAGoi7gVBvJOGqle0PZ4umBRoP5qLjPVA/PJvSLg5GcjMKnJ7NB\r\nYAzHHY8ieE8L13orftJlN2T6B9oxPreNLjE2JjHRy9RvdGLmrcBhDDNnJXQ/\r\nvBIV7niIBAmts6+r8XurorBeiWQnWmLOMomF9RRg+X1vhNSgaeVfEvx1yizB\r\nwXHXUxY4b6n2WOmLFyrwzlOrFhrGwsNL99A=\r\n=GUxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/list":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/menu-surface":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.313a1326a.0_1671013848334_0.11724521752152928","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/menu","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a69c14e10.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff76095ec8c43f6d42cbd12b807dfe9eebb4d4a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a69c14e10.0.tgz","fileCount":38,"integrity":"sha512-NADm2It5bOnfRu8oO4pELG+C9cRxiqUoPMqe9uHcNcxgK8svjtJt1JSvSGlxmuaLmnETtwFeW3dSUfXfKqLjdw==","signatures":[{"sig":"MEQCIBfe4Kd0wDIRO0MHEfnSHah4KPraHqWOyLGcnQbvJjSvAiA1fHT20XgHxKcgUvYj/up8LRzE9e5yIKyYmbmqZiQ5Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw2hAAjCEejSFXfg5kW7gRBuJwrtLVS1710Z7qQaJWH+GuMoy6w9RJ\r\nTpPgYrJdrAjFo1ZkKD8HrNrH/i56BnRLfhPUUzPZ2JzL1Jq/GYyh2eQGp2H+\r\nbEnn2HJh+/9FbZuW2/n20gC4uV1A1PVy6ICW4osAtP9jjjjAihDWpDMHpnbR\r\nbfoGkXd1wOwR1ExrRq0zGMEue5quyDAdtmk7mKlQAFGLJ5g80AcFB8KJ1qaU\r\nXih2iyH3EBNlyoKJ+RE97Op2L4ISrcNRODO/tr+460AOZCY6l3o6v7xHmm4w\r\nJDgBKqLDQmihgTUfX/+AvSRgJR8ZfbZ5bV2FS2F0dTnHOj+h2pV0KT5M2o81\r\ncs0TvqFwFC4/+n0bASv8QkAO4Qe29X8Z8atkYSnrSKAjgipyBR1FUTeA7zUB\r\nI1mIQEVofxmDXPFfOoTyDN8cuPvVRxPK8QYt40+V8XT7eriBjSACFNDcWz0k\r\nLoLpJ6E3GPobs0w9wsOGbqXc/osTGtMuatEcKSIQ+WIceA7WhoyE2lN9yYVo\r\ncyoJHKHk29R50g3mbwKU95wWRvuZc6fQRhrrYA1iNUhyXkQ7wpUJfT2EjXob\r\n7vtGonAWRTiooqBQ0BL+6f7q7yxDHOfwBgGxdzZFCpJuC8MGOgZxz5Yy2Xfu\r\nA043m7W5EZ3CWmqffcct43zpS9JxhCt5HEc=\r\n=seSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/list":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/menu-surface":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a69c14e10.0_1671016863217_0.21764719581012604","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/menu","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f43e0ceb5.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a48c9ed925de3bfba0eb0138945d548ed78b9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":38,"integrity":"sha512-TLWwEf/O+gjnU+VS96SDPOBMsfmPpAVjFrgF9dWs0oXO00DkF8KBwTlMV/FuI1KI8XzAHvzktm89j2bhQEoacA==","signatures":[{"sig":"MEQCIFI7PNkQbIrKrBYX4boUJUl8QucLPI+z5q5eazg8UCioAiA9jO9QTb6M8KaymiyCYmTgDbgBnb/PZVgCla7uGZscYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf30ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrccBAAnlYE0mB4H9xe6EyxTiaVk5//tj+29eCTr/r9TysCs2Pj+VoT\r\nicuyIOXqXY/j1Z65zfypSeXih8tbCB+xElv9W3M1fKTKaraM/SrcKcvd6DjT\r\nqE2sMgv+siBaFYtv0DUaLqpOeBR3cmCgBTPWH+b2yFeUpUYUHzZ/MOm9MyaC\r\nDb5KomPTvwjNeMmOLyGzSvD9yE+rrQ1bAOUvGn5fMEtSlu4AxQHKgGoIYKKy\r\nFkAnb7WVamICtOkfkJMj0uSKaN7dlqr53f7wDddo5a/gTqJneTM4e1GQ++dM\r\n3rqooTT9kAnaH3dymBSS3cv6kkmGWpRA6IMYO4Ou85cX+NlAvD5OKBWbL/2h\r\n9cj1lY0ukAqDgLRflDQu09iSbQVNCDtMB0JL41DJgwgsR9lXXyYeTTJvwz6K\r\n/WeH3ZXPyvX+QRox77A32NVpcFiLr5AKhqB3o3MFRuj7HCpzMf9/mp/HsMsv\r\nA7CYgXEj9JPUbmHoWd1QXa2a5dE2tbhlJvcjc8+L4cmc/XKFMB9S4408nRqB\r\n9hxyVBppKNs1F7ao5OaqPf5KHVgxABX97v8uPoaZfkDVaBVgt0iBLYBKD39j\r\nENNDMMgVlhHPYdldum65P4OHJnSIwUaks0kIqe766sWU6BPidMg1ugySFwnQ\r\nOmrwLarQLJlxUPcdeMx3mK49CHvJ3Smk0+c=\r\n=1Xrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/list":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/menu-surface":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f43e0ceb5.0_1671036404578_0.40244195507934655","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/menu","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.34767110.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4253e12016973306a3cf21e5ed4e6824e611b395","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.34767110.0.tgz","fileCount":38,"integrity":"sha512-9MKonk0F2/3Tj1n6j2oTB+LvvTDML0/v2fV1VTk08gw/sh6ULuCcvnIyRwk29GtD/I1tCjHsbOfpY/h56bRzmQ==","signatures":[{"sig":"MEQCIFy5BVXdkh1Qfdau192oTwU0b/bUswBW7cYoYCO6mAuDAiBU3i51fpnA6hxsUIzOkHwuT7QHqktXiapk4iNihvndGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgYcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm6w/9HTI8mQV8OaiuGa1Q6/VDwXatIB2jzWx72RkBKnYXXLJMuUOJ\r\nCyxLrdUHLdQewr2X6M3kSGNB2GRyBSHpZwZ9s3NZjTdLReNt4Pknzy1FUxgC\r\nTDTsc5uDMG7//mHxMxudYlBQKnBjFPAu4oF1T/BhK26HSLs0Am4yhz5WF8vU\r\n/gOZ7cKggiFEJlNsJjgNMsx5C1KgmPt61IZNco0T5B2RMAZhwVuSOiT6jEIx\r\n8Epz1058FWy16tc2dJRWgDH2EZmw4K0DEy2EHKYDEXsYe6852EkFXtXdJnf2\r\nmFg1Ie86chmGrg98JM3zHo/sV2QalWkzknpOFZmxz0cyPAoRXAtyt4vbPp6M\r\nvwz5k1IGg1rXn63q5AU/VCpW4ireNyAFKlCIiAcpGGaUIOXCV3te7JsAj1aq\r\nTDrb+yXMwy9WzkRAkfbkWPB1eVyhsaMk7GZL+5r4dF12d6bNYIXd2WZUo9yW\r\nvrk+Q6d7WzZUktBo02QLb6pdK6rz6lLR7E0pL2TjrEs9HKeN4zt7WGpOIgIu\r\nQl5wIFbS1r4lmXR6l0ho/XvVN9H++lWRuiQtX62YAofZPRve5HYEDSAv3LU8\r\n499C1grvjNQ84PzfAq8z4cBmsiGNAEC7oIMzzfY89Qu1apeircv7UExFROrN\r\nX5+kjeIVHT4O3S+3bRTUXz4xjLvh9EA1Gyk=\r\n=l3E/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/list":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/menu-surface":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.34767110.0_1671038491823_0.734106890425317","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/menu","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1f99f3c50.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c188fa6e3a3804dcb4f214e4ead73ec1938f5e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1f99f3c50.0.tgz","fileCount":38,"integrity":"sha512-I1HYgYAoHJktUSaggVG7+YqzSDNQs4ujapUVrWyraTwJp/g4IfjZSV9ODVrGegCp7ARhJWmdu5QW4PXGVOp4tA==","signatures":[{"sig":"MEUCIGrgRZekDIoTgK1x2fRZRMJk2nZ8YhTwFKsp9rnhQlJwAiEAwqPwFajcAo2MzCjXVYAxwWN7mwpTgPCAloRUDWAvODc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy7QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDeQ/9GxSX/44ME+TYoN9i/02xy6VrBqp4xS2fsoaXvSe4FhLU5oDJ\r\ns81rW0+scrpSzLpoEX0GMkAmdbIj0uT4EHbGLuVimyN+KzcOE2OrhEz8zr5C\r\npt4llryryGb1HOIUfprBkGTn5y1c8j1R6gc9BI/d6kuZZjRio7xDF6M2y4rT\r\nNATf1ha6TYkG5yidNn/HDXU/uW+EjgAe0U54kwnR3yqpE6WfTtSQ+vR2GTdb\r\nZr9haQWbrGeJodUiOawCfXBSUhlajFRKWFxcSkRCphvVXbgdjQG3jay68VSp\r\nIxOtSyo1MU1/3/lrMo3VdL+N7vg1vxdSVxoHSJHksGidwYXgO7iCPDex/F1Q\r\nNZ3sQBg/vq1IcKLUCRLh9fn5eKKgn0Jti8D3stvlbOy6nqzeydsyIWZYniws\r\nNEu7MMT8r8S7xkcnp+1MVNluMygeuYsJn2caKT/dOwm6L2iUN5g/saZVNHFe\r\ng867QhFMWPKehK3MS/5repdrICfVXwdqbbRc70vP2Ff05YZ3ksAH1heqJIgt\r\n/LR70bdHz7IdYaXP9IEJrGpjlA341RhBPUi0W7XChEwKhr4ikHgHQok8pVG0\r\nua1Pe9d0bPEHrjtjGHv8pqJavuqlPHzsJhdsrex4WLUmFl4mtn8nzCB+rhCT\r\n6C7M/1cf4K/Jj07YG1Vtg8FZwX4UgHeJF5E=\r\n=gov2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/list":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/menu-surface":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1f99f3c50.0_1671114448113_0.6684650932878236","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/menu","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cfd69490f.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be6424c7da3d63ba9569fec722c8e64000c8c2ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cfd69490f.0.tgz","fileCount":38,"integrity":"sha512-Ot29rDxPP7msuk/kX93s2Ne/FOWyM2IH5DHa2doBnUrf4um2k+eBq8EViAbHMiFW0E/aVv/GoNf/svuO7WyfdA==","signatures":[{"sig":"MEQCIEa99/LqrwSbuF7yOl66tcdX3fTb0Bu1AY5Si3Dz/pKNAiARRoyb1Lltz6woksLbvZz8TCWuf+edhS6lm7u5kcKMhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNCzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQrw//cb86VcbFIqq20WmOBv70qZsfkRaxAjKOgydQNNOVQ3w7I1Pp\r\ns2M8MJgwM6iQ/F5sxz9JGFhwbbOjXGBnOO64eCmFnSgHvRwjdjv7ku5kppj5\r\nuRsULvOFvPOJpTobT1SdK8Z3/5hEVVUlnR1pHT8qAHz+m83RuQfsJrd0vA6X\r\nbgMm9uW5ASmKlfD2Elt1JTgI0YCdq2YSiPXNt5cd5isVDOJyK6dfTR4mEaJI\r\nfEnOc27BTcXwad0P3tKG/7UHzOVkiHO7dSF2UTzfaBLlfw+8XS/LLJOw/j15\r\nPqrHLvjN551dCrDRN+DZkcZTxHXbArPDVE2wSmLDkA2epGQ2phGlsUz4by6m\r\n7euirUnXpjqD3HlINjWHJQXAxPJRjTCDg/cyQ6lfwYPbCp6V6V1hlz3Xyevk\r\n6/thhBlJwPKlSvX2PHljDN2B+6Ycq5sXMbzew4/irBSRk1DLykryPYc9A4xy\r\nyKNmL8hah6A/1oGunzQKa4tciKsMODciKTjDI46W9yDX9mQJjt9lnKI/rs+A\r\nSm51o8VQE1P1AQxz5oD2z0i2XFCVmZGB2ax+8XM2lTpsqQs3kZ95szZ89YTz\r\nHuTHVjSXyHJV4O+RIp5aVKFszeoxqjara5j6am+5x3+9GjNrA4SK01WTNQLX\r\nruhDTLXc7qoMG4rpsKO8tnyRMr4PzrWSIvM=\r\n=+6HI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/list":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/menu-surface":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cfd69490f.0_1671221427694_0.017910481849646276","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/menu","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.94ad8d986.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"821ab77dd3858054716f053235245cc563df0212","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.94ad8d986.0.tgz","fileCount":38,"integrity":"sha512-E5dmy4KWNY3YMqderdY8BiJTRGyjvRRTT6CogJIGdCSTxJk/CvwYYyoJ9fnsmkbSeaPGxe/v1lGyoERk2fuJ4w==","signatures":[{"sig":"MEUCIQDTPwRB1GGZ+RyrT1ZMoBeuXxwOMNUQcdNXqh1D3/8klQIgSFb8PnH1E+hWexEj1A65d7mH3Se9yAIqzWDEXWlJGsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":832926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLuBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJIA//XAx0p3HaNJdWf2bIaWbVAOaoJB6uTjcLcpkfQBWT2AwKqDov\r\neOqkjottxbSqdi13oOe9bXC9TY02ww5FktlGSa5ufu6iKt93FnY1FbG9N6Bv\r\n/T0l5HCmBPrtE6ymd8Er6hhJ1ox39Z1KPvn5Yne1ANooZko2qDyOcvKeZ9I+\r\nQ3PoPstZu5r72ezPXi7Y3rbmZtRx2RP6BvF7ro+3dT528pn8liDSPsc0y55K\r\n1avzw5VILKctHKA22SNtE4kJHDhnpxgKVnBK/QUdCShp3FxbD46ecaby5Nvf\r\n8sW5Unhq/3dWOOtOwgJaqbYnL+A9kIrccpyBjN9zESX5sSgNJOWK4wAoQFvk\r\nmrRDidh5sU5KxCOERa/JwRYatJ4T/ATDPbaPjURoAmVTbq0muc6VwJvA+Nnl\r\nB3m1A+SAPaIUsmXy/VWirvdYPGrlKOJR5xVCQhKk7lZtihTknITcUgrBsIAI\r\nQRxF9pmmsilzI3J/LIHm2M9fTlkfQoDDwoN35xn/Z1sEQeI7of98kSt4SOkD\r\n3/SUnDgU4U82WzcmRYrvqAbnftoRYkggzCqZQtPvxLcJ4lHX1Dib8xEWysOi\r\nkPj+Ek0OM+O9STmZUwddWvYFnqU5ZMgktApH1ii73p2LldhuLJ7+0MrNeTDf\r\nyfTUxum2KydRxiHWcfZfJpV/Hvq2Jqf79HQ=\r\n=3ii3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/list":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/menu-surface":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.94ad8d986.0_1671478144818_0.10699696202272779","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/menu","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.604264203.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"111da603ff959cb1c42b5e93e1611712a171c658","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.604264203.0.tgz","fileCount":38,"integrity":"sha512-+gyBpHxCBUB3W0uyluY3Pd2UEN+/ZSG/pJk4W/2Zap+YuYRqK8ovfXi2hubdBu5l1WnNJF8yP+xWkEnR9RLqEg==","signatures":[{"sig":"MEQCIGphBAIEHAVpzrjLlNHJtGNb84Q7FMfiSncUFbXGJu3IAiB05igTmzCokp055VP94yGeDES3+iKdbOZaKNqlI1smBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo33MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG0g//V/QtTX+e+9isBwMTNHHWf4y2NcA2sGUdoJY/26nC2oBZtT6M\r\ncskEufEkoXfarU15yqbYJiLco/slyC9R13egs04LCo15HXeFlZ733WSobFld\r\nVf5/1IgABAwEPgRGacH2w7m9BS71m5sB9dUnZl6bQRB+vffUC6DIpvbW9nwy\r\n8U0wpPu812XlAsOCI1X4U+EQAFPIf4vx2I5rIVwnTMVKM6kwKVdZTngrN4Ja\r\nnxi7uoxHfMbzGxO8IjC7Lpze1YcwG72nDFQXGDOL5SxoRFPNdz4ABi3x1NnQ\r\n8VWPoDaR2tvOrm+/DpHQp0l+nyEVu2m3p425m42SmRbojqmOT73N9cuYwTWL\r\nP+9KAubjX8wT7AYVKg1cXqxUlSx8c8DY1PaVfHfdJDaEKRkfIsuZsvzUTupp\r\nOMkTNUnTrzmuuFu0Bh5XxxpDk85N3epJZOjPgAAoj5kWetgeO641xdAikCEa\r\nJFz8Ru+zgES0geBqWiA21U61hpvOmrmUcYlfvRvL3p9ITyR0qOn0a7OWGjRz\r\nPLua/LK6IcuLgLu3K/REYBPyH9eyw93ye3pSij+COCR7bjjdqmbLdHuMrFFZ\r\n2SXJ5m6ysbW5FCfQIrPAIk5JY2gBW6ugHeehip78joa7Pf3NOS91dovgvvGZ\r\n5Yk6WGk5yj0VcTx9nysCzgEwJvy309UWRms=\r\n=4113\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/list":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/menu-surface":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.604264203.0_1671658956031_0.5307813535391606","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/menu","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.85bcff6af.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c085dd1639d775ee9e8679e9b7399e9d2b8ea66b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.85bcff6af.0.tgz","fileCount":38,"integrity":"sha512-Ey0wHQhOZadhKWuitm5XBFKXDEIdV0vtL9DusgESgW3/6z1z4rA2Pz2zCj6hme+GJjgWlXgAi7JNK+Qh3HQNfw==","signatures":[{"sig":"MEUCIFvHhd+k4BUMm0PYhkSnsoBru5W1VsWOEF0wQERjlPPeAiEA0v9Na6RXkC84pwiwWnRbU1Ce8I90rBJ7Gmtju4lwSLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDEDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt7Q/+PMf17wmMKcbwIbJaxqvRsHk5RYSEQV64gGfDsNYdvwrpdjx9\r\ncuUjH7gypOOH6JXpDLgPrxGAev4GtsQRa7YVdY3ZsLIuVvdiQVPjpQcftjje\r\nF/KfMveHR+fU8Zbgjr3F5FnRfJDCsxzam4y/ClGPZtrh3Z+t9ZkXGK0NgO30\r\nYVueFK/SIMcAGacCTjXlBa0z5sft6/1z8KKFVrpCldvvEAdMM+c9bmLVxl0F\r\nI2td6zcqyeKVH+v2H4GdMEZqzow6+zgTWezB0bhvYsvGXnsQSntTY+pMPnhy\r\n3LusQOaNTMObokj9x5ItRKFSXOc7iCvKVPD24KNpgvftVn5bL6uMvNtcQa0c\r\nKoJsgiPB/IoPoISMDlV4UaM7hk041NTaglv1/aOUnQvBpW0Joo8vv1AXPYNc\r\n/Egng8XtS9MmatInCmVLtNdiVR8vLgYpbIGfia5iDbqUlDPQpgMhud4W+VLR\r\neLJWmQjBMz/eZK8U8QErclaRzoCYhCSc2JQ4SD6QN39TwCvJYZg/KLdhEHaS\r\nbsbD9p5duamssNi4VcLvi56VsuBI264EwUZfoJOgioIquoxvQA+IZ1DmtQMm\r\nU/2wX++pHS7VePT3qsNltbAiVQqkTf/p7yiQatH6M/s+p/iSpUdN3jPdvzmu\r\nLWeMG2Ppm2GWg33/6WxqEGj5wgsnNbaQhj4=\r\n=xQpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/list":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/menu-surface":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.85bcff6af.0_1671704835240_0.9153246428548003","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/menu","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ece3e8d21.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab0979a7e5d72dc9441f24e41e51a3e50dcf36f6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ece3e8d21.0.tgz","fileCount":38,"integrity":"sha512-Obs5mX3dzGgog7NxnDJw//i4Yqi6zgr5M5nmbcZZTJlD6TX5471c4AwO9b5LG9woKoI1oxLd8umc0cW5GZzeJA==","signatures":[{"sig":"MEUCIQCuBAcxouz32XcQZuzwlP3H0p/EzP+CvDu7c1ppTWaTywIgSTAeeKi4up8I335vEedLEeMnI9EZjtHHbhKA5KOPjRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4mxAAhvorjwGFLqpZuKV8c/CoBXtsxUBwxZ+8uCOTTabNQWNLThmj\r\nk4pArTzbxkhk6qsZnO7+dQoyN4P1//DfPCxvZVkEvCFADbADAO5sroD3akRH\r\nenPK7edPb6Csyi8QaLKsAWWlcY5MD4wQ4UgZ/4p0BSrRdJliioHXQQVPryOZ\r\np4/pYxh8sXnhFG2ylqoKtjl/kwTLHybzjgPI2RJjxVZhTr8RFFlVCxu/lAQl\r\nUQ7tY0ZI8/vo0WuzZaL/ls4EpTyArN/O3pLVRWemYPizSb5oz8epKmUloWJU\r\ncE6cVVLm2LQcZ6GPhkHAG9EYyr6tYmss+4VKTjvyty8eN10uaYr/ny27FtwL\r\nV7+7Gph+53wMnpUti6VYli3m/D/fELApWN7nULVaso1DXRVOVpopxut+3ySA\r\nO5ZY2yRguEmLG+I3n3/SYLOSwcaadmErnP8gMFbJXwGu/2SsEgZRPkHdmmoP\r\nRcVezqPk02GRxRlU3t3/4WRy9rQVXnn15o7ASTJxKR5gHZ66Lug5JtpARi2I\r\nfyY1tuBeIOiusKiy1VvageapIJkobzJ3vR5B65PmJxyW8CvTRM20wQuKwAPb\r\nT3iFroXpparzqT3m+84nHFshOP666R5GPXYJPbh3y3nPv0ZerIYnCxsljqsm\r\nWZuFxboFGrF4kfrrFJoGuY8sPhW1IdsDqJk=\r\n=8nSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/list":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/menu-surface":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ece3e8d21.0_1671729245544_0.7594969442742552","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/menu","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.278ad53d1.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"186925145876e8f08984d00e12aa833048fc9d3e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.278ad53d1.0.tgz","fileCount":38,"integrity":"sha512-GI3tDvGKVKLUILzE+3fJfvYb2k9JrICCMCdTbYH/uVI+fHzc+nT33ahqz+EBKFCoREYlPSlaNBaTPkhKff08/A==","signatures":[{"sig":"MEYCIQDrWRX4wSkX9FgTWe2gWbkPbXZZlG5OO/z8Es6m+141uwIhALe+Q3kq9AFYd2qDThOsbqbCUjJWdtX4dK0+AHjrsKeT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyY6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4DQ/8DB3DPteeOmf8AreIxTNJX/xM/KHgUFCMJv3dajeY4zF1VvBL\r\nx1LoZ+Hg7/RGYHRgejz09Ra2SeDj7tqe/f3EHRVTkOOGs1+YUHXfuTW0K3Kk\r\nNPtmwhZiJcFG6RmS/1RvwjlZdr7SsH/gyOwJAcX2afr/TQirnkB/l8y9yY4T\r\n9lP5TKT7o1kEIejgd+bJLTwMxzEYz+ZnbPusoFWw36rKWOi20dwkvvrh7ZZF\r\n8nRRf0vh+Y9Zez7BHoEdQJfIyCZLx103WFmv75DUhJUahTKy+zhrqJIMJ7z8\r\nK1j1Ajwj80RbVSMVL+3BIM967O2cLby0HvrMDCWAYGoLCibt0cY/cwXLuVSX\r\njbeBqwsKw7BioPBWmCif60EBQq3ryrb7vEVWuUzF+XqIZgvV4fXcPiIAWPb0\r\nlv5BI4gWZ60eTkjrRAXEPstaO4y+AZVPe3dtVquHNLfK6kbOJYZrYGttJitE\r\nUSYXAJjfnRqhXCwbzI5sUPkTDGlGKar37ZW7sYa9B8qw0sqBqRb2rHbNkkoB\r\n9UZtMQVhyI2wgc4m2qxc/gWmHatWeMofArJQjyqKlCy+UPlGxE6Az/z8iEck\r\nuUglcRHrtIbjC1UWEJJ5JXIWTxPN8dmfrbGZWWUE0ZKhpeCYSaaR3MFnyDo4\r\nFokYk2oO423esOhWNenNyDXcqjJlknfNa98=\r\n=f1Ev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/list":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/menu-surface":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.278ad53d1.0_1672160825990_0.1480122366307206","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/menu","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a7d8389e1.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae98618184971d969c5218b83f40d3913b3079a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a7d8389e1.0.tgz","fileCount":38,"integrity":"sha512-oica5TLqDV96PHVhJW0sjLUp8QmlnuWEJDseZewLlch/N6Py2EfCwtGgYgv4TNbgBF61DzYkTiogUvsLWVNtnQ==","signatures":[{"sig":"MEQCIFZI+kBt6UE5Sf+xShZlGQ7c8o01zDPK5qyoSexUoP+lAiB+GnKUpWFKgjMTU4ZQjjWzH408SQmdxMMnfikEktBqgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":831513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0IQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohNA//UR0RBbOXJU5HIIYRTNyFo/b4YoT/FSOHIGrUE6VHXYojiUWF\r\nRrF/eagDOQiULDU37mJAcj4uv+OZXpDrpatVRs8spjujH0Q49gIWuwzniD50\r\nLkZlNeqbC7r70mPexT6mbXh72PymyjuVFKqwWRoYExJwhn9nNtatAKZSgM+A\r\nRYUADlUMRbVyZ+QqOY4P22OALRlwTWpbUHWZsO/MOvDT8mR9kDFCMD5rzPhg\r\nm6Te0ePYoBqx7s1t31DAQiPhpSMJMSKUReGiXObrh3YSuzEmcrNYa/EiuDv9\r\nzbelC1Rh1OAk/fuRGhUU1I8uPz6N5GIZYSAvPtaq2q8SguvDgCRJKDPmL10b\r\nGN9wq6Dp5qxePZ1n+xQYnu8k/aMmiIpGyupL6URYQwaVdPZy+e29XzXCenn4\r\nTxuIb89lmI4QyLPtSwjx55q8GCQz+ik62IhUSkvIXK8/AWKa6o8E14SjFq/r\r\n+NMlqjsBKc1lpxKEx2yyWDXVqFbdrG5UMuqDllxS6u9dGIKJq3t83/od9bWL\r\nYrampGkcaSGUMRKwTJYjuDBRe4A8pZ9a5IK9zZ8q6gcYambAunIRqqG1tAdf\r\nsqOPePWW0YV9rnbqGrS1hGfgrZ+WO1FYCQBqQFQ7uKWBCrystjryHM7eRRVG\r\nB00iSB4izzizgtieWhtyUBASdkUjn4357jY=\r\n=Wlu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/list":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/menu-surface":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a7d8389e1.0_1672167951817_0.0772568288699711","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/menu","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8175d5eff.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2082257b662508cea3a5a962f4cc82225490308","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8175d5eff.0.tgz","fileCount":38,"integrity":"sha512-i6WPOe12SRl5F0YgSTiKF/LQ94Niu3ipxU4TLboWtUw0rLcddHZs8fmTmaa7uK4CVfZ3nuffA2iDHGEugNwK+A==","signatures":[{"sig":"MEYCIQD3oBuL4OmzasEnqaBg7Hape8gZ6Sl8j7tOTuM9KM6zqgIhAPZ2NR6EdwuCUbQI4YDDOeMFyQTuQ9UL3fJoMZdPOCVH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFoQ//bSpn+gQd18TBwP0SNARvBOwGXMq6YIsA7V8M9CQ5iznYHtw9\r\n/OU+cZ1ln+GeFIiZojhTdjHRj6nKSYHI7fBXhKJR10YSnR/ETaG++P+oQ0nx\r\nv3QxAX/8w9HmGPfyCVd6uUfIlYxXFKAoPwidSS99YpNLdUGgHOxQ0BOo5e3u\r\nylJRlTHNnFZRnv+SLOBoS8/jFtNpehGfngbeCh/QyzScaaQBy4WjXlL6r2KY\r\nr6HmHAqnTJHEcJuF/OGlmvqmCzD25+CQlqvR7MGMcxwdMFjOgsajdJOMq25l\r\nHU6ua4E0pGYn99EkoH4rjwGYA1LsUMXVp44Fk7yHmMcCZ8sxiV3qfEEpKnVA\r\nLaxjAgA8lNHhMrnQOO9RLXC3EK+DsKBWVidyztmoYMsm2QNhIMRt/QbclNy3\r\nIVBmFTM8WLpwocAOikKS9hIKhz4+ujOrmMk7m8KxUxdq1ulucIjk1xKMLEbP\r\n53dAMVY9XN88a4LCak7/jxjG3zJBew4Pnf7TmFqL8Jl7zqMI2kxykxUeNn85\r\nAahVl8pnIi/yL3B/Yep+0AJXAlI1p67WlmUkajrWSPSsVy1nI67fhM2iGjKj\r\n/zy9kQ48voWGRhVQXlB9OAb/tpIboMkrJgzw/cDPzMx+WAcHF0qgTGlxMNEx\r\n5uw7dSy1vAKu61Nsq0K8OW0GaQdVqRa5N3c=\r\n=GbyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/list":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/menu-surface":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8175d5eff.0_1672192409659_0.2882788069776234","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/menu","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e21dcb86d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c886b197482470d8c5cb2adbf93bf425a4c96987","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e21dcb86d.0.tgz","fileCount":38,"integrity":"sha512-DeeOVqDQhbvC0UP0f6DQF0AuN99wg1JKHFB4Nnea0Y4GtD4Ro3EVNDxEgL4U+uOfsTa1JT48ADRdo8bGh8a2gQ==","signatures":[{"sig":"MEUCIQCYNVumRJdH5WtceUaGqb6jpA0zVcUTZc8DJWq4lrX3wgIgVQynbJoVONQz27tptoANLeVsGZMfwKKQ0pSmJqWrdGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5mQ//WL9ID1uJQhoGQujShI4hBLuL3V6esdjih3QXjwycQ5sH8RlG\r\nEvK98xgeahMf92iBFMkMEMZVTZkkmai0qMp9kGRGwZ4oA44hKHdZt93qdSCA\r\nxAxdGdiSYBeYPOxi0Y4Wy1N07EWIi85pHy0lYtQzvrIJg6pDVR6YRgokDhKM\r\nNJHJg+mQN5y8E0Ne8hKibjDfRT7ifuhWVuShXrALSbJ9D0ZUJ1kNnWm0mS0M\r\n3JNDzmmsi8WWP7c7K3BiQ2UPzfNn3VyIQgm3sdw5GkQtdak4lRyBqlZCSiZI\r\nETT+ACerxugLwt1CO1pMl9M9xNyKi+WhepAI4VuJWqARPGEGF9zkbmOV1Z+I\r\nHjHV0NZFEcHJPQFYhF4eLfEVE5vyTO8jSC8npoTcHnGVfWvDJLOROXuZxImI\r\nGJX+mF66oISwJ1losAiB96WEpY3jYvLRVsf/HpMHdrjjo0NEHNpMmJ+g7mtf\r\n66nsrUbbj+q4Jl81kmsVNmhxT4wDhd99AK5zx/2b1O3+x+FAdBXKP+9ncRzD\r\nF3GAhtmbMujwygCUzKxg6mqC8u9jPzqj5kUbMag2QCu6Yo+2ObgF0G9UvM8x\r\n8aeWAzvvOxS+BKQeAOsjanaLghsK5FINRk4FCOIeT//uwlp/x1Ly1AY5vijF\r\nAikBxuasii/1extoaRcHpodejluCUXf4F2M=\r\n=+rNN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/list":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/menu-surface":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e21dcb86d.0_1672322650447_0.07342964613025904","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/menu","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.20ab6f5a8.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daec8f0e7c327a663e8c0777f83db77ce1a87a8c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":38,"integrity":"sha512-J1wq6CBjdM7NEjLDsac+3PtG4OFNMaEwUuKjmvmmHnipUv4XkxKnI+Hq6KXLJr9NdydIrj/qah6M7eSNyWQrWw==","signatures":[{"sig":"MEUCIQDI6q81NhTh3JMS4r6X1dqZ3JUy/Mw5r1/1lv+o3mm3ZgIgVBh2CWJ+e93oSlX+BH6w7Ka5lQ/85OTTXVTT6ZwJMGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov5g/9Fxkkg9qkeNB5bD8RJB3gwkIUOYTADXZmuboaV9ULIf6Ot1gh\r\nsxLyJGHwXBbK7b8UBZHrt1h4RJDrFNJ2y2dFNJgoef6ayk+NgjwlFFzV6WNT\r\nM3NDZetiW5TfHIqHOdainaDVLNc56IxRkFYfsVUp7FwMsOzQT4CMj/hB4PfT\r\ntOWKMOR+20LdU9isuylhHT16Sp8Kh8co5Qtvk2UFsPjCSa6oGfiIFtrGIPIY\r\nHicJtzwLA8spqnYliqZXRCvS8I38nnX0GNaQsFwBXyRSzotbRGlNOA3oQYnY\r\niz4nKNH9FbndF3iSI7nP/xpq4OmlwcVtQMu4b8ysgORjrGxS5ywqbuVRJt5n\r\nKWun0PD0AcMVlinwEh++FO1QxjbNkQB3vGaESbQL+IZWaXV6xnAI8GE1xaKf\r\ne9mVNt+n/USS9RrEVl0UqEoBFaMHRE8tCc3p7Vrfju6g0lPdBzii+VHGw7Ld\r\nOSYT+kE2xef/JMXu5dn0TKP29O7pt+nzOd21xD8a/Ve+0U3bxeU36RqlKoDB\r\n10DU9jhF9e2nXIyzLBO4AnJJjWnR3iOWxniD8dG7aggSDpIjgZb9oshsXGWr\r\nrJvlY8MPFmfLZ2ZXCaelSBtrLNWk6kAgLLHyJVQqwt7JBmoTpzau5B5LoMtP\r\nPT6akbfTdwSdH8+qSOCsrNgIfAlb/4k4RKU=\r\n=+gA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/list":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/menu-surface":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.20ab6f5a8.0_1672342968857_0.3353662778577373","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/menu","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b9806f623.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc093ec10f8ab25c7191fb797f001c4216361299","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b9806f623.0.tgz","fileCount":38,"integrity":"sha512-M1XqME7r3DwQ/7ktkxHrlzmrOcmW858zHhwbdALsKw7K+9y/WwzNb0O5n4bpQYe16C1Q8Cz2nD+qIH49TbU20Q==","signatures":[{"sig":"MEYCIQDxNHcYH3m6uM9mM/LFFmL6DMHfpZ41/vfrlAT4wtVzYgIhANyDozV23Bzuxfqve3QhTbOOVP+p1CvROs2Vo03V6Bxh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh3DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNIw//RXaG3oE6WY/CMOzMAZuI1JLA6m002X9ZjLN+BtFQjzQNR3Vo\r\nIryVH30eGbBwK7NO+AfiLbSHXK9hOsnnh8rnsEvzVVqebhpY9HKXCYmSQa8+\r\nWPiyOUne/yhQqQeXHAGcxDbT6Gi4gKJSaYs18FSBjShIzhxdGMAO2GBdYjjy\r\nW6cHZRdTSqfw+OQuYzXZdeII+9jXODtlHH64EiPkvHxSWRdP1B/tjVDjsNyW\r\nro8elku4Wblpr1bUDBXtIbLBN9mizXJvc9ckWyw5ByF9iRgmjF2nU+GVMjy9\r\n/ggwlM82S5B7WnQKNDlQEAnKmuxBJ+ExjHO7wIxii2og1uRrDjSkWH6YLcGi\r\nn5n0adqJHXeZbcHrE2yTYXuhUMF+e+9Zk4SSuFGW6Vz2+DHEFyO5SDApvBf8\r\nS9PefmOAgWMThZk/Dlg36DKMvgtWVj45OVtJ9SC+SbU1tmbz0ThdfrW6YxnN\r\nVbV51ecJOfMOsqYJ2GIxOndXMAq+DDEQAFdTsdosU7+3uIWQ5uRfHKnMMm1C\r\nIYgtbXNmE7P47AxSmIiWYC+AjaZl7eoAIp8owx5EsRRuV1Vbbj42aOMLWaj2\r\nmHJNfIehYSDfP6AQZELHaD+ndfhjCAwDP1Q3sjW90Q9zye4Y431LWW31on/n\r\nAclUuPbou3nSjWy0CGe8TVG2PiVNTTKAzwo=\r\n=+uh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/list":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/menu-surface":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b9806f623.0_1672355267230_0.9597041938379731","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/menu","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.50c9f550e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1e5b2845955e7c8534d2f9265dea7abcc5b7ede","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.50c9f550e.0.tgz","fileCount":38,"integrity":"sha512-Qja0A033+JMeHoQAllLzfevB2L05KEBz9c5NeeCfQTKKCew6u80QX+eGfcRHdE3eik7HziI/xTK9gqQvhx6KmQ==","signatures":[{"sig":"MEQCIHihfA9KgGsJSw73sg0CrvaQHScDmqD14fuSYDo+7VBvAiAZdfuKD6n075g70FwTV5NNLhW3oh7ZXO+oFm2wfczZnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE6OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqykg//TVBVw4SURvDkEZGR5hMiy6W0YUcjemuocsbStAaFQr6LhOFj\r\naPLJofEW7kqLqXA5YeeiXFB/y7pE1f17frE1swA+Hq4iDCDj4Apwpe/XDVAc\r\n07OgSc8ZP1dKvsFOTCLik3ziO24B47FW9cMyUW4ISrKuHSUdTXfhdaW53eO2\r\nAN/hhkWIDOgH7cyM5lqr0CApaDRWBw30a2uMwT76HLi6hDE3eCpYFPUetorC\r\n+OHKjlcRQ3GcMGn3+V1N+O6560miJKZQYcusn+f+RH0RhMLd5X35yWV9zlp7\r\nfksflscEzRex9KCTBCvXXslKyJUSwwuuzIzxWorXOMUWFeB62rGcVq9MTogT\r\nnj4A7O6qkxY9UwMgs9kNAplg+esxaMl5TIve3nB72RGG60N1Bl/wa7evx0yZ\r\n+0MC1yoZtT89FmaeDT/YK2GpQPh2t3XoO0n5yixaVlLXGrDP72pmpYbreE+l\r\nDy48T8RgLjGhNx/9KUy/LyDHV/Xnbs5sogYUV3KiS9Ka1jagO5gCjeXFtI3R\r\nkc6c7PBmL3wXEji2j6BCdpp2NY0FmoSfJ+lfiFVeUa29PrvKKBKYHHgXJlDp\r\nbBVdzcYIRpSMXs4Hjq08E5OfPdzuOSgmqh0M9h8LuztNUDzNOyXO4EuXH1/k\r\nfm3shnYMlg5bHS2/bm7TnZ7zD69UGIM6U9k=\r\n=ZhKv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/list":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/menu-surface":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.50c9f550e.0_1672760974120_0.9435272998565458","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/menu","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.af490a848.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c667c5309a0f30311d8bcfe8d5115d8ba3bfa17","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.af490a848.0.tgz","fileCount":38,"integrity":"sha512-fskec5IYMIisoiU1a6EeCCAbChSY6xHX4r1w0oghbqsB0YOjbqygpRjmuepgh3ICHD1yN7qeZ9JcTjir84kwjQ==","signatures":[{"sig":"MEQCIHcGbMGEfq3vHPbvY1oTzyAOEmz7GK2dgAasLUwtex9AAiBDJH8KspZe6jAy5SozgXBxn49OAwHMfgp0X/Rl0kZlYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFD6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKRQ/+Lniy3sXILwhCtilP4sbYjo+rKQl5bY6q7GdFDLqEdejMnwKD\r\n3FJNrPXoAtO1AVlBeqeU9WxrNoKuL9KC64doYTAugtg1ozpdMbthJUMPmRr5\r\nAVC55ngKXWWNxrQ6wiykhjzoLJlcBM12xNJjeSFcSehA+BKdVpMbINcoiMXh\r\nMf9rX+2zUMszd4phBMM2dK9p+nNdFi5fyIp+ZecJCVH5DyG0xubohgjHz7RM\r\nBq1CiGJnZtK6PCbIIGGbUF80qke1YETa7OA7ccZD40D0EpEDufcq/fAPCNex\r\nw513afibZjhCCqjo0IpamjU6PzWF+hH6g6VoyNEkR0Kn3+Yo7jdHY+jilZrD\r\nVEwzuUStbJ11BVHHTPWf7IwDDSXRgaofEk51+VIE9wMGCvlW6eRK+WAp37mU\r\nCt8QIVsGcT8Xgvy7itM6/NvWFYBZkPscX3NwPja296u+wc1EmAfPpxrwdVCC\r\nd9ElPZpTjkD0LZKTF3yK0bts6bdC1m0uAnHay+aS3hSGUFSMuVvM7grg3dXB\r\n0GbR6tcLVnuhU87ab2gE+cXmHQ6vXcj8YGzgEwJggzprKlwt93Jb9TzXp6ZD\r\n+JaK8ULWkhs42ByjEUsRMfHHsgbI4Jvd/vW8LzJctjqSAlv+d/vaptAXJpRO\r\n8NohViVT+P6vr51ry72LwdYCkXWhlLLdQ1Y=\r\n=P5a4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/list":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/menu-surface":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.af490a848.0_1672761594370_0.5906352649677289","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/menu","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7cf487c98.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b04012e962a818d59a5011c1ce88d317570ad8d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7cf487c98.0.tgz","fileCount":38,"integrity":"sha512-ssF3r/jDGFjGxtIyevmkLDM9f5zr7CCKCfxLrehX3AHCaI1/FnVZyz0FZn9L8XfGsWJD9P5oTgWIgJFiEYChjg==","signatures":[{"sig":"MEQCIGvNo//HVtpc25HanLTIsuvSjzISxWVg6QmcM7AtdCztAiB35Z9fHG+z1CAYcto1Zexec7wbwBsH7VaZG9ZKe1A9sA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":833765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMUw//QQpxkWStuev+eZa4JQOZW6IZta/uaE6MjEu+U+13Q6rDem5c\r\nA1W5uQmyseCDt/KrgI+2ky4zJ80EoUoS8HdvBztkFF8Ggr2Yy3J948z0pTX8\r\ngHqKcL54AmNTXnfei+1HNz0MkZ8lLFg97ZG9376VJKhY84FRh/VPnSLK+wpq\r\n/5I8v5pqBTphURSTo/aPei1M5bp29JdI3YgvfMIPSSoTqMC8wew0XypGx+yp\r\ndXk4fmcoMLxLm16s//RfIEDQABrMwRfo+djRfQm7WMZooi68G87uU4JuqhdB\r\nwwbHUEjEiX9r7LcaKwrg1It4gY7AvXVPMtyJ6D1AkKaOZW1q/ix9nVSymalr\r\nzQ7l+k/Se6a4TGGiVI/pyRwqbGGb7X/CGYr9JW7wsUpsr2a0cVfk5mSXf12X\r\nIlQ23NX24ePRWEJ/EXyaZ43eKhOeQXWb1BVD1WVl/ahLvUe25JTfceQ9+8Gc\r\nVY6q8htHZm63dqWmNDv0x2kPkPcOxha3GLOe3azesratR7V75iw1kC4lp2pp\r\nP7/lSlwn17/d+CMUfg28LWvjfPd6mjMfZaTEyXJEmN6hOcu505p/oOM3RKhX\r\nYnBsLFFGUfXGZaazgCcr/0o8z30LHGNg68WpXBh7Jy4MsRCdrVxa1G8OcPbx\r\ncWGdNNkUXODNaCcfR0sn+DOQym2ceC58nrQ=\r\n=X90l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/list":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/menu-surface":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7cf487c98.0_1672767646832_0.005535247288600109","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/menu","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a52be2d5e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87bda51aa571a86869327412669d6431b6b82eb0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a52be2d5e.0.tgz","fileCount":38,"integrity":"sha512-o+fbbgmQizVvXRVMAHEmBRceDWNwYhQA/tbxlRyjwNF2cQ7d3uUHDsyEfqqBmkRqcm6E3vDleqWQNn2Q2jooDw==","signatures":[{"sig":"MEUCIQCWjxwEvQIQ2WkxeJ1+l/GQ0PzLvPARZammsUeqq0gXYQIgSFZ+7oWaBqsLg9UiIzHZ5jjHYimt4Og9uU0uNUcEVjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH60ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl4g/+Juj/CxYomzMhyRDF0XLBuYde06svt6jOXhp98c9mNXeBDh0c\r\nkXfgVCgW2Xj23bf5mgrp8Bt/ZbR7qD1I2EA5fuA3Yeveque1vBxNQ6hKRKGr\r\nxhiA0JCoQdTVeajYo1lL/NWFilEIXrrs+PJS8pe0zvyHjaNOU4XNhVq16bdp\r\nceUJFOi4gzRyjj2/82PIDTJdzY6WU8c2YYcE+kfSlZ32B1NrmA6wZxurP4D0\r\n5LqCVOzxzU7FY9tfFo9Q+JYooke5qtGAdBgZDHXMWeEBv0ufyYGOQbHhQwkz\r\nkHWhsp6P+C2xPVTvS18jNR3uFpGD+thENmTyfX1fcfLv37LNMWZJjN/y/JgE\r\nZX98bvrDRVCq6RQ98JufT3lESfhwu/Cn5LukKazMrJau9DyTLkYhyo2j9rzh\r\n6jCbrACWLAi00w7yxZFv7lmlbV2YbcFDSD3KlEtfzzXj/8+6IBKu4a9ASRD4\r\nICRSg++P8wGUNF1on9pCIJVEULrPlcoUklG0TXOkwthi8/P4RXlm3CUCBWWc\r\nzGuw5/PZuMYQL19P/GIm6rE/IWG7nA0B3S/8/FVibrkk5r8p3LjGuXB6WRKe\r\nNL52DXGfRt4HHeuE4hEcmn0s9LfEnixC34v4Bt1a26lMfgRuZKZKa8YXnXRR\r\nKigkKfZ+wQz9IbrclnI3ajpjwhOhbaj/Mto=\r\n=j61w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/list":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/menu-surface":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a52be2d5e.0_1672773299866_0.3211805460448869","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/menu","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e38ba17c5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12d3a68b106ea22398f6c4c818d9ca19fbf4083f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e38ba17c5.0.tgz","fileCount":38,"integrity":"sha512-iJRAe4BaJ4tQDI4HBs1JAMLCs0LR4/V4PbCA6t5rcDQ5i68WtyxD74LoJ5ZyNXubY/jZpRXJ2x2OOj5AKFFmYA==","signatures":[{"sig":"MEQCIDB6BMIJ4yEHk9zLKBoglRNv53F5jw9/LZHJnuk8XGUrAiAOxd0VCh2YxqldBzgqxjovdDsTUOlNVAfznymWxqIglw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphrg/+Ph5qE3YPKcTnNqjMdZn/tBk1Bjnww06bp28MVRnS7uytY6Pr\r\nvMchxslfzTeqcp4Jf/TNO1760QxW2j6OcJXx1jBjPexcKEA6uUPvitJXNx//\r\n80yWvbOv5TTlzaHeU2rRJyoCwWcu46+2gkG5D/AfXDxlMx3ClfoXwOhyL734\r\nJdvrm0XMk/tySmmTEEy1cz3BQ0j+gT3j1WSHWhUQXbk92lMUNbenFz6O+qS7\r\nKHx6X5+CrJhFMhJ9PQzupRLZIELesgmZ7obpk+70i7oAj+0N5ga5FCINxMxt\r\nGMpQ6wG59fogxCvkr9JL3i5mPj7ml0ZYeUgiSe6GUwn7M/71HhTGA9Xcxc6N\r\nPoUcE6vl0N39aAQtKB+vEmFy24gGSf56++dA7dhdsCVUzt9uvHT4wMwuSFOF\r\nQccQsPMvPIbGclov8kia1UNoN5yvCPKs/PdG9rbLI8kLwsjGbA0379z6DFUp\r\nLjgjHvP76akA15r0qFV1tqNgpGI6bgxKIuGu8NpW8YM+LgZdVyPjgEVtV+PW\r\nLKg/8VqTN4n/MXUKhtsA9yw7B3ebOWifpZDvMvAmSFs3D6FkedK8kr31JqZ9\r\nZsrmtdsmsgC5t/1QQ6uIqNI+CGM+sQYsQBd1TXJ/FiqCE4aO3e7/xQ5ARqOw\r\nk8E2NMJoI54JZKSS129fd3dUGc/Rfh/yBsw=\r\n=nR8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/list":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/menu-surface":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e38ba17c5.0_1672785260666_0.3148974497037067","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/menu","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.49041a6c3.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c71aa221fa9559b669adb297b29452bcee39561","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.49041a6c3.0.tgz","fileCount":38,"integrity":"sha512-vwd62wPE8+D4ECq65UaKfdHa0q6VH5RPx/qtBCl8p4AvueWlKbiDRFP77PfJq06Jh2VahiYBZQ38QIc1xboJig==","signatures":[{"sig":"MEYCIQDyEXgIS18BXemF8z0bATGBVxOdAgmJqzdT/Kr3liTHoQIhAODzn6kgnz6Tb1iW6iMe9AwHw50Wl6AvDbt6FJVgo5TS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZkNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA1w/+LtgmGMQ4eigUluIS97TuCBCHbDPiUhP0DTaeNjvHiYOqIC11\r\nu+UtimHKJQzkmQKgLZVC1PrXcR39RUWFB5GruUKEyAfDF5Xk4pMd9Jb2bK/N\r\n/dLSwZT7zY7K00LrXjAP98zqhtvGcHfgOPG2WTgJw6YJGtjAzVoHTvJx8oIr\r\n+k0u5ynku8+EwHWF/I4nXMrKn9/hvwxmkNnzzaZrymwHy92RNwFc/asA1r41\r\nIoLM5O/rICCXvYNN6fmSaZedGyIEZGW6YlQ21vftk6cbbdchXwCawGJtG7PM\r\nrL6Fx2+FfAhRTtfIj2u9qM5ooEIPbIt/ttZxkcMyzohrXoEq/t357ISSAyMF\r\nbnzynzmSnXhUjdt0WHaOwqJWfyXFEbeUNNDz9M+sf5sTnGeCSTW3uoSGgwiC\r\nMjyNsLUhSa0UQW3hcn3jBUhpRpve5b9DFlNkfjjudPVR1MSuSwB28sP+Sd5w\r\nnDuP9bPQYrjGk0D7v0ZBBAShKdWifH+SeQkGXR3my5BuKz/96DED2uKM5htv\r\nBcxZNyTf/Yzt2d+xEUXajw49F6A3FJiLEf0f+QeiQgHTfMLZuTG8isEWxFRw\r\nLck6bCnKPSeNz1OABucdtiro1oUQYUeeeAIYa4Q5WOOxiwBrs21+NCXGTJA/\r\nobFViXfA4WbUXzYiUzSQ7CG8Z+QbCohTZvI=\r\n=Oxh7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/list":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/menu-surface":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.49041a6c3.0_1672845581528_0.5045409519656492","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/menu","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c492898c2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b8a355f12c554ca5e40c51c9ece12944b44ce56","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c492898c2.0.tgz","fileCount":38,"integrity":"sha512-X/AxeYoL/QcHUJc47uQNhzbDbFQwXoZnPr2pTLhBBrfaLW2FWpa0MoxYkrlmqxmIIEg2um8WjS1mdVYc9/UcpA==","signatures":[{"sig":"MEYCIQCCr6+TE/+yvOt9FnyQ2z5goKcws8tAp1Hy1Zc6UFkHsQIhALu3sQ6s50JjDPXDTnkUJNhGKZ9s+6XkV5EwVsLDA3+J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbnIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRag//Y7XKkUCBTNqplJxv2suiGaFw9ByXxprjPserAaYp2BDoNSnV\r\n6EA8fFW5Y1LNuWpT6XqNy03BDZh13A8rKSn2W49GnJzlNy1EQOXCQmoPvvqp\r\nNEjIfO+F5L2v8C530G3xBxICKvpUT0xflqPkQ3kz0yFMSUSCTtf4H3LmqPkv\r\nmsXoo/Dx/2bXhd3H/PwCTVn/lF2Cf6EZ2/MQCOCQhMpKvtXicoNefo+Hhb80\r\nOZgevw/iOEO9M6e1i/HU0B8v0Of3b2GoAszMzcFUV5UW9SHmXvN1cgDjp8Yr\r\n+Vm92h3+7ra4B+E3dOEAOTqO8AJgjgvgSGsBAvNo/DWj5iJPSC0/U9S0Lzxt\r\nsXqLSLQjgOfzsIXSGaUQ8fwjNLGbKiQKfG3sTq2VJ+eJuWISy+joBQ4XNelg\r\nYEdf2+ZFq7DnlNYENDiEhDffLeYFUOqMupCBth1/S8LoJWP41FgvX/iDPCcw\r\nb/QnvsJJ0DdFIk6cWqQaJ6UbHmN0zCZMk6n5Xf3J+ZxHP1mFGEWg8dN+PH0h\r\nqfJIGTbMOwEzqxWkp+eqptkC2AYpHe6P2bEMa/OWGScK1bz9SW5pW1v4z82p\r\nTrT2brPRCdo/uDGl96xyojB4erxBueWJB3IQ7Thu9H5d5XSKAc9tBROYy1Qz\r\n7o1t2bsQDDKoksyFfK92TgxGc8rXyZky6wM=\r\n=Rlyd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/list":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/menu-surface":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c492898c2.0_1672853960618_0.5566803299352332","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/menu","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d7a2277de.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e31a1c6f89f1c4ffc08afd29e8c82895ec235e2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d7a2277de.0.tgz","fileCount":38,"integrity":"sha512-YkNiX5eWTu4gDbDfWdxDbuWBdU5nMeXT4PMO1/3bXnX1xLxGQnws3gf9C31TXaFRKu++W9QjaAEusa9KFOdl1A==","signatures":[{"sig":"MEUCIDKojE5Cg2wbddKtyE1MoT7Q2ifRa2hwXLsqxZ1yaBVwAiEAiudIItMC/YIl0mUl85jY8BB3u1n/UcGw95s+vUQF8BY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfGjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAgw/9H7xvuSJNQrnu8mwpmMVvv/hiGD+D23YMLNYMV4xYJi4ah36i\r\nW0c+1oI8WgZttmVpfVJPwGX8rvr58W/+QSfX1vuG0Z3b6Pzxo1bV0856jpIh\r\nQ+OTzgec1aF8WXfI2ChrzrTE4zGZdTz2hJXB3LK3FOmTUzlEDyliscl48G/d\r\n1XjCLUYMXs9HNGgXKb2SKVH2KwqwwflgYM9FdzfPaLlFj2hyzwQohZFjBoQF\r\nzo/m/I2pCvX64JE9Q6KSKfYcTP+4/7d+eIjveme8dJjHhQFSaOFtR7stC0oD\r\n37eDtGMXhOahKDG9eEHKHHE2QAE5jURhoJtyAQv9SjgBqkWQ5idqstfB4g4o\r\ny2SFEU8ZlBh62ZwtS2YMLsQhw6aiWblT7n7bNbHTbFmh96PLb5301RXrktSL\r\nKkxkMp7hK9s27PD+p5uKaEQuLJa7N5gGWyELRDr0VO4xfZ2CkS3Ke0xKyO9Q\r\n2nS4jOmHoujvM7XG6fRBNz///b260ALAEvv+SGtNuwxUl/2ouoil6AkUirBc\r\nJKpdcHF7WZRLWU/ulGLM6xX/BOpI8+TTihYmscQgJJOxF68ddsY6GSgmvJ6K\r\nc2L7f1zPuaI2iZtCiNol5n14wx1AmXZYOkU9sdS0R0EzMF7QaVzRvnzC9sWx\r\ncxoP9e6YlS0itsEjn6JgO2Laiwkdbq3y96s=\r\n=lhI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/list":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/menu-surface":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d7a2277de.0_1672868259409_0.648933829002547","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/menu","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fd95ca7ef.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f6f6ff7fda017c493716b0b8488e8ed14fd2458","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":38,"integrity":"sha512-mJ7RNZxUeHnlv/XKwOOGbyekU0blKhUo/0d0mDHi0//VVsjZbiD1wbL2lgtQoUUwvwMxtrDE0v0/OF0AQ1unqg==","signatures":[{"sig":"MEQCIAPu9wLBkPiXVewME8K/2hlB/p6l6ePEhbq35KBd4tlmAiAquQ5a+5cLK1Yi+3CaOjl1LKUFUWuyyH2mf2jng5FnHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiIoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu0RAAgN194jEe/wwXCM/mAgvWlehLA8UP0RBTCN0JCWoakHhrzQeK\r\nvsO/qtL9lJAuHglQFAZo5KtV68IzbWC+f0UIgYxZAPzTr/q9iRaWtT850FKc\r\n74HlFfnBCcBo1vJOSYPPkCvcL2Pmb+tZM9vDAfNOximha0i1JDBvGWWPVvbj\r\nyu2iUNtdpVfHoes2spMOgxv2WZidScZng9cLI/hM4+ZVrtyeSiZzCWGGAyI0\r\n0TGeGfdDC/WbrNRdsIbxKIg223N6Zz8L3eQin1ZRoCOwbh6Ibndz+UN3t80t\r\n0K5z4UBy2NGK2K81wHEzbY5swxyAEP8mboQzA7P6oCdOziTjpX6xOK5Ngjxw\r\nMdUhOYQ34mYJLcz0WoeGs6Ktpe6b+PrXPvNFR0QDiaG3xkyK0u6DX53Uijhd\r\nF46jV13gTs15Vf8HhFniyAZo84PCEki/h5yEGaIehR7fubQ+ugUqEhgxcsTc\r\n+IDavvYq3f9RK9ea7zvvwGlTK/C5p3anBtS86RkVk0e1k0g0NS4SRHnlNagw\r\na3bwfeL35pvzCTCkF5mtYmF1bXO5FM5HVR6Vjbo59incxnug0whzcv6OFRib\r\nzeHJl2BuDeSbnTyDh2wjcoTzr4bbvvkO5JOcYdJH1aUGOENAsxRMP9PF0kMy\r\nackm6FNhwZw75wpTUKyuI6lqrGpNatZfPEU=\r\n=a9qz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/list":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/menu-surface":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fd95ca7ef.0_1672880680376_0.14601359918294587","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/menu","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1eb44faf9.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26ce86d7cb73c3cd15eef9bb30c8e1378008ef10","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1eb44faf9.0.tgz","fileCount":38,"integrity":"sha512-8Kbk4RqVRRe7EL81hpNe6OozJFFagDl7duCLT76IfQr2AylVjOwVmQpFii0tlfn3Js11U7gVL3AEUCjQFKwxqQ==","signatures":[{"sig":"MEQCIENPZ8xlhv4OUAhmLvZQXcd4RicTJEIg/Y0ol0zE+vPCAiBJmzTdWyhnRdDekC/J+6ZNHOtjqKE9WvF+yjzzWsTP1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpstA/8C2k133gd7If7gR19TyuHBWXn/rP9wd39vcDB4AQaOoZUWbV3\r\naWSddMsnwHOOg4sMbxfX/e02x3P9d14Y3HUVCR0+RHGGOnZaA7WVnATWFxI7\r\nIltR54c9kzBUItGyCmHi3QiGehzAQgaqigthIK6bg6KHIxHM9RuZf6e5jb2l\r\nKoiCiNFnIbjMiWmNtmUd0igsAN2sHvJdTlYRS28LQvBZ45osDM1jaALfXFpX\r\nVUpUu36uice7Mk3aCKXgnftMzPAJG3kFWIHjR1FqzCh2IbxNWEwGyrnZwLih\r\nSv2l35i2M1hPIFJKD1IJB1KDEOhZcUQHwBl57+hImNsZ3byhknfrm6zqg7sJ\r\ntzEJnOWoOkOLZ4qKlK5u70cGLt8+jzPjav4n0/P7j6D0g/4AIn3HUVaP00hu\r\nEVMvSprYp+sAK13JuOj/zAl4FllqfZkyod3GlkGKg5xyDCbIVHD6rRVgmv5h\r\nbydgRcgwoB4bC3UQxSwDN+xh1jExQBEATqTTxDzAndO+VbpBhI/q3yEecDat\r\nnihHtdOANbwAmtPdSBJUfnTuUwUlIUYMhSB+psq8dgK7sZ+QzS4TxRTY2S0U\r\n6l2jihlfmKadxbRWkCcmdBMmeBBn7sy9uWvmt0S8L2sSD7Kf87VkrW6u1DbO\r\nPw2kglFt+uYRhTKub+nAMjg+Ld+ypASDuII=\r\n=s+bq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/list":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/menu-surface":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1eb44faf9.0_1672909879920_0.5371136765583238","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/menu","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.adcdb7db9.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92cfae13ddaa12fabbc823cb83d1769a1cb999b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.adcdb7db9.0.tgz","fileCount":38,"integrity":"sha512-UDab4nLiJAQT9H6zeok7gXr3frsmt3B3lUeaqenMhM7m4NZb/ZjosM+k96I4Xv32oDVgz9q3bRFysRN1/3W0Hw==","signatures":[{"sig":"MEQCID3bEirBVRAsjwRsUsLuUX+uNd1iy/Moiat5HOIX1vQOAiAdsBy1450fMO1+Smqy5gJwf2EOIazwq3aDkwkdlP8AbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvmXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCcA/+MlicTP0NcHFLUu4UjZHaaSzW1SXUQzd6M5ePddM+jssdlQbb\r\n2SsuTmn8ttjsts2UgPIfgQvwdchNlJCQ0g9uEjk9UtBzfVmsdQH6sNASOLd3\r\n2/tfteWVCTGWaVUYhZOQhJddwvprU/srdzsb5UrZbhH0jb8gz17fkP9LL/xe\r\nP4Mk0xS/T7IALO5UMzItsg6EbXQ5b7SYZyCtQVfyBYi7klMBs9fklOExeSsl\r\nddScVGAMAcJQk/faoBcjvcPj/89WmkaCUSA/fKw+Nu+ay6wK/Yjcthkkf5rR\r\nl4L478byRIYb4kCat6w2csZ/9Dkx0ssWlukqNqlplEaQ53lpNsgz6zLfIR6T\r\nBc9KFLWpu3zeOHw9+pi2VYD8ck+Cx2Fw5MoMvgoqLuGjYXj9gys/A1Hq1BSQ\r\n4PYLKo+XzhnH46h42JYgwtrz3ad8yzaCrC2xvHRgeb6GbZ8tZ1sQ3pyGTukg\r\nLuJOpyn/VUgvYXyGv+DAyJfI7xjPoDZjlS3NvJyCKALeWxiUNJIAw2xZ+Zaw\r\nUINJC0J4j/9IRgVM1E6anjSnSQyGsExKpm9oYODlNVmAuPGZfoDJUqTLXhIU\r\nshmSFE+eupbdqepWhnDxmbVGUWGMN5TceeGZp/d78ZGCHHfX9QpKSq/t8P2v\r\nt/cnFo6pcuaU7hNOxGIOxpUZd3NWufiVJU0=\r\n=7LWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/list":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/menu-surface":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.adcdb7db9.0_1672935831555_0.2726253602670441","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/menu","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.067af7eff.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ff148cf6a3fe6b366855a3aa16689ffc75f1629","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.067af7eff.0.tgz","fileCount":38,"integrity":"sha512-vkDKBsEkEq330b0R7o0pWA9Mp3hMf1e1ymchtsuFMKnvP40K0yey+KgTZM4nM5T5l3tKoQURvqRc1dMgNvRubw==","signatures":[{"sig":"MEUCIBFQd2LL9zsgr68jYmYoNh8e+OMku+Ynb9O9TX8nrK1CAiEA1apPoXflKZjTpojSXCdv8a3cbNcUt0jwMfWR1EKJpS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZyhAAiDCcNm+GN8CQuLJXM8Gh7SnWQ8Wb1ROLtw3xujaEB9XAB/4+\r\nRCWuAnjj+d6FYcPdYryGGBaYybnt+KvO40GPyn/UkmT6HhktmgOh00sv5KgX\r\nM/yFfUa7Liz43LCGqtc64PwLXQ7pI9jFcZHppct5YBOJjX5dM3Ag68CzAj05\r\nh+E/4hpJ1cLMC74zWFVfExrIZ0iRmV6cN6jKOicSSMqugg/oGFd17OkkpyJa\r\n8MjbrpDCW6ATiBNu4O3E3L9xce33egSDw9qy+mA1Mdf/WmdDECFnMfIyAC8n\r\n93Na/klT6MZQvI21gb9gxnmlaSCusc08CnPN7SsCinwztM91mtP4j/hvRI/J\r\nScpA7s7vM4Bn74/W+qA01GWzQEJbmxyDYAGu9aBHfqSPYDAUHearsqlvXtew\r\nmTs0xh/UKd+cNX6foI69kdU9Dzo7sgxLIKKI5shhFr2F698cY3lNjLvOYIV0\r\nFvL0ZVRDrXEW8S79UrY5QxW0XZPx+GughpQBYEzJge9Bd2G7VhXh8TQbnUiE\r\n6cqf+3K9lkIx6BzdSlwfC1REWfm5B0PZzyqrwDdZ9p3jFgj4sfxu5W6d2YoW\r\nlnTmpZMo8pSSGbr/DukvFI1MjdcrhNor8HiqnWAg4vg8kd3gwQdUljy191xb\r\nltq+N6+Yn/sATH5qbq1hTZiKG3u0NWNttyc=\r\n=cgSm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/list":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/menu-surface":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.067af7eff.0_1673047071644_0.26964079691724896","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/menu","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.21d1196a7.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d155d2423fd82ee2d048f7503741c34b54ba2e7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.21d1196a7.0.tgz","fileCount":38,"integrity":"sha512-8U2g2As0+SAnndWx8HSItMf8jq0BnKuLaQ6+WDdfi298ZghBEn0jzaxyiogAEhQxGSe8qHcGXCekTHFBZf2pkQ==","signatures":[{"sig":"MEUCIQCYNjRY1QYjh5VnBKXMtwVvY7YmMh0Rsx1quoIOmejtuAIgbyX8ToUvOrOBnn6X6T2Xn5pMdNRvhNUZs6DnYi7qjd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/A3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfDw/7B2a/92Ae/BjrWZR7FyaRRO2j2ITxEkrhn9CWkWDX0RwD5ZOg\r\nMmEDq+PiqQd0bXAnyfuWWXhT2+03AmHKKwxFpZcyRzJzWRGE2XHxIdPn4n5z\r\nEEfLHaoDnpX6aXdv/BZKBu6q3c5sj1QNbM7RFv4Iu0O1k3aeJAKedGPnvyrY\r\nD9/7kRK3FkjY8hi0/VM3rLPC/6KratCKfCCNvdevIesdc7kUfYHPfNq4Ic+h\r\nrN3WXdpXq1pXeoC5MzYGJg/v8CnXdMdM5R3mAlgaxPbbID/Um/XurdVIPHvb\r\ncTp1ItI9HW34yCaYQpJqzbIFt2vko7s2g78x0BBo0DcXwcXYTeg2S9JAarJz\r\nmSIW6vbcbAgEORyj4lsnpCBVYvtzrmYAwpGGKoeLlzAQv7cevQxF05RjOady\r\ncGkR6o2AJ+BeLZVOlHkxyRYdfFHvmvDgb1FBqq9H51/RLH6TW6kBP2Yf+pb/\r\nfspr6/o+GIR8z8lchWMzQbiKU5EjPHqNJxpKj2eqiF2hd2f8K4L4ruHLsnji\r\ntShg2VoeRGXSEEmrUHrSOW9lfYWTMfzoE9vj4o0WeDAZ80YKBOMBNZUHZLX+\r\nc73bK5WXs2MjO5elYuDgiSVv+tQzNDCscZNRgbnn8cC/RVLfr6OD7Qi9iUgX\r\nonxscQ7uPNMVktGTXOedzsUbjWhnc9PX474=\r\n=JlAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/list":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/menu-surface":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.21d1196a7.0_1673261110843_0.23658918778861815","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/menu","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8d2d8d3c4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa2df91f91edd80a616f484a208ea9265ab3b63","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":38,"integrity":"sha512-tLKEW0dOOTxBsXeiZtMv0uXaM4kiKK3Bt8cvCsZBMMWuKpHE6Mm4/4kxNmc5CIs+DrEpiUZHzeEYUxs8Jj4oag==","signatures":[{"sig":"MEQCIG1H44MMFsVP8pY4RBmhB05Ey3vrPtvDnig3CWgq79fYAiA+Ftd5rjQpXh1A/x514NAsIkmq7G5pSYTNyulesdV7pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJRzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaKA//a9k039VtOz0VRaIwdfW80d8s9PUgTHEES+b3p3MLrTD4wkFB\r\ngRGQ6oKGxkBy2F6Sd9Z69U2gIzQJXs2fV+DCXgHFQVj14gKjlI5WhOx043a3\r\nGvH0v6kgOrz7D9n5okZirEunuDS8GA/CKX8YziZNxa9cHwx6qXkz69zNaLlj\r\n4rh7geW4Aab2xNG8r+5TCLUtazOQ+RN2aomZ0s+VntYc8dLtS894nZYxIwbS\r\nPGufQWRjuNn8fBVz5lWD4aldUSAGYBlyTa88ENzxkG6fKggrFci1Ib2R7hG3\r\nePgEGOKhjgGHQPv/59FFG5rugCyHAQsQatGebKnYn6pE5nGUyyd5z0odI1lX\r\nVIPZuVi9SlsYI9eyx6Bn/yZqkh50yvb7R4ZzKazgUlxWDyY4UF7pAUmxQx2s\r\nw1zCmxKAILPMEHvz7hvSsPi/QsIqvw8VZzJ73gik80wBQetwD4NZlkbksfJ+\r\nBD6PiWzR/WYe2xd2GMmjjyXZoypm1ox0SlOdmuba6qNWZjELTgQmEGQm3/O1\r\ndX00y8jJZz+BrxItIig0kdlxl/pE8sPE9W1rBZ43iQhCtwavjuwoJscKXcN9\r\nU00Xl5vhSMx4cf/U3dKtHQsH7V5RRPS5ruqkEDpKVlTmbnRtoIon0VxFk4dk\r\n4eXhcgaAjfjkQaynaegz9KqMJRo91Xk7EoA=\r\n=2+JM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/list":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/menu-surface":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8d2d8d3c4.0_1673303155135_0.2886758558325657","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/menu","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fc6ee6c32.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fb8c4a4bc24aa15c8d7e936080752cb5d027be8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":38,"integrity":"sha512-sEq3FdNyM1jvwq6Lfe2D7a8JumkDi+FRzVUAXo5kONSam+sb3mYmFVfGqtqZYFS7p4PQhlo5zzZ0a4fvZNgfTQ==","signatures":[{"sig":"MEQCIEyD9msasB6X7xte/iaSs50ima07AqNvTXLRkDBrM+nUAiB7UjI8W3j4qatogemNnnM3OMSsqwRydHyfgQa4QEucGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZKTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Jg//R3A/pxME6eHLq6dM6sel1q9DqUp+26tX6pioMbG7kKQ/IYom\r\nRqgaeO5FjmsrRbX/ilvuufZPxCCwp/XwfCvRQTZPyCqtWg1yTbR/KP4iJsYO\r\nMK5UBjSjHw8lw+GDgf6895+WoS7snbxVqlKPO0Ga7XGplND2aKoDQHWjaD3q\r\n9WyRwA/VUyjVfwKtdkQUwzptZ+NXYKMaLe62BFC69Ej5Dj90EsCkUwgb3LzZ\r\nOXC8rq0hTmZVc+VTSBHcJRf+UNxxPhEbTe0+KGziXnu9w3zdoaSi5c5bI5MC\r\n5lbXg+4Z26AFTpHwVDwocd+Hgy5GuhHZgd9Nwi5fPkJhp0eZSCwtyVL13zcB\r\np97SFwfungvFVkioiBUb6nV8brwK0WwwXG9LifiQAF4S6mn08QwcOKdJsXW4\r\ngd/7gxRpQDZTF3/WgSuRT5kAUyTSxHeGdPvqGT+qh1gDWx7izc8VFdyTuTZt\r\nsKDVto00JeTYEB0TJdktYYGANtLnTxcAx4A7O/Y3en4Pc1GPYJqh2GxwTSvT\r\nIWJww9UIXqbfksdk8PSE7RVi9UnjrPlQafBtnZeZKwVFwBlHdzyopgWi1+yr\r\nZvlKW5yV1wvZ55LGtlGWWVaCX18EK4hbckckd8h1zcKOSyu5SDq51mUKliM7\r\nYG1YEDzna3+qdCkZFGEnXPHNrfhqZ6eEVvw=\r\n=yCZA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/list":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/menu-surface":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fc6ee6c32.0_1673368211531_0.5945200513742976","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/menu","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.73537ab0f.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699b2ed98706e37a4c61c4bc969d0792a7a2e78b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.73537ab0f.0.tgz","fileCount":38,"integrity":"sha512-x2WITfFxNzl+IHLFbPCEukLLXmQMzBp7wtmm2lYMBUVEx06cyitCX2aBZXgjQvkyKo5MY9aPF7vQ/hGwPZXYDw==","signatures":[{"sig":"MEYCIQDqftJ4yE/BoIWoxtnftWex0qSEnFPHXAyc59gdQlixNgIhAJOuHWO+ne9DOHfJp2xPQ00H9EX/lHiX++znXKuFAw/s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvarMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRWhAAiAevgMkZRLXka9DRF7RZKF9OwdJiIGwA2oc3s7z+enZHTt5U\r\nABVlS+00RhswQs9KtdvptRc5ZuWTEYPk9Eao7Je2AwGYf6qRyAzleMPhpSvG\r\nXtIWL/Ls0UprGUc012jtgW5sifJ10QKQ1Vbk4LL0iilqzR1Kf2qIxc4qlsQ2\r\newqp0W2XoU/xtDnnYgzAaVJOaLyrRkbfAdNLsxknEISvIjz0ES/xeAUirA5Z\r\nvB8zuy6Ju5hLvizkPYSGls3Czqg4ojdZo9lEImF/Avs6eIInoFd16apM46+S\r\n5e/28bVlp1cPexqPRZjyiDkp46Vc9ByMnxTVMBbs2MKqSdnkByz8u8tEUJay\r\nFFefjNAphGt3iosbDXbYBPHe/LM0ClRIyeJHbpkB58rBWX8ZRgpmkfUEW1gk\r\nPUf1Zgpm1kz61IN2bS6gslB/6TIStbmLVlkmlNhgWO2T2ZcYdp1I4GwK7uJz\r\nKeAqZY/YWE2p1So2gx0ecAnB3obQ/NAMksqxdM3ZO244Xxg0Wm2wXklVu5KT\r\njpVsxRztP38k4H5lQz2HcFk/qkC8Mj/vJVw+UQy7l0MyDJ2zDn3NFCMm79kZ\r\n/iwT8ACf1yAFuYB3g71hXPs3I+eSIXmxeOyPtnan1rl9JkdQYktul9kVxqtx\r\ncW0RNRYiZZveguj9cp9oKVK2LurO83Uib3c=\r\n=TxZs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/list":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/menu-surface":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.73537ab0f.0_1673374411732_0.7474706353141789","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/menu","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.684e33d25.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fca04a5baa2514e850db82a218ebcc65ed8c0fe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.684e33d25.0.tgz","fileCount":38,"integrity":"sha512-r7wzDLSGSI9629/mfpvsMzkVxpmV75kcD3IrW0Pcu6/Bv/1xi0EvjcUXzNJJoQlwN4Zj35Ymz/PCjZkIDIz68Q==","signatures":[{"sig":"MEUCIBGdF/GPEj8x3fgy8ozUCkNhgKMS8RT2s9/JGth8GtvmAiEAtcVlSIuMo05Uf1CQSRYe1LaodOr0WgxE33UuRSj/LBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbp7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcMw/6AprbEY8sDZQ/1hBHt4ufrkBIzebF8by9us2uV9ouze3y1dFu\r\nUbMpSpS5DONmkLO4mxbcJ4d7Xl+XXamwBD4R6brO3NdAYgJ+wTpDHAXK+Gnk\r\nyFuBZlFYeee+amVYF6cCgRghU5R6bZAI6XjvkgCRhneoerVBd/XtimvSGwNt\r\n/QBEdhyxCQuS0Wapy/yuve3O6jLYTvDUP28TpWDPePv+zsZrLbzINEUmTF4k\r\n6hx0FPi5rW0nRLW9AWc+zREzWu9JfrMgRdlQuny4R6vpC9PgQ+MlNj9VKaMd\r\ngAmqWKjRBbikfwNScHB+QpGmkmHrWQ8BjcOZtgclmGHR5hokjvSDG1khBMZE\r\nMtCbRsfNZP4YNLR/9ePlwpaUfUfzCY0x92x0/mCyEgBj904c75ylmOKLZDfJ\r\nnAWH/hJBbQgWTFzHZ4c9tvM7AzGI3F8vBE/TmNEsRigCSlKtIKq7qtz6l3q3\r\nu0nN8uYhOJdZTH5djkF+c3QPUmCpCKGw2m2yZ/xH90yO0lUpcJ81HUnAk1mu\r\nTlqHiLldchtfH5p+8lb7ZHltYCGpIQvWkD8ZebKCp90R9t21pDKHwBxcMiXi\r\nrXM2aYvrYZ4CfzdKd1cTKGTJ6Z4iqiJHKG6dZlN5SP6465xbMOhIfcJO0wiY\r\nlIF4bB6RK2PYqLB2JJoleL4EeO5V7QZPHYQ=\r\n=kYXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/list":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/menu-surface":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.684e33d25.0_1673378426975_0.8098242877101147","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/menu","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0e89aab6b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"281e1aa0524f24155776d5b6d5c331809b07c75b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0e89aab6b.0.tgz","fileCount":38,"integrity":"sha512-cz8qENUXN7UXOSRkwIIgcnw4Tc7vwvtkFt8V4wxksqHYrIFaKif8wHM7e328wxh5Xxr6f3onTjNamgCYNL2cHw==","signatures":[{"sig":"MEUCIQDZ24kUJKYEyJh3uOhiKj4WiOGrnv8zCdm4TeQNRpLNbwIgOomh+fPrrfe9raagt78Ha50VBqTOLeT/hrWyq31nNds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuG1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX5Q//c3lNxo50VksqMp9R7h9MukgBRw/w9PcLsRC2cn9SKBlPVNaf\r\n1R2yl2Nvk1ZvLZFEMh6jQ3vH7oB6B8hAgtqkV6+q5E3CzaCreJUcmmQBC+5E\r\n7axUo0Yw99Y+KlzkVqloLXYohhHzgONV3bYnCPGkkNBt7SzmeXFDNWl+8tZr\r\nK9cSiV0TYPhYH4aKW4xxybNBrz/B/6+qHMVAerj5NhTKdjisdYBpXwf5ftLg\r\nHNbK1fXqHPBW3r4lql1pPZJrW0rPOUaOSwiGLoQD08C8uCZY5ZL/RfJsMHc3\r\nJikoVP9kgdGTZdiz2/Xi23OWOrdk439w3ElXl2PxQCbNQw0ct9oufKN3utC+\r\nd5ZvZ2RNLiFtCqczPlMXnjz/PATZBsuzrj2mMjiU6gcpFB+lDfu796+hcSLu\r\nVH/qC6PpoyLE8TwD1MC9u4wdxvojb3kW6GJR0EVZxQfGHL2/UbcnVvzS2NNQ\r\nSedIoJf+XNzG1Mq7cQ+FJrEaeyizss2t6kRb+nrijR6bnNDhAOUFA86LEn16\r\n8O7FvkCefMn9fm2M4DX6M24EtVF12ipfviQRgF37wL0/KSHMp9UsT9UK7wgf\r\n6ed/kVqRx8J3LxolHr6O8nKUToFwk9puHqK8/AmNWwM+u0dFo6UL+gXrbnL4\r\n+rstg2qZnWU1yTMEVRyi1NU3hDOTJ9E7B7A=\r\n=R6tZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/list":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/menu-surface":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0e89aab6b.0_1673454004899_0.6424515028912956","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/menu","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b0103d10a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33b592b168dfafeda0a26729a4cf22d1e66999ca","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b0103d10a.0.tgz","fileCount":38,"integrity":"sha512-YwBvV68J6KvvY//FVaaYwa82/SsbW6go0P1dCpjDtgJEd4vcTTfCW3qRpRLzcB0+CRIWU3fUSPpaFAZFRbdexg==","signatures":[{"sig":"MEUCIFr/0EPLmoPk8/XRKTsHMvwpotGpDwU8CxiUKdPeGsQgAiEAnds48YJ6FSoo/7Rkhw/VAndx0u0rNxHYrga1DGKU8gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwqkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD1g//c1CAjSp0mLjfpXqUzXq5W+lA9r1lyOL84dv1iv0e/Nsr2zS9\r\nVe/xheF6jqCYeuLf8XpXRRGBf7EA9OcXTx9dV3NOyp6Qyc5Kt4APWCNvkzdV\r\nko7qhFYmlXpd+GSp7VV0obVARWo7xAQrqgAUA9002IIZDQLDs831cVW4xYir\r\nFjxGNc/meUAEQXMREyP3mp2Z+PDOHLZXr6FygwK+N57JIzQGJOgeOV76V7Lx\r\nAm6GBOBWhyS0r0uY74lfZwtZs2Lkk6en2X6kFQQLAGwGnra0f92iWyl7r3g5\r\nxURMKXhAYlnR/+2AZcqjHUzAa+FrVl2Kq3WS4HpJRfEvpgDmoXKlQ5BYTYpI\r\nb96PJ7uNy6otVw0AHxHVLsjkpxizWBtqlUPQ5jzOZyVl2lu/wLI/2tvIjsPl\r\nUWkCol+9BZJYCKAtH5RnFvbSIpCXDnb6U2joHu3ePwk+v0Xt8lM5B4+OQ0e4\r\n6NjJ+WEb+/XrjixA1qOACYJWKwnwykE0tm54SbpBralXO5kSNuGVC3EtFoC9\r\nV7q5k7lCJmjwEiZ1jWNPztuTzbdbqSLEvtYqSzBk0QTJ0yLZSwfWICja6U0a\r\nq36Swr9lQ+qGTK+A412C+5G3sQrU2Ynl5WmpckFFnl8gTSd594iOqKfxWuao\r\n0efAj2jz/BiIP1BonKR6BP6GBxMe5psj0zQ=\r\n=4BaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/list":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/menu-surface":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b0103d10a.0_1673464484206_0.5978326722093039","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/menu","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.50e7a5312.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a1b0ddc15d8d429d2f838834e87f71cc967b35","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.50e7a5312.0.tgz","fileCount":38,"integrity":"sha512-8fSSsJMhQJE+5qDxIvWuoFQoow65Mlt6LJtkBtHi1WxwepKSbbu1ArWEb6hFXZYtFrLLNJmWOlUytyngzAUJbg==","signatures":[{"sig":"MEUCIQDJ4p7e3u5Ws4qMAoBcQ9nyIwPb7polFCq1Y1DjrcqmIgIgGmK/GiwFQuS3nSSVydTLVNUDTccnXXoWO0WqDjyqen0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomBg//ddYTCMRfOk+iiDz10k1e12tmVtDiDCGTybGOKoduRb6xPEKj\r\naLg+plxsBapbiEWqAIEZjC7zgWo8aXllMjm07ksDOpohxTsnuzp5o1TtTbFL\r\nYJby7dCXiwDZoVc1eWx8x7wqa50YP9MPoFUsz3C224bi4uv8l3F1OawHyDSX\r\nHTcaopUJWEjKGcdNApows6M12qiphX8ezqCgP6lXIuVcKIo9MnhOfl8wnxmV\r\nDqUi8VdKnI1EUye8qn33rpJkp5mmyUe8PFecIF7cBvSKycPweWhvmFc27SSr\r\nBV5fp88MMK1jFe6iFmdgIsc1/t5hMwIRZbXPONdtbDe583BL6YX1kAg0RJAA\r\nMWM9MvBRh/YoxR38owOmGrd1Aocs21QSIQ3k3q9SyuDIq0WdINvnyZBCxmAl\r\nsaEcn7aUprxPpt3uPY+6d5MSQAk/OhUp2LtPQvA39rpRCg2Vam3JiBAyIcLI\r\nQkQKnz+K5Zl2aovKPiknPu33+PQ9Pm+7+b+Mfz2ak/KsM2yqRQVJNGbNH0W4\r\nUtGVoiRUkYgY2OrNp65zaVghU5n2faf0NScAzXkUhgoZzDlRntGZVIux5Sm7\r\nd7sgnpVGOxgRINgSO2/NHWCSYr7RPXsQgYT+ITc6L1qxoF1tCDq1EZpIN4pO\r\n2ZWdVQatml/CMs9yiUXq7jRF0upz/Ip0bBA=\r\n=Xq9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/list":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/menu-surface":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.50e7a5312.0_1673470565570_0.2953310204105868","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/menu","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.202823f54.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"766562a71aaa08c540747800496677dd8c443a17","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.202823f54.0.tgz","fileCount":38,"integrity":"sha512-P20io6E2dBzokAqkVgAmhm1HKHs812T3Ke5nbzr1h32fEYQANExSoVY7V+3sBtCFxVomx+An5fOa3dTtEsJsUg==","signatures":[{"sig":"MEQCIBCak0IuXbyBLXFBEjVppZWH7mT1LFAcETYZDG5Apbt/AiAEGtqJy0Nn61jXI2yVidOV2GA3hZuTax8+I7pi4Qr9lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCJA//e96LMucxlEvgP/5OLOzbZ1jg02nrtHxnlhRBrLeO5moKKh7C\r\ngJSko1U2imsktA+UxggRKO+gQRl4s/qbkd7tzJ4CXe1eFR6xpVzUWap2i3kc\r\n2M4pbbmv7HiOM+/Fc33X32KMozlmJMPkhpzmXNmSZKkYnFwB7PL6PjIOZDsR\r\nABcNzHvwwxi6Y8Nm9WE857C6afOYYcIylzTn6Vc7TBnjw7oEtp8mKigic/3F\r\nwg1UhMv1i59pTiJOOKxtWkXMcbWsxipM0HyY0BlYapp1UGgfOK2/8RJlQFvm\r\ncia8qSAT0GXxTp2B4JDbjvWhXcM9PXJa0HZyLfl4pMbAwcHBMR/OXV2em/b8\r\nxMcp/sHd1g/61JfFmAHMsN+coqnDAb7XJ1GLL/1EzB+zljsm347HbV44JZeK\r\nKhGOUr1XorMoyHDGQ2OMMAtt78aRrmlDdwAX/w+RCH7HWFGnwU8+uzlix6O/\r\nsbgExsjjTtuARRwIh92NeuQN87IftbvYrNEmRI+JmaZhFCmcWkpqOkxoT2dJ\r\nQ/1Iu/FPb77HVCEmGQrLvUGcmQhGRWI0nLQ1kCgfffhN+xs3BfwQz3Q5pR4Q\r\nix2QhF3qaM81VC3KFn4rvEEu3ouIuCtAfxBug/t+gVobwlsT+nSsFJAUDrlE\r\nW1b1H7wqSlDBqNITTGGQMzL/j7y80Kmf1ho=\r\n=g7Sx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/list":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/menu-surface":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.202823f54.0_1673473060358_0.07579407923201331","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/menu","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.199fe2a2a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"604b3d0c0e6b93cb300836cf3d53c52464a9f57a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.199fe2a2a.0.tgz","fileCount":38,"integrity":"sha512-2oGnaj/1Uh9dTg/894vNMwzHARo6Kt8GL1o3tzvssbp9/ueMyR7oYtJ+Nxo8ie3IpCyfXIBiHsLk0xG0FMRFTA==","signatures":[{"sig":"MEUCIQCZLuJtHW/BYzZzYAa9hACTUQFjUmvwVouyceh75TA3awIgHb6xomyYqzmmdapZuReAJAvIr2qjfYIyKj+1CdieeJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY0A//RfiJ/TU+Zzq2HJA6sU2Dxi8oM6Gf5nlX3URilk81FpKGUhOy\r\nkM9+2992zJq5Cdtg4LydgHCWerB44Xp/V8KdZy7TFnrMnrpqwezbPz0A+EgL\r\nACm1LTFWeMXeAVLuXn9wyWw+3VEl+54vqxXG3RADHJ3X5Xyk8biXfgJSqAju\r\n/lOpf9kxRrCucRBj54XdM6hAlu2UH5qcadboHj2SevFWV3dZ2avqV5S2IPRX\r\nfYQmKFG8JTcKl5su1q/RnI4Z38x0QCtMhtQ7wDm0u7M3DaNR3ZksiQWkDhhY\r\nL/WPecuBuYL7InJhsZA3XSJOBfTwDLDd1nP8GRUElACI03YoNH8HnU4HDLGe\r\nL3cxnJxNZ9HMX/x2OzqvP5OnQe00f0Cypsl4WXn7OB4dDBSmIrNU7AIly7nS\r\n6EvqlWQH45FBRxs3O1IZTDVlefIaEg0OxncmmK4AsuOqEVaAeuinOHwQgZvr\r\nUMKT4DtCyFYR3X5JhfRXr+9INF+U3XIBcCnhyNfEJv+VpwTmcl/STZg8dKe/\r\n6TasurAqj82lq2aWlGDgAuG/Noj3DQnBACA0mCOh1z7Q1AOyWqTBq+EH0mXs\r\nuNOZezmTuKgIjXG+vhJFoiCoKzOzZ6u5O01HjHDZhvoS0ThKuv9Bgz5kdGDk\r\nT8STLqzLJ9Xgvv/924FDV1zHg33UHpVUp+s=\r\n=FlbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.1+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/list":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/menu-surface":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.199fe2a2a.0_1673474267649_0.7307308308830944","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/menu","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8c0786d6f.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b42e582e30cb31f325a68118589363c8a74540","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8c0786d6f.0.tgz","fileCount":38,"integrity":"sha512-P0qIW7X2UdUlPn+mUksceO/QGZuscuQItSV1sqlp1064VX8bsxQs9Bc5SJk0SfNmSa9LHm5LPB0g2bJTA8lXgg==","signatures":[{"sig":"MEUCIQDc79sTO0Zd7A4huQU+yIbzCGZpq7wffHCYg0aExo6lBQIgUc7VgpCIouwnDpYiobbMpvpNvelppMXDcHhDxor43Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW5g/+Lt/O9anbgM/duh3Z/5eNU2qoJlEWW55hfQW6yVzTp1ELd3jt\r\nrxgBmqeyHIsRk7ywhJ7ORosskK6iKvoQ7LnLTRavRZPY06/1oU1tQGBq1+gK\r\no3DOWC3H6svKDgE161TFyVCtMW3pUlIwvGxLZRZW3lAWpmfmALzosVBE8wVD\r\nQR8jel/h9VTBNEATkJlhrrbc15WSGvd+tLe32oIq5qoPm2kN9MRV30Oy4TvK\r\ntpvuBBoe1K2xb18SiQ+A5hE+DiVUSU0QrVNz2mwb7foagZO5u9IadZmnPvfj\r\nFh5dBg+NEF/ZBrn0fC9B/Jxt2a9tWjY+xBafsyZOfrwHkujRf0ysu8Vulhy4\r\npTwv8BWh0ZBlISrkxpay5w8naurVi6+8im4JDcWL8DbepMdOrU5mwo1xmC6g\r\n/6FmfqjPU/lDISn8PczURWfAf98lA/APgbgQU260M6VVV3qElwoj8vja1biG\r\nTrbdA5y/vImYq2FEg1hcXbfUkzdKjEeXk+8Ewim0DJhIdHgFhCEPJnRJq2AA\r\nT/fDZUcUmQ9Yki3kBqx5rzTay1kl/N399NSWZ7ogoRm+ol1Oyu0PLarwpKET\r\nipzjMUYd1S/fk8OX8pKEbgyklLSSo5cOXdALXbFXIGrJTLATBOkzIUQ3N0Mj\r\n79vc2fgTEz8z2nvLoeboMaJXgvJLujMmit8=\r\n=DyU9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/list":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/menu-surface":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8c0786d6f.0_1673534303188_0.6747579258507441","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/menu","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8a74f7c6d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a6e5bac715ab84ad0f4ed5c4d2d1b16fbbd6f8a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":38,"integrity":"sha512-L4ZjW+gezAK6EpLy5qZBvZvOsGPLl49SKwf8qdWFkEZASapGoksnL1gA4gO4ojzxBZCYHADK+b+SItwq+m/v0g==","signatures":[{"sig":"MEUCIQD8C2ZzBacLdYcw8ogSWBgsTMFo6rWnACiCD0AGIOYxzQIgJZXmGBFCBxRMMN8shHgO4trGdxMzE7VdDd2I0usihLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfHw/+MLh0IpDh4berhNRdR6hJRxYf2F7Z03JcsSqRFGJ7d7NEIqRz\r\nt5NFfxd/Iwri9Q2tnRJHaEq0EP1eH8NODdVagWxRkeMvV4zxdWuDIeDjrCx8\r\nJL15sPoNBMoj8CcuG6sm5T6aHZ+m56N9bvKVgaDcoizo/cLZVwdiaDQUiWPq\r\nnJHZ/X0cFXXVeZfch+++2x216U2VGkNO7hhJP7btVCNmpCTqYlRwSeTeIUJf\r\nh9wPoKR0Q+tP8HaT+D125IHFmanZDWkbKNN6IRPXrkIN6QDjb9/bX0LSAa2v\r\n+oAjsoKl4E9PnxSG0UNELIm9bSuVrrdmWugDFhNONLfujSPlvDjZUhyQAjhX\r\nV4w5p9IU24xBztEY7Wdl4sD6ifGIoT4Tcufz/kwzmJQEO0W7pkwMPjlFN5VC\r\nMvjBd066zB+QV/vcA8t482mGaFf2h5RtmVDDXrXq1zmPQqdFIhhZmdtcOO2A\r\nSKg9lZI+V/KeTEREMbgVjfTDo9G9zLNXRaS3jqBYk/CtKFwf+UUTY/lTpkrE\r\nVRIReaMVnxCuqS1V1OrQbHOFmaKLZmIEQ3Im8XrcAXK+oWsP029VBNVXShN0\r\nSCJ6oLFBmOYB3bD0oCORn4QN/Yj3bgI5NN/U/OOmzAdAoN+b8jcnBQlsEQ25\r\ne4zwyvHdshr1OvfYwnRUx6GO6BB3evZgjwk=\r\n=xjCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/list":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/menu-surface":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8a74f7c6d.0_1673983601389_0.182675887196716","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/menu","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b4687fdc1.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1207b38f38885520680b96131b26d608da7b529","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b4687fdc1.0.tgz","fileCount":38,"integrity":"sha512-Bt6bf7qKDnGQDaEOUhn8mjkSeE86wMVi5P7xjZX3S/CyFB421LQ0Moqr4Vt57R1SXfGX2DpvxQ7sPRa281o88g==","signatures":[{"sig":"MEQCIAS+Bq7NNQICIOXt5AVqhD3RFpItjwewEB88FOsiKl4iAiAF7Der28oMUCz3zMv6GH1CIQtMif5Y2pgDoOeD7kOp8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ9IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogLg//brA58ppLqf4QUAoKSTaVxX4pblJLBizqrmL2NofZXS0nF/Jv\r\nEHDiW8MnLgNlpoB+U880IOirv9t6D7xMgsz+A3tu+TiB/b7xKGGIa2FVdc8S\r\nDBBkRabUnANiHilHmiPyRVuFFZNNEltkyog9gKq9bJy+MWYoWpRU5sCJ688y\r\nd4GM3aKBZwblkONpWpYprL3sZDSb9fukHk+3XD2mgKEFroKCJIUp2OoIk/1X\r\nVwNGmYvKLZNaqpWvwSBWjscMi4GNB2yuTe2jGDLZ08SQ4cSXcBbt+GZxc05L\r\naO2Re+ywVfrNZ4FkwPAEGJ2jZU95SnpMXviROP6fEe7lsgvw5R/cMXvq2BBw\r\npF8BqmBVwd6TvK4kzjkmT0hx6UGCx1EKluxyahvT3HTZDpWHmpCOFQQSgeiz\r\n/X0+0BWD3ycFdrs33IzGbCwTIJATv8vv1ivs/2OLHqvW4NLbiCo3Qdz6WOAE\r\n6kQNHy7XCfewvSM3AVVwJ3P1eiNdPqn56/AC+SzsJ9k/cQFcnXvAb6g0lzGa\r\nu+52EWQeiSYRI0/hISiux0KJ/mMsSrTkx0ABX0VUdTdl4UWAnqhpfu1kpgpk\r\nPF2vf3edfS9C420v99oMF/3sJtM2e9oTNYcTq1Ibmuz1XAUQ2XyYWT89uJZE\r\nkfyClQWagKXaWzcuOLHen6yZaNau0qJRKBo=\r\n=uBb8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/list":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/menu-surface":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b4687fdc1.0_1674157896472_0.8119892110463605","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/menu","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b836b9892.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4563485f757761eadf78651e73c556e7b9f2f50","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b836b9892.0.tgz","fileCount":38,"integrity":"sha512-7GbGQXk9Sm/vSx0JjqDiz9tGipQRoM/oZseaQTXNyZQAn41DgB5rma3+j2cC9dNCWTjK5e+HrqGuljQtpSx4Nw==","signatures":[{"sig":"MEUCIQDvo3pwINbMqhEHvEfu6Ok8n8Aob3K81s0y7h+upUefKgIgUS+mahop5dTIn5g45bT4rALJJvmqqh08H2XWuM3dP6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsIA//WRFbt5k4rByeNtBJPMKTDITeWVgVwyTtbS8fJoPxC8FKPFgM\r\nOCoqdrvi8lJ+5En7JhoQY+VyuQKTlPNnYoUU21URKeFyba6MGAHF1YqejNf/\r\nzFUt/8asy70zqr+Tq5Aw9312Xr1en81dLKchi3GttnVehFLU5rrzzM94irfI\r\nVunqhxYNupKvg2oBgfStS0JyEhYToK5iG66/y6f3fOJPZr/dqXiSCjawnPes\r\nS1vZRXTXkYUSRtpGElCk1n1DhVzoXIMR9+Ls4yAYmVkG1NqdC9v3dNR4/wGe\r\nMzKPFECmAWAI5M0AQVepm/uUHsSxmEDogtEy1FJf3fMy3vx3pyu8Trx6Eovy\r\n6aT1V+kIbHPa/Pw89V4NrvRy6wkr4cCzdfHy0ZSpBIvoxPEcCGz61EOjTXTr\r\nUM5byRqVTbiscCrPi5m43tKV4wcw/GHiMK47DecBly0MmuunjEsEcM9JKC3V\r\nOpMbPc2BQiY68I+y6Mg7jDvkhgrxM+C7ZW2xIxR8aFi0jyV0A3lxFPcbuhdx\r\n4ftVSC9GVMzOciMqmn6xASEsD3XwzQ3qMYZtAuTqyBVxmSzvZ2iUypcWPFHq\r\nNz8bpQlLng/Ly8PrFXaPOEKmu4XEjx5T8vdU/g5mb1WvWhsbuJIa+MrhKpQi\r\nS/13eyrp3SEUbus6rvOK6tFvjXO2FKB2TXQ=\r\n=640Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/list":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/menu-surface":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b836b9892.0_1674600062491_0.6613562772887778","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/menu","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e8912fd37.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c0b534b4409cd1348f7c3b6a25fa0fcf3914367","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e8912fd37.0.tgz","fileCount":38,"integrity":"sha512-DDT2d4NkPJUatxwcoRBGAOG3K5KAkhZdd6NcbFNZmuVty2gMhzlm9C3z3R/4W/jfXtLMaTV64cafmmmr79mZVg==","signatures":[{"sig":"MEQCIGqZqcuWm4hogJY1pf6fMcXOs0Tr0HrKdo5R+zXIO3EUAiA8y30nqAu63g2cx8bNb6SuWzMlBSA/TTrC7YOilFKL9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0scNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo9w/8DHEf1RXqdbG1DLCact/HDmQ4EUTuVN+kkiX+pLJG4pjKtrr1\r\nsbgFJcudlOYqw9RENcZDfNEK5j2syezMnh8gU5bVZRxe0Az0hXyP4/CYPJeg\r\nyYwKwhrsr3ITG5+lDgZwiT4s9i/i28+g/ZJIeo8XnFbL9bckJSRm1PBs6HaY\r\nzBozvSmpgMW+VomkDQ2s5q3E01rFUFiTpDymYu/nX49Y2NLsgrZFpevINtRS\r\nD4nP2689SqAt8MJj32qCJzBKmdfBx4h+WSuPq0jfbSVF9alUdePgue0yCtBh\r\nM8F+AlsLnbLZyrJehESo7EFHfIoE3r1LQUnWCbwj6p8rsxwzwiHrU12TR1XM\r\nG88CwYswtMkntG4SvzwhtGsO8Uud5jI0p2rtrKT84kbXeOBTMjJouEJHcbEI\r\nWGWzXFf3CaEOT/uBtGwSEHHufznk1XAsuMfpPrjiWtHW07WdsrbshDpbmblE\r\nX/A9oNOmA3ejN6ubTsfA+ePaNNbNWmhTqjGC4DsmT3YiFo6Qz2I6VALWBWoK\r\naKv7n16reXd6Ew73faZsFmssZCGmBTiUMCu5empHJTbtvPqjC9r8ic75rvdz\r\nhAYFLDAWJzB10Gg7b5GrMV1rJ1ba2GRgwrVOcXzSWHYz5DJC3i+7D8bB/+Ew\r\n13f85+xOQQK5Nz518glyJtOLljZ/WxsXJJI=\r\n=X4GG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/list":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/menu-surface":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e8912fd37.0_1674757901265_0.03102838102487926","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/menu","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.16fbd30ff.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f1fe4e4cc9b5e5a4ece30476111559acbccefe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.16fbd30ff.0.tgz","fileCount":38,"integrity":"sha512-5mB8AGKC8IHGwFxyqEFMEY+URNGXNji345DqELcTzRqKHKSfBjdGWLF/u+YWaHKNtjafSqiubwOzwyuyWLJ1sg==","signatures":[{"sig":"MEUCIEnK3oMaWZOmIRfaRdkSkW7d68tUmGwsttOtA/4PHtkmAiEA4uJX69VLmXRmnuekkVsrNA2VsaLoLlxk+JSPOhfRReQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0shFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsjw/8CrBrX6/n4mrHGHr1NJjvNFN5fcn/QAvK0CM4GqnqWwFXK3dx\r\nZiM2Mzjp/E1XvFfumnITBrBU3KPz+PQFHF/nYMHDsvTti5uQ0wSIxYBaSMvB\r\nfEHO40EX86MPBC7VsUBaWomp3AagGHrfcYbn1ECgzMRw3t0YNzlyNq2ejq+v\r\n4Ms3VspWZNg0rWkph0rEbf4/btcpk88FK+y8GtdDIo7cKasKoB9vVAhP60os\r\n1TnkGf7tcV/t0+fO5QOpbNWI0mrbmwSrnfR9YofNPurDrXdvoszDSQPRbpjz\r\nZTgfcDCrmrJl19IFX81+I7u0SnUpU9aACBlCdMXQDs1j6qQmejAWeoZ1830j\r\nkBhvfvCNP2NVGCLyIM1lyUQRO4Hm24oZiMw7ELHJ8kZFPvkK1+NP5H1QkFz7\r\nzmuHMP3y2CSxnl19GMVgqmRDEjCNT2nmb9qfNfTrxce1PsW/eYFFfO4q9XpP\r\n/bxc1R9WQD802nWSSJKYMTG/7ZdZ9obe7+AU6tuqeHj4k4WTAihSNNoTkHS+\r\nVzlKABWzMXCFKWgqoMEaNgiUk0S2d3dL/qQvVJuF//esQjAKUfX6igCyCa35\r\nTkd1n4dtoOqpERrzeq0EOaqpTXnIsbrwstOXvnzj8biPS9FL5GBkPiMY6QrO\r\nB8JARo9tQ+BwDa5w6+62JSolhyDgD2twr2g=\r\n=7xby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/list":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/menu-surface":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.16fbd30ff.0_1674758212713_0.13142269222884595","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/menu","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.033ae083a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1db724838a81da074b753f55420ca9488610007a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.033ae083a.0.tgz","fileCount":38,"integrity":"sha512-wVy5zrITpF/Nfigi85Qoyo1Cl/5kSomlDRPG2/GiobsG446sb8t5UJAunQQ9hWFkHQuzq005oMkd/wI0F131cQ==","signatures":[{"sig":"MEUCIQD3E2um4dtWbHwKSP6bCfS3ioTKpE9dXQR6lqALR9lrhwIgISQXoY8HrIVjqwAuecJv+zAORPAUkaBCa8aqtEe9iaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuAA//Xo3DkIQYrvlDa0H79812qmEUlnA8okSkY+9igTEzDXEoFOdy\r\nter/+bcVMxhfSGyYndGWxPbGZDi8By12cL1TtRmSCncIFgw5Ttc42teUjUt0\r\nk5S5eoGyPWH5Wq64g3x8FoO5fUDn5Z8CT2c35Ufxb8mXCWvpwutPBxgjcUzk\r\n3SZ/U8SiEhUiPVX3iwX2/BWWBRag0M6U4ei5cjjeTG669WbpY+3J0JhQ3AAV\r\nAxOHntBOV5tBwtGJ689A1aDWygKvmvx9XZK/pcls+kBAlHmKHURQGQgB+9Ro\r\niMSAQBCbWlCVRdU1bP5TeffNz7I6NAIJmYGqK8+0gfO4yihILlKZzAZdTpV/\r\n3aF+4pGJIlcwEgXKuQFcoGXtfj4zlihLVi7D41Sk2go4oPLIWyaAJTnz3TBB\r\nL58kOIE7BfdRRrmxfaTvXhdtfm2E5axN8en5kQl/rEvAmXZvJYgfzli+Fzvj\r\nBogMurLGyFHCiW5Rhw7pyYto5YWTDy3DljzWIyLB4v5XjUhLG6dmIE60sMJk\r\nNS/14+YoR6oxr8J8Iqp6bh0tos+tF8cDUCOrCxhmvr6neDA+5EcyBnmQE0Ui\r\notagDPOjbYOjPrjG1Qb6IQQw4Ybf24ez1ruQKrr86VHXiDbRkqd1Y1QnLHXO\r\no/9xKsM13E7xFONAEtkZm9yvMe3p2LIJ7uY=\r\n=BIqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/list":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/menu-surface":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.033ae083a.0_1674761328419_0.22346529561377593","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/menu","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3a705fa1d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05705e7de3a3eb416412395ed9c06bffb4c0a66","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3a705fa1d.0.tgz","fileCount":38,"integrity":"sha512-uK3gyo/x7iOBa3zgT/qAvzWiGvlxpdT/x8B4wprgtocokg8jE9AvYeuXaTkLEAJ2Q7xhRkxD+od6hCS+PeJqzw==","signatures":[{"sig":"MEYCIQDi3a3tnHkqit31IFEkfuWcqycGshhZa/0oiv15YOTB7gIhALZMRVVoUPryHYfFwB0VGQqEgzvfcPxj4JmDcYA6SB4B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FQAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonFg//f50uNfxjOf6JK3e+WanwBy4U1nLS+nGBbU1Z8DJ50Mpq4Dus\r\nHo4igWqvzvoLqvKPkekr3dOeJektMkILabVqbpFOY1a3+P9i0y4C92SvsbhH\r\n1S4/bF4iCsQOfiv5CPEYWXM4ic3Au/YKHz3uy7lDI1viV6XCnGivHEkdLF7V\r\nkdCgP2o5y1kswWcvM7uZnzBp/sZ9FWspMzYQh1kzsqgUzP36UArqqn51Jo9m\r\nuPdyntH4/Fv3QcNdpaGqhEb+4oKIloIw0v6EOmVcJ7tk8+SAOLbJ2wGnmhcB\r\nJ7098W7iOOKoYQ+eZqaxZAhNFJyShGWFgGVcFR2d2nnKHOV4cyKScdvY3eDr\r\n8zK1BXBItvQjR3bCLb1LkD7f3qyQitzAG7xBjF80XOcvHXhqjIPiHALu7Fei\r\n4+/7c2EBAN1T+EyW4cGfuBGxj+VucBeUqW+Nj6pdG8TMI2499fE1SR8GcmY6\r\nlv3IsC1pcq+jkq0V84Hn3a0HKs2pf+tap11uR/WJ9/Nl5z7QZiwduKsjEj7/\r\nTfTufHLng8o//KySCr1Hx6QOK7YXJpDRbkvTQnqoIrKev9Lri9BgjkZTOZBF\r\nFIpN5YVpOYbB19Phs2iS0KcJQkUkmHwQ8LM+HAa8C7WJWr+mX1hEgwzYZUXu\r\nk+WoYivaM8Z3p4/7i/Y7MVf5PHUYE2ZoGpo=\r\n=DUD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/list":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/menu-surface":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3a705fa1d.0_1674859520253_0.47961709062788493","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/menu","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d6bea2ff2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b49180475faddf97c4f70ae27b42ca5d7910367","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":38,"integrity":"sha512-6/vj9Nm6wPr9zhMEfrB9ys47v5tGOjVWU8mhDU7AClas4rK1HpYCE8vQUnFhTvyAbgt6KGc5sEdcWOdUj85qdA==","signatures":[{"sig":"MEYCIQCjDbcvVgG4s4NsIY1Vpzi4RLVbgiAURB9iiKqYOulftgIhAJd//oVxC1wj7aYE/IQHabBvHbZtylRkdM9HBNFFZKgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TRxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOmQ/+IWchnVRNn26Vg3cx3NoiYLzZTpzzUmeTi7IoeQh1+Eiq1p4Z\r\nc2cYNk+wKa0S1rz8EwD0meG8o3SF3OhDheI9LqhXDzU9ItWPJt6ayP50SHQF\r\nYR2G4pIfs7iIzi7C+TzK7YBXBXpZKcZdzjSco40+3ver77kU1/fYFVPWIVzd\r\ntBznbHxjMrFvLQ+TcPQm8XmPYN4YkAEopcu7zBGopKIFHMlXzwiIwhg2NiLv\r\nUtvI0k/THJNmD8WhnPDLYj1TAAlmIXLpUdkRJjUrDB983Hh7WeRNZK2NaOIp\r\nFZpsY3tMpNaCIU30GonsqNo5Ie0+a6TPVmFAlLO0vStq2FW29hEgg7gJkURJ\r\nDe7/l0LXvEz12/FXipbY5iyTG6y7zysx7Lrb4ZWVcXMDgfhx78zIR4l3pfAM\r\n9SlrHpc/win04MWTaNK1lwUNyfRh+Y6/4gDcixEq0bFvzk8fXTndfbwLigsl\r\nNaj1aUjs6afMRvFL0sYISObwX8Xhbf1Gx+McLYb73TXL6IbMCXGyfsLQg6N3\r\nowmkB5q2QD5ZxXO1b2Bt0lz8wuOI7OxydhtWGAmKvQsgcne1/plXrg/ob/NZ\r\n0MVAvUAuIOIqGbkpfqbmdwvUrT+tyEO9AJ2w6s8KJVks6WEjWH/elgqwZ5gZ\r\nRoNi28Nv1E8uxvsilPhQTFi/p22w2Zot590=\r\n=4MK7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/list":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/menu-surface":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d6bea2ff2.0_1675179120821_0.15023740547023956","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/menu","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0c94182c8.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab78f9f7bf293ad661bc3cf35b2f22bdf6ded096","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0c94182c8.0.tgz","fileCount":38,"integrity":"sha512-A2dHiTfgF/3R2HKajX4o4J+6E8/woJ86suUobS4+VzBXPVSz/i5m0i4kcDV/7jvn+TQNWM89bX0c1mCPH9i0Dw==","signatures":[{"sig":"MEQCIAQeaFs0cyNJWdNDiNVcfyMNv9L82Fo3qylpuLdolJ0GAiBoDFI0H5PCECZtKZ87zGXay/pF81J6DNXZwH+/ZPOzkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qVmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcQw/+KoEDDgcXWKNL2W82KwSjpsXFabzdYGaBLTsVG1WL+E7waUUT\r\nfL3J62u0ISXYF/sHrMZrERnH44YJ9UB5wxDLUsJgSXFMvmmaKMRjpjYfbLST\r\nP7DByHNqdv0Oi2Ea5p0Tp+IrA8awv2kPm+Eza22qDvBRa1fHaiIELn3/mIMn\r\n6E2LMj1cFMdRm4PQEv5l/fZpe2l+gbvtxqo8wAM+dHHArtYBG24eLMka2dhL\r\n+8Y+tFzB+LVEvQ+CEdgcDb/xpblHmEFB4+DDRTzm2/+YHO06IPdnBSZbHgda\r\n6xnSZjWKEt7g9jQs9ottrDQJdEyf0dy10vwJKN5AKW1Zu2cBGLM92HRn8tCL\r\nENoTcHcNlSw3LnNVJvtnOO+XUv/zq17kklsuUI58xD/wIYx9x8deu760RgjS\r\nErup4TBH+hVnjVSaAYdX6t3Hr/bSElur8qeqYEkfabpo/Yh/+ABccPnrzQ+V\r\nRfVT7RUy+2prKrDqShwicJRZXHWR0RyxEU/a2Ubmu3nCjOfbydc+3pLzM6KR\r\nKYrKBgYAW5G/qs5JoL9NaS8IohNsUfTCBmLuisn9T2n1uiYAkvo8LW402+89\r\nLsbC5I9pNoUVy3tQzgh2gv8yl4ADUGWf1hol8tgnc8Q40TJ2sB5Yw6CZ6146\r\nmEV2tIVbnotUZKRmdRcqNYyKlMCbbCaaPv8=\r\n=j1XB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/list":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/menu-surface":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0c94182c8.0_1675273574522_0.9250946388726684","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/menu","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.15b221540.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2fd44723f0e058af498e5a0ea783bff940fe152","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.15b221540.0.tgz","fileCount":38,"integrity":"sha512-2Wb6mS7j4X+SRbZscdEbGDt2GyEk34b5fWLHU4ajKQ4Kr02JokVs/qo/LcqF92X+xS0/xPSCUN2gxV0WZMPQag==","signatures":[{"sig":"MEQCID0Jg94g18TpfS/79pMXM1PEoO+Y4r68KiIs23wkZrpkAiAA0tREpgCGnJpa5/ahidYruAvGa1PtFBLGpkMRuQ9BeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprYQ/+L8J5kw5HqqNUBfR6OzkacivO+Tg9EHdIcpukLO1Jd4GjwmSW\r\nOcemtzzuyroptWyhGXYExX+Am2jzoVRsKYwbagTAruh2QQHDIZqvfE9LkAQj\r\nNENl9+H0uMks8djyBnUZfSXQbroTJKRkfG+CExfB+FOnZIYXuw33odNzXR0P\r\nqLpmWwjmjOkU4BpyI16TWMd4HJx/JVh/aWHKZUPIHKvLy3eLt+QcqQM+Au9A\r\nmFfyZXRldsZzTqMfaRcqpkAJVJMY9dKvRgTIDIuEy2eiqdPVumWXQLe4t60u\r\nF3J65IVUYEi2PqtKcxY+OHwuE6fUqhi4queI99V/2+2EFaTWXAaHp5m1cENj\r\nb2ApqxI6OtkGqDS2csA5IxNii892aqhyvGaAIA/xgF1ZkpU5Cs/x/etEj+Pk\r\niulTXCfbp/Uj9kqBxdOY1LkZgQsvj5x9deVWug3UIG4dLOxjtDV1G3KiDFV8\r\ncl+RY3f7wDft7xu/XY+qV4otHAgpOi7OwMXKMqlgB71pOh0KnY1auGVVGFo3\r\nBEw4BEaRBlVnbcQT4T3gRcMQdZrUgzdRm2sJakTDwad6p3PvQ88UYAB+Ovst\r\nbOOxii94MN0OMyMiPkzGYvXxHQ0jP4exFql5+i83NCKrXWan73m9qnemqmvI\r\n2QD4QWW2oLlLDnxbzSJuCfu7CnryoCkdLJw=\r\n=ubxX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/list":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/menu-surface":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.15b221540.0_1675274071840_0.7474919126429098","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/menu","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6a4b3f834.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ecd67811b2aca467dd7822012bae22c26b97215","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6a4b3f834.0.tgz","fileCount":38,"integrity":"sha512-+aUTWrQvXJdNBBMZ4glFYGTT4z/KX1jPXqjF9y+w+tke4O1C7abLO+eU9JIP3fyGzJY66ijVXeB267ieRy2azw==","signatures":[{"sig":"MEYCIQCNCAFUYdUBRuL1MzjicTpr3YFaAKJQBUM4HtMHSVyIvwIhAKbiLaWGh5daTgBEwsmNkFFWCZCNdsrFnQ07ZI4SYcP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rbHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRUA/9Gxgoxu0jPd0YMBLCNR3yZpIf1GxOJO7eSDm0tx6AarAoIqi8\r\nMcN0CBWJ6W+kQUYDEs6RWGBRYdexBO1nlz1yOyDHKkjRD/2w+K0Q6yVVTKlU\r\nBjXIB7dxXeAQnP/SFqRt7rJNXdg0TuYklz2SRvlvoaQ2nRbEbmBQ/mAZR36r\r\ncWHb9DhA8xe82zF0nzP6mBm3zkafZProWimHF4KFabPiHFPXIPFe4iDfGC06\r\nA1a+ZrkloBNvnURhk+qQATCTDQ9Cn1hN6b8zGBTktKqAYcnpcS57FJsIJyrn\r\num8iJlhTh0sR5+ESdtgtVvm586/JEPDiFQv8FcAF1Pigl1VX1XDEFAaNzHfM\r\neKrD1wd3WO0WWKvEOgTcCe5oz8FJxNl3nYXFtHj4m+f/HuHQ1TqfloE8XBZI\r\nneBUr36I/JAGDHxdcSxyUY+MnGtC/VJ19bJQzmGvjUk45sJ0cx5/CMYgRnPB\r\nt995b/67PIFOvRW4ooVBvUnGqSyfORggP9QedVNWEZPJPjuuMSNQSU1aSMOr\r\nDN2XWtJEPdgHR0pPdW7xjhdiexxy16nPBEHIJWJ7qoMCyvV4uNyuqRK/Z0Z7\r\n/gStznAKSacQBRE5SSBxPBfREpqCvsuVINfu6kV/U4pL4vpAhXnAljdrpM9a\r\nQzpbWkxA4z4kaAUJ/AYQNLCJg/J2Ebj3+LM=\r\n=tyC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/list":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/menu-surface":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6a4b3f834.0_1675278023002_0.46211404382270094","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/menu","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b177b40e2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a91b1906672efe532c3c7bca8423b552aecce0a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b177b40e2.0.tgz","fileCount":38,"integrity":"sha512-CQnRalOcJ+BUZqeORYKVbCGQlkFoYUXywwC6OtVujBj8XXlHjnmUqNRoWXMD2W8FH6JcvmF6nc3uIAG8jaXQgw==","signatures":[{"sig":"MEQCIFacJiMiihSR62eM9AAVHzuOAzKcVgRsudFDP4HNHsi0AiB2SqRQKtaFfn8D+7HyqTS5VM9PLPr3TOS6iK+W1xziPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSmA//cdjnasLvG4YaGJ9kKW9bYeGUdFzkDzmEaCV2EuR4/P3D7uYc\r\nshZR0E6zIElrQIGqXbW+IWNoxsEhcTAssslsdzW0/ojOQcaD4NMi5iJhJX5q\r\nb7dUWqjZXyZLSc2pxn1OtR2QbRpqJVyHYKDkHuRNriVk8b5SLtwhT55Y1As+\r\nq+38g3o6NqBJmXg0jRrbaV6rhwT3m5Zz/1CUdjaVu+vcWgpnT6a7nDDH0Dap\r\nKC023CFizeG4yCcIFoFpPtwj8KJqIirA7aG2k/zQaomfyBx8wGa06xUtzwfg\r\nhL+qdxSDFgH+5e6W9fwk4DNHpA2ie5aXh8abNOcxagiLJTlTLG+ZnMIUKzZp\r\nFyIFLbXe9dykJ2d6zgp0VviUmeL07/q2jJFj58W+SPR4kpTcdnwnTGvtSoap\r\nTRh4zdHzrUE4XVR/nfdcpSUN7yc2HUxWcdPDBr6PNK37dSW6DKjXYdQC8cJq\r\nmwa/GDvi6ehmitYG99vY0Q9x+LVHzsWkb6/yGwALOM8FA5a71zpH/DI6zYdN\r\nEfqv+3/jT9GsGKenpaQaMbOgaYSqzD2wwIhIaeUbF+PCycxR/vsg+CUpGcCX\r\n0Yrl+hj7M4Dmi7sVDFXUVoC97wVE0fhO87E2/1hxp89Ldtm8TSmrpAVjTjyw\r\nXEV6xiIPVdnQWLpB8lx7HYBfClzigYn7J28=\r\n=hm33\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/list":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/menu-surface":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b177b40e2.0_1675308974297_0.15495475218003296","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/menu","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d9f821042.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f9d3f9fa51f53403b58d554431d7b53e3a1e7c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d9f821042.0.tgz","fileCount":38,"integrity":"sha512-LBmDV5xivkMPwuTa3YETUNrH/0MHynL4skzbKAMKkZv3e270uvBd/eXTQr6CWXxJpCk5PDYm/HB+Elrn8BJXTw==","signatures":[{"sig":"MEQCIE3nshop8R78+rKP6GtMMN6scFtEPID2K1fs6dpAL5AwAiBN4hi47kgzHE7DMCi+1O/jvL58g3cNz84bAyO02AlQNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/WBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB8A//eFlFD2Yio6SC2Qby//sxzacMeqAHQ3GtlLSsXe01r1/g3wO1\r\niLFaFUmpdmSEmbyAD99i5mihxea7OBHc8Fd3JUa+aaSY0coiD4Dyq1TIuQPJ\r\nQWhEzVtXqpHDGErjrNWYoHRoenf1tJ7DNQezkEvgU1eC91a23XUUe8wvXzHC\r\njqtsaVls9gE3EDcyIBCBdlzgFKuVOFJmL8hCom5rJqFxXvBfQ5zpb0KiZRGE\r\nMJwkl8YNl2wLWc9hzwodnctsTWZoEap+ar8qe2Hy8P72hzqafg8ZosPs8L+0\r\n8JXJfNj/uxf4owxv1FVq+08uxKGzzQtWKr6AzNo+WshOpuoCK0ZauK0v2fAP\r\nhEX4irWS9FFwp6psavUMyvOhzPzOWfaoBwUgQBcCvFxLWWfyX42FzIEenuZw\r\nEP/8h4OCndXLXTPEyUzI7ZuLFG0HLOqvlJuN0YZUMuQW0AdNqOir7p0uHc0M\r\nEHZjf5eqNy/Ky9cC0vxVyCna2z9HMMgWRlatc7zbLeI1uhSyatFxx4VuiEaZ\r\nsOqXeudMpPXzRWU0kAiASGzmFGpu2OKYC7P5xeu6gMwm1bXEbr7IFQ3+jo+9\r\nLj6Ht0ITXVa8KQdxiwCMjtx2wEVhoySwbQeAtLdh6xlD/E+tGDp985wjmOUi\r\nmmGcCYR6RDmTl/VqUp/yJtRmGnfVNdAKD+M=\r\n=KB8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/list":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/menu-surface":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d9f821042.0_1675359617612_0.3527995231816097","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/menu","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.47c7deb19.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d88b74d74d44129b308f9f5ee9dab18745a879","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.47c7deb19.0.tgz","fileCount":38,"integrity":"sha512-W3WNq5GIDMI9nCoeKxPixWVnanAgOqEpeSTlEhqeC5kphLLzYjZvbkASmaWzv9g3cB2xVLOMRZa1xGXp1OtJIg==","signatures":[{"sig":"MEUCIQCXeQbdo4G4dvspXkS5cD5Yz8vGPFq/nYEPIEgW7fF4GQIgYngKcBB8EpekAVbfHBDfjHF96B/lFOiOMN7wuq5IhC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsEhAAgm6cujFGcfQnYz7A7//lhCr3pwmD9vRTs8KM1dRK+KNEpEh4\r\nAh+5WyNLVS1HY5QDNcQ9cLzSGdz8qEXDbF7SCPfjbR4lYaKD0+Y7h5lYQxQ3\r\nIlPNTWXP2fmeYlg67JHhd+RxQ4a7lk1ApUVbLTGH7ZbcaeUbwQCphvSFDryE\r\n9hBWCjgQ3W20T7egUgB5jtCC+KM5ePI9aFZpUpkRX6FcRm1Zf5nTodEUgzix\r\n5HdHLxbaFmUuE545FsGSLpIkHZmMsN+ZJ9zaHdsrImZEYKrHcnufjdJFVecg\r\nG0PBbq3fxJAfrfQkEqk0Q3O/960RdP6IgkRs7ttMjWQa6ypY/dAT7mYKR/az\r\n3fhLVCarZlNPKi8oQ7gkMtaqIrENtVfLNuJ15V6Mh39ZrzxKJSfOHy26efxv\r\nkuJSZAChP4AFoaz7x5dDlDtRroMAt4/OrcapUPGZ+i8cGivhmjqn7WV/9o65\r\nEBXbbtGt9nni1tkbuWOLlNzrv/9srxUASF9vFV5AIuZeb7LtNFZ+lnLqnv1F\r\nGaRalomXeEpV5qY8NPBQcg5bFLOzdl0/7guNO7zaIFFvqF4CVi4uKXP6Tl0H\r\nW8SFcEZl9RH0b7Ra9jXs/Le8BqwxC5b91zxb4VGtitHHKZ6dI4rRv2qTRoqW\r\n+MgqaAldCi7sSP8Yza2+ZKLaDlsmHAN0sZo=\r\n=UXwN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/list":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/menu-surface":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.47c7deb19.0_1675415456921_0.23364578759063304","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/menu","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a16dbd1a6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee9102223d94de8a87b681f8382ca08fbd6f7865","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":38,"integrity":"sha512-bXPfp9dAKoCa/QwAEOXlSOEnjfDdwjUn3d5ADsGePsE4lKzNoUyh/G22LY9P2VF5SK+0BdsaFBASYe4VGZasbA==","signatures":[{"sig":"MEUCIQDTvWw18LWU/RgNHRZP0lzAZI8fvfBAjBXPaMJLz0reDAIgRr9mxTumfC9vlN+VTPcL9HGvlUIFc38mVES8fYOgCLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fg4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJiw//bES+6s1mlWj3WuZ7Y3nEt0GC6RO0NwGuX5QY2z1UNGigaLG/\r\n/P/OizBeNM7hsUo5SMtzSSygHduf62EbuHTtL9LjGsNu785DONIPVUNHt/r6\r\n7AJ5OaGcRN4vg+I4XjwplgE5+IcLvnlNvIRrchW5mVGnOvMcEkGxWtU3tgTo\r\neMFyEfuvJLRG/D3Xy8aAVFGvs9PLb2gYPW2DzaKFg+1XabuFHK4g87A8GNlJ\r\noDqAl9XA75DlmBVRpLf8UlyoafpFVujkchFDn61AR3RHH4RL8ZyT+yjUY7m3\r\nlBJ+XKdcI+95TJhMsKs8UbAKx1Fuuom/NPgL+jcg0zMAy7HquDfbFfgl8g6X\r\noTs7qtdoneM/tWDV9hQLkNqRVOQLMl33I5Ky5kXm9NHXLrNBOtoNpgaqr52A\r\nYmowPzieM0aDA9XsdOpc7OTnJgiSSlL12Ea+NnVvFtiOujHi2BQUpa7L1C9/\r\n8dXHyln16wXVDZUrHJRTzqqIb0+RrHD0TfPNna9jdmhTWlz44TIwJq1XzK/s\r\nd8CovQD7qpj5fHUq1UkuftKF7Ft5uZQnaPl+qBcdldH3yamvb1yO6M2KRrmo\r\nrnlNQjLyqAagPBVHlVDpTVMBRXQHBHtQzIojCuEWxAzWrJEm+22SFOkaVJXT\r\nkSuheyLBGTm4P2uckfvwvjTdg36duQvqVuM=\r\n=qzxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/list":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/menu-surface":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a16dbd1a6.0_1675491383830_0.4627399929578362","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/menu","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.93416f87a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8acc334570f200b806aeb09f337517f410913cb1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.93416f87a.0.tgz","fileCount":38,"integrity":"sha512-rwIcW16qhUX9zw4DlAZ1umq18MvZuJnKezakno4m0il4YjtAWkyIfgJp3VOKYcZ+Y4iS+mo88MZHs4zvO58lYg==","signatures":[{"sig":"MEUCIQDRdrkE0dU7D5vEs6s5E1pO3niP4I9NiXT/S9nOXahOewIgKjP6OZZiIHIMpn8gWvHvhYZzAb8SLCQi6aSGv/ghaa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lFxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMNQ/9EVNdUOolp6ZLJdNri0J4m3j0a1ITRyZ//JI2G3c6nk8mHgiK\r\n2598R885AXHKJwCKPNDhaOC26Yho+KSWkUOaDUvxB+L8G6SaI5eiwo5fC9M7\r\nILKBUKoACIbmsYRcPx4zV9GWyS8htwyJqgvfhzc17WqaTjoYk2jMQVjNolcx\r\nBxn+AaTJGUH6kBZFF43HLI090BQpJgO9Sg1ikMCaaTimnjDgxymsNQEz6CsS\r\nT2I1xEseDqWx0M8Ho9xH01CNzwwhA9FHM5F/cjwQStYSRe3X6Q2/fgm+uvs7\r\nOMYmZH19LoGrn6FiPPyeuhnXJzPiutgWNHKsD72Qoe1M6v2HUUyMcj44Bz79\r\naztQR/jSfp+lQqu7aB8DXe+2flQPfMYMzvZDM7ZTPy8wqBckptYM/53y9CK6\r\n/68IWvgB6iXEtesJMiUvkoNeM72PS5+pNENGwAPVhqN1qEm0fAZnkUW8qDir\r\n/Bj4KNJJrQgbc2qQvPmNOe0Iwx7wxhqCCXiUql4eKdREB1c94OvClKpcGd8j\r\ntZzYKHMd36dkFEbgIPbzoiS/ndlDwrUR+JYdeeR7XagSTjlWXnv04yAwTeLL\r\nnykz2mB5b90vQU5B6MC5tfeYcKEgjbhblpeLN2PmvQPEpxuH02LAE8hgSfxp\r\npEnz1kCbLyspp6ltmi9MHdmYjFLwB0SEIc4=\r\n=7JtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/list":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/menu-surface":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.93416f87a.0_1675776369297_0.7220505225901521","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/menu","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.49b8e7442.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0698db397217726a8839639158fc6b58f6894085","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.49b8e7442.0.tgz","fileCount":38,"integrity":"sha512-77kf7lKzWK3VdNxa13Oo/2HZtm/edGDL6bvyOFGnfGaPwp0okQXI8qmD+y7ST/2WlxOoPP1FtpFKHDySrbSzag==","signatures":[{"sig":"MEYCIQDol/LyWnIHdFEQyaMnt0rCUlZoIIcTPEv7mSnkWPXGiwIhANsIKXgdJWpIGLPfEvKx8VX+XjQ2ofyQjWAW0Z6936LU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaZxAAlDjPgejn45VxqNLxGeDSwC+bqghFW0m1ByOaCb0TDlNYYMDx\r\nXmECmNC5RRjx5TYGEl/03geUV7uWs9qT2FpRvKpFAIJn48TyuOHEo+yaplyf\r\n2+AXZZkR1SEfCVtZ3p7TF31QbCfdxMzNH4KaowzZRURl/D3+73LrueT27uZl\r\nBOC8d5k6R7AcjPzMx8vkh/gtzSOflcw9F2HF/R3+IcSQ7asFOmFukt50jS+K\r\nJT+w+BWcsg9me4TVIRmfBeDhu184vTJ1+utl0ewtTpqewE+8jbj+zk1GtV3i\r\n1N0v2omZJSXaZHlCPgTH4oQtd4BguL6DO6OlBN4G3qkuKsZaMvwwPL5SsQWU\r\nKZknWuYQqRFGG8KPCtrRuYsJrXls9dGHrGNQaL35NLj1YbrLtev130HGtNTf\r\nVypg/CjuPL4tf+1D+gBB8tGcgWEOFVqstwG8pcToJQ0lXoIhbZfvclXAUyMp\r\nEq696xHq0f9oBvm2qiPy/0QDwefsvvcIG0IWn3LOipiQzhsL0/f9f7bHryaj\r\nqYW9VlZ5E8Z99vb7nkVvrLeZdW5/lZUKlIpPibBAuJiEP4xSregplrtjgoi/\r\nHCAgXNaqkBmF8litcgYlrCK1R+tCZX2WKAc/cvVS9nB3CB1scboZzdkoli+9\r\n8bMtEUyeyExDuJdmwtVUPH0BPKOPiDaTC+0=\r\n=kscp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/list":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/menu-surface":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.49b8e7442.0_1675811485800_0.7342185308189328","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/menu","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.de38de758.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3011a2d6ef3bcdb4e753ea4b59569e25559d3bea","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.de38de758.0.tgz","fileCount":38,"integrity":"sha512-tey1IrlIRJVdcuEz2LER3AYvdz96SVm01Mg0jpYVyR8WP4N6Nybja5le8tXAsgsRVpzPIEHkJwsDKSyCRA36qg==","signatures":[{"sig":"MEYCIQCUOjkLEroNtnDbMRfQjMikWTRazM9MP1h+uKyrB0qykgIhAPbAitdtIY6zqhByT+DO1IDotimkWGRRsajZk+UHhUik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RTSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRmg//c/Rg+YVdkW8rcxrZFtjTIeDCCA2yJ+svg+IbZF7Gycz+0UaR\r\nk090Yhramtbwcme0pNWR2z3wP/Z1ze900WkUvwXmGTVahFs5NiRfO8GB0MTi\r\nj8zj3wjiObC1X0Pjhzeuwc6DaCzgMrvo2/Ez0tN7cad/EhvwURotFSIMTSFa\r\n90h/+J4s27NdbRrD2wkM9O4PAeDmO9NhiphaKIPePDmN4U7pgWtjN+0iFv4V\r\nydp7PCVxRCUDNop+Y5Sc57wD3rloWbyYRMXYnyK0q8fMd073+nclFWzUpyUj\r\n+Aujiw+FjWt6wBiSatTwbPFYSgwDR6sktUQTbuF20k1cWYGqKhFngDScUQJT\r\nnNiq9QJsVFhTCGsbmOkq+VP+IBClBIenEj66umd4unpy21ocT59A5jAzVL3z\r\nBYPMy67AHRPWUM8YLaAbzqG4M8Lof57gElzgSX9Ii7cRIvhCyU+WJWIBvi/z\r\nYwEg8zEMLodHPb+S24fhxAeJUk/Uq9bbyGdtcWySgDvFr3jGYZSfl7djVwy5\r\nRDdJRFR7DytMIitE5Hk/G3pF9lnWyBxMOXz4lVjivT3lVU+Y2RvaRZTMGWO2\r\nDun9CTxtUmdVu5aUV4ooRzKNtAAj31h/Dhvo3kwvasJW9ZUMgMIHois51oyk\r\ntShBLV8pCEeEhIdxif6iLuild67SZJzospE=\r\n=iuhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/list":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/menu-surface":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.de38de758.0_1675957458028_0.38201650053127323","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/menu","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4d62de70c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f4dae9fe33a9b68ee19b37c2d0cc82cbe3f69ac","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4d62de70c.0.tgz","fileCount":38,"integrity":"sha512-oDzQiwfGSP29iLT8SzwXS2Luoge8uOK98ve/EpVvwPZpVb2MBV4ExLGxiqd1c97gdapYVPkv77E/tya729AAMw==","signatures":[{"sig":"MEYCIQClhPTCOMvKEj8VnXi/Zao0jR9mY2pWV4pXfN2dPhAwXQIhAIl7fBpZqTEFFj8OdOzDNLukjtXxwmzhbPEm3wH7eX4K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn+Q/9GeMnROv3IKlrj9RGw6fK3DUlKPiZ7TvW+SMBkqMGoEdVXip7\r\nIgS4Mg0ufEkcvIlYLgEGusHzmm6K0yPhjIq7vw3oiwJdtvcTdPCpD0UctCXs\r\nRmZHXx7YPO9m/dScPWWq1i2s5LjaC7qSew8jB8pLXqvJsU1hi7sd27kCrmOj\r\nkMgvCU0uU4iHO2UwODlwTAFfaa/TjPxyKXMg2kHjzxsAsC60KC7u7/PMwqJP\r\nlKBbGOtxaREsQ9gtwNSyONxa5Ntp/7sQj3rZfyMDxmQrVc40gblDodF12/A/\r\n6Jf0ewnfSuTZ1fE9Wnc/WlYPI08n9Mavn9EdibGol696o0QiAg7g5om3AUKb\r\nwtlgGP9z//rsDTQqplWt9u2nSfbKr2Ap6ZTcr2jSrpDIqNAiNyHz1Zp5sl+h\r\nDKqVAxsYD/GINZRxzwU2AQVilKqzSGCZE2kcN9q1jMKDATAu4X1tKEJOrdpM\r\nZF+iiKtlxky+CtIpJiKKYhoL7mS4RdowBdWiQ7KkGrJsq9SCvy4oh4muDfUQ\r\n/gJNHAt+ctYeM6+eOiuj9yc6wB5ImFgFl1CsQnrbkOVWcRFXfzpb/Gsq88oN\r\n7ut4vOO39EMU24yglrQGoKGRQ9Zx4/728dzESjlrDwoJjBaa2V4ynpQmvCW/\r\nUQq1lWVKNVLxbAYhMy0LF/ljFwkq78wzw68=\r\n=jUde\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/list":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/menu-surface":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4d62de70c.0_1675980306418_0.2046810569524744","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/menu","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6fcd8d418.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9241368c47482ebe889148432ae3a8bb73c245f5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6fcd8d418.0.tgz","fileCount":38,"integrity":"sha512-fLGuk1XYjhtWGx4tyKJ9rwaayPJiGk16b9bUjz3JgSGanS53227dTZyNTuV2gx/DvpV9HpE7on1Y/tGP6PfIiw==","signatures":[{"sig":"MEQCIGf81HkaAbLemT/p6ZV3IBXNmwU68lYxXE34MSQCCUZgAiBcdJecNnaPUKLJLB+nRgMCWtHSdjQfi5y25Rr39lEtHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iRKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsLhAAoEEkZ9e2apTOSpvM6bZzyYmM3/eaWB0zpTDgTe47FIWo/u5H\r\n+DYpMIXlKT0D4YNp4QLgxQPZAw/0fJf+niFu9lfUqJpvF/EJ6J4z1/GQyVLv\r\n6HcNKGhISpVpOqHE1b94LmXmP1wn66eqBpblJ6NNdoU9ovRlpzD+KnC5B18E\r\ndhSEUEdFphfAzJ7PIA2hoI69lJ4cV/pUlpLBwHVuXbOEPeCOts1BBSAy0BEo\r\nkSw0Hhfe/HcSnAe05DrPXKYA848D9SG7roj6WSe8uMiQBDRp0o/4hIHZnhXn\r\nqDOhp8uqhHzlReY2tN57Uz9Mt3jEv0Uo/3gNagDz2QyfnSs0cc+Dq34IYj7t\r\nw10nzJDYdB6vauNnovJo+OYUcqMJrZOW6E7VRtU12B2qTkADnAzt4hZfsIX/\r\nURlFbFFi+tnIJAG6VDT1+RCw5T2tDdaw3rsQu1zT8QdMWw3vXd4dkL51Tx8H\r\n0zUYikxXaoYAwEt2c1x+2MJap9WNy+NyCf1rWdQtj43uxjsqO9jA1JS+MDvN\r\nnTiKAxz9qlpRO/hfuo32JQmBVDyakvXh1a2MdSFO1XuT5xWgAU5T5iUYtlyt\r\nypbJSI/b7MO4NgutD/MezHPwOyfVDDAmbV8vMlxK2wj0CUnAw4G0bgDUPYbr\r\n9d6QzoC6qlXI51bEPG8VQTAicstBSMeQvM4=\r\n=x3HZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/list":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/menu-surface":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6fcd8d418.0_1676289098265_0.8113745023485632","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/menu","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.066d9439b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51388fdb6261019c8b7ff1884663dd4359f35443","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.066d9439b.0.tgz","fileCount":38,"integrity":"sha512-mYw/5sNZXxcNxs2WeTKISU2kivt1g3VC9iKIXOyk/1ImFGCXTFMUGk6VBS79UQA23TzDb3Yvu7kAp5JxoygXSA==","signatures":[{"sig":"MEQCIGkOM2645QWxWqSUC61nsO6SHfjdmq0JL72Ca+1YXb5NAiBR3E3GQcSoOJaLozmX6tEiVnYXx9kMmRzFmoj98GCuJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TnBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAzBAAjZQFKKwsacY6037SS50GgjELNZrPJVS37DVv61Ch+ZUdNU4f\r\nElpjDyc9xjbnFVNrTM0PBNA6lxpgZDreDz52kLJEPrLf0ljg2Hg73tykjhNO\r\ntLPyULldAfEnks38DAqw1uVsD5f4lF1IcoRUJ6+etyak6oSX8Ngr2ON/R2E+\r\n5ZbDkg1PnTei+Rzj38oJizh6oZtgyikNvdyAVhX3qFGmz8gfvqcS24/mPIaX\r\nIDm6nNKZ9TVQnOT+TZKidJ8xpCdyuvCuy2Gct2jdtHzHC84ubvivMtrGRInH\r\nEK3L6eXcJh/UwNNwzXnTV/q67o7wKz+vePrqU1O7gx8Ue9nf24mhP8mu+ETF\r\nw397IZuR6u6WV1UHyfOGHd6HqIGcYmPoWTW3xzOmmXm578eJoK2cKG9HjAdC\r\n6zMAqtxt9rTdF38nrN+l3nbFEI1xaqRaef2DyaJ/05N5Y3L043yUieXLWSYF\r\nTqqWZ3HOaFtaS1uIc3DRDjmzilC/JpJXvjohog1Xp2JRAlZMwJ0025dKsoWN\r\nr0+I0n8hGaopWJDfZ8gixJkJ2NA1WQPnDRrSkIIQ5+6gWD2p08bZowh6cRZl\r\nhUKEKFM8Rq7zcFX92aY+oZ2MFfdhZerjdDVvp31e7jb75eVAblOVx1rFkIkt\r\nNWp7kaD99OJ+WFSAReb+tNpnzZ2ZfRIhLWw=\r\n=Dxwu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/list":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/menu-surface":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.066d9439b.0_1676491201228_0.40781093782719857","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/menu","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7ab32468c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3768edcbd31a490c07433672b119bd37b6e64b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7ab32468c.0.tgz","fileCount":38,"integrity":"sha512-M2NYrmzlcSTW/PPiGS3SEYwiWuF9kr2Ue9TanzzjBwlqQSFA4QCg/x6pj4ca2Djvi6CjrTb8Jkmm/pgeXGV0DQ==","signatures":[{"sig":"MEYCIQD7y/K7SuWAdFZ7bdAXWWE2kAX2bmZSjZYHxPi39J3+BQIhAKnGDnWckhZylpaNH9dB+3xHExIeCloO1Qc/wODVM2RR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q8ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+dg/+MJXA+RoaYqK/uvvvI6t7DBheB8XJtYr2LkYSPY9aJQqtWSNK\r\ncreOC2Bl3ZRy1uSBriAUBDoxecgcvf46cOCKDq4XPuswqcxjSRoXHhViKUHr\r\nKWj/vhZ1CPRa1kS6IgXoDCFUGdAArWE+SFP51p5fhgfESuh80+P9dazw6obw\r\nu/ORhw/EhfNRsRklpq50TM6iX/2HkHQN3dh2Kw7zTZsuuxjlHFmHxF2yZsKH\r\n8pNPa4zt73vG42rl5do/sOTHeCRo1G5UKuM91OlSstHYiAQObdmshsMAySdR\r\njtLSDXwWOYZakmqdV89wbQrwyBLPFZ2WBiCScu/ogW3OROix9FnD9t1WfTa3\r\n/3Hddxg/Aic5UMvUP5vISkXtXf6SYNie5syIZGtAjXuCPS19Gc4AQ0yYUcTj\r\nR9cvtNdhly6Zc8bKx3vPfCqn44Oe5xnfyuMWwSWp/lxZBOiwwQ5l744qH3WA\r\nEjJ5mobhJF1S9RAkbXNbNtxvTTMyQtTzc6xQjNWSAiY2pPg3Z/hVII3Jg3t6\r\nz+qRdAhMvJ5HJBbxE5teafTInjMoKIrwR75XJ3rpx0ESaKoNN7684MPRLH45\r\nYG5ADsj/TIDzHOfE5Vp3+/Wf/K1Sf2Z0fdo3CZ4xLycsdnbpyOtFyGTSYPIK\r\nx6Su+w/TdcIFM5NTgeKjURt6fwiFCatGLio=\r\n=LGRr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.2+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/list":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/menu-surface":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7ab32468c.0_1677004569498_0.44484007586898455","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/menu","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fa27ba61d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d5b669299951d00c999c5e7259b7af093296256","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fa27ba61d.0.tgz","fileCount":38,"integrity":"sha512-5xQwosCTmTpJ17/tanSK6IJClV/R7HSfrRDE2n4SMZokrMp9YuVRpZDn1VFKargdm/G29D3pePyU1dSTu10WNg==","signatures":[{"sig":"MEYCIQCitGXk0xUMv1CNqW4LXCQ4VpUK7PErqKhxu9OPfgzqPQIhAOlP7UKwf6uLDB3LoGIscgLy801qeqU28wSgBLDCPjOV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsJQ/8C0w9yAdaVU0ISQfRprmzWbkxKdPockojueK5FYZ4+6y/7oGG\r\noLcq1fqGEp+iJt5kKUQsp4VnEAmZoPjVN/172Fzlbo4HkOuIZpdmpx6Ge4Kr\r\nk524FIBtfcrGeYrXIYlzUA9H8OHCXIa5YTdZySDNLjTwY+E4l2hoJC5kaz9q\r\nThQj7DAxa+Y4jXTPWHbFsJYfO57meW4Mk3h3m3tkPry64duM7C3X0SdLDqmU\r\nc4zOfv5ykvfXVfixB4xe7tKyWBdXKlZTU1LSS98Gpk3a2/L8bS1QFPF3XPIX\r\nLtTwRuN6DL/npjF7RESOVZNKrCxWmJGhFgu2eFKrdF1lBVeA95XeEBVL6Ha3\r\nECAMIv9v5VGj9FQsqT14CbjWSwl6h5AVeDSSJDKal+DqSdsmA4u295XLr2iG\r\nzkw0Ck+0YOnmKjwtD3/2h6wfTfbSJhDjLfLedlIvG3d1OD3yyGCy9SlqOTeR\r\n8CJnogwNOSArugpdt4wYAcVTB9E7LPXeG/WW8UqGKDv11rUtrthlkOKlEotC\r\nfAnR32uH0vvnkLUl0WbjDFuzr1URbmMH7Bj46DzSZ521UjAiUXVCetff4ug+\r\nMzQVphmNhpXlm7D5Vj1JdlkOXnBnUJTJz7pVGGP90hCGIeObDm+NwYBxv098\r\neLHdAXrR96s48/24baMgD8pcZYifmN1XFlA=\r\n=EC/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/list":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/menu-surface":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fa27ba61d.0_1677514910706_0.9440887082360117","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/menu","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.311ab4d4a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd9f91299b385beaf56102a82b85c49dbe34eeb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.311ab4d4a.0.tgz","fileCount":38,"integrity":"sha512-g7MzLOWU7kD7VVg+2wq3eRTFGo+J1sHDmyr9o+MXOPiJTvzcVdBl5UQKOFkPbCe4F7eMrrz1hT+LXU1TCxcXXg==","signatures":[{"sig":"MEQCIG7qNO20/biHHl0BSexSm0SL6ajsFqguoL3IB1gATJ7JAiB/V/FTgS67wpqyDF0lBOL1VRy+wm4TvKMuD7jjyIe83Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqog/+JOiqyvFxfbmn7F7I2i+/0A+hbTJutxKH3h7c23qdmAq+8EOZ\r\nig3sTXj1KAe/+sI8HIoyqTwrdCbXsnZkB7M3j6AINZzK4jUYYEYgec5Ifk2F\r\nztwFu8dWohb+CwuSA3rvgr/y+xwUBlJtwfs8w6ZBggNPG+LfuONiQ9oYTDCI\r\nYTTFvqqcbIaivYdcYicXeCotQA1/gaPSqkZlt1+zahEA00fs34vlO3pu/XkF\r\ndCHU3jmCDwOec+he2hAF1JYFIuYztayc1cNrjrnECXQWfcCKB3TyTV7xPtXC\r\nMLVTPktUYIZ+g8R6XZSREtLGGwyRW1d91C0q0xmaqJ0Q6TAa1p7euoLW/Frv\r\n7/5SCneu/i7/Yg4n/uApUaeXx5n/k4M+941V9Y/3zF4dhbFdjaWJLGDBGY1g\r\nCAm4B8PNb8C+SKLxrQD6DuHtEJaCI+eODCsxzSAs0ciunV5uE09YEpl/7u/Z\r\nQg0wyL7Y6Vz2pZokpGtiewXRgib1KjtzjNQWnUpZeN8FcEhXcZjlRcd0k9Pu\r\nMl04Bqwy6yXPOtr3b7uqoK+oUXAbMgi3Ksh1xyTT/ZpvwNQk782gcGPxUzq9\r\nsfqubAyld9ZSilpCnI3h5ihAON9cD2jJ+w2D82Fq35T+fPXFQqhSnuJFoDGS\r\n8zti8vaU4YouJmhj+6G5qCAHucPvb8RIiNA=\r\n=vOn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/list":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/menu-surface":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.311ab4d4a.0_1677516202979_0.48952445525348276","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/menu","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5cb8e2174.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1393ff326918324b6da410179280213fa4281bc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5cb8e2174.0.tgz","fileCount":38,"integrity":"sha512-7sCgmGrvTqECjFGiKAbU4Tk6x6v6qtntQgEugSajiWQmJ2b6f42dXJADotbaxyUDw+5oBD8pE3XFLW5v3jHpzg==","signatures":[{"sig":"MEUCIDe7cLPhIuQJGA3pYE52H6G9J13+zWV0EjyrM+4lGf/hAiEAlpn5YfSyxyV6SYBIsfnm2KPoskaCCtOsHrRmtgHfEsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/39VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpszw/+JByB/16daNsRUzCrickjhNVOainJ+Y4bIoT/gNTL9oqvA6oj\r\nLTslJF1KO1xrHcwIQRVA/CbQVvcYETCsOJzH6cR4okVkWzMzs6inAQq2NotW\r\n1mTSQUh9iH8lGAbMDVre5IUPJ6AA5gRz+Qplwra0tznOYnf9VkaUv8d47VQZ\r\nXdm16iNb2JIYv7NXCNhD344y8EA9LNKhDVq8A94r9//u/wc4MFPTSc18DUdp\r\nR3TEk5iM4Ve3XK77l2DItsUpbIHB8V8L+Oe5b2TGNaSh0jd/ZEmN9KVtER2O\r\nnOSfEJc0cY+LeqZ+ym6PbCHsMFT1csp9/qySzM03TAlm3a9NijpUhBQMzwdW\r\nBIZsfFKRvXkikQRL5Uw84KDSwSns5wTfnbEdMDqsISLriXex//Gf8P8aRO1H\r\nmzH+6li9qDw0psso2pv4OLGh6ic5bZlSPMgNCCWaDvhh4N25fv8Wsbyr7Nnr\r\nYBfbrNFKVEeiRvREYSH8V3RsPFMZxky93eKTZaJy9D7pDdQ2buniH/fZurof\r\nPQsBHp3eysT0XdS4bCF0p72vv860Qn7hz7YnJSC6YLKAtH6dElBcgq4omoWN\r\n8YT1kxDmlhZCSYd+TT0VKiFFWNWx2fl08j9+HXq0fQ0fdUoua4CxmJltwHNV\r\n0ffJ3mdLkebsPPXsceDcZD7c8ukMF6pcSAs=\r\n=GHto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/list":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/menu-surface":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5cb8e2174.0_1677688660809_0.34990524253639","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/menu","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f32339937.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f833246ba913bde8e4351038cea4f8185368913","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f32339937.0.tgz","fileCount":38,"integrity":"sha512-eHryd4pgPM7gzgsNGp7caVh2B1aneE1ip7pfFAyRDT5/Of6CDlP9Biu1H7kzD4bhZRKxAYTa/ptYT9oXtbLf+g==","signatures":[{"sig":"MEUCIQC7SuT91+Ch8kfRo4P+xGyr9xntZvvaum2jCsaAltU5KwIgDcFEEwJal5oEA9iJ0XwuqznXQ66tLyWFP8VKFym2l/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgQRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4nw//SciY9RvNroIYrqmm6rzfMQXq8EZTHCGPGcfBxY9Lrfm6JRYx\r\nzd6I4VLhFRAGYaPbYxZIZaiqHyU8Pw9fxBxg4OIWhjhWfdvpepyUjaUZRp7U\r\nJ7D7gsmXT5wBt1/bfYq7DaP/Mk3HyMFJ3IoMWAXvrA1ZOND6OMs3um57I038\r\nW4EKrWEkYJyn6edbOZPfKUlLbv1jitVOHkKjnOYEmbrDxsPQwfsTSw4aKrFb\r\nLOXm3xwEIo4XAMoIp/iA4bU9d1pnP8MB1gZQXxZk1jVYV83gnbziulbm8Ljf\r\nZw0TBIZqZjdRJ0ofHlYyX/iDjMejhE8PurrZWQllCZWRnapJETSunuhIe+k1\r\nzNh4HpEVqoNwEjy04zVleMp3m+X6nwDSJDKeg8oVzxKVVobEEKIn+l9qRDX/\r\n6P6kJYlQ1cvJWEhM/6xQkQID2ARPwi26v45UGGpSpurgvP24xKyK1lIch61o\r\n7Xr82qeEeuB4jl2soMmTSRwPR+uFGX/q9nmBedNzxA4EH4OPKw7VH6+CUQEJ\r\nUuMXbQU7ia60eNUmQ3zZADn6k82R9xvBGvE2itrD4iRT8D1ImZtkSNuhY6jD\r\n6Llvi5P1BFdNMyYHmyio/d4zONmfdzFBsSKbNpMeAM5i8ZqfvfImEDw4nAey\r\nppEnNQPXQ/V4rIdx4MVDwy2HZxrf10+fr3Q=\r\n=r4oh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/list":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/menu-surface":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f32339937.0_1678115857335_0.5180281428901907","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/menu","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7644d63d5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e75397a0120a3c22593a741d8cb12fb5a0498634","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7644d63d5.0.tgz","fileCount":38,"integrity":"sha512-DFZbkjvXZrnVjkbZhekRNCQV3ZU4ZSsMaPFptGZvdZ89sFYvqcsk9RISt0pWTTota7QDkN0QuoU0L3CxR3urQg==","signatures":[{"sig":"MEUCIQClf7bE3kaJJXDwXudAJDxUe+VY7OpW2Sp+dyItOJfEEAIgPAmay7Nwk5lEsZND6Vf4YUlGIyreSKUafZZVHitk32Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmk9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0xRAAij65w/NZc3JnOQpxM2Z313q+96NsCbouptCZQjaN2guQ0HY3\r\nuD4I2f7ieAVlUizl85hSlEVK0p4bvOowaylSlIU2EzgtFRmdRmTZ8OXkSsQ1\r\nRYELpQadN3YvnFciUGcvNjLXTCWZOdZwF0LLB2Vk6Pq+ufMd1Wn959joKfgy\r\nj1KEddmPXWsaljzcL1X3XyKvgJSmng0vFwVVEJFqVs2x1TVwcif08skUN7Vh\r\nzW2lSf3oJh8IuvBdXe9ZJSKZaFjrYJ3l7QDPC+eNe0CNvOdNlYKIzl2+iXgi\r\n49A4WiVfWzYXyuYmHARKZZJ+7WxPxaRpctLcc2Eq/vi5uUQ2nnLQQ5awi6SB\r\ntdhJ935XgdBO40wBX9YHyLFsDbCCVdJgrHA5qwcjEHn6cZlqYTsblG/D6Qdt\r\nxzEo2wJVtQM2r9LK0EaVcAZTVC6DKrxbyke+usUmcnzIKoWh9jiz2ienAKUE\r\nI2J6Xxkf7yHYygUR3mTK2oztImzI9ndIT7/Xoi1n7BCi8V7KKWTxgAiFtMEa\r\nqk0g+nAAs1LTz43ngA6Ub/s2xo5TsWhpibdOfJll+ndHI5NnAk7uIYcDRZHq\r\nDp6X0QAafZ43pcnMAu1ZqIiqbMNlfhebjF2Fvjd6oqWDqoANg8i9mKsUjuj5\r\nxZ06+YTzxe0SC5SzuniUjU9Av6VQKWQLEDk=\r\n=iBEc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/list":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/menu-surface":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7644d63d5.0_1678141757615_0.5731394728438712","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/menu","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d96330c08.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52e26f9d44d73af4829bcc754020e25a9f2243a6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d96330c08.0.tgz","fileCount":38,"integrity":"sha512-rwN/wzKr4P99sn2aBQSUQk1bCmUKqLEVqJWxczPLqW9txgmn1EpaWDrTprops2vz0tbLGElieU++ld6ya1DwrQ==","signatures":[{"sig":"MEUCIDXf296B/F49uIseR1rBhUJAYaxUaW7ayPizfyuIj6YGAiEApytt6RivyFOERnvUQykQubxJ9P5q6gNsnnYYftFPgX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1171720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHTsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1hA/9HtB7t+I7CNQ+Isx93PC0wb3OFBqY1E9/q6x+ORH7SeKb9thw\r\nn5wSv0Ph2pQR0aL+5ugWxGIpWY/Aat2OFEuwcFFJWqKsZhGfy/c1NJUILlHg\r\n2Lr+SGB2x1abnG/sY6+GnkrZ6iZWiH1Vy/8Oufnp1UuDFFdGe6ZUgkLfn31D\r\nCtfQdfPSGK8i6EoXjsLsYBkDpfhlG7LTySRtoKJjklrCgYPu6Tgas296vddj\r\nvbK0DWxSwsjySaK91h5eALW8yzNpywQDy7sX68qesn9lO6yTmyhH1QgSvMyi\r\nL4oJ37GOjvnPOOXbC6nODQ9KYSYIjQjL/ADVof8k4LVWNyXuL+/Xo+ODrlmb\r\nHFlf7sMTEFmQm+Sg2Ke6NG2FhgxWEBDNn5WOaEC/d8gXLjiU0J7apq026lWn\r\n26slY/nCI1psbLMOe2k/crHXm+/LNUKndJcJ2bayeCPt575AuEQQv/lRqvvg\r\nowQvwPDkUjOxEHDWhOXaIYwuojDgQZeWUs4vBcI/3dUtoKONfoGzmXWT4kLt\r\nxCUFTBhwoa3k+mdl8QHWNmLqrfkho6xWn7yM1X4XiGSZOzZudX2vGzWBWt6y\r\nHuKrGeaI8/xAJK8FA7/nWAK0JN71HjNn7+RXIUp7ViUNJvLSqdh2ML4VvEiS\r\nJilWN0/68TRyDxkvNZbNJeZJ4xN6fGOMTSs=\r\n=Wwb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/list":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/menu-surface":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d96330c08.0_1678275820461_0.7794137623635204","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/menu","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c99cae77c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9335b0b958edb325186d96524c450100b335f001","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c99cae77c.0.tgz","fileCount":39,"integrity":"sha512-oBj5b8aeEfeKiLrvkNyXRmULZUAcvHpxX/MUn7xXCfbmodyr1MCqJsyD1dt3DGu3jkAUGpJfkHy53g9C3V/Dgg==","signatures":[{"sig":"MEQCIC41uJkI1f/NdVjQMuk7UvRQ39OXurNb3xN3BVBZ1i+MAiAEr28e4kZYZQfzjiyc04Dvvn/60ndrxP2Fi1UikxzlFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1172942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA+A//aw+1MS3s7PZVgOEy4p1xDqUcIwJrMYeuQnDJ4LYfhMdP4W44\r\nM8TC4N51nJK34Kw6jbv+HFcojuhQCQa4A+8NAqPoahm9vI9RnnSO98iXhOGq\r\nmGxErHysOcJw/hNhkBLAMu9bjqkeNTlBOa0MBHgpB+yddIgAzb8Qq5sbqDHz\r\nC7Yco6NazK4wYZQE4ht6Mm4+GmV/S7UQHTjbL5KuZwWS2cqzrqBpVj2k3ova\r\nhDDds7RkTxA6oCGx1rGyBsfRA6IF//Lpx5QuMwtV9II5D7hGXQIrDoLRMMtF\r\no1NTp2i0gG8ZcoJ28uB2UlifH8bd5fF2JCDoN/T+kNJR2FsFcnw834u3OMlH\r\n0zhNVo3n77vygUDPlIEyaXkGQT0otlNAEzp/FEC1O0VHoPcVcA0o6cjhzpu+\r\nkmXU5Oi2E0TgdDjZXfklnSIUNv29CbpnhTjL2df1BrIq4DgZvVX/0ZSN+YTs\r\nI7FlcMesucVt3yBtwvKjC3mnXyc9rOJ3of1POls3wxAMUKaNy48w05BbJVjh\r\n2X8kkx9xohnhiD1zrggH3vKJuufEDgUwnYrUSf7rUe5Asu650VvtfmJv5MB/\r\nVE9GwGCJEOh6LGoQRwLVCsJJlDeMtSAGW5+MU4cGqRLS5f4O3cId3sRQZrUa\r\nQgjdSFciUr0thJA3Qo3jJTcZXz36AVbiC2o=\r\n=NChx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/list":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/menu-surface":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c99cae77c.0_1678319083075_0.9762113735548272","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/menu","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6023b1cd3.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f808e039ee8827579ead52f1f684103a8bc7794e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6023b1cd3.0.tgz","fileCount":39,"integrity":"sha512-VZSQfaCOGjBfWQt+EJdYWMUkbTpWeIoU1w62btsz6X7XVf5GQdtC+yQFWrkhfuc6peDQahQzF+kr39ITjFuIBg==","signatures":[{"sig":"MEQCIHYHvZvTwc8WJVGw+Nux0XzrPBPsH9Yby73jC/4X+4jQAiAM1AQ25kuM5ceViWKiuLyFKZ4721eA1YCe3DhoSD0QRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCez5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa8w//SeragE96DzpPjTFHNNrba/vTFiXM5YK0VEBQSxEgsEDU5ykk\r\ndw1nZHbcfxXJYi+1DQlEr+XIx+nwSdE6SdTjs7TYYq6gigYxIR+6OSmk5aVq\r\nJUZ6XcZ1eNFC3TJFButF3NvKhCtk10QvpaXo8fyqjS7eK3FzGfAo5+EvQ7aw\r\nnCXfGOaAGRzauttsUNPs0yMpJ5XSYcHQHjEdmLYoltG+f0qvTwUXM97AEmwK\r\nVSty9d5sgm7YkVAg3ku8Ymf7Op7NVLC5HGgGgDFgOrUjS1T0imIYqn92s2Ky\r\ncDSm+oQNjNFAqXlBzmY6H69mFsrTfcFWO/dglMWwwnlhPZmk4s/GcfOegMHU\r\nKaBsoDTG9VEfIkAx5AaMhrJh/FGXXE1CQCkl6TB4MXgrDR9/LHWSxk8h3jot\r\nEexFEbXebANZtJu6I9yrEO7HefHFxXPxwDB8h1eDK24BRk/Rk08Obue35f7Y\r\nHf+wJ9GVCeTaur432jg71YIuPeCIHKaWmmhDgRaWT+fRTIus5m+desM37B7g\r\n2H+yKju9YbB61jhDpAh47AZ4YNMuZx57KAVcmAUnsZP/8Lb2+T5dTcey6Jqd\r\nPVh8JfQnPByFcKWJ/kOem9e4E8uA0YmeugOpWQPeuo9PLJVaXDJIYjKC5L0r\r\nyH30KJZ5yjE5KK9g0cbKsNUhJ03zOzvMPVU=\r\n=PBT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/list":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/menu-surface":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6023b1cd3.0_1678372089481_0.7144477569679188","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/menu","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.274610c77.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28f6fe64b71c4d6219d9da2fce41918485a31ea2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.274610c77.0.tgz","fileCount":39,"integrity":"sha512-yL7Wm7AN5e9OEzlPoK+JaDm8S7BTcSrjZy+3j8l+xXG4P+L+BLmqz9GjW6m0e+MVh+GIk4lwlEbdfKSrjpzKSQ==","signatures":[{"sig":"MEUCIQC2VbuQkN3rVoxon/T8ov/Mj5xc/yIbr5U3MKBFfZqlbwIgK0qq6yxfxkHPeP4eJ6Lpy/jMlUNcqr3qsWsU3FHTx0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfSeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr01w//dIEqxwhewY7RNvoflS9Rs8JjZDorf877Or0skltsZjP5Hdbu\r\nm+pmxsG2YtsWeJM00MHKFXDcWCi9b3uNb/OKAZf24wAYP0SrWyv0th4enCOh\r\n8PS48+dYFet25sGh1BOrXhN5DFEdpPCyqYkVbUlsmXeF6y7f7lpv0m3pUhZa\r\n0jiVNmzB8umU3R6vh1sv09oEWFQ/q4K/pnXhYqUwJP31VORfkPQunRDPTJK5\r\n6IOaoRoyt2IaE1liW1WJumVC/b7PpLa1gukhVJmgnkE3h3iX//e8cdR2q1pd\r\nXDEe0/k4UmUORDpytPrP/sApL9+cA7YXwoH4MPPFWRlsaav4rILsXJpsBLGg\r\ne5jYlAJthq0aHMle2z8LnVkS0cIPRjKwG4ZJzOFuPQgEfLEPEteM5bbxVHvC\r\n85lPYpx/xxsSvKzK1S+LgScuV0+P5Jfu1glzIrZSQtL+r9RTfKbNsTPAqTnV\r\nfwgiT+9zsa6D0udc5drWmIHrwDCiFxARXMIqE6KnJPkjdeiHHKYk5QNnJv2k\r\nDZH7g4ielbdLxR15Rdo5rk3x0FV8Zt0huhRJOaoWnlYVpC3AsUl7HiCRz/8z\r\n+ZLlq2zea4JVZwSWOdHjqnwEtY/xgmDGSXb3sgxdcmGZogpFsvyKjshtVAxV\r\n6PB31pBxmip+BzIUm5Physs4W6ZFHbxsKqk=\r\n=E+lB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/list":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/menu-surface":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.274610c77.0_1678374046404_0.49920546242205677","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/menu","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a274583b9.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994cd45bedf92a76ade08d4a2917d258a65ee77a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a274583b9.0.tgz","fileCount":39,"integrity":"sha512-UoFNAEVudWFf9mSe408FH+re5vFJLM2vgdIl1z6oXIBr33XIWscvD566Jpc8vTInZOppZhjq4dAZUhSDrGrmYw==","signatures":[{"sig":"MEQCIFrtstWBtoi9AINgTQNdz4S+aDlBB+FpDtKfwV5oWbDJAiBfalx0mLlqAJbnD4W0JBoTxVx0VPYQxycN/teJiAvAFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjl2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiAhAAopZK9dKEG7VlZtIdgp/qqUVZlawCPoRAJENJfY1qBm1jntF4\r\nATIaM+u0R9oYTFYTsNmAyuy18sCJt7K7E5Z96wCfq6tCFvWylWAyBfyeTMUv\r\nZ/glWEMXi2xq+D8w5Jz06ZKJAeC1HzNZHuPQQT8r8czcgdK2lSYXCpFCLDOR\r\nSb/QoKXnyaObtGoX41D5eqBB3bnahfsf4ODX4JF3puCVv1/ay5Gd59h5yoCu\r\nfoOZGSnZV8Pybw7Enay549lPVPOBbvTlhbzHgKNZf6+awH2qb0ZyKsekrr20\r\nTZewe4Kdtkc8UqbGBNjZ2nVxjaBpmpys9n+zzes7rM6elHhu1qQs2RIImfO5\r\nhOsZVqbTZNk3yDE8vqbK+4rk/qxeaaWmqLb7987IaQ8tugWjQ6IQiuCJCmWp\r\n7g13peS4iuXjxVhHukYQbSMJjpLLBicJJNzTihxUJFY308WKDaJam9MxjG4v\r\nxpHL545QI1IO4cCJmJYznGiQYOyAZ4bz3QxLXQauHhEaeoNqVUYEjkNh2+d1\r\ne9XPV3oMj8fU09ATdncPFNeb4Md0IJBROhiRQiL00nc1yLc3D7PtW69diLt3\r\nQ+eqpMtNjV+KuWWSXKZ+gsQxLuq0nVZIYaUoqX5C18wtaOFUQjWX+du+eww7\r\nj9zsssoQ+4bFcoqWKsaUoM4mPECCL9mDAdw=\r\n=v+2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/list":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/menu-surface":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a274583b9.0_1678391668894_0.07534321825428925","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/menu","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.304a94e8b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57bb3633a7f7c5e76d9631a9c966ffe7544d413b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.304a94e8b.0.tgz","fileCount":39,"integrity":"sha512-podz2o4yhvmaw6cylLBndM6+rKEVcYMvkJa0fSv/IBY+mTVFXdq6JkYRBkwsAPtCRiautQjN95CvSdpIWi+qYQ==","signatures":[{"sig":"MEUCIQCzPnn9c+4xEpwCp4WWuspSntvxI6lNDh0caJIKFVUuDwIgWcsKjUlxQSSx0EoJRymwe25UhoyHlrigQnkNWGBobxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkW5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKSw//YUuY6n8gE37h6kp9tzbGD57PsZraSKNslFUOwxmnru7gP5vn\r\ntPKyXXXVYOekQPYc2fQYr6umISAqihEs31byp5YOn5XmGrLT9AYl2pVgW8tU\r\nsES0LW5GqsC64hZBwrZ3P/Vv9JdhE0NmdEssUPjB9N0m4xUSltD6faRRhL95\r\nrrmdMDCpjsgRKRCdgd+xXetMk2wzAsryqS5/r7hlOyJ1mWEesxE+Y5L1aymr\r\nVVSy7j2jbREHL6lTkcz/ZsNSofXhitN7BFojYCQeNciT8junuH9D4dZ2bxUz\r\nYZwuUz/DdOU3SmwlAlDgMDBi+lmCgM3ecbjXszI0mMGPeNrbvwFpQ/ny9Lis\r\n4YO3hpk3sV6Fr7q0bFiUJZ86mLYAAv+i/0jM7vnht6EreG8Yy+AEjQTy/N/D\r\nIq7R/XFWhSd0opzZ1rEPlzayct+N8yb5T9vtPaWSkKCHvESk34fotCqxcxx/\r\nnd/K10f1YLbrz4kkzmGtSHqSk+eYOQL+fcz1z/MZiDd1DaL5QbXRK79PfSe8\r\nipuOkRsau174KKshuUg5+ukiGIixJN/CESEC4RWr3hU7Q+7+tKecQD/g8wVg\r\nmCl3Z0j77J9BSpIfMSB2rEVppIswEN2wlcu3JSahzZJr+hyQYW+ZFdbCFWtN\r\ngpY0Qvp6Gm8lCZc8zMxKpd1XcNjzEBOUaqc=\r\n=H+2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/list":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/menu-surface":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.304a94e8b.0_1678394809413_0.29187061525144453","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/menu","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6c265915c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec4d108d9e25af853bb0dd8e1108bd086d55f899","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6c265915c.0.tgz","fileCount":39,"integrity":"sha512-M0GNhIuUdxUviAiCViWNeFQq3I3rkjK8ZtGlkHmWoYf88tsfgKooVk+XdQh83ZeOsJM60fkgvA2SX8Ap1Rz2zg==","signatures":[{"sig":"MEYCIQCWb4lZaO7zlQm6TckxaAtqat3CTCR8gA7/u3KTRHY7xAIhAL+k7XUyVNqYvoAG6gsHzgovbxcQTRmLi1DLR54HlbXa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP9hAAhIL33pqbbtRw7cfiaD8nDMr8UzBFm/tbNQplDiUPDN1kCZ9B\r\nnMqvGmQutpeOMpCu8AnleB5h+mwuNLd7lSPurUVu+fOou0jZkxECMdYjE7Dh\r\nI0dMaylqVbCOeLDn1QyT8tSh1tlmeGsE+DRmelf8CSdWbezsIuUIiRfQq65m\r\n3SFc6tCawuHc/xxrrPkT8s+5D7/hvLP+mjAmqWloerVbrA3cCqO3wxAFsq31\r\nDYVca0lfuTfSf0qkQA7cYdvDeyZ8fF7YZptsOS2v2rnoW4EmQOZ/hnwSk0kf\r\nXZOh71V5EjCEde1/jadflHSzqXpfm1rqCenbijHfsf+N7Tmk9teVVGTW/oU4\r\nL5F986Ll1OSzRF5gFzPj4CHAcGzxybzCtnEvHLqE0JK47xWdb+pg5et4R4YB\r\nESOuxQFtWGDXI1/FJwNtGymqeMIiQUdNv/sww8WMKVmO6VepPnj53n2X22r0\r\n8deqvtDfOVuMbRAaQqfFFADcU9IWS4M7fQ0Q/emgUf2tAuLDZRjZDhiK+f6F\r\nFgnCOfA7kc8hjPJB01IDKYw5rpQDNzbzWlsfMRX7/M9fxEQ8/U3nLlM8AGJo\r\nqHcnTGJOEmRPbSFbx7j/6JUJLqYs/aHE+MAp7Dfz/aspvoRjXYbfrb//PChz\r\nSK5AevdtGs4p84Ce+toMv3VZjKQupJVwJOc=\r\n=fMXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/list":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/menu-surface":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6c265915c.0_1678398548733_0.7697701607129193","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/menu","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.de5224633.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa5b0619ad0e3687997785ca3da55f9e237527b1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.de5224633.0.tgz","fileCount":39,"integrity":"sha512-1jF9b2s4POjPpzElL/8yKa4KC3vnZQX07WxTW4ayj+ECNxCBrFNs2M2uVMoGjseQsKWF+RYeLoCbgXXn6y98dA==","signatures":[{"sig":"MEUCIQDDkPXi26bavParjxZS7ng/XaWeCe4onhtFPC+X/pOUZwIgZ/QwK+EzYOXFN9zKLtweWa40qZ+COGsvrmIPZxT1ID8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG/g/7BhEHDIrBtmwRSUeZ0i8B7xjc4kQWSNn33HlMnzBDIw+LCH08\r\n4mQLVgCOGhQD72zSqr/dy3FTZhJ8p2Jlyw2mCvUWMG+/TkfGZImlYofA04H+\r\nYAuZiDi5osOso7yDjRm0pnGxiBmiHufzScoKIo6ysRALB5AEn9XNp0UGV2kV\r\nu3XN+gZ1oZu68G7n5dYthDTXs3YJDLpSaUR1xNk+32v3c/DiKnn/1+hUl08f\r\nIyDGS5ts/n1VDxn00snSQocyVJzK/6cmTVeKOhbth2CCQta3Wvi5yO9Ud8xt\r\nVexYSemU44Frv0RbEQh/PVeHdqCjFQ5+KqFGF3Fmiawx/SN2Va6yn84bjMXv\r\nous1yUas5O6ikoWOpeI7moOyUCEvAFiM7GYDoVujquq357RvbIv6x/ITajFQ\r\nEaWIAP+r0GHYy9n+O8eKU2E9GrISFJ9x5s3S8xv8mRExy6n//GJ/BxLOYHKB\r\n+6UVtReY5bjaz1NAEPoMShB8O365+hDdMxHG2jAEePc+MF8uBWcyiqhhtA/w\r\n/U3R64/nqHDQh8z096ktby8cZWDppG3n1mIp3VE0tbmhcTRt2Zs0/649ZSNP\r\naTw7Xk7u129DapDYaMJXmr9BB5uVsd4w8cOUlQ5q8RsnVGP9yRHOEXdjdI9e\r\nbJjA1K2KWGLgO8KK9/+AdY9WYcsiVhcg2ew=\r\n=p4ho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/list":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/menu-surface":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.de5224633.0_1678406255881_0.402362971272354","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/menu","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8879557e6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b118199d1034755ce37f536467f6e8a2af50a7e4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8879557e6.0.tgz","fileCount":39,"integrity":"sha512-U3b2B3iyxd3CeuzwhI2Q2XV3KJm4wF0r/gOU+e03c7eRptHA3VGKB+m+CMLfuACqc1PwDgIytJNQAgqCpmxS+g==","signatures":[{"sig":"MEQCIHNJmzm8dZqTq555dYMJ+m4t0TOgj49PJQRKq90zJBEeAiBKuu9Or0ERwY8YzQ0hevA+Oiw+H6j0+npmy4Zk7FNcdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzooACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow4Q//XNoVC1vrVfn0PMi/ht0itHAhRTc3YDYU9drg+tWsZC8T7sZO\r\n44Jg/ZTLkrOFbQVtwPSRTkaqHTNJMpjRpkoGkmtiOItSqcRuCmpJSKD/tscI\r\nsTJkDzp5Fzzfq1CAml7Ko1HL+UZ3rzY2dJYiAE0eHM69VEToafv4e1DPfzMX\r\n+wo03PBBAnceEbMKzYph+U8QXcx5i6+TV+lpRmfnbUwfW2aESfnDgxXH/Gll\r\nQltS850qGgOO//ROex019uAh9Ump7EmgeWy1ERZcgRZtlUAA0GT3HMFXkt5P\r\nM3NsfXBcKeSKH0K+sejXMatfTaoPPEEB5vMv+clzJ8z/AAvzG9XOKbipsSwS\r\nUVXaUZ6K79+TVf8JkhcYWze7j2Cl2Hw7N3eGVPD2CKrP6h+k5V36aI3hMpiU\r\nrU1jKIAwglH7ToOBK+l/5Ywg24ZhtrKxqkmMpLD4OoXIyNrRGthzxjv9TY9Q\r\nctIEb2SvTMhd+A6WZi4NGAj6NZG1AMKgnRFbLA9Pje6JLnho+d1dAqwsTn0Z\r\nwM6lmOqoOx2ujdKE7pV4GoNCxYuVo4L8AXLsMZHyutsmRFIshoKb1+29r1xy\r\n2I8n5PGv0k3FfEunl3nd4TPZ7C4slugiQSzeADkGQSZPqZs6lnEE/ouZFeQu\r\nsaA+QrFSOP9lOChCju/VWihfCTc1f4OHhMk=\r\n=5+52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/list":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/menu-surface":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8879557e6.0_1678457384047_0.9232963269543673","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/menu","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.23073a303.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"985c4f227a54f0b1d10fe19f9384031dadafd7fd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.23073a303.0.tgz","fileCount":39,"integrity":"sha512-7zB0tdZXz4k7p4hxmlqiQ3zBw0NvxFLLus76Q/dwqUu+8i4hr/o1mNPIa7CKNqrYdJSSRxvLy6jvrf5xXd432Q==","signatures":[{"sig":"MEUCIQCd262Q+h5AqqCDkNrSiAV5PW3Ugcq+VvrLTWw42sfqvQIgcIuaebacYy/mpyYYhLPZm2Hcau68Ri/2OHiOJgMRskY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzvUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbnQ//dsYMMYnr+u2v2EpEY6CL2bv93ZrHaL7X1ZqDV3YOK5+HYFmd\r\n5MfdBpyd0SwCeLd3jROqOmmc0pQ9nvtueg7z/OrchTkNu3v//UxCcT+pCFf6\r\n8eH5sa8IYPH7e7CTkESVs713K/Dx8QavaBo6bIs5hP/7pTgSo4OV6RpBYLUO\r\nasmKStJOEej3SbekV4lkFmx+jgE7tFzpL+iRVe/ZSE663oxO+lK9UVzQNybF\r\nLsgANTDbP9eu0UZhJMmvoudzwu00cEVOCRmlzl/u86C2Dq6bIf9NjBBYu0Xu\r\nduUgOpzrTKEe/8scRF5DPt4LA66jWqkHyMIT1ODEG+nvmqB6UuzomzpmA3Jc\r\nuy3A25adZiqfsTwpT4g5g48um8Sr8xludC9R8iFMS1NyUrXYG4pIpgPftjFr\r\nE9BaWE3C2+gZ+OJD3+LuU29lBjbo1fvJMyWtVY8MyVD6C+jn6SsRo7qBR1G6\r\nqNbrHRKlJmk42i3nAUSa7jnN4YnTSiwDdsHQjq2jHUrMC3EMZVFFkvPBm2wd\r\nIkdEX/a2xlGBPhAJvTb9dZpa+HBPj/V1a/vd5FHeTSxgmdxIbXH2zARcVewj\r\nSZLV0HouBjBsfv8qzi6kNBUXdSphSIV+8d/MQzGA+WGG1JQjHzrq7dIcw3t3\r\nyuAleMyPY7+RnUbL5nuastKttAPU9ygxP+g=\r\n=VEpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/list":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/menu-surface":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.23073a303.0_1678457812125_0.1484166771039972","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/menu","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.51c7d4014.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0af652bf140e770fd48f53e53fcdd7310fc46d77","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.51c7d4014.0.tgz","fileCount":39,"integrity":"sha512-3HDySDA6Y9A25p0LWnjpZLTGfwF8H3mBHCYtcpCMFRp99wA5jtFFJDPq4CymigHO5BL4jGFEPFmoNWGglLdDsQ==","signatures":[{"sig":"MEUCIC0uaJTSpzHMz9o4zKgwTLFXWn+meN3/rY4F7VbLa7SUAiEA/IEl6W9BeEpeC35Sh/kZfg9ftAh8haxyQfY13QfdEsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC1+SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLhxAAhnqA/uBOUnKO3kHoeB9q25W0XY5r4It/OX3fCEzO/UkIRogL\r\nEQBAX1/Rf9BPHy7AcLYUcm4rt+dxO/wgRwzVE6yjKZFip3T/Wv7hoTueM13u\r\nWoNmv0Iz4egf7sOpV1eg3oGL+LiMvtCXcmqPR6S/bGhm+uUJJUOXzhWZQ9it\r\nB+GMAPwUP3DF2nw52EOOOJApM9ZjGzKQsRgIyxhDGdCViR+Nu2FF0p8vGz95\r\nwDqpuRWwQhVQDXXTJiZuzDeM8pyaM+hWRhGSD/6yV5vvqtX0w4RfU3ttYmx3\r\nC0Me0dr5jIr15OWH2X1MRvoA3QJ0a/tj/M8YXVAFma2Un0Fr/eAU+XQYSJv/\r\n2XZ4MVOVyuR77PwOIP8Z7BqeWpmDYCx4XaP2lsrPM+XP+exhuZMrEhpPsOab\r\nBpb2fb5Ja1IAfAcxPdC5Jbk+QKsORwFehWjhcdWROSW4YxPYDYuHz8REO6vP\r\n3HZ4AoRv23I9+8iAK+edgCxdL+sd48URNFe3zcvLIEWmqE8dFxRErtN9bJPA\r\n8XNJow3wI1nGDD6j22/1gYE86/z0EkTaAd2d4Tgxn2ZANPpH7crQQ9LaHTpC\r\n4LOHtEubvRJo8HNJvZOL39ke8we3iAmEEvRnqaPu9bRLj7hEd43frUwLm/+N\r\nRSfTBa05/YDUa2xgZZz1uaGpd8X8UgS+ykE=\r\n=487c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/list":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/menu-surface":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.51c7d4014.0_1678466961846_0.986921632330511","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/menu","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1175a5be0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1631ea3fd223350d9e7a1ca4edd94f577b8c9a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1175a5be0.0.tgz","fileCount":39,"integrity":"sha512-PcJNpoOAIozDgg7SQWK+BDxH9BxY7jdF34ghr7AQZrH5ebqmf4rfB0Mv6Xm2Ba0ovF0RLA3NCufcdUKmosuSQQ==","signatures":[{"sig":"MEYCIQCfq60AyWAbPeoAgO17vlLSBHOZuopGyCv2ScgYy6KCCAIhALRhN/UoqEFV6Cz6cXKh1/LahmJLBczK9wwOBOWFfgX7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUFQ//c9OfuOSUZ7chUHY/eUfZDNu+r5Hn+XwGeBeAiz+mbv/ECHNh\r\nhToAoQqgSG0PIIB6kg1/1B3Vt0ugJvL1E3Ol2wlFcA5NBwm/Lh8LuCZZaX/N\r\nTXIi69MwLRbdQm23z9o8l2K8hce1H8tzYpYYg1Ok8bMfjUddqqZWIL/JDsfC\r\nY+Lc/xL1KKhIO52tpF/jftusPBgWwpkTBx910OkWvle/lOa2NznWA/TxCLBp\r\nQrwbmSEdXU8l8vkzyKTY/JPyPVqPJYeH4H77iKFqvJfFcXtmgTjBMDm2DrgA\r\n7NYOx8O3gIeST51qr/W6GBEgK7jasf/iEjdpVhZJu2/PFlgj56pH7tubHud6\r\n5IwLMzb9vREwEdxZRqzR9kMi8kY/NjGVIrGFj084phDVK+OiVB7kmKmtLMtu\r\nKASboFJV0Qg7f1SDhOpv8IOdciVIgXdZcMjZcRJdtghUhbr6MAL24X+CZ9zQ\r\neLMAdj4GWgFQ+4UlVreOwfV5idcrBkyuPMQH71eAksq22MSt0SPIrJY7prIj\r\ndLz61+QDn55bgWE5Yfyp3vlCFVsoYd3/W9WwONBLu3Zc7ykstvnQ/GUZ1Yfa\r\nO5XbLQvFFTtEIP316r8UAK46zGo+euIeKZRz0Ot0/VsPmKU9nX8PZdSDD4d+\r\nbfbzczOenJNC8sOLM34obQN94h+mJLm0cjk=\r\n=9ajb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/list":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/menu-surface":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1175a5be0.0_1678481390154_0.9873473789552569","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/menu","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7adf3af80.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08b6c04cafdd2d4ccb609838a58e5d14b57cfe6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7adf3af80.0.tgz","fileCount":39,"integrity":"sha512-6xvZMh6YiQNO7eOg31ouN2MuigCJpwGmy21S1cuE0/kUNmeN9zi+nAuV4lCeuwPrhSWuxKvHYt8sw2pA+Szu6g==","signatures":[{"sig":"MEUCIGTaDkw7Tkmv89coDpSC6IenEh0i2vbe2TK0FtqBn8DiAiEAqT73VguuzO3LyNhYbGeg8N/PVs85gVZhwY54B1UtyZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAhAAgKZKbNUUgUKoq2Jl5dREFgC3cXP27wej7B7tKOkXxUh8fse6\r\njBPHCai9HLWHBQMyeZBzW3MqFzDGB58pQO0aRqdQisxouGATWLRq/9zkSJxE\r\nBMxbquoP30TdrKyHOC2/4/yYmYz82fGBFSl9L+Gebqdb5yT6Q3j+EXaSct7c\r\nL6r3c9nrxFOeCHQgQM7CsLqsZu6PyuPVn+GyWgmmRud3KgaEmehgZd70WyHY\r\niMEfiIqLeVsrZAAYL9NpNIx4rBD8KzhBRfS75Q5OfoBMfdDcwfBUxhghWau8\r\n3XYD8uHVho+izDtp09roZIiy/69ar5gGgPVmC0Z7AXmTx46F5UumadFdTTv6\r\nS/OqRZ4PzvzAddpecvRX8JXDoiyvVS+q50fIwHhpV/lzbLJ0cAvNgDJaoST8\r\nn/IlATLu/HyTXK2zROqWwATekId9hPXN1SXbVKOGQhXo7/fA+WLKWBBFO1jP\r\nKtv0njOoL/HGQorsJFZAlpU76xMocz4C4U73VdMXEbYG5Js1FJzOKOVPbrQX\r\nQxoiGyNf0fU0SQVCehmJRwYUpFPeogecx66s7Tp1e4Zp6Xgd0y6USJvuB7Sv\r\nvlgi/C1h+WvgJ/LBI/sWcaw3JFAjr+hPDjKuY75gBFNXBrbZ/JTR3q7LVI+O\r\nf0c14kCK+3eDcegjzrbxhXwjwEt6vOwVXgk=\r\n=c7fh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/list":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/menu-surface":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7adf3af80.0_1678498003925_0.9927508446514495","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/menu","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.82554d770.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"841875e08dbe5706d0492e37183640c635f12dc9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.82554d770.0.tgz","fileCount":39,"integrity":"sha512-+S6Nwrc+U7jguMU6B7QWYIi6b3rw7CxpDwF75WJCsyasnxjeT1ScS7PhpqfZd73c8zeNSJvDhQM8yCG0NGwvsg==","signatures":[{"sig":"MEYCIQC9ZydPvxLWP/fizR94y7Dvt2Rm7S6mSx9+WLOnXdticwIhAKnQyl99usNiQorjbuLHEITuPajR5056kMRvkpWypkei","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9u0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQxQ/8DRQ99OIiK+mTafZgvgPoI1IvC9NuSBsc5arWgYpHWZsyUADs\r\n41jaJjAl9cd6mntrPgPyXY7nBaOBjX0rVc/PsI88t38AfzJMau30LyUAOwga\r\nbZo15TyLwwWgDJuEdTcs94w3ze1x+VxKe4GoXviSiHJITowaZSUJnWjuJw7E\r\n0WGR+jSfgz4Ild1ExhRDnymBUQBMAp1ph+JXusH2B8/7D+jLMpXRgtIFhV3S\r\ndyXcvwFEY4SNryke5H+/UMbrVWsloQMGtXNBVK6VJCyd2lOQd6ClVzvycIpc\r\n3jOwxcgdKFlPAQt/RsUGyMM4UAsAnC5NSFAnrrDPE/XlHDQSl0AAaaixPIEv\r\nmqgaGFqU8dv/roBKqeQGeGgdCeS6Rs6U28xRT7Fdug9IqFJ5jsuq7E4L1kzy\r\nytQ9gjrUz+ZbY1/DNuWbLMyMl3PGvQrXrGsadX+HJ5E+RjhJaXQPAG7DMBre\r\n6Pkadrr8HAVqHLv9IUYGX2cb9aPfP2TkV1IpUIcLlsPfpmFaxp3/fzw7VCwm\r\nXPcj3JWQPFG3G2ZoqdTzTfwDkvvxp9K+1bvtVjN+YpoeOOx/GjFncovN5S2w\r\n2j+oZ2d2LL3IKugStR+bFsTSo/0oHjW216laBUb8JdPdfDOhN6Pi1JJEFaqg\r\nvRiFs5sa09o/W0rHcmDMjf2AVZwLzghOHPE=\r\n=ODwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/list":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/menu-surface":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.82554d770.0_1678498740354_0.35892428782382013","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/menu","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.93fc524b7.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a02b0e61dd1775e9129b1529f37c42cd69f0bd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.93fc524b7.0.tgz","fileCount":39,"integrity":"sha512-WhKzOOj44gKsG/8H0OIg+CoTOKqu9RM4vA50KNvyANZQ97p2l8VVl41yMBl6qURGlqBgGD/b3Nt3Itxs05CRQA==","signatures":[{"sig":"MEUCIDUrm+bfCWsnyPq1INxAimgk1z0+S9m2CKIUpiMUybIZAiEAlQjfJTbdAkxM11gTf9Ifq9ihbmqS55GAQGRU4cGo8HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuGXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM2xAAn549wJp5XC9iI2YerZt7Cjj+TkaCSz5zy6AUy7nf1PQGVlTn\r\nm0hTEjvOASxp+j7D7xqh3HqeOCnAI8uinpNC2tz4VbkPp+aY1Gt6oBnZlW1D\r\nNnMsXm44oWVn1w0td7SEXqmHwObtDOCHe22QdagzJqpE+EdzBoFcWZ3Jvkj1\r\nBSmJMO7ygZJ5/MHIF4IMHeAW1xLMIeiUQGVNPvIuN8uGY0V4HG/Pg1mk4oGU\r\nz+zATq5pxSNFuNqZBlSxRzRCoS+Qbc57utmH6qUcm01v6KB/J7ggHv8gtANq\r\nRD/FtTxU8Ls8YrPLQs8w/+jFu8Z4FgRFLd+/Bc0l5zB3+WzZLjUyNtB3WrL0\r\nvwbj/EylTw/67j29Dp6tFNkS5QMSSEdgiteBfZo5pF0jagNADdlNwOaFS4Tk\r\nkPIcu7bJMUZSMsHlQ7KgSpNXHPkmwEolYCprku80S+wkOyd6FvFoU2C0a1UK\r\nCBwx1OoaOkZvn1mDpBMxi1T0GqDpWiExT3AoUtioIqkD2KdYDrp2IT+9UyOk\r\nMVT+SaXq9Gmrm+M52t67+W+B/1Ih4DDlTRKJS4L/xxpux0mezXCDbYT99SVN\r\n6ScycSr0JV5bameNsPerKIprvKz5/zZofu2rVO/lrsyHjytCBNKTz5LvgkOm\r\nOSBBNDtsaSzw2Aiq/mNe8alMIlIK0TR+rqU=\r\n=2eum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/list":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/menu-surface":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.93fc524b7.0_1678696855220_0.7926532195075575","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/menu","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.50be0fbae.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5243c6f9ffc5b699bdb3fb923476229e1946fb7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.50be0fbae.0.tgz","fileCount":39,"integrity":"sha512-mhe9vKu6Jiibal/KVSrmxnSkz98BV+oVnINDu2JDuyHn2hQZ4qEbu13J2EUVuKW4M48QXdZFrkyksTaEnPv4ag==","signatures":[{"sig":"MEYCIQCQXIs/ghrT+xQeIbiOfRWQBrqTSFDPB8kGpR5VXPthXwIhAInANrjM+8XXdp5Un5xI7f0k6c7R/Rm3N0QpiigSplcm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKYg/5AIPI9HghumhSa04xMG3PvLAWo41RrpA7SBUOF0r3EyCHq9bR\r\n6KY04EYSfYsVHYLSXYoVe0gW7D24wIewh9tnasONuBzexfpO7dFi7lMt6RbQ\r\nV5ACUfWPLs6mfEHaw97CQa6gngXGae2KdOsTVk/nZIWBskXre8aeJd/QnwlG\r\nbf4+cPHeqrDGrEe0QJRZQWnWIJBHy0cJqzk5R0gaZIXE0YyOvLuVsA4Ufu/Q\r\nIVMvdsoV7cDiGiBmWJx8fBVPKeievvM+5zZxzCQZXYtVuMDwWvpVm7ogKoqT\r\ndK4gl6B1ZlA+4o5fNqyFFdoB6QCAEtB81CqpoXx8/0qsM2FGAqacjLXlYp4h\r\nKwJQtt+uy/v/j5ckFaRMf6rGVyLSiA/gESmyQU3rGbjiBYIchNYjk23UxM5k\r\nnVdiDrtUOrCVFApyP8PSISd8S2ho/sAeXPKdktekhISden0YiGblQtR7zguw\r\noCAm/DXuXMAv3XgM8E583dPEz3Zyqrp5QLgvrKU7/AzMPjUQuBNBblI272FT\r\n/3+WPKpQ1QwBbo0maI3v7OJHuYRfb5A3tcIr5Fks2+IFkCboZanuGD/x5gN6\r\nC0cBqBzlqUEtvyoAxennaxGXpoalDwO+yIW2UIe7ScAzkGhmSEDRjiUeHFWh\r\nV9JXfJEpOsOxBfkoKnCDbWbjHyTd5p15fJo=\r\n=NHkk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/list":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/menu-surface":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.50be0fbae.0_1678729561470_0.8776388254136365","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/menu","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6b5ffccd9.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f706cf81f99b3f3f1379abf380c22df4df54794f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":39,"integrity":"sha512-0QJVQb0NxCE+Zfh1VV2kAC/Xpr3RWNfFOzIzYbOVbM5mkwuzVTzlHpN62+S3enVV4iyCzLUsKDg4dhZ9nunFoQ==","signatures":[{"sig":"MEUCID/+HFa4iFGSj6ogDS1ncLON5CyoH6TphqVbFIYElFHjAiEAwrDV2zdr1n/IS9QXgo8b+SGw8dWFlA/PPAfLCYRlNsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2InACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfaA//fr1h9SybnMWKjWpoXaMPbfP0OAGWrhMeD470qtHlWJDbJerC\r\n4izfzAgLUqQaaorSs1eoX4y8irJE4rvkc1bZKXMn4QY7XHgVWNZ5ctXNbe6M\r\n6ZVwL7Jne/i3/XC3DrM8RyxgteutYwBDabNv9PcGVFGGIKG3koRQx01QfkIU\r\n3MDhSn9lzfftQNGsfaLtLOZs4U4QHFboh03E86H/Nd7kd9rLLWgVKpty3X2X\r\n7owRzMEdZI+RJpaPebAsms5vOB4glEi3wbdOGMBbavfErf3WhspJWaWTu82U\r\nFnrBto1XuzdSwcAhmbg+lKnKcr1cq7+iOAbYShyag6j2Gdo+4N0kAGUWN3Nm\r\nEeqzKAcG/zaUR4nKV3rYpuPWSTBg3cpvglsiHYxvjdkzJeCUOQc7hj/SQOLB\r\nnqHS5zKkD0xE+MPooDJ0WMmdVt8T8d5liB/mk3Day3TJI2aoi7CnxNzFuahp\r\nZ5uMCejxlOTgDl5OJsRl/4pi0ZEjl1xS5D5XKIMasdJmOTIwO21ha7zHGz2O\r\n2ZVnmy6sZMLPwWiNjkCS038UZPkUnN9dUtU2tZnyMRFa2l95cKZdovYuiqQb\r\nuCcr4IIK5WLvg6mnSH/zGZdFYaIpAT/1gYcKbXHDAqVY37KZz2eT72Wsd5DT\r\nxqdHxFyTAtYYyaP3q+6v4oek04onv7EidqE=\r\n=AcEe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/list":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/menu-surface":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6b5ffccd9.0_1678729767527_0.6977152054304161","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/menu","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1c8013f4e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ef3322eeeb6f2efc8d37ba15d66a69489f9bd8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1c8013f4e.0.tgz","fileCount":39,"integrity":"sha512-NVj357UkbQevpcsQDW45QcIlW/6xg8nDhUhQpCdjhcwzgu9s6FtSGCAbXmGpUvFbmkOLhEUlghu6YcZ6Khatrg==","signatures":[{"sig":"MEQCIEgCBFOrgxHtMV79KzlqI9Y9ZSmR6DfL8jcmHZKfVMjJAiBx2uFnNGYpg6J9gL+TLU0HtG8lq7xLNTi4wy7P0UigfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2XBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2ZxAAi6yxxhN6zHiRfNDIw1moa7GIzJF/KZUo9c0xWS+AJzFxVrGY\r\n7AF3ej0Ep1kd3lUOdp4di1Dur4lSdMkv+gjc1XPH/77Lu+n8at44ent7JQij\r\nrXcoj3yW2UwRJqocZPW+KvhscF0BgrOJEHt3An5zX+qEZ3f/P8mCczlCcyda\r\n955HBxC4nFB6cKYbMJ7q75Nng7RZ33BfOGtKnwReyKsf9lPYxZGiKQigQmv5\r\nsPXVkY1woNmli4ljLFCAVkd+xgwcrxb7lAit8tCVGF3cysD751yo/SDLApt3\r\nYbPu3Ifo3qfm2yik6UCHcuzHXQPRrxzwzDBAoViThTVXl67joTR0Pb1XMUDD\r\n27ttDfXWVN9QLJDxKrZ9D9xbadOEtgTveHQiu/jDLB9yGHqClm751sPF9ZOW\r\nepkpEA+02RL3Z1nWfeX+SCIdPsTAcR2LUuaD1Yx80ovB0LPurjVcUYpU4i8n\r\nyraNeWFKnWm3ba7uOkEb407x6acqzSd1Sjur8+rjfeUfIr6MBLmqaLwAx0la\r\nuv87rkK9Tvn0pl1Fmv5MvNx6/mdNQ6ZKkxoUaHwh0u4rMmAipEFLVUBIqsXP\r\n2jqtnsrtGUJXKuB0E09NpByRQj2LhP/BRv9D2Krrp2R49HN/D5pyOE68iSDE\r\n21XyO4GWI5isssry1WTFw3Iz6MR2Ft0/82Q=\r\n=kXmG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/list":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/menu-surface":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1c8013f4e.0_1678730688841_0.3185221837423404","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/menu","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.112715df5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbd94829ed0f7adb4aca6996ca1b12ce3cda5a9c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.112715df5.0.tgz","fileCount":39,"integrity":"sha512-UDUKoLU+wv/+BuU+AlbzF7XbXMOkFM9giptejoQKViCMs6ZwAv3wrXqLxV+VA5CuWGDsQb9eZiFtszdKDAGPlA==","signatures":[{"sig":"MEYCIQCYo29s4pwNShiYUB5s9sJgGZqF1Xo5fX7aNSZ8XEUSoAIhAIiS4+CuKGvPQ12F3GSGVBCE69tYhh7Kkh+iTA7MUSsE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD25GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrCQ//ViSlV1K+3NXvXKNSITMMtPiHwjGFasgUn4VjrfzCVjLvrfqD\r\nfF+/LfDjWDUnbPBWLqRKT7y41XK4IdKshBo68yYzQGocQOI7rLng1dCmZwoY\r\nkn9Nprxgh5oY6qrQFJk2qXFGHzvsIrOhA/cjs4yeN6G76NMiyaKTAAeW0FXV\r\nBVfVGaOitfazS6G2mxgVTgY4lfTK6tm3aMWRZqjMBJA6OLsrpva8nR6JYRGC\r\nJKStvOPeEsJ5CNHjigoWCp+cTXnJtdsWwJcfaRU7hwtvHzwuYQItAl8+l46G\r\nWdTZe1w5Rsmi0/i+K0PxBm39SqnX2vLE4VLJ7ofd3tdGAinRo6aCAeLakGJe\r\nnX7FuDAX9jFuCQ1XP4yQq75lbqn2CRCO2zkSRyVeyhviJ/oHjoiPIm44ggVK\r\nqQ9iE2Ca87B3IT7e11MZy9mgjGsQSMIN+ntAYjJXlubwPYPFlcD4hI0btC7E\r\ny+WvqeWG2YcEi2ivicDu32o5xSDKb6uKpOWnEe3CtSuA+0TUZ0qKJyAFs+9T\r\nhUUCDniSLAVyWYV1PD2aac3BQZ2EHDCMhlaWL4/ODZ+Vc5y9OzoQxRb04p1h\r\ngghZATPN6PN4orxlDPrYdvxBh2wlWIy/vprfcCRWPWQFLO0SNB4MA34wZJ3v\r\nHFL4SGpCaLbY2qD4oAbOKgqWrYxIvm/onf0=\r\n=Za9q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/list":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/menu-surface":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.112715df5.0_1678732870106_0.7845190955760319","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/menu","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d250911f2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee8233cb0cd7afedf117985f2ed977a9a51372ec","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d250911f2.0.tgz","fileCount":39,"integrity":"sha512-z/QL68S1kzDeE1tHkTFwnMG5fsu2XHCk8ChKU/9XL83zDImQZEwIZXo3UIIvPPgOLHs/D4avmygChXrwswtL0w==","signatures":[{"sig":"MEYCIQCEzPZCouJWVWU5iRD9NuIb6eOhNhEq0Yu/SfTzXZ1LfgIhALnKCSrO9w6xIqoK1+a5Ut1OYmNcvqN+gJqzATUkYRB9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3qJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/cw//dbsVB7mgSRJN5IXMOwkUdi7v8w0+OKEDtiZmam+9DUC5k5Xb\r\nhm3NGaM2p07S7yvMkeNSUPziHZI4Cx8Ocn5UR1ArWIRuqUMH5pmTtw/HLZra\r\na2aHxfjNVJrDC3QfYa7NzSUKNC+ElSlVl4hEjqmDGYI17KVJ6MnEJj6kcQkO\r\nANXvdoEiuldmqaEyo75mzqdsSt5+uVcCSDoBsydoWTGEVJOeIw8X3T1oiaEV\r\n3cXm5jrF1gBcD2564a5QctrrYqW27r8zzvPNEcwWUSNeEPiQxMlXoWfoOvUD\r\nOrRBVmweIBzZCL3LKt9cJafB1klJ9P1NALmvjBJCCoqx0WWfATHLpOTqlKke\r\n2Jsm4nO0vlXasLch2ph6XgnyKjdDpj2f+0AW6wHDxXjkey4KfrbbkIke70zo\r\nCelwDJN9qOvlM5mBeaF5x5M7I6VGKB+k49EkeI6+eL4c5+DVQpP2AQrWXzL+\r\n32jQrXe8+/phB4gqybQIndudrO+Rc/sZhRerK62uP30+RVjru+96bNLS8iV6\r\n8PwpEXjS9e/k2j4zTvejf8rHf176reZ021swmwvcQhfmDPDRFOi3OR4CxeQ7\r\nYqNni7oNJppD0AwEwTAopZ8HA5jeoGSf2NAtRWz6pdMq/hgxDaCF1lYZyVUs\r\nXjcOPuyGoau2I6/1zY5ESez2KTzpBj+3zCE=\r\n=RZml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/list":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/menu-surface":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d250911f2.0_1678736009662_0.2698124551897161","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/menu","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7cd925c12.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb3b0eecf80a8239968c0b951f1caf3a6aa32a2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7cd925c12.0.tgz","fileCount":39,"integrity":"sha512-UhkMBSJzP36qkKWrObqABjOfZE15M6bYnpZiGQ2nVw6K+gRU/o+D3KKJN7LlaE4Skbp8SQKdmn4w23JTXdZ6Dw==","signatures":[{"sig":"MEUCIQD0vTjWmza2dm2ruggl+dDmRvw5izYd72O4v2pt7UHK6QIgTMF/Hsl+bzGYzIbfozXyi5ifXUFBRZdCqwnU6Cbhx1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3xPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/LQ//ZivaKi0MaDVwBvncK3rMYgRHW0ayCkjF5eHqyCqHRv9WzqK+\r\nbmfvyrFR4xSHXt1RZ8Za7IJUdUwH7TXcZ+TnjXXPlIv+dn47WqTJbTrLTWqU\r\ndqBp1rmQlxu7z5jLbnOUAv9gt3MrODqHu0w4CF3ls9QunJLVhrzIrRTViRdg\r\nedEd0pVazOA5cW0XtbKZ2j8rH/W1da0QqWedS5Mo79pV15qzVwTYzL/BIZQI\r\n1Vsbx+XELolDc7Qwk/j1kqxiAXyN/Ux9h4OQOzNCgx7wa7tVhlyCEbtDuJ65\r\nW0ODRzdIphmkG80NTHw5yEbWd/zolYyAdgC7faci9aZjvEuWqdcAcxjgNCXa\r\nKvutnLahBmcpMmrXTCCg8qN9/i5P3RCuUvnFbgWL0yU+YfRByQB7oq3Z+JCM\r\nYyYoouOS4V8YxmZtVXG0qH/hZDC18YwOf0igkVjSV8ykGhdgnuwY406q0vYB\r\nwGbiDSG7wBahxlMUPZYVOkpMr/NVvnUJa+7wyafCbt9+u2YGJa1zVCdpTFpm\r\nBmO7riu+ADveqVNKMxG7TZJUbZ3RNqd9TyABzdOsqxlvZOv+Qcs/CG45S1jj\r\nrhzSE42ZYylA2mrvYxOdsOTpIwthhRDfa7m3CYSU/QI5czrnGwTc8E8HtkpZ\r\ngbSwYnAUMNLW3R7K7zrR18baV75MNKUfZiE=\r\n=r/nQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/list":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/menu-surface":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7cd925c12.0_1678736463198_0.08558339752713895","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/menu","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b2ddacf73.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936d20609001f5273c961167b1b638cc0f149db7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b2ddacf73.0.tgz","fileCount":39,"integrity":"sha512-JOD6ynMtULPho8rlfVAO1M3LDfBDZyCJk/u8IQFlq2abBSBFjF9JV6l8YHzOW8i5vjcw+h+navMuD0zBD5zXUA==","signatures":[{"sig":"MEUCIQCVO/Ws6i1cFMRWXjx0mcRk9JDWFT4e67/4NkHnCwTDQAIgdICJOb/cBRvW7+bwSP4ZagzUVwq9OKydidyXv+ROnh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD31JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre4RAAlKYv3ZxIpFAnaDrsl4HF83EPLOkNrRJLNYnB248CAiOJDNaX\r\nNYngNUd7JXHaUgMl+7/tRAhNQ3j4YWGYavww7bLh7/3o79PgSjWDfnB5Dmhv\r\nVpoalaHU/YTnqEx2DJ8NIEtOrVtVINU3UkCRO1E125tf9q/z3CCdgvVMHH+V\r\nKvbj3fzMQO83pkz2PVvu7fD48qJxfF2fr6AYI07wMBP3ec1nCSDEdXLHm2XA\r\nAe5g7vX3V3TS7z0dcjgdSqdWX0cPhnFcWUPj86ur8AU9qAofKUiuGfnOUFZV\r\n7JZLmGokiAFbrigDZDYHjFNoV6bJYx6o900HtK7QPYOPo7Mm8meAnIoN2JeR\r\ng2nGK3jmdYcWIa1sTFY8ykqODrOsg1Hztf4JV9o/KOMOMZfN/+oh8LfOaIcG\r\nlf1ws6K1Wyc57DS3xR2p0YpKooYXqvj+dn/Egt6h06Dk8icnQe0h1RIJxElq\r\nQ31rEeaKn+8w3lpLvfwqE9S1id15w5xujcTn3IsHYFGWCjQ/xCVC1jZ9QYLj\r\nG+U2tpU+lMV8PZ/TKos50QcB4kdJpN/3n6r3EBXGjBdek9XzX/e7hWIdqT95\r\n+CmVIq4TqKb1OTlehQ+CvgJ2ynWiuO+J59ayUqEY7UGtlzLsM+nDgv0FMD51\r\nFiEHRuByW0mZl8CwtcXQWxU6PlTsvfPz9cQ=\r\n=fBkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/list":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/menu-surface":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b2ddacf73.0_1678736712967_0.7511520931277802","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/menu","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.989ae2ecc.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b0f42c6281a56a31f27b673cdb25c7bae6416ce","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.989ae2ecc.0.tgz","fileCount":39,"integrity":"sha512-ZPUaT3ohwzTNi3s8lc2dy48f+pcPGj0iENaDs/lwTcp3+3I4rxoDcaX1tk20y6zY8Uqn3vniZdqyBBBbYhtVvw==","signatures":[{"sig":"MEQCIAJ8gI/GTGTwEGb47asaghm3o6ElxtxprKs7jnh+xgBFAiBGBg5nmsZFMOvrVd4UQE0buVQdzy9CxIOO5ou3BNzXPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3+IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqZBAAosao0uZWuynN2iip5NxldOFFZ3mOnjCNkC6vRYcbzY4GD1zq\r\nlNrHiQHRi6WsByDNLMLMX+vkCwORh6+aPXBLvPRmRJKE5wfzkNQ0Trcuc2c5\r\nB3MzkXxJEjgQYpp9AA8XnkLP8GxNfi0r0D1vnbTJBW8/ahhdmJwKmkxltbdG\r\noi5YZqE1t7fwVTlLUPCqZm+QoH4GrZCZo+38ySMaGW/czuCLmoDE5PhL0H6q\r\njKj2fT5/JbK83O4EZuJVgbgjAoKhBku3/DoHEGMLKaGaas8+0KNf3z4ZQ4d4\r\nPTAfjKfpG/5MozTsq0qox/EYHxX8Ffaw+TYKTHxj96rtTE6npuM3KdyygTUD\r\nYrU3QgHfSCGBDrnatMwpecjTkkEzDH1HMJ2A/HOSumn6Kl29wSflTai9672v\r\nSf4y024xtIg/dM8TBD8p3WHVcHudlOnnZzkPvxGhlOHQG77MlOpxshUUx5th\r\neH7TsKlPTqrYPwTyWVHa2XV4HkyzzOW2PsMxRyBn3ren4R5uyOD+Y/TvUuA7\r\nY21+WB2TW39t2N6Xolc9IL/BHj228+KqipsdU9ONB2hvV6ZTt5O95eECX9oH\r\n2kUDhHN/jmXjfl2+GshG5N96CMxT4V3YIK90rUwFQDJ8DgNw656zF/CbszQ4\r\nIA2yhLXcz7EoJMr0rcclS3yFzxHQrv/ri7Q=\r\n=Krzs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/list":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/menu-surface":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.989ae2ecc.0_1678737288643_0.6201766868724801","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/menu","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.89c66483a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de383c1557357cf2453d8164ad72aa76fc7244d2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.89c66483a.0.tgz","fileCount":39,"integrity":"sha512-qgjOBxE9cVRqhkt58gcdRGVbiKw3Wf65CYvfHwEqtoDbo/vQgVPNk6IHJ5Za46dv7W5dGGt4f429dN4BEaFKzQ==","signatures":[{"sig":"MEUCIBhiC19NcGhY4gFVirsz+cK4RbEIt1e8wwHO6B0hyacsAiEAsjOW647A7SDd7ATmLOmwuR4LDzWqsf6I8vjGOjqDNYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4UGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyCA//bf9izGsjbCJPq8ejScSycVJNR2IEh/dtLPhnC/ev/aEHCfnb\r\neXJbGcbFQXeQ1rCkTnkUR2CfUmT6fFnyUe/5s2knsQttZNfc5t4dHOUHAW6q\r\nILBmX90XuWIzxEKjEqBHMm3kxx6FnhPHkGnUj9vz9OfRzN2NDmSaF8TH+ypD\r\ne0MIxkacGV/i3UFnSFLQiLzOyLsb25wWsRQos+yq7IO0EETnFG5TOc11uGlH\r\nMdh+3ZfZ9+6tewAPzZ1YDHg2GlOhHstKQG7igWOShqI9J4tqx0Zg4g2a3tYz\r\nEkFv/mRv2chFpmRz2dU/E2TebqYtTLj1vIj6DAAQRwQJkdkDF62bUHxUvpvc\r\n1nep7DHMwUQEBiLfReLQm7A+4Nb6JhKtcNOYkDvUBWBK3YXs5IEY5GhfBLPI\r\nInfmbTj8qgJwR0P4v1xn8XLKC5il/ApfCcP34bvpW/bnnXWEfpTbcTF2cNMI\r\nf39ukZS3UOFA+lAa9BmgZq4vz82YGc4UKEmO2eZ4m0ffyZg4hII8T9+Tzyzs\r\nwz9VTs18Pl1mEcVfH5pYKkFbfPGxmMpNRis5Ae91lBg4bTO+qifUOiUjQ4hy\r\nUMJXSaUCa/auO+K8xMmhFw4crqoC9MBBaTY6AA00t6C6mY4hzTMKndJAU9At\r\neuKFwuRzy1XNdJuHN9xs93WqgNDRoA3FFNU=\r\n=/r+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/list":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/menu-surface":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.89c66483a.0_1678738693821_0.9276277683760668","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/menu","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6a85742c2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9425ac7b8755ea2c5cf703c0ba8b444f446e18ed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6a85742c2.0.tgz","fileCount":39,"integrity":"sha512-M/2ODr6Ujvzl+M0u/nPkefeb85TDTIQ7zVsZrnqmFNkgGGdf9i2CHPHWn1OR0rlNym/vYE9JJvnAcmaJgzDdOg==","signatures":[{"sig":"MEYCIQD5bMVGNtOKFOdD8BoAU5yRQ+yD8xuHI2C7oTLStWY0SwIhAO3P4sEnPAMgDV6XQHUPdaaPxVMADUqurJEMJvlbovoH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+ClACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkYw//ZMMsaZflHhooDHi9AHoULTPYQp4Lh8mGOcnHusc13mmeYosy\r\nbV9smJT7OhkXr6/hpALEWK73ddbJfAMauho/QIt1WKTs94q45gUx/hdrbkGd\r\nAa4og4TK54sNDqlOxDBHhkwiOKBDE5VIKVgZOI6kr9sSrW+EoPXwsxlH/6vZ\r\n7fyEfYYWOuyoG5qjB68PVOKD8dvhikac35GWWr6TbCq2ZZ+H5QTt4AJqQKYJ\r\nVHQEOriYamRT2n6NzCmg53aWgAuUYT7kxUIFkcAG3FFSZyFvgq30Gv8av9iL\r\nrcqkf5dMIQeUYNMOHgECDv6hWyGPtaQcVydkqkguMPeMuZlVNtBptpL8sWDy\r\nfpe9rrqSVrL4dHu2D5tffER1wZquHomLf4ki9G1kpNCSZlKUCbJg6XgqpBu/\r\nxezwv2NVBKjOC02jPMMUc04MYSwux9Vc9nILnN3o8ggo50xLn5FRBDnKtxcw\r\naZojF/COVsx6o3r7ut0z2X8PYrWjM5t+TVHwOtmEc8DnBXUVEZ+v1jGPcX7K\r\nzBBCSLlS+z77kBoZjwWMlCDAZ/YImRupgOXIeZ5ONVyEW9VLl1YxPYOPk+fL\r\nj4pwVbQClcCRKsVV3BLtZfUefH81H0Lboq3gYAm5CAoMJH7kqSWA6Apo70kq\r\nUP6Ig694jlYTZIYW1FCJ40+p98xwmHAzIzg=\r\n=JM9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/list":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/menu-surface":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6a85742c2.0_1678762149275_0.28453943214034405","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/menu","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bb6cd78d5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9109654e75b6ea468b455bbd4d24cb8184733f2b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":39,"integrity":"sha512-0+3owuzTYkPtW67PfjZ0avJtKhjayLEcSMOJdOLn1HDwnmNZreNUCxYkFHGMILKp8WMbRZZ3xQWiAafgskxY7w==","signatures":[{"sig":"MEUCIQCLUC505DEUJeaRpO0dg5KFZJ4y1dx0kpifcZBCni4yeAIgcxuXd2kC1GvuIdaOC9QLDn4vbkeKr1KNjO2VqCMb93A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD3BAAiJ8TPmn4nG0qYZ33Lf5ZAl0vEycIVbtvGILr51ekngSdwBEG\r\nbUYRlz57A2JUR9gMWydYYnyPjJpqG1TH1YcRqSWoHERoBQUS/wfpbE0a1Jz1\r\ntu7603CTaQHJX6xgeOx26/p3z+08RZoM4bFhiH6mpR5ZWo3cYgrMldKy2gds\r\nfpXj0x22GQrqasfWEfJj4sEc22Hf3K8EAjgLD9Lm3vNHURTn13C3ZiVwl5hE\r\nPTJkPzOiZAy84iHS5kFLij/RC78khNxh8o8ggpm7tnpnLjGNhdTGW+2ECPF0\r\n8idNV3DJt0GU6b7cQVWDkF6uOAi2Q4iW2HIWNLR6u8nZz5HG+MCZo9XoUfmm\r\n2ZN/H+Mg3yNf7Mr6sv271ls/291WxLS5LczESxF1GE1UYzmYWVz25K/YfoYA\r\nk9hLgr/yFgeLmSo14jR9/lVvsmTwvjLwp/tfeH/PavqAfOTQDyUs/0f5KcBj\r\nrGUX23sqppt1fGBm+J6PT1PhY6WwpXRgp6MSH79D3+OnKpU5YTu5g3cClIQS\r\nBLFH7BlXeZtxGK5OWYSYWi8UvMLwb9v6O6dunwYjfZUrZKIsrY8dNX+6vFrW\r\nRhWq/yYZEjYsTorGFC0IleW8pcAN2oft6onujwMxET0SHRzRw6z8KWlXIYd0\r\nY+UJKMDQe2EDw4C+nAB9SNK+hN9uoCoNEp4=\r\n=dEGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/list":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/menu-surface":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bb6cd78d5.0_1678817925237_0.4563099621301834","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/menu","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5f94aa37d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b56c2102537eb4506d8fc6d2b145e3ff6322a2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5f94aa37d.0.tgz","fileCount":39,"integrity":"sha512-sihCqJvBMcHwstRuviE37kBRGRokDtfn0QUaCvzAD4h1P9F2OjYDO7xA6dPuv0xHAuBXvre9RPrjlxm+uHDKWQ==","signatures":[{"sig":"MEUCICRK5fTLK9RhPwm+ALA45i9J/duFsxd5C0Gz6DVYnnrbAiEA1/PLmfBtOBmwj//zpAseOhRKOI2MIEJD73qdBnTFCCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELtFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8tRAAgP++/MdHdf5r5PwmOMOyFGqWfgqbV8oJM5pmHEuraHsJO/pP\r\nznI8X2cpy8p5G9ueJw8AIjCPm0AFEkBSdOfaGP6MPJ92zXSedSJwznw8mGs3\r\nXPh30FpogBfOFVM+7nMnOSbkXfMKzwlGZd9p8PuHXFnB8rkIoVZ2XxpJDlKu\r\noHX27uwgTYQzUgAfDrU19dyvODFzX6Z0ruGGjvY/5R09e2jHMFJiQmIUo6fh\r\nwRQ+L/PXpAnPOaQxZ/+AC+c18pG7izSw/ufP/8sYMdTFdXugeK3NUZT/A+GU\r\nPyKDMRRcDcNtw/iShoiZH/zomug6qKwx2FRZWUF21mGjVBU133/rjkFFFkm4\r\nZyH68yKyHusS9tB10jW17wKdeQv1bD629XsYyqu/+fg5gIKap/QxeDvFnYbN\r\nRY0e0nUhtdo8Xa7PKXkq2JGqHIMO0t2uuJRhhYcgtt6S1sqJh2Hxb3S/LvNw\r\nvSm2gA/c3lWrKWqhssk0ZsJnfHP57W3aXBnAyFmPQgKZbg/9nWR/GoEYQ2D0\r\nWR4ysedBuAuNOA6uqomZ1V7JbNbcVmuzXGIWh7dGLc0XaXegcjcveA5Wr1Uj\r\nuIsN2EqSPU4G/0AYiQQne4v5F5Sg/fTjvS62ACMidTIjtDd4cic516LDxRai\r\nYpMkXjgZbDlB2H6aAL8hQBsnS4UsSBvVfPY=\r\n=twiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/list":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/menu-surface":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5f94aa37d.0_1678818117679_0.8911124799532262","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/menu","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1bd317240.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8635cf6609c36a5e3b44fde52d3fcda066acb97","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1bd317240.0.tgz","fileCount":39,"integrity":"sha512-sTCmqyhPrN3Pi2B4sJyYHXMVPmMkciPEw+y7XRhtrfigGN6o0hW9m9UNJAls4+2ViNhcDphODHoc7HZbudAfMQ==","signatures":[{"sig":"MEQCIGFXWGzi94TFCVOcOjdFtAqtiVpKikwby3eyvA/0n5O5AiADMrY/JlE33o6p2qAa4ub/Tu08/RjHmYGGT1Y/TD8HLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYXxAAoTUhekjDH3I7Mh7uWW5yLDV0rID6+k5blEs/KkUU+rxlu2Z4\r\nV8LYSJW5aivnL1iYX4NV6MkiDv1l/R98UXZRymBhYzJKiH0ION5JdRdk1gkJ\r\nKhLvAID6Aj4XJLvJlqNs9EuTtsiAOqQ4CuoeflsXUZYZ1WnN4NJEPS/5GiyE\r\nOQCTwb+fsM3l/IdfIE2o1BXBkXrkk0Qh/HssgF0Wp+RCNh95QYQVitGbASGR\r\ntw4ez9TcLvOii6fUWfs/EFBg12TzAvNbk7gTUOr8dlYUpmwF/+IjiVq8DRZI\r\nzeyt+6IT052i/ubvpQszlMeXxNdYI/4tkzTLNo0pdRvW+VuGo1JP+nLXCY5Z\r\noILcaB28ZJkVyRUFggNNlvu2rWqpJ6o1liH1sXGdgipBJwZfVb9r+fSkqF4x\r\nWl4fco7lre/kLuAIY8QLhnmVdeUjWoRJ4OCa9Hc5TRPAZaUoae6gECqvwFgU\r\nSw1FK+Vv/VNo2W/K422yMWZUSmoWXd1q4bQhgCyPCbR6X5MyeEWbRh3e1XLX\r\nxSMcbqNGVKHs2PVKzSAQd3Jk3RIoJh8QPRX08tPkVZ/ebaJtWdHj3UxvVnAq\r\nmWLKX0T024UkF+RA3TSbLhGJTt/hxLpDglyWzZK05tUcSchSZh3hWCLGUlph\r\nt11S+qEu0H7mGiXYZJuG1TSMplIjqeZ/hQs=\r\n=0JtZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/list":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/menu-surface":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1bd317240.0_1678818353751_0.4590576015758563","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/menu","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d441d2a2a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86548193442662ef73980219a4325112406517b6","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d441d2a2a.0.tgz","fileCount":39,"integrity":"sha512-6pknPKSO90CX7OkIsn6fo95DPg2+6AKV9XMmqcqdKEiJ0v3RftMewt2fWSK/kEkTq2YHYPX/UoEbfnUcez2oyA==","signatures":[{"sig":"MEYCIQDK4ke5HJ2xO/WG771s8p2iMdvnxHNHiOa8k0XWMJ4AXAIhAM9/+Z8F6zRe3E/8V6sH5Sl9cok3/A0gLd/cg7ULmWrU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAEQ//UPUtAoiFEDWDeSGVjDkR6GjvYXKuQlM7JUx4Ir4+2a4w4mCj\r\n2IV7HLQYh4bE8VgFyDOqRtZDm1WLBIG3NIBKsCKiy6LlZNyfSjq+odB9auxE\r\nG8rl98+g4ghuho2A0yDApkISkm8odN8kr8HPCtqvfy1v1JpJtApLySTNaUmm\r\nfM6R6M4GnXGhrCBcqZ2xjm34CVvTv4ZQ0k51u3xlh+Lluk6rqtK+pStYsUML\r\nO2RuoLhENv9pzERB53HMfIbFljeG8lNM2tt0uBzyMGrqyj7KlvxpfbYCWwpQ\r\nAyOayglE6YC1NcX0nsvdv75cY9/QwT1xJxRcrtCw3Nnd8hXUU3yU1fXf5ww2\r\nLnMNSpyaiCEHgNwKN9Aje4n6UhQtiEr7dUBuQuxTx+b6p/4DkMIytLItd33l\r\nFBp2pSGXVBdq5kKGbDx7t1Dns7a9O+z1RosX33HZhU6LZq0Nj6Bm0zZSGFFJ\r\nuE5e01fPLXgof80kyJREquX+fQqeJTIes6IhSbr1FSzeYb5AdJwGDDHQFHmj\r\nAwAOAejDT3h1GDhfPKOchI09Mb0JzY6jLJ4FPt6KUl+53GLV2fyQwbBWHca6\r\n8/f9Pn3VbIyDxh1QrlZxdGpZYP/r4WpH5sEmluM1zOCqfQmNWVxBfHPdYlx6\r\nl2Est+DAGx2v3qV+jBJUd17H2Re8dp2gVb8=\r\n=YyfQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/list":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/menu-surface":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d441d2a2a.0_1678818517349_0.3243417320711446","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/menu","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.fff4066c6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8131d869c18f2e5ce5cc9b1ae6423586944c613f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.fff4066c6.0.tgz","fileCount":39,"integrity":"sha512-/zRmp1ZMoS7jugiZTywqf7vtToPS/peTNiSggpbkzMgDeCNgOSkiDQPFVK49Z1kNWdRFZNZIk9K3Y2i/rVijZQ==","signatures":[{"sig":"MEUCIQDr5sTHjBvU+arTowoENqeqOF8jpaK/0OigGtadPhkGyQIgFx4tI8PS5xDWANFezeRm+4V7VTO0oJwh5MpFJJglghQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELz+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr39g//dxh4qESqh89l4sus5/XvqlLMAqQ+XOufgIhIwT3GSeWJkNEx\r\n2Dc509dutaeRDLroMuwq1uoF8jUifbCAQHs1Bkfzp6Za5teXJ3DwoyhZ5ufJ\r\nEwOAvJt2dmHp21by5diiwDfV7NOgLboomz328T74YOUTIHq6mM2PGOcuzlIw\r\newLZFGzSx7Esq18IEwxuI3JcRxsrREO+cmsjiTN2PA261OD123oqpEiNGgL3\r\nCBgQoNJJGmjVHcagFn04pcQzCf7ajQFNpjSgeJBEfMwP2TBJcoURMbHbVrTe\r\nGhm5PO1Cm037C4cHGGidyX3iAV2o0V5odglQ7LZL77+c3f7J9v6DaGj7Kt1y\r\nV/WEQt/7Y8M63wa0Tfo9lh75tk/6aYNbmYmYVnPXNoAIUB571YQxCKNZQ4qL\r\nh/iYAmCAgy8RUgWxweEVbZniS8aS+v0zQPzwts7UaeEC6r4A+hfrQAea+BjI\r\n2rRSe4SAwv8CICgKAD/LQ7pJaHs7gKtMbIePy7zgXUBVMy0Nv9mRom9ZaG+m\r\nqvAPzWBMwuLUNjNUi0sqUuRfoIWhlLyFw9TjnnNnWFHEJab1Y/tENSJM+eiH\r\nDxf8FhZWL+3yr5k4QsE7ZRDcI50MZqhbAkxpi4UDrwhlZHiT7FId3CmfW0gt\r\nrQyTWjXeX7jujV7Wu1PzNdRjolYMfucVOvg=\r\n=REns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/list":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/menu-surface":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.fff4066c6.0_1678818557878_0.09159258243399115","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/menu","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.87809c710.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a09953ba4156f8446a2c3ba38fb728c7c14bd214","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.87809c710.0.tgz","fileCount":39,"integrity":"sha512-/HQY874CYSVssF456MFxBoYXklbyDBwQz7Lwxf/zigjPrAqEMyUUk6N+51k2Lq5MFUydskqyVE2zrgaLNNeZXw==","signatures":[{"sig":"MEYCIQCUntstX0sXydPAa9pPsBKUWDIwOIPN1RGnFIdJkNPsPwIhAPhfVUJvdVmE5zX1gsBAvQXJts1ADcVTek9abxI6By35","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1YA//Q+mHDxnM+o8ZlfO6zP5NMgnr5Jbf6/bbyTwU7beW5KxNoiCV\r\nsmU7QjLGc/oS+MBW1k6Hu42XOhrooOwhp3vFN5cFNeNM25HyrTmM+KdvVfPR\r\ntn/7Pxj/eFRvEaxn+gJluPz+D6U2X8YH10bYL7O2oTPmyqZlzaiNft6yDy7B\r\nlExQQt49WGwaN7NaWnvi54MPo1uVsFapuWw777Ip2qi6KgKKMQMW1zteo3P4\r\nrk+43nE8FBONXl3JKon+QYi3r/F5+JEDfI7q/vC18fMQk6jnjyxQ6OgPE5d4\r\nlFEJbzIAaOLi4xZr3MLJYv0TkKn8HDCnLHU+8b+XgMZoKYDfOKuK8u4zAmHz\r\nMgxVrPjUmAv6c/EGW/Y4Nucl48g0UqDabuDWD+BsdrHV8p03Yx1ebhd+jn8w\r\njb+mFrfVJvyDM/5W3B5r30nNLUUZdByqguk57zMRHJ6FxsBJRmX5Y1LY5A7P\r\nBMXn6dl/gdM4vfGpuFWHvH7QDBWjeEtn0rXHpjDXKuPSSTTdfBe6ZXgBlBzK\r\nJZVoQdjredEALDM55J5vjyHwgtoETcKqePIywl3cio0R2EDTIroC95ePCiy0\r\nZ0v1Uhs3eeu85sDfsxwaS6DDEbRWkh+r0Hsyq2It6zeL6x9skEKiqt/ZZJ35\r\niwK+jLlvwULkNW4PyNbEAWqURlllp3fz/qo=\r\n=j4P2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/list":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/menu-surface":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.87809c710.0_1678819515107_0.4938149021491183","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/menu","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.48d30012d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2d236fc31250077c7ee7c8e466b4feb6707cdc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.48d30012d.0.tgz","fileCount":39,"integrity":"sha512-waTtOuacrkWeIrVAKBRrGxluPV159Ohc7oHLUstbPZLJXwKTmzmdy4Jo9z3VIyjOufa312L0uHAlNGI57ftgyg==","signatures":[{"sig":"MEUCIQDr1U/EcWKXBUEIy4V5E7r3l8d0EncxB8ejxuORHjjtowIgGyCCoGERcSAJWOlas6QL7xtEpBDsB4RZybq1L1u3wBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMG+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroVBAApCuM7HsZTQ612/fGxX3f0yztbT7cyY4zVdTC1SYp2+5MYRT+\r\nzAR9IsWllaScmi23NfcUV3UhJaGLBAEkNAYVcQRKq23Zqc6VzxZfTe/Yb4IR\r\nAv7D9Gm4PBgrDjzQQw/bolXmykkzCFVNXZxe30UCZaRGmXy6jrPI6KmMEUQ8\r\nvybapZ86RLuz8qYRx+nxJi1dkDfCVHu3ePW1y01n9jPMyvKIHjukF5Ty31Ru\r\nz41oCRLaJb3f/pDwcW+NZ+aPUA/tZdFIU7LAe3xExvK5dNsVAC+AyWZH9Wmg\r\nHfbaqmEHcSTYmgS2DLkl+l8azmXdbHIM1v/ir9lDLUd0PegFstXw3CmTkiED\r\nOD1b1XXKBJABrGNIrEhi7knegZJ7/C3FNT8Kv07z9mKMVY/8kSCok4fzFc7j\r\nT74tU/Zc9hqFRQrevDtYwv5GHT95WVjdz6itJhZbFR7ppP8cYrRbAii+/IVZ\r\nOdLJmFC+VzBUFuekD5lHFBfdkQ6xg6DaevyXY8rSY3wlpBwQX4hdl0ZEUxH3\r\nOcrlbY3NEo9mFCOVsFH7imyv92H5Lo3/vXyDwiaxAVXPOJ2QygLBUbCQNYQn\r\n7Jp9RSLzklnTM89gthOmCENo4wKSnz/tsMC2M0lMwR6+X1DQeksY0in11yrR\r\nCCBCZdFJdlVM9AiREytaaew8bMSAuUbA1NE=\r\n=bZ0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/list":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/menu-surface":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.48d30012d.0_1678819774297_0.8627476282327813","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/menu","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.419b23cc6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a56b2e99e357050b81f0ff32866bb146224fab","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.419b23cc6.0.tgz","fileCount":39,"integrity":"sha512-w3mVqO0MdfDiarIdcbblTbnwSPyK7KYa7D7qwFewL5Ns0ihMEAKHg1Zjy/m8vIDQIHz3L3wFoW6VKKj1389/Xg==","signatures":[{"sig":"MEUCIQDNzMvDrj0NyH73apf27PlAWM4FFKojTJhGybiMIJIoNgIgAPTQ/15+1q2TlS1ncSRilpSKbHY6yWgtWBLwZWsr0ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKdRAAnI2lFcHRYYK7jNaMDVfXfTyAjYd3vL3qKBvLUozJjcMRkE05\r\nDtMb1tNYFetUEdmBzlWcygMlJff+Qow+eDyIdY4v97QVqxGGYPVjBXBhsnPv\r\nCF7Dv6vSvBx6sP65or76hlZXmGVuhLUR6InwoOT3JmYxt4ZHhZnqrAxjFBOk\r\nnXwXZQJmKkZTg8LLBvUvPBuF9WjUlntqU6bO4kZgum3q33gNvmYMXl/Abqor\r\nks73Ln9voZdhfeEYXkZKgFwTmyDMegOb/pKwz2pzhtqBCxOcZCAAt+LcXTe0\r\njAlA8mxH0U8VLcKw2Bw9w6JCU7QGgo8QX/RNKZWMrAppwRLdM7Dv675+i3mv\r\nmQe1FSBsE+lFHLCRtt56jgGCXhYQl8t+MkE4yIP15YRxwCQM+p3Q2+0mFizm\r\njOINzq1A7IbB/kadkFf3KhcBXf9d4SLb8VcxI0MrlneXeNYQc0b11z4vvhoU\r\ndEevpkmjxE+g27KnxX98KjSZRZp0J9mkT6LzYMN9tfE/optiq53+9fgmn81p\r\nIAzH1+xfQpW31iCGxFNRT2QqXSaDhT0Vo6Ykzddoa+sTbNwPmJt2KxUFha5H\r\nBGVmubh8q2MF8Xx4T0a3/eTcnKnpgXLUzUjqw+7Dd2tfGGXBukXrvg9A5cOu\r\nkGfsD6uGeOfn05cNZtvE6W5LlnVBGLU65dM=\r\n=t1Dh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/list":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/menu-surface":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.419b23cc6.0_1678820439070_0.7200049035195266","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/menu","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bf86521f4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bba92988b5ea97c7ac6e7c43ea1e58a378d61e0f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bf86521f4.0.tgz","fileCount":39,"integrity":"sha512-77JTv6waj8gFIJwogh3XE1n2MvOM6cYZ3UzDHt/k267R8bk8MypG4syX7xCukyqbu0ofLIack6BaICLOb9Dw3A==","signatures":[{"sig":"MEUCIFpuO31lmEhQlQsNCyd0NqiR/UwRBUPgpLjVyW5xh1ZeAiEAxcYDZ7RBupzHRkTSI6oWwHfgLKYk+ph5IgdXaDVoB+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQAPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+3Q/+Mm1R/2GhVCZ64GEnsttON6F2NsfOqXfpiOxta8B9uucEmAIZ\r\nZx4j789npsJAooyv7UtQiZ2JutzlrGRD1chulfmOd1zyBwPEkEg4DPHuNX95\r\nWEi6bpFl/6htCE9kjQfDh1HYUiN+8YAWiQ6hCOtvA/EmZ6m0ReomONMiGnJ9\r\nNmynrvWQPle/OtNb7K71WxM1qIXwzuDp622J9MHyqdJytmVm+gVJv2Zc/3wP\r\njUmiFuAUuuqq8O5M8XSiPRhnttKjm8KOUEl5sXZFFsroaAnOF4PwgbKvOZvY\r\nhSnY3sxXzRElHQQ2Gsi1UwGwwZLkvZE+1KafYePpjrRCBC+UqhThtdHFQuAg\r\nyhUUOD631vLCyJ73hIrlBPpLOgAjLJUBN4GQq1fP5oEH6HWA9AZKnTC1febP\r\n/tjnbDSVofFerfEGte07dgJB0TzOJpLL8k5eLZTyzJNoktLv43YJWs/qxLPv\r\nWEcOa6rNZU1pypz+N977WiabeV2tKRTSKWRq9aV/XwCy2scpnL21QTrOGmVx\r\nEBxZxOY2lMpAZHjjWVVwwBoUvzRVWyMGoDQDlZbR70EmzG3jVv3iU6nRyLbl\r\nUjrUdWIHpyRNgTUnpkcMuhMzpQEqKgI2UOrx124MqC8jAkeWVXA5xmfla5F6\r\nADs2WIbaqfzmD/5BtJNSbqleDFyA6K+EWiM=\r\n=kBEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/list":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/menu-surface":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bf86521f4.0_1678835727604_0.5597688900707303","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/menu","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.11f3d280e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ee3b0b38977c56c416f514fb320de43d3d051a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.11f3d280e.0.tgz","fileCount":39,"integrity":"sha512-kFhq//atXY9Yg+nnmCcwdyJwDMEe21+KsIb5wCI77HSaFE1hniGgEuhySMx7fR434RZtyxjMGlxLWrybyJl7PQ==","signatures":[{"sig":"MEUCIE+5iCDxU1QUOTsruymvKz5TpNrAs8GT9LXpwhtTJBiFAiEAsztvAdiB2axcsFuuFoILky8wVmHZA20o5atgE/1fbew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ2SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLhg//Z1knzwjqTG26Ch+jBHd3AdDpjVU9gU5d1PcZnq8Y1pmFsMpb\r\n5CFirN29kyOfKg66f8IiDKi/BrJOrBHCqhCPY3WKj16oSRB7TpaXYqsBHJBO\r\nekF0BQo7riZccrPs1rH+UW9H5tTyIiXkgoGCgU5wCNliNo7ppWuM2+XVpqCK\r\nzGCbHJa2P9HoOI/HYGBpaqCjBkIvMuuu4xxczyZK8k1nqSNfQJl1TXrxvbBB\r\n1+bXGVt9W3GI1bME/hYRibylPpXNY/L/hMjvBxTdOnMRL14WXXKkMtPlnAmp\r\n2yh6Q3cwshUnGk/eLnzlSc3cRCfaOvLxxOYG8OddTsWj7qklngfo2QoJHJtT\r\n0FGbtxOOxDznsniblfNH9+oHEuUzsl1PEi8i9yN0CeQJaUM3pw4XNTVRhsyX\r\n7Flpolqy2O+oadhHBHXr8B+qzfDnySNdAOJaS4eg+zGKlUlbheFLz+HJvbnq\r\njBoIlRty5CaeEn0YU6DKeVHWsJ2G4Rt4Gb7bqMm6sMkmSmJ9ujjHTUY2vERn\r\n846XQdJE6Ky3QzuJPqgREpS6cXXd6Gfun3/BUUNzTqyjIqjvXNl5D7EbYQ5+\r\n9xABSyYFXeszlkx27nH4sOxuHyyRbkC2ER8+Vv/CgYH94vFZZ4CQVD5w/1Vu\r\n7mEc5Fy6rrIxCFdiQD4v4MJliq5RH7GgWg8=\r\n=psEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/list":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/menu-surface":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.11f3d280e.0_1678839186071_0.7993119748818722","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/menu","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b281a409a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fba0c56137c0bf4a8123e524831d7eb67e6070b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b281a409a.0.tgz","fileCount":39,"integrity":"sha512-FyK2duDBqkV52IKCyNDqXQpW8snOoA4QZ6bX5cBfijdLH1tpCfuiA2fwQfguhwO0AOoiqr1F7pqXWobCWNfQ2g==","signatures":[{"sig":"MEUCICcTrWkguYM+scqd2gDo+uteesJwozxl2i3iSxQja5PaAiEAu38PbXwf0kTfw9XFLyUfu4Q3GdaxSeqNFWDIRgL7Tg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdCiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbvQ//QFYFUmzsO43gjU0T2pZF40NYFBbxnQlEve+9MYV9yGrwNDyk\r\nTIZ1XiZ5tfvXJTTAufEia7ZIad2uEqChW0tBitArK70+Ids0DUJ99Vjp+hBv\r\nVR7ANOul7+WwaaJ2CTKQBHybG1kRf7gMWzrgNskhArrD7eJ7dq1Im8lhSCW8\r\n3kjDrfrJJ5G/vkLwtiuGwmLgZUGkChuRFDR8b/7AYRCtWcsTIjIw/OEzuc/c\r\n5Tfr0CL/xUaaaQA+4j/jDtsuqp70at1tswK8zZQX6G3CGFNcO6A8abtJV0n1\r\nGVvicucjAbykG42w7/g9JKM/UxDYMP8wHOexDjoeAZhkzB1GJ8uf5LNQxlvD\r\nimQ0U+48VlOjC67zj75OxSomFekklHLatoKh2+2REMktIG/v6VNEhkwTMZsY\r\nu66qk660RXkqKzbX6v/0euRVPrxi1z7I8/0YO98qLLS4oKMR2JB22Sk/lL1x\r\nbmZJMAfUzc47dgQd/2WEAq+4rZMJg9rBXr84C6+QbJH6jJ5wmfx2YK++QHAa\r\naCbF9BX5+DJMcIppawalFh4qBMn8maoJHTcY50FfMdwbBF7erlZ8AMCTwGse\r\n/T4fFgXVEyifFDg+vbl7/GM33Gcu4cNqRHmUlvnfZ9jyM6XhWtUlutC/5Z1f\r\nRPGsJIDgO0p/NLygmmiF6MA36wofEPWC/iQ=\r\n=/wT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/list":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/menu-surface":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b281a409a.0_1679413410215_0.29275872430160454","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/menu","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.39e473690.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d4851578d082c6a58c280dd9dfb8f92375c524","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.39e473690.0.tgz","fileCount":39,"integrity":"sha512-0jUbctUl5LwlV9kfA/oXvMwuckXMstMHbC9Ik56OC8K7S/k0sePdKOtYvl1/KwgbYE7ByXEn75+fGOtp+EACpg==","signatures":[{"sig":"MEUCICmxbUI7a51WG6kR05B7X1R/dLCCh9MGO+Af26Q5HHO0AiEAvQWh1ozEEzQhHQZ0nZHNqIVho11ftYxQB4pTbczjMJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlnQ//ep/BPQe6x5tb+TFvH9/v526LHow/9U7j9IMjhGlobnvbGaCj\r\n8A2E0f03dg4HnPtE3uLgGJZfvnZDRLFROAbp0G9y3b+7kkOm+GFUVDS3XAu2\r\nT8NYBcHDR8QX+g+o27Nd1V4hOYAkIktV7ocqdjVrCEuy6viJ0NMEdNz1ZFlg\r\n31QIdSr3k5e/MsOjfZT+Qd5/VHv6hX/t1NDccrHTboDsviLTO4O29+QCAJzT\r\ndfgUrDbuqDEbXbtE1flbhs/Lon9y4EjgqyA4AAy6BQ0Uaxhsw6VGozE5v0Q+\r\n74y6/uwb3slsTVA8VBgJzfpCQX2OJQ+0Lpr+JXb6ap2MRd1SV4+1ghodeb6m\r\n3Xm3rkGXbfx14bO+924Ae/Hb1sLfBz/mSNv7HiTs16+RjqGlpRtFRLQUcTx4\r\nF1ULbdjR2ax/LfsGWyuX6TVT1OoWikMdvYndn5iCn56YK47iPKx5nHHVvD+9\r\nFVW4qBq+KZqYkzG+XzPrJb7GEEJWyOph+P2Sw94o/izVOlTbx6thwyQBPx0l\r\nLilgfnZAMjGkqhIcP7TEWoAnscM1vukd7JLNJWuHJ0DFOxUn56DgapIOP4XZ\r\n8Kks1dzBRvtRN7soI7+hlt0KO1KLLWaNO3ZegW+bk1mEjWPxpegLYfQg7rRh\r\n5EpuOSQzb0wm8tpQ4YPbOX257PPxh3pJ0H4=\r\n=39T8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/list":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/menu-surface":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.39e473690.0_1679421201732_0.43252100942106875","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/menu","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cedffb44c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99d7103d655f4be60b84272db6bddbf48d044f21","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cedffb44c.0.tgz","fileCount":39,"integrity":"sha512-U11KNESUD0ipvbEOGSsZPgQWfC0XRgZh9iI2cfOannA1zeGTYVhN8YRgeI2CWQplcnoF38bOGdZl0IUzkFvxKA==","signatures":[{"sig":"MEUCIEJf0EydAzNy1hPrYS0me09Zh0KhqYKU62Uflkm17e3XAiEA6Lx6FaRRaceh40XVy3B6dHBRhntSH/DsiMH400xbedo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfCxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL8hAAoaMLZPHbDlkqhhfZQXTeGnLD4WjuN9nXdvbMoqbpNXehNBt+\r\nnrgB8nMCqSwdJk+uJq562/jncrNT45BYb94UJll8i3Q22HSzlVLzNPt+yL5F\r\ndRb3FyLFKATtEV8H0xg+z/fxJzvDdb29gub6VIwyskCDEQEMNaDGnYK+rb3t\r\nQQlnDENYmPNoa370WI+lCZjdaVtAPFRk68TxH0AtGnYgbjUGcxxMeOfKaZ8V\r\nvYQ8oxzEsSfe5mV+tFkJYR4x+h577ALAM0VrFTtUDdVcyv68u4+f32f9zEDj\r\npW3KK6OLouTL5brn3eb0u4z/zjSwgEOp0ScrGH24e4PagIO6U/56BxRsbh5m\r\n3t9h5KudWBDEd1D8B5CI0nxjxZha3pUb66CgpU1opY3/jeU7SjqN4+kC1vpP\r\nrh1/npPdQipYE6i/0hWM55VbhAxU7B3mkk71lzaF59feQ+Xp5LkvrGJkU/l9\r\nN5NpYraLRxCRqY5tNN5XRSihEOHF6JFM1b6obKRwQfj/uMvDl4WgezRdHwUg\r\n3HqT6+Zz8mosv1dh3cKKu1IW/lgDBohCMq01ch1WfZvRefQLLb62oEGNQJns\r\nfClvUhuP4ViFdhvUrU8rVWbxHo9MMBYxqjefCqziRxqZQ7aUXwSC2ZPp1MI/\r\n/jzyi3/mGmz/sAP/BAka7Zyuy0WQA2+qOMc=\r\n=fhV0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/list":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/menu-surface":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cedffb44c.0_1679421617657_0.7353861041788285","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/menu","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.36a4cba99.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741b80694ffb7e048d5f665fe4f4110d2e00db5e","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.36a4cba99.0.tgz","fileCount":39,"integrity":"sha512-OtLJZRj5/6Xybojhsr+vZGwUBUOIwAggIp5qsk2+P380XpBug3KU4veqdDA1sOQshwOjQ6HZ/4h0TWoIVZkRRg==","signatures":[{"sig":"MEYCIQDGMKpPPKjI5FEO8u+duA12paSqpCRjO+1mNtN6h8DCnAIhANt7P45bADYlv9QU1KpXYn+h4f8g3YAt+xARvsRGTXnm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyk/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroJxAAjTk9sLoQFuLhcMK3+gVng4O72L/kcOGhnqcm/ggmWousTh/Y\r\nIc3FKqyWcFIYBaGnxNPEifIBwsJ8Tu1iOaJAO/isGngYg+aj7UZ2E6n2HI/9\r\nQ6Y6/dSlAhBJGTX2VmTc+g/6RDsmnzVg7Vx8nl5g9xHpeskyNQ3e4aAq+1nT\r\nrwiWEA0pdl1+B0xokpCknwn1dA/Fwe/ruBdwFqMMCOXxKwpp9WQ7N904cNIf\r\nPeW4w+PbLb6je8A1Y5TPA5DlVfZNgrhXr9gldQMjX5x8KjV6WOLEx0rlvXu2\r\nB+cgNW8f6EAq43ggDE8YmV0UuTA5Z8Z2dPFtL78/osXqDCNQ/yaCQ+2MiC6l\r\nryEfDADtDVOJpnK85AFw1OlAfC68H9LR9OHOCP3zBdMzJ7X9UvmEIOBg7Obr\r\n3g27K4g6d8LuacP7sd5zoBHpN/5ma06h1aoowmk+hWKB8qlZKMmuMqWJYibx\r\nTyuiNGRjP6nL3XoPk3JYR6L2rnnfMDQN8d9jbaY+K+pZoN/GwoVmP0SGHTyJ\r\n56pPvg3882ur259/L1D8YjHHzhZ4rD8qxSmZzFB4pyzRgA9atnl6caheHDYd\r\nWWOf7FsMm9HVOC4TZ4bUEU3I9FK5HpyW1lYc4S3KSf0f3s+liVYq52q8ufIa\r\n8XDKaOAH/nGDgkavnaecy3dOJ3ejDFbiw6w=\r\n=0Yc2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/list":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/menu-surface":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.36a4cba99.0_1680025919658_0.4087766519636218","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/menu","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ed7e82ded.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fcbe29c9975466a3f7a25119c5fc44559f273e2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ed7e82ded.0.tgz","fileCount":39,"integrity":"sha512-TixpeeU+VESNZz4g6dGWGmlR1BA1nXB/vh2Q5KfjMDFB+k7ZPEul2Rio/xGBXLBf7S2UkUh07yJv8k3dNf6lwA==","signatures":[{"sig":"MEQCIF6tY1Hb8XvZVQLLMnN7YF8qdBLb5JZULBgj2ZEWU731AiA4rFwVdkkrBC5zkAtHdRORuSUM7FUcZM5iEW9sxersiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquhQ/6AtAlnYxK5HzIxKwsfPwACViv7P2otxAGDdU5KIFW7jUSVyTQ\r\n1y1892BTyCWJCAJeIv6B9MIpVvUwCzlaKAzHS5geq4fYHxzzi0OQTs0XkOQ6\r\n7Pfi51HPVE0eAHbYdipnxYbZ3RcvOGM5hqBeSyyFgCLK5EOO+ReSqNBtHrbV\r\nc53zP3JlvZmfUG9uZvG1OMto9RYxZn2To2KT0lk+9aGflAtxmbqjGI4hXovx\r\nPxqOYUIhuBQPqx4ieAOIgoG2o1rvSkDiZI1ByaL1m0JEGiCUL2bpD7aFX/Sv\r\nOpvGKjoHRx8ZBPuzReqEpfVoxZeTdoDg+U5QbGoJi3rLrmFjdCrmBI/J/u+L\r\nEYs7IaVqSZmmi9Wv3EXqUQZ8xglq1JaLwNIe9EYwW4WEz/SqZ1kBGzP6iAUS\r\nblKOjP3BcRiJnXzOUttU+dtX6BTbCtlXygOLzWw0/4OIGofM8UW7utsxLg89\r\nuMKzo1lhiEmYr0FwPXva6bxHdVm369chqmPEdMzgc0lZUQboesvDBjqAof/s\r\n3fUTb9lE4u3ANE2E2Kz3G6F0G/474Cz++IQySlr1QvPx5zo8s/zxMmS78RNB\r\noUzijhnMJ6NCCdppGReh/Uh1y4W+zNiyd9XbgbUraA/fb2dKkCvxzF23JjlP\r\nUsPxyE0RQGabIXUsK67yMYJMGhNvucTRTLg=\r\n=Th8B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/list":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/menu-surface":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ed7e82ded.0_1680035799755_0.10383603994114488","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/menu","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.55093ee1e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1cb206edc09e9510cca42f1c010505a8fc06a0f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.55093ee1e.0.tgz","fileCount":39,"integrity":"sha512-Xpb7tpscSRq42BNIUVTchqVebNWUeIvo13+lj5OW+Th5G5fwcZB08XNhg84WTtyxWnYH570+21mEExhkQw6O4g==","signatures":[{"sig":"MEQCIE3ZWX0LqOmR/hDk9xpfr4/rccLVvpUp1iOIekRd8NGiAiA3wRcut9TVj731YkrMGn6x0qtLvztu695fFtB30HI0XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIiJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw3Q/9FyREqqA5VapT1qpXa/qe3V9xGJ6PDAnqwOcW/LVtV9v2pXuM\r\nqMclnhlHumMF+3EGANgANxSnMqQ1V9yZKhO1u6Ou0jk8eXkl9HsV0fgxT6Td\r\n7j75bsN/eLARQA20BhxwUWQFfCCBfDOa56H9xQA48AaZnqo25eO0cHoBjCig\r\nC/qk2W3vY9762Tgke4p944trk+/81ZGSKekKNWIcfd41kumStcpEtl333mvZ\r\nDxMs5E/eCwWk7fJaroaZzspzIrMMrjVDlsNQc2mBzPLEwT/QBONn6B+JA0KC\r\ndx+7ESDvLCNAx9iBD4R1zvsdI6n7/h3PJZurr2B6xq84nwOsIo3BPBOb9jaF\r\n5ABrfrF82TOfekaqArK4N1vcDMHNIW9fMS2oCqQsComm20W7mvR3VZKz0hr3\r\n3Qy0sngpGwJs301gpkOZ4u9eqsZLjCgyre09AyZPkXJ1RqFqSWW6OvV2khix\r\n930rWsgV/UNTVUlRfhK6XbjmL/O7is5kE/FZ2vbqsOR8emNyNmUenr2Ysxdv\r\nj3GkRogp3Yk4GwZY5fkTkEXciSLak576Ezq2rDziUxwtbZRsfpOvZvFYMYde\r\nP32RBQMyDR5uHJ8wsuMfh5IAXpgNezwECBLS1sXs4e6ZGAS6LiTtIsi8PezO\r\nFCMiAB+tbDFnysjlosVddHn+RsLqFiEVgY8=\r\n=j8XT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/list":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/menu-surface":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.55093ee1e.0_1680115849007_0.09168471779556331","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/menu","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0c53abc81.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d6610235c1df2d2cc450448d60725deeedbaec","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0c53abc81.0.tgz","fileCount":39,"integrity":"sha512-n4megW2pY0aHTGzpYBdnMRt6yKvVnCJuNdIPPVahd1NwIEXOttBD8lRD9Ya6G5kYFE7uiGiIJpxzXfRQxBwb/A==","signatures":[{"sig":"MEUCIGMPYB/K8s/nzMqLA2cJwMZVT/38iPWxWdOvjBr/NWj0AiEAyUmeWqpFhKTNHWj6ErOfd7MGX/diiuijE7KIh/5WF6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3UaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmostRAAmP9+/BZUtG3kkcnSggBtZpNTxFsGw6B58WsgtD78y4kg37j0\r\nG3l+FZsyf8l/35ZQWi1F84GD/oyr6AXzOTtmL4/cIKI+ukxQN88oEKL2vMLX\r\npEHUsrZYeSNAsdBX+kddoSmcUmvR+db5wsshNh3W9G3Iwbl7uXhJNJQhvzyj\r\nxjpKEMnQbwM2hS0NLDDQNu+kJXN+tWVIENmb0U7wOpajRVthZcbV5IjkAJrW\r\nETPR2pNHJzepczghMurzRiTPE9lhC2GjjfegCriVBZPLLxzyDrsA+SbqMC7r\r\n/hOKZkIVDuFLIRXTRNi/OUyhxo+czpucQ+KPgFcIMNrVEaEByL+jWBW73Xe9\r\nsn1BkKpgvHwVvKS2lb2GcSE8k18CI3tGG3g9vr8qmIfwDbbb3IqKVGiWcxWH\r\nZTv5M5l8W4vhfdI3BLRPf3ftnb/IIrsL16CDx+kNDOSu+/9RoUns+BkX3rkb\r\nwk13w1obWAY8dj6yMT1hEhe3BPy1G5qw3q0m6p3gKRHmzO115PCTdMHAj3f5\r\nD/ThosNfoSrZH/E/uOEuCaTRDsPs90N+axlan9Gb9DQip/crt1CUHvMBD0L+\r\nfzBMnz1zMKUyWgG+/K/nu/eR4s9n183gE/eTUZuH5LBBX822QxWg6D8iq7Tz\r\n7usw7U50svaR/tiP5tU4Lx1LOtbqgndaTU8=\r\n=r70H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/list":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/menu-surface":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0c53abc81.0_1680831770667_0.19867755787867392","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/menu","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.51311e69e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71efcf370275be2cc2285a8b9f33c11e2845f7fe","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.51311e69e.0.tgz","fileCount":39,"integrity":"sha512-Ms5ETxmctBiEZRdljaPtLXKnSULN0GhLkEHXVZUxIMKgaZab07+Luy4LtN7+YYD8HfJXVKFp73zLN0iEQr7DIA==","signatures":[{"sig":"MEQCIHvI+j6aRu5ERuzKpli8SOX/1LUXvI0Fv5TbgrlUCEUJAiAFGtv5JZff7FXp//Zsnq45dOG+S+0ENi56M8VDwR9WHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLlg//fIgdvSAnRc9P4D69KHsO6+tDu6YPGrWjYWGZCL+MKB/HcQiv\r\nA28xLbmKxGOgqujdBfGKxFBB9BCwdspi9UB6pDVr8OgwhndJBPdhL1TooiuF\r\n601a0NXqQiHJojj9YLxY7Vs9d5vSKlF4vtESaOvWTUfh2DCWLbcxns6pss15\r\nb4TFPc9jj8GEfnM1zM56L2nCVqrPXkAQKI9N5MK7kiCRora67RYmLcz/xS2N\r\nZDQ7Y6jq+yOnDxoYxQMmexmYHZ1xwTwe1HXsZZHTwympwPFuIL9WEJtB45+N\r\n0KxQtN/Hgggk+XWKiutI9ud+3n12N5Mw7PxyBu/CGaPzR7clU8BtAjAcLnoe\r\nyA3lpVCrf9UbUCFy9o18vmiE9bK7Z4Sdr1c7V6G5aQerVCMpRwndxztYwGfW\r\n7mdsruKCAmGNMsN9zcSjLvHlCgQd0tUx/IRRtpVfK4o3VsnDTNVQFuI8NHlV\r\nNgcYB4xcTthyLUVUt75UHcli29yNEM4zKZQWePw2JOpYiVMAlzVFw0Ehvy7n\r\nKce7HrEe5eINOZLPzyQ25HLNNnkS1nB8KjNo3dBe7v2UE7IIA44FOzBv7S5R\r\nDpBY0U3LWdQQyhJip/ghssoIoJjzPNBzmWMlKxxvIX7VtQdeNDWXTqNudHoN\r\nVOtFbOOdeXxi0kf6LiuKjaUalv4pQdjjyHs=\r\n=k35d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/list":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/menu-surface":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.51311e69e.0_1680890976473_0.7375858747670512","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/menu","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.113b1a38e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de70730172034266a9359a9ed000d774f95ef92a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.113b1a38e.0.tgz","fileCount":39,"integrity":"sha512-wTWJNgMD1JOSRJKIMplK6ICQ3N876fj8xQru9W/z4F9XAqG7n7yYOa18V8E61ty2Ue7zNOo3w2RG0dcfqstlOw==","signatures":[{"sig":"MEQCICKnfLcxklSKgaK3/NqRYRzWQRwNtt3VNUQv1ikl+JCKAiAOug1fpN/uhRw4xStn1C4hsVkHwVkhwUJ8BJJ1ULSVnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIXTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH4g//RXuwlfNTs7HxVuYPyk2mLad3Y2GlHLIjPhO9nGqFRR60roxd\r\nezvY2cn1iSxn1iDxfeJR+U/SKGsDZbsiF0Lpri8PCPCfADTximLYLNij+2on\r\nr0MnWpJ53Rbxc5QcMpBV3kIOgc3lcrReMDfwONivfHcrqvNyq4ZZKJODJN2d\r\nTvSjJ3DllaPGAie6bu9YGSjS9u/bahKl41prrNvNfxwd0M5+x8n0kFynH3Ip\r\nCARZHXJr+H9iWUqN7X4clmb497gWx7sXKeZLRqxnQ8MwO1gvNb+O3MhrqVpJ\r\nHBb448ah5n3OwZbam3BxAz5/sxKuOWY2r7xaybSAoiZJ6OpLMniuUr/5eaeT\r\nAth4dPw0ct2uf4h9gwUGM+KgZ35RlxgglwkZHBjzp8XpdeJxdiwIipsm2KMj\r\nFVU5C7lO33kbKeaV0svXv77uiPXxGjIKOypyZUKWmjqMaty7Hd5lHjGfzzUF\r\n0XtPyuIbSgYH80y7Y+8OP36ofxJQ3YOHwLOGcLHwSfKIGSE5X2rhbD5q7jwV\r\nplPOD1PXEcgeQzSp0Q2upMjsdFs/WjAwLEDPDwXszTmpwyG0DBE+S/jfkD97\r\nbyFoKk5tlM04tNqrHtbzzwGcztiYIC5/ok66mPxaPVoy8dZeNkud1ow7xi1S\r\nruFPkucXkC3rmmRyV/L8u3/3RuQ0BQ2TFp8=\r\n=VhbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/list":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/menu-surface":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.113b1a38e.0_1681163730956_0.9799235124749244","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/menu","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ea2191426.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e345fcdbd66072ff5f1c8713642b3f438d44e30","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ea2191426.0.tgz","fileCount":39,"integrity":"sha512-z82QrRuh/zGxo8degt6lVIjGqTRt2PeYP0n3WAIpkv43hk9MW+d+vsGcaNbLAIxxyHiynwZUSMBvugORK9KiQA==","signatures":[{"sig":"MEYCIQDg5QD5DfBiafsph5/4f0T8X6ZAJ5XoADwRdGp+QwbGyQIhAIN34LOlJ7mmT8R/JX5L8Od975/K1yDfcDLSI4hsfCdT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdfIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooOQ//Vq1RvwCKdmS84TvXGEyoUXqOBeEGSooAYkw7B2ciZWSomcUy\r\nTLqtdqqkBx7WdNTjB1KU5HZPbaC1dmJbG9KPJQ8hhYpCysu2dWvoQ+Fa6DLl\r\nROWUrFzqhFdPWLplsnieLChG9AYRYTV2oitMfat6i+B3OpxdK+c7GnnRLeRW\r\n2LmayuvU0qM5AqeQw8YJ9ut1Szf2zy0gl0mJGApQbkmsUWQNb4oPD8+31r0S\r\nIY47VUjHcMoRi4meexkUeFATOtP9gPPpbQ2JiBj0eaPRArfLAfzuFUlnJxd/\r\neNbVyKwS3TmMxW4mHM/tbGIoSnubAY4oHk4ggSKARsmJnvMQNIsfNqJMM5KP\r\nLA6TMmgRf0tLS5ECKZpb/mBLDkvmTbtf0Zdi69okrBHJN+HDlwzNs7biQ3pf\r\nunuJKUXHpENV04NYqTnRVphVo5xjndNOcrxd8t2xjq+SBMLWJ2Iti+ejgmfe\r\nJ8rXsixVWCX2HWXrO6RSLRtNPf6/FAfFOjVdPMeaEytStFuLrHYURhfbhUuk\r\n1ad2xnH8UhDEV/pnZvdF2W+Z5I3Y7Q5ZNT7QVrRC2LzZk8sGb6n/VUDIzWH9\r\nVgOS+/Glt2O02CMGkGzVq8yR2n5hKN52qWKhCP3wHAkhyhGTgLsLHGTQdaih\r\nl4oU7UPVcbf2q37X5D1HEzmYdjW+QGxBd4g=\r\n=TtIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/list":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/menu-surface":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ea2191426.0_1681250248350_0.6231385878344622","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/menu","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5a5c38538.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a933a3753005efdf6b45f49b1ce25046d363d118","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5a5c38538.0.tgz","fileCount":39,"integrity":"sha512-4HqzJAOGYFH7RGPOUg72LMVV6RHlC8gmFK5O1CGuaEFVFAfH7FD0YMiPGczYfATVST5TMmg4xQrUiz7e/xhnoA==","signatures":[{"sig":"MEUCIEkf/EEhOuvZmjAXSPpLE0J1qJlYTBbv2LQLRgeHR4nGAiEAoc7ILcsggYzTpKXTz5bBR63Uhyrs6NQ1Aks9dE9pBAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquEw//e4y8FoDhUag5SEnMtVLvkzLZTn/OdXeNKZvsi0zVOBZfa1AW\r\nJG9G1FehCMEyx8LzmI8un8hemPhsyKuEarh7alBD7KGQTeYluE/t6SONlNXP\r\njVBPvxEpBhULkZeVr7karrg26oO9cnTiTQzqId5Ac1w9OJfvZPmHgAYZO3h0\r\nFz3oiYGGz2O5exHp+IxvauhpkGvYvmPHEiadjdXwCLK7VnbmN53+5AqIjUBo\r\nGjpc1qF7YfyXRAOXeW10v6p4P/orDYl8g1n/1TWGVbygja56lahYJY72MsvR\r\nwC+rvt69Yc7UkUO/bczON5wFPYwWzdRpmD1jCABhLI8kylTpaCX6u5CEFdDp\r\nM+7dDmtF3EeSj8c/pFGENlYK2IduCh4ghYnjemGuLxg0B5PBaemUMycTovso\r\nFZojtlgu2S0cSSZCmnQy8p3oYRT8kPu2hQiNZnNU3D3Nke7qdF16x+7rz/oA\r\nxpkq/NVk3gEf6V6vDlahgILEA906au3gtqnXJQwSJOmr9EiTX7fY1+kkS8bG\r\n9vSU/PHPjGssyeFCu+soTi6/QGK2GZ/D5ahbXCJnWwrlBxHV3Z8xOc7/iexx\r\npCtyW0INxJOvkjdhcp8EZ8lOmgDJeEi8MRcl7mqrVCUNvqVMWj6jcXn0HHGN\r\nnoc4GT+mzPO3p07WFu9NKOYKRC7VVz/8jEs=\r\n=T98M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/list":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/menu-surface":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5a5c38538.0_1681252323147_0.6189017459178539","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/menu","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e4b5ea7eb.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d4ac6d370238cd0d14528e1c5dff690cac5fe65","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":39,"integrity":"sha512-djDu4GXugIDUxIJIu5YuJBsMjz3EG262LEpFoK3lvUyUbrkURW4+7YYOp+QRC9Pj6+I4S+55DCB4leY6DWpayw==","signatures":[{"sig":"MEUCIBaaa5p7h97NZUeSXsRg25N1KOelN0kpolQy9PY8vOgHAiEAhPTDSXi2VVkc9AFvFXKGBzVzX0i+6+x7r+KOQIGiPL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNef7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFyxAAmRjHZecfMX0+WdTFOSHyak9UhYKvu3cvINrc7eps8UaFCYVd\r\nDMojW1+tDVoTOqWEYi9LNGOWpen9nep7vVlURsK7Vy/gwqXNVO3hm/hnPCOk\r\ngWFuWFZnbQoKg12M7YhVrbwBT13ryy8NdXFh0psqlrco/WPp+M6NasM9lDb+\r\n1yEu3as6Cmez+r2gTQthtwZ1Pg2N1R4pKTNpvJkvN5Yu/Zjr6DOlE9Pfvilp\r\nzTyq41Q2Yjf+y8myNJeJT+4AWTuxZxhMGwdjodPOJG0MngJhncyNMNq0qPLT\r\nvsojjMz21YBKDBpIk5ZQ5WKDdjwGTs+WL+GSfpT9zcLHXJrQftBdpkIeDoXu\r\nix/XbBHgoYCdyeRYqk0avKx80OiYWv8LlkDUv0GacGkD0RothNJ3EDhgtHp0\r\nIEO7p7AyEApngHv+JZumyfVLP8LcONyuZ0XPQXRM83kFD+6TXX4+WO/ExjWI\r\nqQ6F7Hli793NyMV9eUEqTixJsEz3Z07lbJ1D5mCwNWM7uknyaKcZvsgSol2q\r\nV27s9jl506Bb5yTRY8iPZ8ZJd9HnQs8E9O3H7CcyiHWdK+3Gd/3tWca9M+vM\r\nZhszeLl5MBqasuOEGom2D523Ae/03HT7S6fdh81VMKdMUsXWX0kij8yeNr0F\r\nSKGHCh7Bijvpj+du3uC81hZIlvn8MKmISOY=\r\n=tgk/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/list":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/menu-surface":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e4b5ea7eb.0_1681254395374_0.9439746327199421","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/menu","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a094dd9c1.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4ec6b645568fb68e105d34ebf80e39bb349e2f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a094dd9c1.0.tgz","fileCount":39,"integrity":"sha512-msguYkEKA0T08O5sSrBaSAIxyjOVwcFzzsTW2Ebjy32+0igsKhC1d3jUzc9HW+OYNOr//Jgi15Rcs9O2FF29mw==","signatures":[{"sig":"MEUCIBVJMy+bz8RBwoyN3ygYgeL+hZMZezEcYCaS0G6k4TQPAiEA0otRQPU2y5uxcAoL3Nw75W7wVdcD9JANTkAYr5RgHUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdc+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM6A//e6undW4VY4ABjNcvjWzMMHjD+Xd8mF9aQHsXnIkd6uYoH4xj\r\nshjmeSrtlBr6Bxk6t2VUoUtaOaTWrVNgEfmB4x5ls2nVfh0KPJf49KKLM17s\r\n0nRyEqD40ja/tTL5atsGvFHBb7k/2t92M/w20tZDfmPBIUhZ+AyxyoI0W4KF\r\nV+PRqoOmX8VNMV7HGiyLuTbc0Uu1oeF8HCgJG5i9eOFYKEXhcdzekTQ21lbG\r\n3AAZWgu6ApW6vX2rSFpfvsgYjbDFiTFGykGJfD0aoQCErhwbZ0KKad+2Ehyj\r\nhgsHYtMdculPnKwW5kMEIm24FnrvD1niQLAPLoM30kUCehi/Rd93tf0mSxW7\r\nKsEqQqBWGtVdcjW4GMkmf2xs+IV/+248w5yYyfBji+ztYC3bJrlY2rtnWy7P\r\nPxy6X69H/chDh4EkbmWA5sZ7h9NToJ1ntGH6QkxgJ32nz5rBl4Iocz0+cOKC\r\n8Dd7iRe66q6wWt9bHQy8/xuYiyEQyfptwm6IZAyBJwRPnrp4dDDXt6KMnL1+\r\nkGLQn+zChtsNNbUq3rP1KqK785q65ROVHCo9gKubS2BtZ1e5RBmY8hEKEhN7\r\nY68PUF/r18SU5rHYiycWUcSajLT3X5aZnOTtF4Ct+Wcnx2Bv0loCSy8E20tK\r\nAkprVeCQipxpV22I079skdrTYsY5PILkRFo=\r\n=OJg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/list":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/menu-surface":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a094dd9c1.0_1681512254447_0.5346980023055077","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/menu","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f771b091c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d63dd124ac406a5d0b1d9dd4997476f979ad86f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f771b091c.0.tgz","fileCount":39,"integrity":"sha512-WiO0ctVScXzTJpg6vW4PrUxV8IxShNNvUW0PgE/sBkxMC3Exv+NjhwNUrikqqwPmZVG9tSFZbi3ilmwOmnP1RA==","signatures":[{"sig":"MEUCIC3jmk+wo36yRJ5dkncgXdBSMaJUs95fD4aBDvcpvvuuAiEAm5PcVM3jPVHatcOCXkvzcKsJ+2MRJ0TIXmVBmBHMvNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWhrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPyA//dt4gtjLdOafz2+YyauJnkpVfc+q58Xc21E0wwtpedHUvot3s\r\n+8rdhMUoDyXzw5bT60akamHnZQX7XyvOJuL78W9SBQ4bjrjtwXoTgefwz2yF\r\n+tYHnf9/xFjMpt69Hbrc1wwsWK/PW8GtNGp1obhU0D6Q+k9HP5Ogn5b4TxG/\r\n581Ena6zYcUl69jVFRYDfv374U9TGZ6qX3nlRMQuthc2ntZBED3lF4BX+d3w\r\n3Amc8Hi8Li7wTobwATwuYpMO2/rUWxmxnuOPv8g5prhBivgyZKYMYSurFEml\r\n14l4Dnj6/cXsvIF7HoIFyg6E5+NkeDL3btVZT58nknSyL5kz1KOQXqkorIvW\r\n8KWdy67la6eArZc2xM1aaBq543rYC7IQp2zeEkiahFWiEYy/Wns8J4dfNo03\r\nWlRgdnIz5TPOwfsZ/04Pup0kfAwfVqwbDFeykjgPmKsVPV/dQEwZcPWNerfw\r\nRznHEdCz1wWVluVtSQR2ULBs+88IlJmCM4jEXmN9QaugEOGlDDeVyeTmkv73\r\nVL6zpERBI8+Ga5VNZn2XnrAP3xJdejZ1LhSEmTSs9YWjKsrkTPk+fXJml0Rn\r\nCoNJ5Wvwf3HXViRRx13dlymYOGARzBvteHBOR8NxSH6lBH5QsMtUUOb7FFIp\r\nS4+3G3M5ksJ6HYsOyKU2PzX2nJuXaIz32LI=\r\n=hB3q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/list":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/menu-surface":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f771b091c.0_1681746027384_0.3252074117249535","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/menu","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.79b1b612b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76288b83dcf9d54fe8312207726e97b39e561192","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.79b1b612b.0.tgz","fileCount":39,"integrity":"sha512-09rdkf1ujNYUqYdjUdCCf681uzAheDDlByoKK5irRGdqImPoMrNaB8IW2KcROQdLn2IihyUNOa4gFyljwu1OIA==","signatures":[{"sig":"MEQCIFDm4X+LK4En/s4DqJL2koZmDNQN8Cv2c4oA53JvvR0FAiBj8WXH1qn2hVJ5Apf6XnLIxY+iyBpd+1RPPtCvl/cM9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHxDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKBA//Z9BSe2Dhw8j4clxK30iZBATkaLs9khR50kudEv+iqnb7B5D+\r\nqzq2C7aj/mZ8J6Z9Pjctmg/2ETt+/H2dkZt29ujl8Tlg2MjvzIlg7zPqYaRv\r\n+gbpJ92PNQtR5rqSsGTkaVn+HkQc/hd9YGIJvxK5xubMumMnP7g/cK2QqQLy\r\nQuCHkQ0W11ARCs2N37kZ2RmMGBeQw/lH8GCopwBjLfrFqguUZlzYfA1QNdH6\r\nyXLsMtAUyN/E1dGxLyzYpSeolhoOj5CXkhjbC9O6gFd/+ntixoIIf2cwoRPt\r\n5VowRy1leW+X475jChcJQGL2tn3irRblArKgX+Gw5bcOvjKV7Kq/ZbbjMRqB\r\nhkVCIJ4ynbJA35p6I3zBA6thYlZz2IA00HPt/XlFLHPCuJn2pWJ0ZLosu5M4\r\ni1lmcHzXEI36FdmwTWGJIMEDBAaQG+vAMaJ/xVfbj8NpQ+ymJ+3UCnlFzDrb\r\ncU1St5ytOPd4cqXkRea6ChacSVw8a1BOxxrvQYZN25JBw+lJSOvujSGEdmeJ\r\n9GC46QxkgsTOZ0H8juRixzJnAzwSwRj4wJr4NOwENfHc7ugwL2SYT7K5Ac4q\r\nJpcnCUvYyAUv/iEnCKPaTlvj79DA4aO33rfQW/T8q/Z29wy3BDPsFmydbWUb\r\ncp+wWVxdozANgMOXwP8TrcbumQeG1/NtZ7Q=\r\n=54zO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/list":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/menu-surface":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.79b1b612b.0_1681947715468_0.2677611735191878","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/menu","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6f50071e5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fd327a29c7e38ad28beb0b1482ec82c99b655a1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6f50071e5.0.tgz","fileCount":39,"integrity":"sha512-aDNspVz105OL4exQ8dF2THxH2Zp/l/lKk1ZX6TfqySriqzjxt+Qip0zVOM7Oslg3vs25itcfiO661jo2Dz12LA==","signatures":[{"sig":"MEUCIBAuaT+opbjg6f5g1G2pB3QwBvnMBDQ/p1l/KlRxb+ebAiEAvGeKEf5Zgjl/p4rWjfNq/Yx8NidLUfyd96jgq0kqUck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX5KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe7A/8C/N8GwgOcIjUFZxo2aEfWIC9adTT4+YmbBGt75oE3qxrDiJP\r\nSHHDIvKK8oJiBSv7VJmZ3mxDpH/3IhF2cKiyjEpX18oZwBxW6w1pasL6ydPi\r\nVORZsuDXHw48xQB2O+qoQE0Vhju5UJvt5f1Oc4FxJChGPZTKEmulof2PcE9X\r\nB7Jkyutp75/rNCxzj2AFjp/0s3VaRArPubgaFZHCH/ZUlSLdpFr5ttudP1lt\r\n4r9vfhhaxd66j6y5xNY7naCbCiW76sS6v2B2KcnKBGy4Ro9yOa/AjkHK53Mf\r\n6o0j1yjEPtyh7rdZ0ideaAk5wJuzV/v18txICR/c8SgenvnHNCOPNZeWIZHu\r\nbfHTNKSynkfHOISFxAb7Jv/KQoAyx0eIiVS5w3HOMhATq4D5AtaNkeybd+dy\r\n3pU7uJw0krnBQ6w1qh3Ed4zNQjwYSKNHf3k+GwUviLMUPY2mAmcQygMgs15e\r\nK7++hIKRi2rYQMAxn17v0OR2hoZckbhxQBJ51vN8eGO9BSjPb22oyFDFgmiE\r\nXuLrqX63nKFbzHIwgWW9wY3QCvOP2JeqyUIk82V5yoRqYgvk2p/l5w4xlouK\r\nXs50AumCJA2IytoIEWjIXnUCsOaszB3F57USWG2jyfkf29+GgKIctO9Q3yRD\r\n44xI8DqwGBlUxm+qG6fwaDvC8TTSxUXvvpE=\r\n=C98w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/list":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/menu-surface":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6f50071e5.0_1682013770413_0.7723028891367878","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/menu","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ef754381c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e507b51c3accdd8e1d26fb0f1e2c7a8e5e546161","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ef754381c.0.tgz","fileCount":39,"integrity":"sha512-d977P/dkQWiG4GEzLwarzPDQAJ3+BJt6hTtpwHOvbZpH0drJSnhFmZjweHGeHnuSl2fsFEAfpO4Cav92URmqMw==","signatures":[{"sig":"MEYCIQDwDbEBUsJyahDRn1t4oZ1+/Uywdfp/y2KIcCwfnwSdCAIhAIS/eop3F3jW/NaFnpuNRuj0zlMd5O+n/zx57wjx/uUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMMhAAlpa3ABk4ueUur8A8OU0MKaKwrhq88Y84O2s2vdlszFMg+6Op\r\nzVyYCc+zmdOzgpJE2himR1OP7Q1RoN56gG33bW63prQ6Chif4OYjO+VcHdni\r\nPBr2QvONQq1yn7WhfnvAthwpnzzitr06IgaZvz46K80J/wMSxaiCZ40KD0kd\r\nqbPb5iIobCXbJF2qd6RZCqIDrgdhEhNuaZpAnD4OupW7yT9j8ekJStZcctmk\r\nAVdor0cc6X8mTux8iRmbPJbqzRBvTvz5VkSpV7K1rVsaR5RGq+p5RZv74jVy\r\n6x3UVhlbfIb61A/9DzQr+XpY57PUqu0ggZRCGeQYfs1ww3Yeb1SVMNqlbxX/\r\nZcvHjwMANqHah2AAWEnJfeADd4NtaNf1i3wUQvo9VSXPCNIEsJFg822+Zk6E\r\nLpugpa/DkGL6Ajo6W0seGMur3DXa0G9LfE18eTeR3yUne8w0ckg9AKgzC5tX\r\nl4Zi5tI1lt/aq1Y7aSX1c5SNThapJnhoS03m5y7Hluf9446cIthkN5c812tn\r\naBAI2PjmTe11Qa6sQwdqHHSgCCiTnBMaNS9r/CBUQDjsgpg58SqH88w+kozN\r\nkkyJRQQD68NItZiv7bKBW7TeTl3yyCNoY98Tw6EFMbuD4b15d9MwSF5nSpcr\r\n1NA9XFVTOCx3Cfhut7s3nDcG7lJN4+KrMig=\r\n=1rqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/list":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/menu-surface":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ef754381c.0_1682369561784_0.38951393479212437","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/menu","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.69ebf61ea.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5eb149be6fb1ffed009335c0de4ccbc8de71233","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.69ebf61ea.0.tgz","fileCount":39,"integrity":"sha512-TZoQv6iJZJU1N8jI7T7BmKnAfNcooOoapiSCVrV/8ym43U9K9mBHdDJ33vlEkzHF13GHBI5TbLXQjJkdwQPZfA==","signatures":[{"sig":"MEUCIQDhrOak1Spv32o6FcyXO+s2lzGlfF9lNJdpAHtoT4qrPQIgBRpH1gAXtGZ6H2tnrTbwyLGZo49PzcE4cHOf+Zrmc9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq+MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmpA//Ri2vpysYVTxk2Pg8lEKV0U1JHVxLjYStLMcpQWpHEwjeshJK\r\nMS5AAipuwxiFDK/bIgS+rctIAI9N9vvWgD19uqzB0GK7VUMSyDceNn/Rim+A\r\ni+OEW20c1pyatJiS/aWZDft/x4peAsNiDKbXPvltRjSrVesWaw/EYNqTBOH+\r\nnsdobbsktz9HliABAx+b+Y1bCRN394/TTTo72Scngg+O05KeIMTSzyk0zBnA\r\nkIlsoCXcddzm6VX9iyVKnqMG2Ts+6yXmqFV5RkeQqigM3RwLMQz0JkJTxNFC\r\n28uxlNnEQVS8+2OLtqLFu7WfO3ZBpxlX4mXTEK1qOjOEjf34gVNdcUCHZko/\r\n2VFUutPllM9PrrJLNAxrdU8COgTlxt+bV/4wDOI6auEohtEDIXPxds/zH7WR\r\nqSti1WaCZplOnA1oc+9RdAPNJOSTXhmSCpZoD/92plZ64laekkq9fCOhs2tU\r\ngyD1iun7tPZ9qGg1nvWpQe4K/qcPRk+d4fC6QWJPHlVIP5vsGUhRUI04Fboe\r\nJk+wF4To1L4JMIDBj5HJxYCYx4hUqeT3ShJ6xnRAws+oaaMSE8hczbeYSYik\r\n2d7oRjN3JoO8042FwI1GwdI84x9uIMlYspHh0IBgAdMqj34qW6N4mVG+QINA\r\nixYCMHFNHHDMgPDJ/c70jX2rtYQt8+Lkw00=\r\n=9pul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/list":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/menu-surface":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.69ebf61ea.0_1682616204028_0.8118011082469121","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/menu","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b90be86de.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee458e60fdd4ce6f0f85d46023bcd27f1ac4782b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b90be86de.0.tgz","fileCount":39,"integrity":"sha512-PUtscD6OkZmtAY4GosHxMmhf3hrUP8imGAd0McTSk4LAhZx5I1yucUkaCTNzPAQfbfxtl1fvIfngjAjCQMhy5g==","signatures":[{"sig":"MEUCIAkD/gI/GGtHGP1aRew/SAS/9v5YHEvIzSHV+A7BalL5AiEAs5sfifGQ4ofd7uHapB2aPVcPLI2dxxJbrGnZJoYK4kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGN+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKmw/+Md1UZWU+mT8hCNGl7VEbhsTnmcv3GIbYbnsPzOaArFqJ1b5G\r\nKTF215p0M7A4SUcthXi2AeZhw57J6UuL6BM9e1AJ0Ksciw3upTUfDehLA41W\r\nY4rHI0sPfwsa9VjIr5PzL/u9GXCSkkSQjwfISCHjXzmEjmjqREXp+6cp4vlF\r\n2d1teRK+XfbVnrPGS84HW6YVeczq+Ey2ssSaGm4DxRwXIOGdj7b72kOsz7Ol\r\n0BkeVRog2vs2xvpQ9n1ieBIe/d5Ef4nzFPc70PAM4tBb/aryp7pM0hvT+ZvN\r\nVkhkdOHQ7pixwk+bOFoDDYabZgThhf1pT+fxBIXjuE6jXzeW1bU90oJ1kg0A\r\nIy34t9rLQKnh9JdIvR5g46/PgtbgWPGJBH26kc1I0FOTa684x8HG2ihS0stG\r\nSAqPVqHkU47ZmKT0hl6nWT4g7wYAMew4KAkeIaiJvoqpvVDXyfRBm43wTdzy\r\nkgAKOWJKfubgQ/QFclTL3VH+GGIYylh+QraYs3d3fXY/xCzQIcgu+opKHY+7\r\nnr5PL57nva8/wuMVNrBY+DIZLaJjIqOlwRxjbYgOt5JSCgn5f2wFCQi+T63/\r\n8sPlNo3FfDfUqQzejjbEo9eFQ+FHNGscBU6xF9RdjsmWhFYQeAt4nijWkN4z\r\nTfJJ8L/KDmFaWSqgb5D5hyCH7Ks+6ui0WME=\r\n=JmVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/list":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/menu-surface":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b90be86de.0_1682727805588_0.18922492924897427","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/menu","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.51f9c0c28.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bca5628fa199709383569bf33cdddf5df3b532c","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.51f9c0c28.0.tgz","fileCount":39,"integrity":"sha512-Ua2KDrT+VW6a270QNXqHwC/WU0oO88THXV8XV50kZtFHipe70ZB8sBcqKYM3zntbhI0q05Dl+R+z1icJhpw2hA==","signatures":[{"sig":"MEQCIFwE9FqikSbrNnT24gVF0Yep7UeNR/QiCf3v/UT4xeajAiBWsZeum4wspWqN8x933AXOZ8oqAa353PDY82twXt0m9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGXFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMIhAAnUcF0KqC0OxwTF1hkWeY8pCINm//5rVOdzent/rWBxiXzHFC\r\nuslm77M0ZgOqZXTEDbqqcb/IM5mNtcK0M0wVuV7XwviSkmyjFLKw5zbiJiW2\r\nwMl+OSIlBaGp8gbztlWE2oJTFGWH7T/1AGKTZG4tnqypoKxadhWBAFwBdmPn\r\nOxYekWzI4R/YujdyZ/2pzcw3yAWQApa5VBM/rYKFibHyVyChLCUqNPL154c7\r\nYuhknYmWX7gwZdeeNKIE00pOzjVu/i0PzH3JOvJhpXaWd0v7H91KT0JTnfDa\r\nQEockfFI/LXj/sknKRRCE8hxH1T1cfHk5uuY96V77MM0Sc57ldTUkQlIy0ia\r\n1je5NWLY8x3r8wdtUKQfaBeDL+AWZXyH+0fPe4KNcOiRt5GGvBvq5gauyIY4\r\nGLB5C4DSdHD9Fz1fHaaph3l1VhcbILNbXpahCpNDeLRrbYVMUuK6JD8elSc1\r\nkUnRp+/9bwWAW+KSUR/Q9Be/lCJsUzIS5JtfYpYpBq5tuMOQ6CzGeZawkyf4\r\nc1YHFtTL5/sU4+JmiKnwg8ZYfl4GFEw24aYNnwEoYuQgpmBfq+Qzdj4xk4fw\r\nZ50toyOdU1xFF0RRqWzgNSGdmfzjHVoOu1Umr/nSYhsDG+YEmXqnPD6oA0LA\r\nFZLgjHMALsG4yawBv97n0xHt7C3lFA+Kiu0=\r\n=34k3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/list":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/menu-surface":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.51f9c0c28.0_1682728389471_0.30767862146787284","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/menu","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4e840d685.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124b092e7370570961a65bdb5c391cf7c1c34c71","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4e840d685.0.tgz","fileCount":39,"integrity":"sha512-PxN46ikvInNZdLfxvkEci959snU0pT8TbDj1Od2m6CTKHBk9cvcdZyYmtjaYEbO1T9eRW33U5OSe4h2qXmKvWA==","signatures":[{"sig":"MEUCIDKS5ahhuXDj0moqPanYoOn/q+JlPUpx0lYmjXSoN3JEAiEAuGxoxoKpcxaqPJAnyHvngGju+GJJe3JdzOoeYiTDm6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/list":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/menu-surface":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4e840d685.0_1683041734856_0.5229782826948461","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/menu","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.10b8563e4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b78cf78e03c5388e99867d1d47470200b4ba95cc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.10b8563e4.0.tgz","fileCount":39,"integrity":"sha512-GJyjKVgrBoNi0J6CFPI5mSzqrMOBqblGx04uUc7xBihojt2ZrcSn8Jzzpqvwkkdh5ojKbEtFfmUACYujb3+5oQ==","signatures":[{"sig":"MEQCIAMUPKOHqjNrhwWUrsrCSYEvsrD4t35fdb+EIyvTDHjIAiBb6aNISteGWb2IoZtVDuQwR+Yzt6e1W57IwwdBm2nzmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaAmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohxBAAj7q5BrKfkTOgn3iACFSdVe0LyeaZMIeZn4EkH0alMqMPjo2S\r\nkwmQEp0EBsvCt7cok64wLpIY/vIL6t/DZ7azCpAbqbX7P9FFR6RRDYp3Sefd\r\nEMgS5WQGBornQWFgeJ6jJeiQqF9bUW4TN2Lxdat0BzHh34xucIJHKIcR3D3n\r\nqZ5BnpG2JHH/wWqotOpa5IMaAlyzIB4h9QVRAvRSsplJINQuWz52u5CBcOFk\r\ndRnVbnX/MuuVNfWINp8wyYx3trJWEKX1K9E0PR1wf7czFgX3veoK5YDLnfG9\r\nVQhGZTU5GdnDeIgQOAV6nn/WgEKTJlrm6WHiFhWhww1aJkxLn5ytGqxrcDl+\r\nIYD5A18NdD2XHvVfP3p0csok3oK8pimwGZwu4ZW4hjzOtFT9x9FEj2bB5WmS\r\n8ak1hxzJazMAIjlnOTumS3yYnOGGyEfq/vlFulrCWon4ZQKtQhFsKTw9Ktnb\r\nPxzK67EC3SzZKaVer84mu5SeF1vwbUh81Su+Y3riDULTpZlLIqEA1qTQpZZ6\r\nPxHXzz/cc9qOiGUzQOU13hIGAl3cKONRfXLjx3UdlG8KUblURf/+vBU5F4Bs\r\nMmWrkkpMCzW+RKwAajmJIGNqDmxN2iDnqSJhxcrUBV6KL1JvqWxo+NfwRa8R\r\ng5sU3fuJwNwPhP9RSwe3R6UBXASneLGMNcc=\r\n=rj2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/list":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/menu-surface":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.10b8563e4.0_1683071014185_0.7800670080694778","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/menu","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.736b7fda4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78b100083708a73eaa756d441699f68a1939a103","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.736b7fda4.0.tgz","fileCount":39,"integrity":"sha512-Zhtk8I5b/MsH05993OZbG0p+fa0GSLS9/dj19rxX0YQ2XCRu0lmP37bSmPmmjdtiuKFmvmzRLIK8qEPc2maygw==","signatures":[{"sig":"MEYCIQD5kKZZwFGr2YkY6mBOnj8woRU3yUXrTURWbrE3VO6IvQIhAJve4G5Lq5zMNiKvFJ/YBdOEQs+kifJQgW9nyaQg/eFk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4vQ/+KXTxSy5bpHNcttPgGjkikICy4xL7ItcYlVzn/y6NMA5of/Zu\r\ngqlkXUlYmoyqts26o9QNeE1yQf9eIFBJZWmV8fzeUG7fKr6010drpNwGykzG\r\no21ITugfm91eOyOXo/zCW20qRh0luk1HqKk5Y5wX9VAOrJfGSC+9NQLtzDAd\r\nVJo/ZlY545XDRIHZJv8JK+IUcjToB9462oP/Hyg8Gv+K+/mW3M4QcfJNV5E0\r\n8rCAwb0jFY1x0bv0eAmyPjcl0bfsbjisYIgZLeHwgOM/MfYe0Pxm4FQUCJ5p\r\n4VpbXK15uhZlt7VUpDYIDIwiPfHhmCttfy38udrbT0j4a6j4LQJ9XWeszkle\r\nkGHkDd/SILGMkqdLWM7PKBaUv4veJoS7yVPWagVbg8UW/fuPyWvQPvi5Hey+\r\nJ+nnGWjQBrVeaowhdh5oY4gT7JIuKX3es2TdBI0Gjvfzuyqpm8O7LR51npCt\r\nXXgIcbPhEighlgSNT2IL5JDzf1WgGrOGNfwNb8F78tV5cCSiu4irEemCrkuY\r\nvy5L/VjcM5QzkSP1i+7GafB8EJHS0TFstSQoP3gTOqPE9EMKFP4+rADKDo5P\r\nr6lhM+tycz+B72uoA8buzZO6Z7rjJv/qS/yP6W8qToAJTdiHzgqFGcJhEPEi\r\n+g0OUM6v2koRVdlqu5tCu3ds7E+gG160Tw4=\r\n=KbUd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/list":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/menu-surface":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.736b7fda4.0_1683126683526_0.6330660731606106","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/menu","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0e533c5a1.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ce7131a96bd1d7749905e7f2029ef211b3e7b2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0e533c5a1.0.tgz","fileCount":39,"integrity":"sha512-7sf7CAoDWKsoDIWQCgouO+3xbgtcyKYjPE+UhJvwGFpi4VAOxW2hjg3wlSXtNPpqDIT79LcEc5rnjgsmLb2CmA==","signatures":[{"sig":"MEUCIQCdg/+NJnvjPwD5VRexc6UMlcbzYCI/JfzbbCFNtE3YSwIgd5FViCs2n58IGc5qASdX2Dka2PlJ2selgyMrSMig6OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/list":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/menu-surface":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0e533c5a1.0_1683305913435_0.9760062084807839","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/menu","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5f01c15a2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40cc5e6801eb9fe10ca14a579e442b422a2b11c4","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5f01c15a2.0.tgz","fileCount":39,"integrity":"sha512-NGhj6iTrag3qFKpQAKtCWzLsuHgar5Ru/DlXTmMDIk4QEHStKwIiBFzrzwekplPtk63KIPC1ICiXz2CysdA5fQ==","signatures":[{"sig":"MEUCIQCauEzNUD9G1nf6myLHauaBkXdXVar0tsqp62IBUe55YgIgBtIR14WBk2HQMfeSWACsmHxQg9gq6SpzQN7pvmmXXrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/list":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/menu-surface":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5f01c15a2.0_1683307688930_0.8445450238556116","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/menu","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3b5b55e31.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a72e4bd929b102d292668b99daa4c8660b14589","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3b5b55e31.0.tgz","fileCount":39,"integrity":"sha512-SfA67F7rmUzOWqzpywcbQlZtaZ/UVdXkalS98z3+xWkd+f/KBWZx3HBZLHSjLeablERayZCRCl8U6cwbjtq9Ig==","signatures":[{"sig":"MEQCICCipkxG70WiJkWJY6URHed2pFzaPVio4UDySshPx8c6AiAtDchBy2GcCcoHkm84u22dAF00Z9fHZWL3JXdLssA1PA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1176615},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/list":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/menu-surface":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3b5b55e31.0_1683312067352_0.5833415854617205","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/menu","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d0788120f.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18f520cc8e269af46c2bf4550ec5caf95c9c61af","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d0788120f.0.tgz","fileCount":39,"integrity":"sha512-yuiWmor5wh/XuW2qTxJI4OQV6od/lzJ0gklnD5pca0R0jzLlOReVwRYU8nOWaZ7MQbpsePKUQzKvddO7002UZw==","signatures":[{"sig":"MEQCICgQB1p5zPP4GNjZV671BpFXyoCznL4HJYNoX+glZTWrAiBAI17C/Dq9oHRCyaj5hQ+XctbAjskOLJJ05BSv/ze78Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1182790},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/list":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/menu-surface":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d0788120f.0_1683620704924_0.9241586759194069","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/menu","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f52358dd0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"060c5e816501d7b2aeaab2e61a18e97f8e803909","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f52358dd0.0.tgz","fileCount":39,"integrity":"sha512-AKFVKZVgjqtHGX7NqQ/+fQkEQ2nGaEUWbrWI4DuX3MS/UyU/Z2l1y6ZmLNfBIXbXd1R5s0RSFKgrMyg43A9doQ==","signatures":[{"sig":"MEUCIHN2tNbYIDRKsCSZNcANP1YIFQGVZ4pRMVp7hklvo3kRAiEA2eOiZqDpE9x1UTcU8tHyQuzM4w1S8+u6pPJ17J4tYu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179696},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/list":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/menu-surface":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f52358dd0.0_1683901936541_0.7533525680551485","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/menu","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.576d3d2c8.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a206888a4f737a067dd35dce0d8e0a73dad0916a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.576d3d2c8.0.tgz","fileCount":39,"integrity":"sha512-l/PQjH78oLnMBBzRavPAarsqT567dDnglaLMhlZHHcgpzWdGQreJ/kIPoaMr/VPaIAAwjQfivNUaIb17+3mLEw==","signatures":[{"sig":"MEMCIAzDw4i4q5IBe6XEFIzEt4SrNPcnnzaaoKcCap/87uqnAh8bWeadvwKvNi5eH0yazANW1ocGWIn3DvwxzBvcW3Ag","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/list":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/menu-surface":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.576d3d2c8.0_1684202506958_0.3361834020840233","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/menu","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.19bb36a46.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6cfa2973a2934440e0108b19a40e6969baa6c7","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.19bb36a46.0.tgz","fileCount":39,"integrity":"sha512-Evg6pv1IRC/bmWHOitmaeHw1X70uudTcrDbqW78CRFjnx9ptvxRNdP0U1Uaokr54DtnWmsM361O5NlY9tS8iCA==","signatures":[{"sig":"MEUCIQC1EFIO3JVzyqKRKZjWApPGglF1GzQksKqEoqjRMOh+QgIgUotlzdedZsKRUOz/R6poQSljGxAxDLnmdHyeVwJ10h0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/list":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/menu-surface":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.19bb36a46.0_1684266958809_0.9071594200784852","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/menu","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.aa5ac7fe5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d78c611b3f6aef0d254c896a54d639980698938","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":39,"integrity":"sha512-SDYijluqPjXg23lQ9y29P1Me18mId7mmIWmecWewTC1Xrinix0Xcb6nZgulLESIbnjhvUHaqGQcLeny7fRwwQw==","signatures":[{"sig":"MEUCIQDp0JUjQH/STyabwpuq5X4CBZvraQ4rfa4pSpt2mODJDgIgZiBs3NTpDOQ8DjkWcvEQO88jGVo1gPzdx9/++8b5MOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/list":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/menu-surface":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.aa5ac7fe5.0_1684776465401_0.8018293723612988","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/menu","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.90291f2e2.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb54c06471afcef2fcbd6bfe941a13975d6a4ab0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.90291f2e2.0.tgz","fileCount":39,"integrity":"sha512-yfpBN4Hg59pHMNplh2LIe8t+/qsfyP0iRAtJoCK90SBwX43kv65u22+3vEJmYzm3Ey/m3S3YRFXTFQRQnn9cmA==","signatures":[{"sig":"MEUCIQD7D2iJOCSaE3q6ufjA/GfUlKYzYgm7OQ7gANZjagQEHwIgBowFOfrB71C4xk/7QjOFNx5Dswqj6C2aVdoQ7v78aAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/list":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/menu-surface":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.90291f2e2.0_1684863890272_0.7738639189961904","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/menu","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.446734f27.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d2f7dd2bf65ba3aaee84268c5713ca26b9a2f7f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.446734f27.0.tgz","fileCount":39,"integrity":"sha512-xNVdPCXJ13CWnnW2XzZNxREr9LTKjPbCqx4d7BRBKXBFgW+Rqdiw4F4KVPjf6x9Kawq/oBs7LWHJ2naREDAkYQ==","signatures":[{"sig":"MEQCIGnTyE+2eDgfDuPF+ySwri1zf4Eo0j1r1KTNWubyjIUhAiAo1JgwV4eHc5R+WfCxISj1HlGMUGs9hgjrBpJIIr25Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/list":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/menu-surface":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.446734f27.0_1685483397347_0.9498337509602275","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/menu","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.19de312d8.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8281880f397448b93366369bb36b50d8272b6afc","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.19de312d8.0.tgz","fileCount":39,"integrity":"sha512-onzEeekv9xTTMfwqabEnU4+PDNKaXgxwjij/gCYcz3DpznEycypgEopm6veaPcyOLggOEeLj+YkP8lS2xbxfkg==","signatures":[{"sig":"MEUCICQoYEu1q1WLJUScoWxQgDDS7Gb2AKMzUaMJpFEi3vELAiEArLWwioc0hWoc4bV4d+9QgWcPx+LBi8gqwPbBdYB2rM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/list":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/menu-surface":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.19de312d8.0_1686072019282_0.14470737151534574","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/menu","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6081d829b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9bd1ca4fe3bd630ee97381295323057237225e1","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6081d829b.0.tgz","fileCount":39,"integrity":"sha512-tQr4SMLqTJ8kbVZbkJzbpJ6PWUhxTRUZOMqMJ3zgX0ZKGUlqYCFsIdTHE8UJxZj6AzJ1aIyKZOjIC1pwPGx1lA==","signatures":[{"sig":"MEUCIHgwIcTJIA+uQlL5bxJ/C3O2rfdE9HLa6V6U1jKgzk9MAiEA2HoArYrs7WC2i0VeCL20py6H8DffqTD3lRcXCxJeF8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/list":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/menu-surface":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6081d829b.0_1686100549756_0.42530052981301414","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/menu","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b26c34a68.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f0e32999abd262184932bc3c30eebe0111cb97d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b26c34a68.0.tgz","fileCount":39,"integrity":"sha512-5DdegiNJdTyTyJssBkYcbhaQ5dB91T8J0SrYGe4pXMbd8+PH4ad0DPIxXdAKz7OzvkFTh7/OsRuN1ie9ayhQJQ==","signatures":[{"sig":"MEQCICTpt5uKopFfw3JjJ88T/EEHcaxcQPO7l/BSecv6gLmRAiABgKGQ8B+191mC6eRPpY0y8d1oB2mWHb6DN4HRu8wdJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/list":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/menu-surface":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b26c34a68.0_1686169221249_0.4878299505241457","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/menu","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4fe911371.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"485d36d0ac42ada6e20cf878bb3c83281b7e6c61","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4fe911371.0.tgz","fileCount":39,"integrity":"sha512-LCeeJlsoxdGF0QVLspU6mykBqgQc2UNz6dFXjzYIPu2IYgiz+bzB7ywRKTFUe8cuanNt4bAydwBwKu9DV3wy9A==","signatures":[{"sig":"MEUCIQCB+PtuSfeXkqJkEHD3pbgVlr4uzOtCklMEX822rPvvfgIgLksoM2HG8Yu9P1SUOXQ8HuMb+Ne8Pz2Qx3EdqsPWp4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/list":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/menu-surface":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4fe911371.0_1686179274077_0.4574534367309595","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/menu","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a9ff9866f.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadccaaeeeea8f7ea92a8a7823ac4df9db976ec8","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a9ff9866f.0.tgz","fileCount":39,"integrity":"sha512-2QI0RSUk5npKJd3V1X7wl0cVhJ+Tnd5enJd6ZI9RtaJfZFhcUiYIR+HESeF+sjkxwVWXJe8b0FAnizePDcoojw==","signatures":[{"sig":"MEMCIC4bkvhjADVfVjQlCAC0gAwIBL70EG3YgM1NE9OJcu4PAh8dvTiUuyaGTH+1iSq9uid0ij8/SvVJi2gox5BaGN29","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/list":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/menu-surface":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a9ff9866f.0_1686656403198_0.4273170103938069","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/menu","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b994146f6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5ac72749b33b67dc413fa02fa1f6c6ae056327f","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b994146f6.0.tgz","fileCount":39,"integrity":"sha512-y6smNmLJ+U0DoXWbyqzW+VW/uWDuklhdGHc5MbZrTOhsKkhvoTVNMSOa+NFPU4gTwrplvUjaUvnIsQ0wygwD3g==","signatures":[{"sig":"MEQCIHdPQ3ytaCbg4AE+iWjJC5tlryfjb4Yox3cn24xlFsXeAiAX9WpcU0GjE/HOk1GNa0+BT35SwSwVl13SkkOESq8o3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179687},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/list":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/menu-surface":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b994146f6.0_1686776737023_0.3580182506780243","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/menu","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1fb4b1a06.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a818bde27866a51b04d540c49d68c00517ff60b0","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":39,"integrity":"sha512-VURkn0S5ncJas0PDDvaAj9ZU3eIYzcpDfo6rTKwS/U34M1bpuxKxgY9ObrDH3vKj3sz+1DnE6lwOxQM8i63YHw==","signatures":[{"sig":"MEQCIBJ5OIpgV8j47eow6WyOr/LLXorM9GfL4Xy6jaW38MOIAiAVHT9ct5KpoX6OKSLJQMy6zYro8QScswuorPhBRSh5HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1179897},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/list":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/menu-surface":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1fb4b1a06.0_1687892348932_0.6899133763181127","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/menu","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c64a2776e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a02ec821dbe10ec1f783c9be3ac8e77eb93548","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c64a2776e.0.tgz","fileCount":39,"integrity":"sha512-YR68M7wsfHjvbp46zfUUHyFWT+zQz7Js71I4lJtSKwK8B8LH46pWA/dveFpzFDhci+hPU9yZ0HpvonSt74Jn4Q==","signatures":[{"sig":"MEMCH0w13E1VCrOA7/RCmuy8vs3K6UdJW2CtdgKV6vC5EHcCIFIqT6HREg4Cv3Lg9HA1uIfqPB/dEhFZWwFbaWPtQIv3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180123},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/list":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/menu-surface":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c64a2776e.0_1687897112897_0.48789354552279285","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/menu","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.b05d9eb7c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a35750a434450d1e6209e8f83d0ceed8a38b9cd","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":39,"integrity":"sha512-MUGpG+WM8ZrJsgf5AsttO3wAhEv0W0BFAa6ekSTSgJyTyGo7M8hN3Fuw+EovFt1RWM61Gif2fhPohHdMmUHjEA==","signatures":[{"sig":"MEQCIBadEI8NqHsrEnH3/GWuYiRIeXHz+AQWALnoIxm276SgAiA/KNRnHYS9e8pYbmHxsioWNpbKuMIFaAEcieXhCW781Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180123},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/list":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/menu-surface":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.b05d9eb7c.0_1688055937887_0.22742819255929025","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/menu","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2a9697dc5.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca46f0925ff172d5da1f4de429c8b2732e9a951a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2a9697dc5.0.tgz","fileCount":39,"integrity":"sha512-ByShAB492h99XbG2ojOrEyqOekB/G3YkphQQVQXXfdkEZUv0J64faITKH6FCZ80NrUq9gjpt72Jwgr8h7oWerw==","signatures":[{"sig":"MEYCIQD4sXMkPKMbPXSv3Y5vGYeEISDJ2uqsndXMDwIKfMOxNAIhAK424txraoik3zO0KO9b/oBlVTCkr8OIf1pNeAwKJ7zD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180123},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/list":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/menu-surface":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2a9697dc5.0_1688163340280_0.5336875748831429","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/menu","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0c52adeab.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be05874e02be978e7284680827ded5e5c4eec59","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0c52adeab.0.tgz","fileCount":39,"integrity":"sha512-1URVg7TkLbhZeyyMzdgPl5GzpLonG2WWfj9iTiWiBOzRUtslTs36m+NovxHyZzBdoFZoq3UyW4Zbuw4lQ4DQ8A==","signatures":[{"sig":"MEYCIQConuK3iHkAIE+7si3iHqF/YYwfjKP43P+6dzp+OeNuuQIhAOnCJDbMCQoWiBlp/dWB92MAxIsRBSWuxexZE1EZ+RSI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/list":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/menu-surface":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0c52adeab.0_1688574465174_0.7608279146549397","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/menu","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.83355c322.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef2666a8f48e2bf7d58fc3fe2bfb880ec67d99d9","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.83355c322.0.tgz","fileCount":39,"integrity":"sha512-m5YMSkJWn+YvXzQ9rSNV2F6L+0qzmx+SLvpvdM1P3irRGhXPvJU3PrjjRCutO0lAHNLNx+x7Ujs49gDRM3t/6g==","signatures":[{"sig":"MEUCIQC0veoWXyvpZyLPcXBc5xAzhyCSkbRVeXhPxORn2/1P5QIgDOohYJw5uXzk1aJKmHH70j2cyBoPTKvx+aLuzdn6FtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/list":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/menu-surface":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.83355c322.0_1689001660963_0.9997765985595148","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/menu","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.bc9ae6c9c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"162fbd5b608fbf6edd4a65b3963db947c0e4c96b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":39,"integrity":"sha512-IlAh61xzrzxXs38QZlt74UYt8J431zGznSzDtB1Fqs6YFNd11QPKoiRXn1J2Qu/lUxbFV7i8NBKMCKtia0n6/Q==","signatures":[{"sig":"MEQCIEUGIigT9ytg8zOuh2YKzbYN6rqnjv6HEGXj0idZzpXnAiATvBZIiAEufjItJUqjnyajx86HOSsjIk7bI8CLAlR4yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/list":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/menu-surface":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.bc9ae6c9c.0_1691097803140_0.13763841479883832","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/menu","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.3c44cd956.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c96f0d2ad9c725e86fc091f271891b0d3fe5db33","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.3c44cd956.0.tgz","fileCount":39,"integrity":"sha512-r3BQRv2odpOkI3A7xigL0pOiOwFZAcj3cP91C6jlnUhl2EiCSvBFnXdozI/zWyaXcc269EtNwCVT+HBjTKTMrQ==","signatures":[{"sig":"MEUCIQDjlIwUcfOHiYxDDFW4gIJhS0vvGO8KQXMx0+IS9wKBvQIgOmMGL6J+A+Hx/RGxA14pLIlgFtloRX56cekGyQuudXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/list":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/menu-surface":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.3c44cd956.0_1691430620966_0.3300609179359473","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/menu","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.02702296e.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f09f1591b29395ae8b070712538d533bc7aff5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.02702296e.0.tgz","fileCount":39,"integrity":"sha512-nFIDFfKoTYsxVnxqzMvC9xE2E2dv3VJ2deLE6Fh1nw8d6EHa+OC1LJz3uOXiNSrD5AMVVz5XGR9uVbkH0tSGag==","signatures":[{"sig":"MEUCIB/0Qyy7ao4abyh+/6gT/KpjQDHH7Rb8uZqaEIyyM28JAiEAkWUf++XiR3kdX+yOs97/o69oTm/lJLLnlAzGWtm6KJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/list":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/menu-surface":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.02702296e.0_1692965230865_0.7362262405674458","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/menu","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.872b65832.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a857b8ac340238e6797fd50f92f5cb1f855d35b","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.872b65832.0.tgz","fileCount":39,"integrity":"sha512-u7G8lorY55OwSr7nW8qsoZKDbf3uxRPiCaN+RKBbcObbvWZEi9wO/jmWZjNeSmJp1ciVpCHXokcYCa/BiRZMIA==","signatures":[{"sig":"MEYCIQCZYAvp1z355LXyi8HlbI8iBGuq10k3JI1GZ4Sr0Cj4FgIhAId8KXOrjIPXMGPQ0yRD8PFd0aMCa3nUMmuU/nuYrb3S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/list":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/menu-surface":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.872b65832.0_1693397729442_0.9872793839646847","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/menu","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.89b2e4122.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d5a49c1c985f7b8e601ee198815e781323068a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.89b2e4122.0.tgz","fileCount":39,"integrity":"sha512-pGb9a3fIgOJ10aBVQNgQC2mFMFDN0zl76MfVinl/WClAOQx7UrcsUdMS23k17xKgaaSXNTCor78+2p3IC9HFnQ==","signatures":[{"sig":"MEUCIQCpIfZUHamfhBhnQVNMzZAuV3H4yOBMFAl9NRbHhBwfdQIgeHZoBX9WBI1opptnKSYxw7PnsZI/cmHt1hurhZwDcsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/list":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/menu-surface":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.89b2e4122.0_1693498127526_0.8047398537628334","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/menu","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7a3942e7a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d84d060ab84f98563985f0589ada691e2932c223","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7a3942e7a.0.tgz","fileCount":39,"integrity":"sha512-v+jZvT9fnA5GgmBs9iO6aqQlxFz88Zvc+RwV6sTh/fANW+y/+77efJTcQWqF/M9JIRnFHlyg92VC0Uvlaf1ASA==","signatures":[{"sig":"MEYCIQCv+/PlTvYFqVsg4tIdX3WUZjMUcHtDyxS47o7AEbR9IwIhAM7BbtbHoU332jKTTVRS2/Bi0lrGmLYdggVAd8EgJbTa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/list":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/menu-surface":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7a3942e7a.0_1693507296276_0.5604173381758735","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/menu","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.54feb3020.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed72deca64a07a597d0f97353ffb1c1718e2b65","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.54feb3020.0.tgz","fileCount":39,"integrity":"sha512-0Lj6tNdopEDjhs3mBz7M9LY5Wy1o1Qt40l/nURcvy3uarn0Q/2yejv6YSPTg1TAaD9GHFVtG0QRMFzA5THZBjA==","signatures":[{"sig":"MEYCIQD/VOqTAnS5g2uF//nXVC0Gp/vWMuSWgr/d3DOByLhV0gIhAKRAN6Mh2o4Zhjm9/RcTuLKw4GC8h5BqcWpxbtzLrhm0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/list":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/menu-surface":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.54feb3020.0_1694466435807_0.3778256875054027","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/menu","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.6cda3ce8d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf69a7eb9fa6440adaaf98cd016360bd5910044","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":39,"integrity":"sha512-V1GXqt75nrMkQ6L54YPvU/j6jpUhsTu6qedDCJLD/JybESHWsmjUcREKg6hOv8fzH+cuA8Xb6AP65wOvQkXftQ==","signatures":[{"sig":"MEUCIHASo8Gatn9+svdJ/4bTe+zHOUhPiiuOq3lon4a0YzhaAiEA3Zhgs4i1OvKVhRUhcuN8EaTI20u100lbjH4EOncaE/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/list":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/menu-surface":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.6cda3ce8d.0_1694483233897_0.5482247333926371","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/menu","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.205b20b36.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23ebb8461ae7238a8a02efb50c1203a97e0f7000","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.205b20b36.0.tgz","fileCount":39,"integrity":"sha512-ou7jcYBs5aUzXXNWJ84TYh7Pp84Np4PACuhA7/7f/GtLxtV2zTN3NFr+pzbqZVLDYVSbfwH2gP+5E6bwy4c+Qw==","signatures":[{"sig":"MEUCIQCY040sNEqexMhNh5IZCQPgMfVNCAruYf4JukGF3nyM3wIgMQEz5J+n5vCSNWb8TeqVCG0kxowBy3s/2yTR5/6OufA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/list":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/menu-surface":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.205b20b36.0_1694625649741_0.33808645709519003","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/menu","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.22bf82024.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d66a47b69096adaac9bd8913309681928d48f973","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.22bf82024.0.tgz","fileCount":39,"integrity":"sha512-0qNPx0jQg8Q5Zfsq9egSLOl2u/mSrsGjn1MJkpywCpBBgWq7AsXSLmCtLVDcDRBh5c/GcWhy1FBI+Wj3/gZY5w==","signatures":[{"sig":"MEUCIQCgXUMAe2CJl5u2Z4u8oGF4pwOem6kfV2XuhXgHsyli6AIgJT3h9HDXbNSY9gw64YRLkFsKYvuiE+cEeHNZy09ch5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180374},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/list":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/menu-surface":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.22bf82024.0_1695028427097_0.5704690394076752","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/menu","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a246a4439.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8725573ff1296c7b1d6539675243a64b96b4957","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a246a4439.0.tgz","fileCount":39,"integrity":"sha512-2HOHQAIdWQtXjSvEIrW3lnbcIwFf5XaQhFzCEZ04FcSGApc4iLwsmRFVW3PzWx+mVrUrEfO/K42DVULIX9J1Pg==","signatures":[{"sig":"MEYCIQCmZqEFz+fVSPD8nEd1gMlbujbanl9bEEoWV+muApMaEgIhAPrJqjz5938qaOMMlhvN3gZxchHipe76SXbSL3uWbshB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/list":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/menu-surface":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a246a4439.0_1695059289354_0.8491202771303503","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/menu","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d153db62b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98cb396445e68ac89e4ac0ba6387514f51b77eaa","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d153db62b.0.tgz","fileCount":39,"integrity":"sha512-wFRoWl3+PVxMeMadp6yghAbcYSmxuamfB+3Jy0NBGp0cOj7lSq+zlOhfvw68Q8lbACL4ILZxsX5ne6r7ONBCrw==","signatures":[{"sig":"MEUCIQClzvMINea5yz5OQ3CuBPqtCOmtQwRy7d+hHShsed3UZAIgPRCJpFinzJifUzjV2CLpaJUDHub1Qks5PkbHCbrO+M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/list":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/menu-surface":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d153db62b.0_1695151039651_0.7450166981459976","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/menu","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2528c1c3b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b34efec8795a427e2fe16857cc44051d21f8ed","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2528c1c3b.0.tgz","fileCount":39,"integrity":"sha512-PAz2ffJDhwBRfqQECiZ2E1KMILDCToFO9pSiPl7xsxspByHdLDUs3aJ2hR0acL6IELqhryWBJ2qNW5tQdxQODw==","signatures":[{"sig":"MEYCIQCBWyaV/DxxMtHiWtmmGp73KIqf+ggHLbxVBW7X9RqdcAIhAK4qv49MCuMAr0S5wvjXM0SZ/mq+SgDP7JIeAMO531uK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/list":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/menu-surface":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2528c1c3b.0_1695233328620_0.09360229711541823","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/menu","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.1728a6dcf.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a28e8bc4c7b73852407300f83469068f14c58817","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.1728a6dcf.0.tgz","fileCount":39,"integrity":"sha512-beUzR2DsI9T/JylpnvjyYJ8Ljba7mpNHkPR6jqvIyMVGr0Py19pj+kUSccf/BDgX2AdGffn2HMPWxnbfx1qDMg==","signatures":[{"sig":"MEUCIEYmObCKaoJiEmFRuOQfZC8eXKt1eDh5iWe+m0cKCPXwAiEA0vVJDeYwINhf4uNnk77zyviEHAyeeUS6PJ1M6g6F2ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/list":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/menu-surface":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.1728a6dcf.0_1695691501136_0.07967287528362932","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/menu","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.ebb636f3d.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac28c181be5ee97743001129a977a97b23f4945","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.ebb636f3d.0.tgz","fileCount":39,"integrity":"sha512-b67NxA0DXxYYezHTZm+iVqke7ltsHRntDYZgOcDBrGZ6crhH4QEyN3S/HKKnZProqxE/Fl2HTEPKhOTS8PEmOA==","signatures":[{"sig":"MEQCIElgDJqv6XLKquwnIldRzfpqUz8UB5Zmw3B9AWRbIDIMAiBv8EJIJ0VlSxhBpOZKG2e69v7yC5HhG8TmyWo6Ppsh/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/list":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/menu-surface":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.ebb636f3d.0_1696016767644_0.34426746120388185","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/menu","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c0d21ecc9.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d12d56a1b2e4baf561ce8271aee465d90af9192","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":39,"integrity":"sha512-4FzPilDMbdKCGyhIrbt9rrO8dz+pNqinVAYgheYF6jvnokhtLOFJm4S0CponUp7Nuh9f+adXV+MrIF4xaAtCog==","signatures":[{"sig":"MEYCIQDa0XPrOjMumKoJSGh5BYR4OoyOb4V1UVxYMiyB9wIj1QIhAKlkC35Uz79O4sOuq8VcSplUsTJ0uWprsxF0Pw0gOUFJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1180626},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/list":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/menu-surface":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c0d21ecc9.0_1696880312449_0.2586731301273424","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/menu","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.127a44b28.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed43f342f3692f761d11374b61240a86037ee69","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.127a44b28.0.tgz","fileCount":39,"integrity":"sha512-BVzBI7cyAKbc+BIyblOGUQAkEjTYmVWzWpQmV550Nn/g4Vso/yTLWRdkJNm5wh4hV+PNXCHn4y/m5SmXbEbfqQ==","signatures":[{"sig":"MEYCIQC6az9p9eHsjHCghnXNq25cUMPzXojZkhcicfD2HOyFwAIhAMhf1K2F5xRj2bMCaqeGBSl9iVcBj1BY/TDBJOGNR4wn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/list":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/menu-surface":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.127a44b28.0_1697140947159_0.9311347719680863","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/menu","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.0ad128337.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9c6085a58481328c67f07d9c1bc50ed4c92bc5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.0ad128337.0.tgz","fileCount":39,"integrity":"sha512-b3tvV+9UtEcdien5jFZhvfPwPVAQPqPJODzyoKjquXNLsOcQc+BchEa8Fs2n18WXOF10UeCFKZsmfACucyZ9KA==","signatures":[{"sig":"MEUCID7FbIRCI1d39a5VW3n9Aj84d8hFScaSKw1Rot4iwE7yAiEAn09VpuLFX9ZkPUieJtWX7C7iY9ZIHrzF0nIYwA6B99c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/list":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/menu-surface":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.0ad128337.0_1697741645660_0.13360641643987559","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/menu","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.9cec94097.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de70ec52e257182f51b3509fa4d56af5a344ab91","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.9cec94097.0.tgz","fileCount":39,"integrity":"sha512-lhvnLdIMLgpVvGJGOMEHZ9y+xIb70SNvYlkL1Uqfb71eecAiKmKVWYGAvFWlTY72lTdP1UFsJEeYwAqMLx3EMQ==","signatures":[{"sig":"MEUCIQCHal+draAajhPTcA9J6ZtU675YoghE8/VTCiv9NUtW5gIgQI4Xu2g+vZZHgyPfRxJ1UFG4eJOTL+BRq3r0VFj/sB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/list":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/menu-surface":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.9cec94097.0_1697757078706_0.05294096263164105","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/menu","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c51a0bbcc.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"559f0e2ab8c20adc685e4c26aff0a99e80d50d35","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":39,"integrity":"sha512-a2B8aIpNH344HB1dpLChyfmmqXHDCdllpLtoRkD7F5qKAZY1s93Pq/K9rD7NyvnQVddLmjtmiN7JXVyXUjpmUw==","signatures":[{"sig":"MEUCIQDi+2N/4FAyESQOui1pefWk/bD1ip/BZFsycYYFApxgcwIgDEO6YXPPwTVwTI57EQ37InGjNuJEIYukZAtgubFWGdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/list":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/menu-surface":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c51a0bbcc.0_1700081966937_0.32969908865775266","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/menu","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.d76666ad4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bbc80a14cbdc53804498fa00163501db0e520fb","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.d76666ad4.0.tgz","fileCount":39,"integrity":"sha512-leZ6GcmuZitQSjF6xF0kBmnTAEOqQU9fHa+aSpIqyWhDG8nbV1y5Ehjlppe31rZvs5qa+4Hy2STeNUY8sraZvA==","signatures":[{"sig":"MEUCIQDSMOnEQNtNKzDX4OQhx0sBW8xnZ8sous0JO67YmZB35gIgE1NpLvNCAX8EOSF0LgoBL4BNYZMUsf1E4hiQb3nlI4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/list":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/menu-surface":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.d76666ad4.0_1701123233417_0.9070957525268866","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/menu","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.8656bf0e0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af57a23de891598fcb78fae2c6ade1347f756f96","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.8656bf0e0.0.tgz","fileCount":39,"integrity":"sha512-WDzboqw/T4jIlMf+KgNSL9Mq1Agiavaurj2+CcO6SivqD4mDRNC+fYIl2bhVkv3NGVnZwg8H6sy/clA6hBnj8A==","signatures":[{"sig":"MEQCIAxte4cKpstEJWo2Ji/7vQIX4iHKkvd2G4f/mvTRfuSMAiAs7N+YUFJwbCbtu2TjpM6UY3GZ6fpPIE+7Or+lrPhgwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/list":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/menu-surface":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.8656bf0e0.0_1702415965892_0.976538001471057","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/menu","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.7f224ddd4.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a2fc94640afae6e816a75abf5dfc77d0bf9920","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7f224ddd4.0.tgz","fileCount":39,"integrity":"sha512-D11QU1dXqLbh5X1zKlEhS3QWh0b5BPNXlafc5MXfkdJHhOiieb7LC9hMJhbrHtj24FadJ7evaFW/T2ugJbJNnQ==","signatures":[{"sig":"MEUCIQDCSpjWm7a9tiFAajGo+kf0J7mQcP4zQRc8TXpIBEx7mgIgCiYTC9VaOa9fYpunoqbTkWXive+1NfUS7PJA2NbzqAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/list":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/menu-surface":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.7f224ddd4.0_1703743798389_0.8949713937066983","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/menu","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.a0b8a90c0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4564328eba710dcff77133a2f38dfde534224b70","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":39,"integrity":"sha512-x7k2EO8KNvQfu8vnXudg7sSx8TBJumBXXtxxlc3eCc6IZhVB4B9tTMrfqfBjZj/69LoVN5a/h793zcSoSx2wpw==","signatures":[{"sig":"MEUCIQD1LBnNCGcjQ0D51Gruq/lcmCbZYf+dwxw7sby+jwDUDQIgWxHdDn0o+Kv8xwf7Lh5tnxYCU9MP0dkQAM0VCLc+j+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/list":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/menu-surface":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.a0b8a90c0.0_1707333617961_0.2976225065583771","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/menu","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.e50b478eb.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f2bb3b28e6f5b0cece22e3cfcf555a0014fb68","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.e50b478eb.0.tgz","fileCount":39,"integrity":"sha512-VkNVGTbmMDvm8tT9P55mekF3VNtf5CEmP4dp9oCRdvcomk7rLT12Jkkh5/F6m25KzpDtQVliDx8w9Rx5wx+x5g==","signatures":[{"sig":"MEUCIQCl7ASMAeHTop+rdb9mAitK0WgsX6rXAwjy6okamX/dvwIgJtog6e88Y02mv9Q/OyUx1igAm0B1LNfIAnQ7rCzesUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/list":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/menu-surface":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.e50b478eb.0_1707415737733_0.443878825060376","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/menu","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.c43b3438b.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c396a0dff5902f449a372aac03534e389cf775","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.c43b3438b.0.tgz","fileCount":39,"integrity":"sha512-ON6ZsGdHXUvjP6lc5z28I1tDlSkNrxgTxhXkx4AI0W0XhVKdRLbmUxtljnrYQfwU0DCBe7ks9kBcpbOM9WJD5w==","signatures":[{"sig":"MEQCIBSe5bXVg8brCcQOI5SBo0Tqq2lEab1+GUjZf1lQm3zzAiAGu4BV/oSnHyYPa+6BOprLRCL547vg1dj8iSzsxYPN0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/list":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/menu-surface":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.c43b3438b.0_1708719505308_0.5532522325513263","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/menu","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.819498d8c.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d3e61f862954cdb694797b440a0984bd789956a","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.819498d8c.0.tgz","fileCount":39,"integrity":"sha512-fep78HWHiYNBu6hdNcYaTfr/U/m9TeR15donwDQmmCTVbu4vYQxYIgYaW4vX2lcjxRcEC+9vLf3nmXGOsM6ssw==","signatures":[{"sig":"MEUCICbccIxDtgdK1RC1eucTjyL2a5nUIjuiFFJQWyaarrVOAiEA/RZug4LCcfgksLu4dYwyanUH9Ehb0j9FPs5jK8blUmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/list":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/menu-surface":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.819498d8c.0_1710515758532_0.3658696837270472","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/menu","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.453a6248a.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c2ae32207e30f792be06fe98a630bc69098cfa2","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.453a6248a.0.tgz","fileCount":39,"integrity":"sha512-xf0tIC2xRSrAGqpKGB9T5Cl9GCZeVMPmX52pUymMHOlZcXLDje8yvEsAYILCtIMsdGFizuYDPwQiDJ45LxAAkg==","signatures":[{"sig":"MEQCIHT33eVBfKlmmzJk2JIXnGwMYYjXmOBATsvK+DAi3XHYAiACns2osEo8HadboWuKZ1WGWebQu/lrF1031KO+C9fI9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/list":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/menu-surface":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.453a6248a.0_1711386866855_0.9567972334574844","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/menu","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.68edc03c6.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a246657cf256d069ee58134476d9126c21aff00","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.68edc03c6.0.tgz","fileCount":39,"integrity":"sha512-+GgleinFyfiP4/c9brYJVsBb2wqpjiShg6as8IMFKpZ4LQcIzpEnKJ46Mf86mLAANexqT/AuMFeiKjcTdI6+Iw==","signatures":[{"sig":"MEUCIAzcoFs7LKUizT4WUHnkGRll0a4SmccmKUqAVvprE1IHAiEAv1Fq5byNv7wJMIHOnLpSTNeuoj0Kv8NphY9Q7d4V2Dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183254},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/list":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/menu-surface":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.68edc03c6.0_1712603252000_0.4342255081163011","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/menu","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.5bebc0064.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d24dc9ca7e7654679951e70e3d0b5d558cb195df","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.5bebc0064.0.tgz","fileCount":39,"integrity":"sha512-D2B6jWsf/pdcU2GL2WniAaYhNENQcoXuIeBaYnuOTRgUCo4gw7nTWAGxMtFqUzkh+iB2m2MaYk4vc3ubuOCSZQ==","signatures":[{"sig":"MEUCIQDw/6FXjbtv6VSqbfn3O/15Y8A0wJ0xPFpSDon60D75ZAIgVtC1UEPiCxrN18Bfx6nv+D+8zgUQf+zK3osoJODVMgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/list":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/menu-surface":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.5bebc0064.0_1712871731825_0.1993669866559733","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/menu","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.311f29a60.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73a26ee808130df7f826d696c8eccec4d9fc36b3","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.311f29a60.0.tgz","fileCount":39,"integrity":"sha512-vr4ribRIVExr7h6ysmvL2wcyOpo5D+B19xzNfALGs5vdE4jEAxQx+CDz9demyaJtptpWM3i6UzS3JCuj9zAt5w==","signatures":[{"sig":"MEUCIQD4wAjOkE3elheUugoE3Sxdm9WVd0CnB9sxEiDAydjv/wIgf3Om38lKWYvg2IB6HuU3WtjtXdpXDfZqNdHAoIzJ0nE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/list":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/menu-surface":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.311f29a60.0_1713895284435_0.03996322218623782","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/menu","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.65c10a622.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a7755ecb9a190c2731084dff0913e87e6e5c54","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.65c10a622.0.tgz","fileCount":39,"integrity":"sha512-kDGJj47aLPNfVLwz9mY62a/KbeGZ8lDwUGAzsnuwQmiHd89SeLmvQBl1i/glsbVdpZ1OykimoOsxaST/pQP4Gw==","signatures":[{"sig":"MEYCIQDUef9+W+ECzCTIAWWsQYdSua8uVobV25YhykotSY2HLQIhAJA3Gcfu/OwF2W9HNb2kQMqz8Z1k+bfOGKgZC7fABHLq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/list":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/menu-surface":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.65c10a622.0_1714070990539_0.4898596015419441","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/menu","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.4b35cb7d0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d762015569a03da664650a86f59a0f8fd1b00f38","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":39,"integrity":"sha512-Nac7WNYex7unJ2SoeGfn0QUbV1y4SlohK1Cntt0OIhFAH2td+UX7qqc1aPWavqZJF0Adlz3qNYNO40c9/vYjUA==","signatures":[{"sig":"MEQCIHNRXD0ZpLRh3zCXj6z1sK5tbTS4Z3BMBJx5dWbomkTaAiAmiCgz3nOEhKQ3rjhYamQRUIkF4y8wP57d2u3pxpQTMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/list":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/menu-surface":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.4b35cb7d0.0_1714651434899_0.6072610630059481","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/menu","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.f80ac92b0.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4131356cc1463db779768643e6204404c0bcda92","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.f80ac92b0.0.tgz","fileCount":39,"integrity":"sha512-M3egvzUUt8hRYDIkrUoIHTl1seEwGmZ3VUpvAKXRSKgUb94E7Cdeg8plApjP7mCDOuqAl/J/lVhJ6+jUXOaJ4w==","signatures":[{"sig":"MEUCIG0t1d39RIbkHmeAoQ+Ck1LZuoynWN+5eSn5eZMe2ooGAiEAgD/G82NMMOAiYqw+daZpqxdm2BbcrrfF7H/Dxk7Acfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/list":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/menu-surface":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.f80ac92b0.0_1714652042268_0.23439283974776104","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/menu","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.2f5b899bc.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d668955646e3f6a32ff9251c1f68630f0a4a9a10","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.2f5b899bc.0.tgz","fileCount":39,"integrity":"sha512-WCDDP7DheZVTuWuM75XlIsu8uuZts1mv9a986xWnIv2l+RcPbysfyL99CYEk8/XocJONIuuHDvb4/FzmkUrdhw==","signatures":[{"sig":"MEQCIB3soh79MGyvBPA/nxe8MRavorYl1qNovTEatcdkOk5pAiBPlNnZSgnEekvpGhTLcqo2zCkBRBLGKM4CP4BUzqs3Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/list":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/menu-surface":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.2f5b899bc.0_1716213465040_0.562070194870596","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/menu","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","menu"],"license":"MIT","_id":"@material/menu@15.0.0-canary.cfec83c74.0","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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138dc04fb538e31d3440ee0e6b5558ff1b01577d","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.cfec83c74.0.tgz","fileCount":39,"integrity":"sha512-/sVwb6vdI3ndfj0SBy+TwFW9wv4zditPRZh5asaVzwpbqeUudQ509ZSzCDLXsdvW2bNXDhpphZYMbI39EuslHg==","signatures":[{"sig":"MEYCIQDZ6uIdvfn3f5l5YqRdiBwFmcgogWlCl+icjae0ENpcZwIhALyjTiy3udLkUBleuRPGCVlqKB0Msqx4tzjP+LTkTX55","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183752},"main":"dist/mdc.menu.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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.21.3+x64 (linux)","description":"The Material Components for the web menu component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/list":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/menu-surface":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu_15.0.0-canary.cfec83c74.0_1716231465435_0.983182959851677","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/menu","version":"15.0.0-canary.423edc3dc.0","description":"The Material Components for the web menu component","license":"MIT","keywords":["material components","material design","menu"],"main":"dist/mdc.menu.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-menu"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/list":"15.0.0-canary.423edc3dc.0","@material/menu-surface":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">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\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\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<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\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<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\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<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\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  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> 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 <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\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<Element>` | 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<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` 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(event: 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","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/menu@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-88yRuhRCWUW4IbhDcVyX8h8+O7NraaXCFBTQjhSkH+cyfUHnoyyAzS7jN3SaysVcCt2r5C+E80a8wbqaF2l2EA==","shasum":"b5dc32db1778ba3cfb87d746faea5a6327c064a5","tarball":"https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.423edc3dc.0.tgz","fileCount":39,"unpackedSize":1183752,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKc8EPCx0GgkIu7PuC7lAdLo/uf6AWVDAvuEdJgQdB0AiEAz5AhVBNDjNN/vNbR584SNfo2IWY8Sp9pQU8SC2TnG24="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/menu_15.0.0-canary.423edc3dc.0_1719425539062_0.4037061893712839"},"_hasShrinkwrap":false}},"time":{"created":"2016-07-21T00:02:51.905Z","modified":"2024-06-26T18:12:19.665Z","2.0.0-dev.20160721":"2016-07-21T00:02:51.905Z","2.0.0-dev.20160721a":"2016-07-21T00:55:55.109Z","2.0.0-dev-20160723":"2016-07-23T00:03:41.721Z","2.0.0-dev.20160810":"2016-08-10T10:39:09.660Z","2.0.0-dev.20160822":"2016-08-21T22:21:17.692Z","2.0.0-dev.20160822-1":"2016-08-22T00:38:12.441Z","2.0.0-dev.20160903":"2016-09-03T08:17:10.348Z","0.1.0":"2016-12-15T17:55:30.444Z","0.1.1":"2017-01-09T15:57:19.824Z","0.1.2":"2017-01-23T16:49:40.779Z","0.1.3":"2017-02-21T17:27:38.161Z","0.2.0":"2017-03-06T17:02:14.949Z","0.2.1":"2017-04-03T15:28:07.136Z","0.2.2":"2017-04-17T15:43:11.192Z","0.2.3":"2017-04-18T14:51:25.161Z","0.2.4":"2017-05-01T15:43:12.304Z","0.2.5":"2017-05-15T16:26:10.050Z","0.2.6":"2017-05-17T14:28:26.274Z","0.2.7":"2017-05-30T19:04:44.019Z","0.3.0":"2017-06-12T15:53:24.492Z","0.4.0":"2017-06-26T16:10:59.627Z","0.4.1":"2017-07-10T15:58:55.138Z","0.4.2":"2017-07-24T15:49:23.226Z","0.4.3":"2017-08-07T20:48:31.099Z","0.4.4":"2017-08-21T17:27:57.685Z","0.4.5":"2017-08-24T14:46:52.058Z","0.4.6":"2017-09-05T20:16:14.019Z","0.4.7":"2017-09-18T18:35:49.578Z","0.4.8":"2017-10-02T21:11:51.121Z","0.23.0":"2017-10-16T21:02:23.612Z","0.24.0":"2017-10-30T19:11:29.708Z","0.25.0":"2017-11-13T20:02:31.625Z","0.27.0":"2017-12-11T19:35:38.058Z","0.28.0":"2018-01-08T18:55:14.761Z","0.29.0":"2018-01-22T18:30:59.836Z","0.30.0":"2018-02-05T22:02:59.075Z","0.31.0":"2018-02-20T18:23:02.543Z","0.33.0":"2018-03-19T16:40:05.381Z","0.34.0":"2018-04-02T21:52:00.174Z","0.35.0":"2018-04-23T22:40:30.165Z","0.36.1":"2018-06-18T15:40:37.488Z","0.37.1":"2018-07-16T21:19:38.287Z","0.38.0":"2018-07-30T17:07:14.938Z","0.39.0-0":"2018-08-16T15:16:45.071Z","0.39.0":"2018-08-27T17:41:07.718Z","0.39.1":"2018-08-31T21:36:54.109Z","0.39.2":"2018-09-11T16:55:29.428Z","0.39.3":"2018-09-11T17:19:25.843Z","0.40.0":"2018-09-24T20:02:12.646Z","0.40.1":"2018-10-08T21:07:23.835Z","0.41.0":"2018-10-29T20:22:26.216Z","0.42.0":"2018-12-04T22:55:10.877Z","0.42.1":"2018-12-17T22:25:32.360Z","0.43.0":"2019-01-07T19:49:34.718Z","0.44.0":"2019-02-04T18:24:30.372Z","0.44.1":"2019-02-19T23:03:13.973Z","1.0.0-0":"2019-02-28T00:00:06.675Z","1.0.0-1":"2019-03-04T23:33:50.857Z","1.0.0":"2019-03-06T21:08:41.353Z","1.0.1":"2019-03-11T22:07:54.913Z","1.1.0":"2019-03-26T19:26:24.788Z","1.1.1":"2019-04-08T20:14:18.409Z","2.0.0":"2019-04-29T17:40:27.279Z","2.1.1":"2019-05-10T17:25:40.963Z","3.0.0-0":"2019-05-13T21:49:38.212Z","2.2.0":"2019-05-13T22:34:04.511Z","2.3.0":"2019-05-28T21:24:14.104Z","3.0.0-alpha.0":"2019-06-12T04:07:16.961Z","3.0.0-alpha.1":"2019-06-12T19:02:35.747Z","3.0.0":"2019-06-25T22:28:12.218Z","3.1.0-alpha.0":"2019-07-16T13:29:30.251Z","3.1.0":"2019-07-22T22:03:00.764Z","4.0.0-alpha.0":"2019-08-07T21:10:01.077Z","4.0.0-canary.0":"2019-09-05T04:38:14.713Z","4.0.0-canary.1":"2019-09-09T20:21:09.536Z","3.2.0":"2019-09-12T21:53:57.858Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:57.667Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:43.911Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:34.018Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:21.806Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:37.069Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:59.570Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:02:00.498Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:19.121Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:21.678Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:59.491Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:32.790Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:48.132Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:48.044Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:37.975Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:35.168Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:17.797Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:55.960Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:13.355Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:35.107Z","4.0.0":"2019-11-02T18:12:08.298Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:28.551Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:27.217Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:26.792Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:56.422Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:58.980Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:43:03.636Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:28.460Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:31.667Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:36.232Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:54.875Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:37.735Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:17.548Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:20:08.540Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:39.171Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:25.212Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:47.915Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:56:02.469Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:30.079Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:14.508Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:55.762Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:48.924Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:13.915Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:48.957Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:32.330Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:53.434Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:49.077Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:35.008Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:18.124Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:48:04.064Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T19:00:06.135Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:56.626Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:38:10.893Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:11:02.036Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:18.188Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:23.222Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:50.304Z","5.0.0-canary.391674a26.0":"2019-12-18T19:18:13.414Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:56.059Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:08.652Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:25:02.923Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:51:01.625Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:58.397Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:41.869Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:59.582Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:25:00.525Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:44.916Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:54.776Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:37.831Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:59.593Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:24.358Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:27.662Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:04:00.285Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:52.418Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:43:06.013Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:10:56.420Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:14.825Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:53.727Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:27:08.226Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:20.568Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:46.971Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:33.706Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:18.386Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:20.253Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:16:01.091Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:56.374Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:36.945Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:18:05.994Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:20:05.306Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:38.662Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:59.111Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:51.762Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:46.233Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:23.417Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:11:22.408Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:40.366Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:23:07.826Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:25.419Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:59:09.309Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:13.806Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:54.186Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:41:05.656Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:54.574Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:40.862Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:11:06.222Z","5.0.0-canary.aab102017.0":"2020-01-10T00:13:07.103Z","5.0.0-canary.426913342.0":"2020-01-10T01:45:04.360Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:26:12.621Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:41.832Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:28:30.993Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:39.431Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:26.116Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:32.120Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:16:08.502Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:54:08.525Z","5.0.0-canary.60354c577.0":"2020-01-14T22:47:01.910Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:38.006Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:56.435Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:11:08.950Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:58.926Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:16.477Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:17.342Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:53.275Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:49.036Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:08:03.429Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:45.709Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:01:11.167Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:11.842Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:38.643Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:57.546Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:43.638Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:59.684Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:30.411Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:46.866Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:38:07.005Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:12.693Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:48.436Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:29.351Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:34.227Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:44.606Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:18:00.825Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:16.607Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:31.034Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:07.889Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:55.276Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:24.656Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:22:03.514Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:49.626Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:22.011Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:56.590Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:25:05.771Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:13.656Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:12.698Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:44.965Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:41.032Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:41.824Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:47.419Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:07.557Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:11.268Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:59.654Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:24:02.768Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:51.939Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:11:13.188Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:27.194Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:59.469Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:39.600Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:46.739Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:05:08.827Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:34:10.036Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:41.728Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:59.932Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:18.802Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:16.534Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:39.503Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:26:11.126Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:32.912Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:12.512Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:44:01.729Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:50:39.355Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:20.917Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:56.703Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:07:03.966Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:30.747Z","5.0.0":"2020-02-14T00:09:39.777Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:49:02.732Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:36.134Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:28.057Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:57.337Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:55.021Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:38.914Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:52.332Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:33.585Z","5.1.0":"2020-02-25T21:38:58.059Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:35.706Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:49.030Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:54.955Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:59.871Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:24.896Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:27:06.009Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:56.890Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:49.121Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:15.608Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:05.485Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:10.827Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:30.840Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:38:03.217Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:25.626Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:15.839Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:10.497Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:26.077Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:54.869Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:25.179Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:41.885Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:59.953Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:47.468Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:47.464Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:41.628Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:16.833Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:58.633Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:16:04.332Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:31.801Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:48:05.655Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:12.139Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:51.329Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:17.230Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:20.574Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:12.188Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:52.946Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:25.580Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:55.379Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:58.777Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:36.185Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:48.412Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:42.232Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:22.008Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:46.713Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:10.025Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:24:02.594Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:25.165Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:32:05.488Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:36.538Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:35:02.340Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:54.517Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:14.790Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:24.496Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:14.525Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:37.454Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:50.049Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:07.429Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:25.246Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:01:02.782Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:48.289Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:17.329Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:49.592Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:27.887Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:52.639Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:20.890Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:57:00.779Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:17.021Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:57.452Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:30.637Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:43:13.687Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:17.773Z","7.0.0-canary.8540808be.0":"2020-04-23T17:27:09.648Z","6.0.0":"2020-04-23T17:27:45.269Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:41.676Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:22:12.106Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:07:00.391Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:46.102Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:49.269Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:19.588Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:19.902Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:20.854Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:45:04.590Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:38.371Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:53.077Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:34:01.140Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:24.506Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:53.022Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:42.706Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:45.723Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:28.841Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:20:05.133Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:32:14.984Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:35:04.151Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:18.132Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:28.475Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:35.659Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:51.258Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:56:05.976Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:41.026Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:23.650Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:23.859Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:30.265Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:28.324Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:33.952Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:13.019Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:24.743Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:42.185Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:14.697Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:26:05.592Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:21.294Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:23.278Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:47.308Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:45.116Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:39.420Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:45:23.208Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:19:02.408Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:44.020Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:23.460Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:15.244Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:38:16.719Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:34.287Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:42.163Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:46.699Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:19.802Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:03:03.916Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:51.453Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:19:10.584Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:59.631Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:38.656Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:47.242Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:30:13.704Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:45.006Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:34:02.989Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:49:06.673Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:22:08.339Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:56.315Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:57.156Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:39.148Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:33:09.024Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:55.201Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:33.659Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:29.807Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:34.847Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:31.180Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:27.746Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:41.149Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:46.717Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:47.657Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:34.482Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:48.119Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:31:06.206Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:18.560Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:38:03.316Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:10.969Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:21.466Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:17.527Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:16:09.588Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:06:02.692Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:39.318Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:35.751Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:21.451Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:50:06.331Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:45.948Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:27:07.634Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:43.090Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:30.622Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:28.573Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:48.231Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:20.934Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:59:03.909Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:10:09.825Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:46.812Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:32.260Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:33.753Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:40.920Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:24.264Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:43:05.135Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:35.524Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:55:03.075Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:15.674Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:33.336Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:42.419Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:41.667Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:27.954Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:45.874Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:19.456Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:24.838Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:41.521Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:22.399Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:24.780Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:26.095Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:46.919Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:23.096Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:12:09.149Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:21:03.259Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:24.110Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:39.295Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:54.846Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:45.872Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:26.674Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:53.734Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:04:02.750Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:18.647Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:32.828Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:22.013Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:35:06.091Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:44.982Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:42.948Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:28.933Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:16.069Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:28.929Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:31.441Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:24.092Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:20.505Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:35:05.925Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:43:07.475Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:16.549Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:36.658Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:01:05.521Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:26:05.820Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:59.928Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:31.215Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:59.073Z","7.0.0":"2020-06-23T19:12:03.116Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:57.036Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:42:19.151Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:54.756Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:41.072Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:58:02.354Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:20.893Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:38.613Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:47.005Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:37.591Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:47.361Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:57.732Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:13.659Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:39.714Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:23.496Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:53.277Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:53:03.282Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:54.779Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:35.721Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:48:18.112Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:34.167Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:28:14.142Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:40:05.576Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:40.989Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:28.030Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:58.555Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:45:15.288Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:34.515Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:22.049Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:22.907Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:50.373Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:46.440Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:38.654Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:52.888Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:22.991Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:26.003Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:21.466Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:50.156Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:14:13.161Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:16:10.509Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:42.028Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:30.897Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:47.557Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:21:12.273Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:47.244Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:18.595Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:20.997Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:32.525Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:57.443Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:43.198Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:54:06.311Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:55.761Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:29.577Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:36.189Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:56.531Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:01:03.524Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:53.503Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:25:10.937Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:55.140Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:54.960Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:58:05.618Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:32.410Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:08:02.902Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:45.207Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:39:20.156Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:43.553Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:30.777Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:48.871Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:45.405Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:26.436Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:22.537Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:51.964Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:19.332Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:43.379Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:35.043Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:54:01.777Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:17:15.185Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:39.624Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:31.791Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:22:03.371Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:23.862Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:40:05.427Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:21.025Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:46.986Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:44.232Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:12:03.663Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:33.401Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:55.481Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:28.920Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:40.197Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:31.862Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:25.606Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:56.468Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:38.887Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:47.087Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:01:04.288Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:40.859Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:24:13.436Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:52:06.533Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:55:26.166Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:57.409Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:56:18.675Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:45.257Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:59.673Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:31.826Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:50:14.171Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:31.045Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:26.335Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:37.386Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:57.022Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:18.633Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:28:05.866Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:47.450Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:39.958Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:22.854Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:59.104Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:59.037Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:32:09.830Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:21.417Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:33.273Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:36.379Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:34.040Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:35.478Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:02:05.838Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:30:03.102Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:42.402Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:22.757Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:57.863Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:19:09.259Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:25.434Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:32.115Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:30.428Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:45.531Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:50.597Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:37.456Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:33:19.513Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:38:10.343Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:28.312Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:25:17.540Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:21.253Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:29.830Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:39:06.980Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:43.976Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:34.568Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:51.315Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:39.468Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:59:02.889Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:49.438Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:54:05.409Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:30:10.164Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:13:09.823Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:44.200Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:42:12.475Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:05:09.738Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:48.498Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:45.230Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:38.780Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:57:24.711Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:58:20.798Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:45.722Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:14:12.055Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:22.066Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:59.381Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:51:17.527Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:59.462Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:48.699Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:35.686Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:34:06.165Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:54.466Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:20.962Z","8.0.0-canary.a306aa488.0":"2020-09-17T01:00:19.035Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:21.356Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:38.890Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:54.089Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:19:14.729Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:30.800Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:40.903Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:48.829Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:54.548Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:32.346Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:52.378Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:26:24.105Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:50.576Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:42.545Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:22.272Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:36.781Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:48:10.911Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:58:14.637Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:17:12.696Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:19:07.106Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:51.373Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:55.931Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:53:09.861Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:23.447Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:30.977Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:57.022Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:45.232Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:25.339Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:45.143Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:45.066Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:34:17.349Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:48.310Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:33.064Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:01:09.166Z","8.0.0":"2020-11-02T23:01:34.705Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:57.542Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:49.748Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:45.285Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:53.643Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:41.491Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:23.694Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:54.663Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:58:06.124Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:34.290Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:46:27.263Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:20.850Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:36.383Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:21.358Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:50.309Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:37.308Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:29:05.592Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:45.059Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:48.174Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:20.638Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:43.159Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:56.043Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:47.738Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:57.394Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:39.575Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:35.412Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:49:14.368Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:33.662Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:17:08.062Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:35.923Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:57.000Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:56.878Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:51.221Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:01:13.348Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:36.803Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:59.935Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:51:09.951Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:09:08.251Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:18:04.005Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:24:03.502Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:22.174Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:43:16.651Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:35.326Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:03:01.707Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:54.580Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:33.623Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:30.589Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:39.140Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:51:07.701Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:03:11.275Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:58.164Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:55.631Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:58.244Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:35.466Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:07:03.288Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:38.082Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:45.338Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:23.648Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:57.607Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:30:03.119Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:07:05.241Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:58.548Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:19.714Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:29:08.329Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:09:05.517Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:37.878Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:46.517Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:47:03.971Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:59.792Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:26.947Z","9.0.0":"2020-12-29T19:47:34.547Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:41.192Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:30.003Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:48:01.406Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:59.515Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:11:09.440Z","10.0.0-canary.365c69360.0":"2021-01-05T17:50:01.605Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:02:16.879Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:56.122Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:28.745Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:39.929Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:46.289Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:28:16.962Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:47.463Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:23.951Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:53:15.265Z","10.0.0-canary.089de519c.0":"2021-01-08T22:22:12.099Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:49.351Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:26:05.017Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:14:06.818Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:55.547Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:46.215Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:49.392Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:42.577Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:28:07.362Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:25.752Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:21:08.577Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:51.000Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:39.276Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:11:13.900Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:32.118Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:58:03.330Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:41.635Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:53:07.051Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:34.245Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:48.071Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:52.997Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:31.575Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:44.950Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:35:11.359Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:45.708Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:51.753Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:58.042Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:53.909Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:49.066Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:04:00.255Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:34:19.764Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:36.767Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:05:18.518Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:22.242Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:22:07.624Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:51:00.905Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:49.724Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:20:09.248Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:47.612Z","10.0.0-canary.05f249666.0":"2021-02-04T17:52:02.366Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:58.388Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:35.164Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:02:11.876Z","10.0.0-canary.533092a90.0":"2021-02-05T03:48:19.739Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:27.367Z","10.0.0":"2021-02-05T16:20:45.696Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:52.787Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:33:18.449Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:55.016Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:27.247Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:29.559Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:19:13.043Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:02:20.015Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:43:00.095Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:27.212Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:42.512Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:37.333Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:30.666Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:34.422Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:01:11.044Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:37.259Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:39.802Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:53.017Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:45.736Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:48.914Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:47.907Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:27.626Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:45.308Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:07:20.760Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:57.602Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:25:10.551Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:41.413Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:29:10.800Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:36.644Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:42.310Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:38:18.127Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:30.781Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:02:21.261Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:51:13.231Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:26.867Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:32:18.968Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:55.579Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:58.462Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:36:12.639Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:55.927Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:52:21.581Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:17:22.071Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:58.428Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:24:12.125Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:46.411Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:46.081Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:42.706Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:51.116Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:42.145Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:50.107Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:49.263Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:41.126Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:43.655Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:39.649Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:51:10.022Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:47:16.430Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:32.096Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:42.025Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:29:09.794Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:54:00.726Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:59:03.676Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:41.968Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:25.655Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:42.701Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:57.359Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:25.125Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:03:06.619Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:43.579Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:35:02.841Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:42:06.122Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:51.626Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:42.119Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:40.877Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:35.076Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:43.914Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:29.289Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:14:00.410Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:41:13.189Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:53.942Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:03:19.949Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:57.406Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:43.014Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:53.374Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:41.056Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:30.536Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:40:14.223Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:58.164Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:01:11.256Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:14:18.050Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:37.918Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:48.998Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:39.384Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:39:18.684Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:28.407Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:24.447Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:55.508Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:06:09.403Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:31:15.899Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:18:11.871Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:34:21.097Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:59:09.911Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:50:02.094Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:22:08.694Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:35:05.902Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:13:04.575Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:25.047Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:47.801Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:02:19.844Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:36.882Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:32.278Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:36.572Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:02:06.464Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:34.325Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:46:22.599Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:55:14.253Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:59:12.203Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:37:14.726Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:40:03.806Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:56.518Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:35.904Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:54.490Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:57.041Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:17:01.040Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:49.807Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:23.153Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:29.598Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:57.293Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:39.687Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:39.738Z","11.0.0":"2021-04-15T22:59:42.084Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:27.614Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:48:20.145Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:39.216Z","12.0.0-canary.b52196498.0":"2021-04-19T19:59:15.011Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:10:02.852Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:44.663Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:39:15.497Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:46.090Z","12.0.0-canary.cad489689.0":"2021-04-22T16:51:02.698Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:58.421Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:42.905Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:34.320Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:55.575Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:11:19.907Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:21:26.220Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T08:00:03.381Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:57.438Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:59:26.429Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:37.844Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:53.416Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:27.876Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:22.076Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:55:06.655Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:46:17.386Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:51.120Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:32.726Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:30.762Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:25:16.389Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:35.457Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:39:13.755Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:48.559Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:55:04.205Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:24:16.023Z","12.0.0-canary.33148231f.0":"2021-05-03T19:40:15.163Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:47:20.845Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:43:14.198Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:44.708Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:41.401Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:54.575Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:58.606Z","12.0.0-canary.718c90178.0":"2021-05-04T19:29:17.460Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:32:06.879Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:24.346Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:51:12.688Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:34.182Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:38.748Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:08:07.175Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:25.031Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:54.600Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:49.917Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:43.728Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:35.987Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:46.048Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:42.435Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:58:12.187Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:31:03.753Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:33.311Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:50.265Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:24.753Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:25:08.868Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:25.861Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:31.403Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:34.482Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:25.297Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T01:00:15.607Z","12.0.0-canary.cb162da37.0":"2021-05-11T02:00:20.778Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:19:10.540Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:24:04.912Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:35.589Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:58.967Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:28.607Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:39.782Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:37.213Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:15:20.208Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:42:11.487Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:31.900Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:41.432Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:54.480Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:21.833Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:42.744Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:20:23.343Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:25.980Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:59.989Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:37:01.400Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:25.691Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:47:09.886Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:58.209Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:51.990Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:46.878Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:51.529Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:43.017Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:43:10.150Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:59.625Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:46.867Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:24.832Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:08:00.515Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:57.606Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:21.595Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:37:17.192Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:21.953Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:52.748Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:50.336Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:40.412Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:35.234Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:44.692Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:05:09.869Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:36.129Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:34.311Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:58.464Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:59.445Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:47.771Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:26:06.998Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:13:15.230Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:42:07.543Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:39.986Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:37.703Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:26:08.882Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:59.875Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:32.937Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:54:05.568Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:24.461Z","12.0.0-canary.796811db7.0":"2021-07-01T00:05:02.220Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:08:13.051Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:44.205Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:37.874Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:11:25.485Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:05:19.463Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:43.445Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:27:02.437Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:56.048Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:51:00.205Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:11:09.496Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:52.739Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:28.938Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:52:24.404Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:24:06.619Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:52.048Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:46.730Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:31.845Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:53.875Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:45.345Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:34.022Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:40.440Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:32.853Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:46.325Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:38.575Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:48.353Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:20.222Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:07:07.081Z","12.0.0-canary.791311bba.0":"2021-07-20T22:09:08.834Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:35.443Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:32.172Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:08:00.079Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:55.105Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:50.135Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:46.159Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:21.744Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:28.945Z","12.0.0":"2021-07-27T19:51:38.985Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:53:12.450Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:50.723Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:36.482Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:42.157Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:55.717Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:45.201Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:58.264Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:58.065Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:30.733Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:23.041Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:58:09.669Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:58.241Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:51.214Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:33.273Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:27.614Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:09:09.513Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:56.673Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:19:13.437Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:23:13.461Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:28.521Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:01:18.970Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:23.938Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:57:07.347Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:47:00.230Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:50:11.798Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:45.471Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:30.931Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:50.982Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:55.444Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:44.628Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:53.985Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:19:18.443Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:34.222Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:51.120Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:28:17.457Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:57.956Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:53.523Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:21.721Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:25.176Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:48.976Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:30.542Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:50:10.453Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:50.982Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:52.936Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:24.365Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:01:06.590Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:55.226Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:40.501Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:53.693Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:58.339Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:59.326Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:13:14.133Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:57.865Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:29.200Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:30.838Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:45.050Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:33.716Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:03.365Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:29.795Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:20.463Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:35.994Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:54.452Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:36.940Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:59.760Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:34.820Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:46.018Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:49.394Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:13.287Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:13.684Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:00.698Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:40.564Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:42.292Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:42.400Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:27.764Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:40.825Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:45.941Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:13.164Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:47.546Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:28.509Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:34.729Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:52.780Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:44.398Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:18.936Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:49.176Z","13.0.0":"2021-09-24T19:46:46.638Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:30.755Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:51.262Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:10.035Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:55.597Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:48.608Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:13.585Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:21.863Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:51.523Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:01.085Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:29.506Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:42.763Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:38.894Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:18.377Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:41.338Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:25.135Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:50.923Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:47.081Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:01.222Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:43.107Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:40.706Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:25.694Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:23.619Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:21.404Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:40.031Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:39.870Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:14.600Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:14.198Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:21.096Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:40.182Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:28.853Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:38.008Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:14.748Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:36.639Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:24.884Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:50.971Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:42.435Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:37.439Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:44.590Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:59.011Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:24.249Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:35.436Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:44.038Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:57.244Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:47.222Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:29.739Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:33.453Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:13.040Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:22.041Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:00.366Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:40.517Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:20.143Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:34.916Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:36.990Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:39.834Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:20.989Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:57.679Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:44.153Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:30.958Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:05.362Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:55.479Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:43.278Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:46.531Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:19.321Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:31.677Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:28.241Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:47.760Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:07.968Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:10.682Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:32.032Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:04.005Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:01.145Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:35.640Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:54.887Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:51.710Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:21.124Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:26.278Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:12.522Z","14.0.0-canary.868793776.0":"2022-02-22T19:37:15.664Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:11.723Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:15.355Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:26.599Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:49.980Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:23.075Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:37.725Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:40.380Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:04.953Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:37.411Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:53.647Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:18.860Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:17.416Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:08.711Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:08.066Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:48.370Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:34.372Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:41:01.484Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:37.217Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:36:01.157Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:20.266Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:34:00.390Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:18.997Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:16.055Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:24.130Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:48.293Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:48.656Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:23.224Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:59.124Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:24.406Z","14.0.0":"2022-04-28T16:57:04.725Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:07.099Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:45.743Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:37.216Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:05.947Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:25.190Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:58.887Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:26.813Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:32.210Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:22.219Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:28:02.229Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:33.948Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:05.688Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:46.809Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:51.601Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:50.076Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:55.933Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:17.311Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:26.042Z","15.0.0-canary.df47894db.0":"2022-06-13T17:10:15.486Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:31:25.031Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:59:01.687Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:24:12.706Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:42.579Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:30:01.205Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:34.838Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:56:11.431Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:40.768Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:39.413Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:04:26.280Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:33:07.693Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:40:20.678Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:58.509Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:43.256Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:45.539Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:35.546Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:39.745Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:56.274Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:51.842Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:51:05.680Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:56.440Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:47.678Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:58.731Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:26:02.006Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:48:23.779Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:38.543Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:31:20.145Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:38.661Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:46.405Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:39.990Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:11:03.082Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:06:31.346Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:47:24.671Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:15:26.696Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:42:30.128Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:40.753Z","15.0.0-canary.10196647d.0":"2022-08-03T21:55:23.177Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:42.001Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:22:39.378Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:43.459Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:03:06.119Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:07:26.564Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:48.490Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:20:07.836Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:21:28.595Z","15.0.0-canary.4299717da.0":"2022-09-07T16:17:24.619Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:54.977Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:44.490Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:47.053Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:56:38.266Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:19:15.951Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:22:04.134Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:59.146Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:26:20.209Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:49:27.983Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:58.265Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:58:05.423Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:59:11.076Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:24.476Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:45.982Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:59:02.052Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:37.944Z","15.0.0-canary.db414b864.0":"2022-09-28T14:54:21.062Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:47.728Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:57:22.316Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:50.808Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:15:19.665Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:36.991Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:53.067Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:21:10.135Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:05:18.213Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:25.347Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:24.968Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:39:15.845Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:57:07.240Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:25.075Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:20.970Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:56.536Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:43.369Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:04:00.845Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T17:00:12.082Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:52.382Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:28.177Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:48.398Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:31.236Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:53:10.258Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:45.299Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:53.478Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:24:19.033Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:37.752Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:42:03.220Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:56.494Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:59.335Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:21.855Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:56.921Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:42.283Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:46.982Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:28.710Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:58:18.377Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:21.197Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:41.658Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:46.925Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:36.963Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:32:15.466Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:58.770Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:34:03.579Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:51:13.624Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:58:05.004Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:26.957Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:20.648Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:34.117Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:48.382Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:40.751Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:40.992Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:37.649Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:43.230Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:26:08.256Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:58.501Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:30.819Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:58:07.579Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:47.204Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:37:08.505Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:51.609Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:28.835Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:07:53.224Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:29.738Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:38:15.269Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:30.337Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:50.087Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T16:00:14.247Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:41.614Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:30:05.116Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:50.486Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:50.753Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:36.845Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:15:00.517Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:17:19.053Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:34.311Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:43.452Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:59.430Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:07:09.676Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:30.319Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:35.750Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:50.140Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:03:10.133Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:55.159Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:25.580Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:48.957Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:18:07.724Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:48.627Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:52.588Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:50.459Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:44.336Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:34.717Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:04:30.419Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:48.668Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:35.139Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:39.538Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:18:24.568Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:41:12.175Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:33.262Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:17:48.698Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:30.929Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:49:08.612Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:31.223Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:54.311Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:56.697Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:33.750Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:16:00.675Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:38.445Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:31:05.658Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:56:13.061Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:26:02.029Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:42.214Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:48.532Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:51.023Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:28.181Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:37.942Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:37.860Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:39.587Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:05:30.329Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:43:08.965Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:46:18.887Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:36.678Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:48:27.158Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:04:08.584Z","15.0.0-canary.817002c29.0":"2022-12-13T21:56:01.930Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:48.606Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:21:03.525Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:44.801Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:32.116Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:28.318Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:27.939Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:29:05.026Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:36.324Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:27:15.670Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:14:05.757Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:07:06.210Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:05:51.995Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:29.871Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:04:10.722Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:49.075Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:47.498Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:34.377Z","15.0.0-canary.af490a848.0":"2023-01-03T15:59:54.568Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:47.074Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:15:00.115Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:34:20.907Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:41.747Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:39:20.929Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:39.576Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:40.652Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:11:20.216Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:51.835Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:51.832Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:45:11.039Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:25:55.312Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:30:11.762Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:31.977Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:27.235Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:20:05.212Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:14:44.422Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:56:05.790Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:40.542Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:47.929Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:38:23.502Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:26:41.596Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:36.714Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:41:02.665Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:41.445Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:53.070Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:28:48.649Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:20.458Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:32:01.087Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:46:14.738Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:32.089Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T19:00:23.270Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:36:14.540Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:40:17.870Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:10:57.180Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:24.223Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:26:09.504Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:26.031Z","15.0.0-canary.de38de758.0":"2023-02-09T15:44:18.450Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:05:06.692Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:38.558Z","15.0.0-canary.066d9439b.0":"2023-02-15T20:00:01.438Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:36:09.700Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:50.961Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:23.221Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:41.050Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:37.533Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:29:17.838Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:40.696Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:43.355Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:28:09.682Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:46.635Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:29.159Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:49.591Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:49:09.004Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:36.092Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:44.288Z","15.0.0-canary.23073a303.0":"2023-03-10T14:16:52.354Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:49:22.170Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:49:50.358Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:44.202Z","15.0.0-canary.82554d770.0":"2023-03-11T01:39:00.582Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:40:55.471Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:46:01.687Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:27.731Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:49.203Z","15.0.0-canary.112715df5.0":"2023-03-13T18:41:10.342Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:29.867Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:41:03.602Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:45:13.187Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:54:48.871Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:18:14.050Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:49:09.461Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:45.775Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:57.896Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:25:54.040Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:37.661Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:29:18.194Z","15.0.0-canary.87809c710.0":"2023-03-14T18:45:15.380Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:34.626Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:39.335Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:15:27.827Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:13:06.326Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:30.477Z","15.0.0-canary.39e473690.0":"2023-03-21T17:53:21.916Z","15.0.0-canary.cedffb44c.0":"2023-03-21T18:00:17.897Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:51:59.874Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:40.005Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:49.286Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:50.938Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:36.744Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:31.172Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:28.594Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:32:03.398Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:35.665Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:44:14.729Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:40:27.773Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:55.703Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:50.735Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:42.056Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:24.350Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:26.091Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:33:09.733Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:35:35.149Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:34.453Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:23.744Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:33.640Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:28:09.160Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:41:07.550Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:25:05.185Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:32:16.830Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:47.200Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:55:59.040Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:45.664Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:44:50.639Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:57.540Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:20:19.509Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:15:49.925Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:20:21.547Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:07:54.284Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:40:03.519Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:37.332Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:59:09.225Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:33.157Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:38.195Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:40.501Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:45.476Z","15.0.0-canary.83355c322.0":"2023-07-10T15:07:41.294Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:23.394Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:50:21.243Z","15.0.0-canary.02702296e.0":"2023-08-25T12:07:11.189Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:29.777Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:48.134Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:36.514Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:07:16.187Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:47:14.187Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:20:50.084Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:47.346Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:48:09.636Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:17:19.909Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:08:48.973Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:25:01.426Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:46:07.824Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:32.973Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:27.486Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:54:06.411Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:11:18.956Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:27.358Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:53.659Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:26.288Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:58.590Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:18.234Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:57.997Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:25.651Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:58.761Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:27.062Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:32.168Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:42:12.059Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:24.643Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:50.755Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:55.135Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:14:02.489Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:45.275Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:45.604Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:19.265Z"},"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":"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"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu"},"keywords":["material components","material design","menu"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}